:root { --color-text: #000000; --color-text-alt: #ffffff; --color-blu: #0618be; --color-viola: #7738fa; --color-viola-hover: #7738fa40; --color-lilla: #f6f7ff; --color-outile: #8979ff; --color-rosso: #d6234f; --color-verde: #339e8e; --color-arancione: #ffb624; } ::-webkit-scrollbar { width: 0.325rem; } /* General styles*/ html, body { background-color: var(--color-lilla); color: var(--color-text); } body .btn--ui, body ul.pagination li .page-link, body #btn-back-to-top, body #btn-back-to-bottom { background-color: var(--color-blu) !important; font-weight: 600; border: 1px solid var(--color-blu); color: white; } body .btn--ui.primary { background-color: var(--color-blu) !important; } body .btn--ui.lightGrey, body .btn--ui.extraLightGrey { border-color: var(--color-blu); color: var(--color-blu); font-weight: 600; border-width: 1px; } body .btn--ui:hover, body .btn--ui.lightGrey:hover, body .btn--ui.extraLightGrey:hover, body ul.pagination li .page-link:hover, body ul.pagination li.active .page-link, body #btn-back-to-top:hover, body #btn-back-to-bottom:hover { background-color: var(--color-viola) !important; border-color: var(--color-viola); color: #ffffff; } body #card--dashboard > .btn--ui:has(i[class*="fa-arrow-left"]) { position: absolute; top: 0; margin: 0 !important; left: 0; border: none; padding: 10px; width: 40px; height: 40px; border-radius: 0 !important; } body .modal-header.modal-header-blu { background-color: var(--color-blu); } body .modal-header .modal-title { color: var(--color-text); } body .modal-header .btn-close { color: var(--color-text); opacity: 1; filter: unset; } body .modal-header.modal-header-blu .modal-title { color: white; } body .modal-header.modal-header-blu .btn-close { color: white; filter: invert(1); } #setting h5 { color: var(--color-text); } /* Login */ .login--box .form--item label { width: 100%; } .login--box .form--item input.form-control { border-radius: 15px 0 0 15px !important; height: 40px; border: 1px solid #d3dce1 !important; } .login--box .form--item input.form-control:focus { box-shadow: none; } .login--box .form--item .input-group-text { border-radius: 0 15px 15px 0 !important; } body .ico--ui.mail { background-image: none; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Livello_1'%3E%3Cg id='Raggruppa_308'%3E%3Crect id='Rettangolo_433' class='cls-1' width='16' height='16'/%3E%3Cpath id='Unione_3' fill='%230C6197' class='cls-2' d='M0,5.3c0-1.8,1.5-3.3,3.3-3.3h9.3c1.8,0,3.3,1.5,3.3,3.3v5.3c0,1.8-1.5,3.3-3.3,3.3H3.3c-1.8,0-3.3-1.5-3.3-3.3v-5.3ZM12.7,3.3H3.3c-1.1,0-2,.9-2,2v5.3c0,1.1.9,2,2,2h9.3c1.1,0,2-.9,2-2v-5.3c0-1.1-.9-2-2-2ZM5.1,8.2c.3-.3.7-.3.9,0,0,0,0,0,0,0,.3.3.3.7,0,.9h0s-1.9,1.9-1.9,1.9c-.3.3-.7.3-.9,0,0,0,0,0,0,0-.3-.3-.3-.7,0-.9h0s1.9-1.9,1.9-1.9ZM12.6,10.1h0c.3.3.3.7,0,.9,0,0,0,0,0,0-.3.3-.7.3-.9,0l-1.9-1.9h0c-.3-.3-.3-.7,0-.9,0,0,0,0,0,0,.3-.3.7-.3.9,0l1.9,1.9ZM7.2,8c-.5,0-1-.2-1.4-.6l-1.9-1.9c-.3-.3-.3-.7,0-.9,0,0,0,0,0,0,.3-.3.7-.3.9,0,0,0,0,0,0,0l1.9,1.9c.1.1.3.2.5.2h1.6c.2,0,.3,0,.5-.2l1.9-1.9c.3-.3.7-.3.9,0,0,0,0,0,0,0,.3.3.3.7,0,.9l-1.9,1.9c-.4.4-.9.6-1.4.6h-1.6Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; background-color: var(--color-blu); } body .ico--ui.lock { background-image: none; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='Raggruppa_427' data-name='Raggruppa 427' transform='translate(189 -268)'%3E%3Crect id='Rettangolo_301' data-name='Rettangolo 301' width='16' height='16' transform='translate(-189 268)' fill='none'/%3E%3Cg id='Raggruppa_425' data-name='Raggruppa 425' transform='translate(-4 -3.125)'%3E%3Cpath id='Rettangolo_232' data-name='Rettangolo 232' d='M2.5,0h0A2.5,2.5,0,0,1,5,2.5V4A0,0,0,0,1,5,4H0A0,0,0,0,1,0,4V2.5A2.5,2.5,0,0,1,2.5,0Z' transform='translate(-179.5 274.125)' fill='none' stroke='%23006099' stroke-width='2'/%3E%3Crect id='Rettangolo_302' data-name='Rettangolo 302' width='10' height='7' rx='2' transform='translate(-182 278.125)' fill='none' stroke='%23006099' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-size: contain; background-color: var(--color-blu); } body .login--box .credential--recovery a { color: var(--color-blu); } body h1.primary, body h2.primary, body h3.primary, body h4.primary, body h5.primary, body h6.primary, body .title-form.primary { color: var(--color-blu); } /* Main content */ body #card--dashboard { position: relative; } /* Hide popover locked on top left corner */ .popover[data-popper-reference-hidden] { display: none; } /* Header */ .header--gestionale { background-color: var(--color-blu); padding-block: 10px; } .header--gestionale_back { width: auto; } .header--gestionale_back button { border: none; background-color: transparent; color: white; outline: none; font-size: 30px; padding: 0; line-height: 1; } .header--gestionale_logo { width: auto; } .header--gestionale_pageTitle { width: unset; flex: 1; } .header--userprofile-icon { vertical-align: middle; width: 50px; height: 50px; border-radius: 12px; background-color: white; text-align: center; border: 2px solid var(--color-outile); } /* Sidebar */ #open-filter, #close-filter { background-color: var(--color-blu); } #sidebar--wrapper #filter--section #accordionExample .accordion-header { margin-left: 5px; } #sidebar--wrapper #filter--section #accordionExample .accordion-button { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; gap: 5px; } #sidebar--wrapper #filter--section #accordionExample .accordion-button i { width: 30px; height: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } #menu-anagrafica li a.nav-link, #menu-contabilita li a.nav-link, #menu-scadenze li a.nav-link, #menu-anagrafica li:hover a span, #menu-contabilita li:hover a span, #menu-scadenze li:hover a span { color: var(--color-text); } #accordionExample .accordion-item:hover, #menu-anagrafica li:hover, #menu-contabilita li:hover, #menu-scadenze li:hover { /* background-color: transparent; */ background-color: var(--color-viola-hover); } #accordionExample .accordion-item.accordion-item-active, #accordionExample .accordion-item .nav-item.nav-item-active { background-color: var(--color-viola); color: #ffffff; } #accordionExample .accordion-item .nav-item.nav-item-active a span { color: #ffffff; } /* Resumee card anagrafica */ .section--tab { border: none; } .section--tab h4 { border-color: var(--color-viola) !important; padding: 5px !important; text-transform: uppercase; font-weight: bold !important; color: black !important; } body #card--resume.card--ui, body #accountingEntry .accountingEntry_resume.card--ui { background: unset; background-color: var(--color-lilla); color: black; border: 1px solid var(--color-outile); border-radius: 15px; } body #card--resume.card--ui header, body #accountingEntry .accountingEntry_resume.card--ui > header { background: transparent; border: none; color: black; padding: 30px; padding-top: 35px; } body #card--resume.card--ui header span.user-name, body #card--resume.card--ui .card--resume_body .resume--tab_info h2, body #card--resume.card--ui .title--tessera_added span.title-detail, body #accountingEntry .accountingEntry_resume.card--ui > header span.primary { color: black; } body #card--resume.card--ui .card--resume_body .resume--tab_info h2 { font-size: 20px; line-height: 1; display: flex; align-items: center; gap: 20px; } body #card--resume.card--ui header span.user-name { font-size: 32px; line-height: 1; } body #card--resume.card--ui header span.user-email { color: black; opacity: 0.8; } body #card--resume.card--ui .card--resume_body .user-address li, body #card--resume.card--ui .card--resume_body .user-residence li { gap: 22px; align-items: center; margin-bottom: 15px; } body #card--resume.card--ui .card--resume_body .user-address li i, body #card--resume.card--ui .card--resume_body .user-residence li i, body #card--resume.card--ui .card--resume_body .resume--tab_info h2 i { font-size: 20px; width: 20px; height: 20px; color: var(--color-viola); margin: 0; } body #accountingEntry .accountingEntry_resume.card--ui .username > i { color: var(--color-viola); } body #card--resume.card--ui .card--resume_body .resume--tab_info ul { padding-left: 55px; } body #card--resume.card--ui .card--resume_body .resume--tab_info ul li { padding: 0; } body #card--resume.card--ui .card--resume_body .resume--tab_info ul li::marker { color: var(--color-viola); } body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-corso, body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-certificato, body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-tessera { border-left: 2px solid var(--color-viola); padding-left: 15px; margin-left: 42px; margin-bottom: 10px; } /* Form */ body .title-form.primary { margin-top: 50px; } body label, body label.form-label { margin: 0; color: black; } body .form-control:not(textarea), body form .form-control:not(textarea), body .form-select, body form .form-select, body .select2-selection, body form .select2-selection, body input.form-control[type="search"], body .btn.dropdown-toggle { border-radius: 15px !important; height: 40px !important; border: 1px solid #d3dce1 !important; background-color: #f5f8fa !important; } body textarea.form-control, body form textarea.form-control { border-radius: 15px !important; border: 1px solid #d3dce1 !important; background-color: #f5f8fa !important; } body input.form-check-input, body form input.form-check-input { height: 20px !important; width: 20px !important; border-radius: 5px !important; padding: 0 !important; } body input.form-check-input:checked[type="checkbox"], body form input.form-check-input:checked[type="checkbox"], body input.form-check-input:checked[type="radio"], body form input.form-check-input:checked[type="radio"] { background-color: var(--color-blu) !important; } body .form-select[multiple] { color: transparent; } body .form-select { padding-block: 10px; } /* contabilità uscite */ #accountingExit .accountingExit_data { width: 100%; } /* dashboard */ body .dashboard-container { background: var(--color-lilla); height: calc(100dvh - 86px); min-height: calc(100dvh - 86px); overflow: auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 20px; padding: 2.5rem !important; background: white; } body .dashboard-container .dashboard-card { border: 1px solid var(--color-outile); border-radius: 12px; padding: 20px; position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.13); } body .dashboard-container .dashboard-card.card-inverted { border-color: var(--color-lilla); background-color: var(--color-lilla); } body .dashboard-container .dashboard-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } body .dashboard-container .dashboard-card-title { font-size: 17px; font-weight: bold; color: black; line-height: 1; margin-bottom: 10px; } body .dashboard-container .dashboard-card-link .dashboard-card-header, body .dashboard-container .dashboard-card-link .dashboard-card-header .dashboard-card-title { margin: 0; } body .dashboard-container .dashboard-card-icon { color: var(--color-viola); font-size: 20px; } body .dashboard-container .dashboard-card-value { font-size: 48px; font-weight: bold; color: black; margin: 20px 0 5px; line-height: 1; } body .dashboard-container .dashboard-card.dashboard-card-link { background-color: var(--color-viola-hover); border-color: transparent; } body .dashboard-container .dashboard-card.dashboard-card-link:hover { background-color: var(--color-viola); } body .dashboard-container .dashboard-card.dashboard-card-link:hover .dashboard-card-title, body .dashboard-container .dashboard-card.dashboard-card-link:hover .dashboard-card-icon { color: white; } body .dashboard-container .card-income .dashboard-card-icon, body .dashboard-container .card-income .dashboard-card-value { color: var(--color-verde); } body .dashboard-container .card-topay .dashboard-card-icon, body .dashboard-container .card-topay .dashboard-card-value { color: var(--color-viola); } body .dashboard-container .card-expense .dashboard-card-icon, body .dashboard-container .card-expense .dashboard-card-value { color: var(--color-rosso); } body .dashboard-container .card-delta .dashboard-card-icon, body .dashboard-container .card-delta .dashboard-card-value { color: var(--color-viola); } body .dashboard-container .card-income .dashboard-card-value, body .dashboard-container .card-topay .dashboard-card-value, body .dashboard-container .card-expense .dashboard-card-value, body .dashboard-container .card-delta .dashboard-card-value { font-size: 30px; } body .dashboard-container .dashboard-card-info { font-size: 14px; } body .dashboard-container .dashboard-card-info span { position: relative; font-weight: 500; } body .dashboard-container .dashboard-card-info .more { color: var(--color-verde); } body .dashboard-container .dashboard-card-info .more:before { content: "+"; } body .dashboard-container .dashboard-card-info .less { color: var(--color-rosso); } body .dashboard-container .dashboard-card-info .less:before { content: "-"; } body .dashboard-container .dashboard-card-change { font-size: 12px; color: #666; } body .dashboard-container .dashboard-card-change.positive { color: var(--color-verde); } body .dashboard-container .dashboard-card-change.negative { color: var(--color-rosso); } body .dashboard-container .stat-icon { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; } body .dashboard-container .courses-list { max-height: 300px; overflow-y: auto; } body .dashboard-container .course-item { margin-bottom: 20px; display: grid; grid-template-columns: 32px auto 1fr; align-items: center; column-gap: 15px; } body .dashboard-container .course-item .course-time { grid-row: span 2; font-weight: 600; color: black; font-size: 12px; white-space: break-spaces; } body .dashboard-container .course-item .course-time:empty { display: none; } body .dashboard-container .course-item .course-divider { grid-row: span 2; width: 1px; height: 100%; background-color: #ababab; } body .dashboard-container .course-item .course-time:empty + .course-divider { display: none; } body .dashboard-container .course-item .course-name { font-size: 13px; color: black; font-weight: 600; line-height: 1.2; grid-column: 3; } body .dashboard-container .course-item .course-days { font-size: 12px; color: #666; grid-column: 3; } body .dashboard-container .fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body .dashboard-container .field-item { padding: 12px; border: 2px solid var(--color-verde); border-radius: 8px; text-align: center; background: white; } body .dashboard-container .field-item.occupied { border-color: var(--color-rosso); background: #fff5f7; } body .dashboard-container .field-name { font-weight: bold; color: #333; } body .dashboard-container .field-time { color: #666; font-size: 12px; } body .dashboard-container .notes-section { } body .dashboard-container .notes-input { width: 100%; background-color: white; outline: none; font-size: 14px; min-height: 50px; resize: vertical; border: none; border-radius: 6px; padding: 10px; } body .dashboard-container .save-btn { background-color: transparent; color: var(--color-viola); border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: bold; margin-left: auto; display: block; will-change: color, background-color; transition: color 0.3s ease, background-color 0.3s ease; } body .dashboard-container .save-btn:hover { background-color: var(--color-viola); color: white; } body .dashboard-container .notes-list { max-height: 380px; overflow-y: auto; } body .dashboard-container .notes-list:not(:empty) { margin-block: 25px; } body .dashboard-container .note-item { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 35%); } body .dashboard-container .note-item:last-of-type { margin-bottom: 0; } body .dashboard-container .note-checkbox { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, 35%); border-radius: 100%; background: transparent; color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; will-change: color, background-color; transition: color 0.3s ease, background-color 0.3s ease; } body .dashboard-container .note-checkbox:hover { background: var(--color-viola); color: white; } body .dashboard-container .note-content { flex: 1; } body .dashboard-container .note-text { color: black; font-size: 14px; line-height: 1; font-weight: 500; } body .dashboard-container .note-date { color: black; font-size: 10px; } body .dashboard-container .empty-notes { text-align: center; color: #666; font-size: 13px; padding: 20px; font-style: italic; } body .dashboard-container .chart-card .chart-container { grid-column: unset; } body .dashboard-container .financial-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } body .dashboard-container .financial-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: center; } body .dashboard-container .financial-card.income { border-left: 4px solid var(--color-verde); } body .dashboard-container .financial-card.expense { border-left: 4px solid var(--color-rosso); } body .dashboard-container .financial-amount { font-size: 36px; font-weight: bold; margin: 10px 0; } body .dashboard-container .financial-amount.income { color: var(--color-verde); } body .dashboard-container .financial-amount.expense { color: var(--color-rosso); } body .dashboard-container .recent-users-table { width: 100%; border-collapse: collapse; margin-top: 20px; } body .dashboard-container .recent-users-table th, body .dashboard-container .recent-users-table td { text-align: left; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; } body .dashboard-container .recent-users-table th { font-weight: bold; color: var(--color-text); font-size: 15px; padding: 5px; } body .dashboard-container .recent-users-table td { font-size: 13px; color: black; } body .dashboard-container .transaction-list { max-height: 300px; overflow-y: auto; } body .dashboard-container .transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #f0f0f0; } body .dashboard-container .transaction-name { font-weight: 500; color: #333; } body .dashboard-container .transaction-amount { font-weight: bold; } body .dashboard-container .transaction-type { font-size: 10px; padding: 4px 8px; border-radius: 12px; color: white; font-weight: bold; } body .dashboard-container .transaction-type.income { background: var(--color-verde); } body .dashboard-container .transaction-type.expense { background: var(--color-rosso); } body .dashboard-container .participation-bar { height: 10px; background: #f0f0f0; border-radius: 10px; overflow: hidden; margin: 8px 0; } body .dashboard-container .participation-fill { height: 100%; transition: width 0.3s ease; border-radius: 10px; background: #8b4cf7; } body .dashboard-container .chart-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px; } body .dashboard-container .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } body .dashboard-container .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } body .dashboard-container .grid-1-2 { display: grid; grid-template-rows: repeat(2, 1fr); gap: 20px; } body .dashboard-container .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } body .dashboard-container .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } body .dashboard-container .grid-w-2 { grid-column-end: span 2; } body .dashboard-container .grid-w-3 { grid-column-end: span 3; } body .dashboard-container .full-width { grid-column: span 3; } body .dashboard-container .half-width { grid-column: span 2; } body .dashboard-container .fade-out { opacity: 0; transform: translateX(100%); transition: all 0.3s ease; } body div.dt-button-background { pointer-events: none; } body .chart-body { padding: 0; } body .table-header .table-cell { color: var(--color-text); } body .course-controls { border: none; background: unset; background-color: var(--color-lilla); padding-block: 15px; border-radius: 10px; } body .dashboard-container .chart-card .dashboard-card-title { margin-bottom: 20px; } /* dettaglio utente */ body .user--profile_card { background: unset; background-color: var(--color-lilla); color: black; border: 1px solid var(--color-outile); border-radius: 15px; } body .user--profile_resume { background: unset; background-color: var(--color-lilla); color: black; border-radius: 0 15px 15px 0; margin-block: 30px; } body .title--tessera_added span.title-detail_date { color: black; } body .user--profile_card .avatar--wrapper { margin-inline: auto; } body .user--profile_card article header { color: black; } body .user--profile_card article .credito_title { color: black; } body .user--profile_card article header i { color: var(--color-viola); } .user--profile_card .resume--info { border-left: 2px solid var(--color-viola); padding-left: 15px; margin-left: 42px; margin-bottom: 10px; color: #000000; } body .user--profile_resume .resume--tab_info .title i { color: var(--color-viola); } body .user--profile_resume .resume--tab_info .title { color: black; } .user--profile_resume .user_name .name { color: black; } .user--profile_resume .user-address li, .user--profile_resume .user-residence li { gap: 22px; align-items: center; margin-bottom: 15px; font-size: 14px; } .user--profile_resume .user-address li i, .user--profile_resume .user-residence li i { font-size: 20px; width: 20px; height: 20px; color: var(--color-viola); margin: 0; } .user--profile_resume .resume--info.resume-corso { border-left: 2px solid var(--color-viola); padding-left: 15px; margin-left: 42px; margin-bottom: 10px; } .resume--tab_info.gruppi .title h4 { display: list-item; } .resume--tab_info.gruppi .title h4::marker { color: var(--color-viola); } .resume--tab_info.gruppi .resume--info { padding-left: 55px; } .user--profile_resume .user-address li span a { color: var(--color-blu); text-decoration: underline; } .title--tessera_added span.title-detail { color: #000000; } .comunication-send-options .form-check { padding: 20px; border: 1px solid #dee2e6; border-radius: 0.375rem; font-size: 14px; cursor: pointer; } .comunication-send-options .form-check:has(.form-check-input:checked) { border: 1px solid #0618be; box-shadow: inset 0 0 0 1px #0618be; color: #0618be; } .comunication-send-options .form-check .form-check-input { display: none; } .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable { min-height: 200px; } table#recipients-table td { padding-right: 30px; } .recipients { padding: 16px 30px; background: var(--color-lilla); border-radius: 7px; border: 1px solid var(--color-outile); overflow: auto; max-height: 220px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(333px, 100%), 1fr)); font-size: 14px; } .recipients .recipient span.recipient-name { font-weight: bold; } body div.dt-processing { z-index: 1000; } body .select2-container .select2-selection--single .select2-selection__rendered { display: flex; flex-wrap: wrap; align-content: center; line-height: 1; padding-top: 9px; } body .form-select, body form .form-select { /* padding-top: 11px; */ line-height: 1; } table.dataTable td.dt-type-numeric { padding-right: 30px; } a.member-file-url { color: var(--color-blu); text-decoration: underline; } .dt-buttons.btn-group .btn { border-color: #d3dce1; background-color: #f5f8fa !important; width: 42px; height: 40px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .dt-buttons.btn-group .btn span i:before { color: var(--color-text); } .dt-buttons.btn-group .btn:hover { background-color: var(--color-blu) !important; border-color: var(--color-blu); } .dt-buttons.btn-group .btn:hover span i:before { color: white; } .dt-buttons.btn-group .btn.processing:hover:after { border-bottom-color: white; border-top-color: white; } .dt-buttons.btn-group .btn.processing span i:before { opacity: 0.2; } .password-wrapper { position: relative; flex: 1 1 auto; } .password-wrapper .password-eye { position: absolute; top: 0; bottom: 0; right: 0; width: 40px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; } .password-wrapper .form-control { padding-right: 50px; } .password-wrapper .form-control.is-invalid { background-position: right calc(0.375em + 0.1875rem + 40px) center; } .password-wrapper .password-eye .password-shown, .password-wrapper .password-eye.shown .password-hidden { display: none; } .password-wrapper .password-eye.shown .password-shown { display: block; } .form-radio-wrapper { display: inline-flex; gap: 4px; margin-right: 20px; font-size: 1em; } .form-radio-wrapper:last-of-type { margin-right: 0; } .table-actions button { border-color: #d3dce1; background-color: #f5f8fa !important; width: 42px; height: 40px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .table-actions button:hover { color: white; background-color: var(--color-blu) !important; }