@media (max-width: 576px) {
    body>#content{
        padding: 0 10px 10px 10px !important;
        padding-bottom: 30px !important;
    }
}

h1,h2,h3,h4,h5,
.h1,.h2,.h3,.h4,.h5{
    font-family: playfair--display, Times, sans-serif !important;
    font-weight: 700;
    text-transform: capitalize;
    width: unset;
    padding-bottom: 20px;
}

h1::after{
    content: "";
    display: block;
    width: 6rem;
    height: 10px;
    border-bottom: 2px solid red;
}

h1{
    font-size: calc(2em + .8vw);
}

h2{
    font-size: calc(1.5em + .8vw);

}

h3{
    font-size: calc(1em + .8vw);
}

h6{
    font-family: playfair--regular, serif !important;
    font-weight: normal;
    text-transform: capitalize;
    width: unset;
    margin-bottom: 1.5rem;
    font-size: calc(.9em + .8vw);
}

a{
    text-decoration: none;
    color: unset;
}

a:hover{
    text-decoration: none;
    color: inherit;
}

.cursor-pointer {
    cursor: pointer;
}

.bg-center {
    background-position: center !important;
}

.bg-auto {
    background-size: auto !important;
}

.bg-no-repeat {
    background-repeat: no-repeat !important;
}

*:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.text-muted{
    color: #767676 !important;
}

.filter-invert{
    filter: invert();
}

#alert-container{
    width: 100%;
    margin-top: 100px;
}

.alert{
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    margin: 20px 0;
}

.alert::before{
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 45px;
    min-width: 45px;
    height: 45px;
    margin: 5px;
}

.alert.alert-danger{
    background: #FEF3F5;
}

.alert.alert-danger::before{
    background-image: url("../images/icons/icon-danger.png");
}

.alert.alert-info {
    background: #F2F7FB;
}

.alert.alert-info::before{
    background-image: url("../images/icons/icon-info.png");
}

.alert.alert-warning::before{
    background-image: url("../images/icons/icon-warning.png");
}

.alert.alert-success::before{
    background-image: url("../images/icons/icon-success.png");
}



a[disabled="disabled"], button[disabled="disabled"] {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;

}

input[type='checkbox'][readonly]{
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}

.checkbox-round {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
    margin: 0 10px;
}

.checkbox-round:checked {
    background-color: black;
}


.checkbox-round::before {
    content: '';
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
    margin: auto;
    border: 1px solid black;
}

.checkbox-round:disabled:not(:checked) {
    background-color: silver;
}

/*** SPINNER ***/
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid black;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/******/

/**Colors**/
.bg-crimsonred{
    background: #d32f2f !important;
}
.bg-indigoblue{
    background: #303F9F !important;
}
.bg-deeporange{
    background: #F57C00 !important;
}
.bg-royalpurple{
    background: #7B1FA2 !important;
}
.bg-tealblue{
    background: #00796B !important;
}
.bg-goldenyellow{
    background: #FBC02D !important;
}
.bg-teal{
    background: #00796b !important;
}
.bg-deepblue{
    background: #3949ab !important;
}


/**Nova Colors**/
.bg-nova-midnightblue{
    background: rgb(30,18,72) !important;
}

.bg-nova-grape{
    background: rgb(61,25,92) !important;
}

.bg-nova-skyblue{
    background: rgb(52,187,218) !important;
}

.bg-nova-oceanblue{
    background: rgb(3,63,133) !important;
}

.bg-nova-dawnred{
    background: rgb(228,35,19) !important;
}

.bg-nova-azure{
    background: rgb(0, 105, 180) !important;
}

.bg-nova-navy{
    background: rgb(110,168,180) !important;
}

.bg-nova-aquagreen{
    background: rgb(80,180,178) !important;
}

.bg-nova-emerald{
    background: rgb(104,195,205) !important;
}

.bg-nova-turquoise{
    background: rgb(175,216,193) !important;
}

.bg-nova-lime{
    background: rgb(209,226,168) !important;
}

.bg-nova-sandyellow{
    background: rgb(254,217,146) !important;
}

.bg-nova-amber{
    background: rgb(251,186,0) !important;
}

.bg-nova-sunriseorange{
    background: rgb(239,125,0) !important;
}

.bg-nova-sunsetorange{
    background: rgb(209,79,3) !important;
}

.bg-nova-redrush{
    background: rgb(193,26,63) !important;
}

.bg-nova-burgundy{
    background: rgb(162,19,82) !important;
}

.bg-nova-duskpurple{
    background: rgb(135,18,98) !important;
}

.bg-nova-cloud{
    background: rgb(92,121,187) !important;
}
/**Nova Colors**/


.btn{
    border-radius: 8px;
    font-weight: bolder;
    font-size: 14px;
    height: 42px !important;
    line-height: 42px !important;
    white-space: nowrap;
    background: transparent;
    color: #575757 !important;
    padding: 0 40px;
}

.btn.btn-sm{
    font-size: 11px;
    height: unset !important;
    line-height: unset !important;
    padding: 5px 15px;
}

.btn:hover, .btn:active {
    color: black !important;
}

.btn.btn-dark{
    background: black !important;
    color: #dbdbdb !important;
}

.btn.btn-danger{
    background: #dc3545 !important;
    color: white !important;
}

.btn-dark:hover, .btn-dark:active,
.btn-danger:hover, .btn-danger:active {
    color: white !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.btn.btn-light{
    background: white !important;
    color: black !important;
    border: 1px solid #cdcdcd;
}

.btn-light:not(:disabled):hover, .btn-light:not(:disabled):active{
    border: 1px solid #797979;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}


body{
    min-height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 14px;
    font-family: "Open Sans", sans-serif !important;


    display: flex;
    flex-direction: column;
}

body.bg-nova-blurred::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind the content */

    /* Set the background image */
    background-image: url("../images/nova-main.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Apply any CSS filter */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");
}


body > #content{
    padding: 0 40px 20px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

body > #content > section {
    flex: 1;
}

header{
    margin: 0;
    align-items: baseline;
    position: fixed !important;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
}

header > div{
    margin: auto;
}

header.light{
    color: white;
    border-bottom: 1px solid white;
}

header .logo{
    align-items: center;
    text-transform: uppercase;
    border-right: 1px solid #D8D8D8;
}

header .logo #logo-img-header{
    height: 80px;
}

header .fa-bars{
    font-size: 30px;
}

header .menu-nav a,
header .menu-auth a{
    color: inherit;
    text-decoration: none;
}


header .menu-nav ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    gap: 10px;
}

header .menu-nav ul li a {
    display: block;
    padding: 5px;
    font-weight:bolder;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
}

header .menu-nav ul li a:hover, header .menu-nav ul li a.active {
    color: black !important;
}

header .menu-auth .btn-dark{
    border-radius: 999px;
    box-shadow: unset;
}

header .menu-auth .dropdown .dropdown-menu{
    padding: 20px 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    min-width: 260px;
    top: calc(100% + 20px) !important;
    right: calc(100% + -40px) !important;
}

/* Carrot (triangle) */
header .menu-auth .dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px; /* Slightly higher to accommodate border */
    right: 20px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid white;
    z-index: 1;
}

/* Border layer behind the white triangle */
header .menu-auth .dropdown .dropdown-menu::after {
    content: "";
    position: absolute;
    top: -13px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid rgba(0, 0, 0, 0.15); /* Subtle black border */
    z-index: 0;
}

header .menu-auth .dropdown .dropdown-menu .dropdown-item{
    padding: 10px 5px;
}

header .menu-auth .dropdown .dropdown-menu .dropdown-item:not(:last-child){
    border-bottom: 1px solid #e9ecef;
}

.dropdown .dropdown-menu .dropdown-item:active,
.dropdown .dropdown-menu .dropdown-item.active{
    background-color: #f8f9fa !important;
    color: black !important;
}


@media (max-width: 992px) {

    header{
        overflow-y: auto;
        max-height: 100vh;
    }

    header .menu-auth .dropdown{
        width: 100%;
    }
    header .menu-auth .dropdown .dropdown-menu{
        right: 0;
        left: 0;
    }
    header .menu-auth .dropdown .dropdown-menu{
        display: block;
        position: relative;
        width: 100%;
        box-shadow: unset;
        border: unset;
        padding: 0;
    }
    header .menu-auth .dropdown .dropdown-menu h4{
        padding: 0;
    }
    header .menu-auth .dropdown .dropdown-toggle{
        display: none;
    }
    header .menu-auth .dropdown .dropdown-menu::before{
        all: unset;
    }
    header .menu-auth .dropdown .dropdown-menu::after{
        all: unset;
    }
}

.nav .dropdown-toggle:after{
    display: none;
}

footer{

}

footer #contacts{
    background: black;
    padding: 40px;
    color: #aaa !important;
    display: flex;
    justify-content: center;
}

footer #contacts .container{
    max-width: 1800px;
    align-items: center;
}


footer #contacts .container ul{
    list-style-type: none;
    padding: 0;
}

footer #contacts .container ul li{
    list-style-type: none;
    padding: 5px 0;
}

footer #organizations{
    background: white;
    padding: 20px 40px;
    color: black;
}

body #back-to-top{
    cursor: pointer;
    position: fixed;
    bottom: 200px;
    right: -40px;
    transform: rotate(-90deg);
}

body #back-to-top .line{
    display: inline-block;
    width: 2.4rem;
    height: .4rem;
    line-height: 1.6rem;
    background: #030403;
    margin-right: .8rem;
    margin-top: .1rem;
    vertical-align: middle;
    transition: width .4s linear;
}

body section .login-box .title{
    font-weight: bolder;
    text-align: center;
    font-size: 30px;
}


body section .login-box a{
    margin: 30px 0 10px 0;
}

body section .registration-box{
    padding: 40px 0 80px 0;
}

body section .registration-box .profile-selection{
    background: #f6f6f6;
    border-radius: 8px;
    padding: 80px;
}

body section .registration-box .profile-selection button{
    background: white;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border: 0;
    padding: 20px 40px;
    margin: 0 !important;
}

.vr{
    border: 1px solid #aaa;
    height: auto;
    align-self: stretch;
}

body section #main-container{
    display: flex;
    align-items: flex-start;
    padding: 0;
    width: 100% !important;
    max-width: 1600px;
    margin: 80px auto 0 auto;
}

body > #content > section > #main-container > .container {
    max-width: 1400px !important;
}

body section #main-container .placeholder-img{
    width: 100%;
}

body section #main-container #menu-container{
    position: relative;
    justify-content: center;
}

body section #main-container #menu-container h1{
    margin-bottom: 20px;
}

body section #main-container #menu-container .menu-block{
    background: black;
    color: white;
    padding: 20px 50px;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 20px;
    align-items: center;
    justify-content: center;
}

body section #main-container #menu-container .menu-block img, body section #main-container #menu-container .menu-block i{
    width: 115px;
    height: 115px;
    filter: drop-shadow(1px 2px 3px black) !important;
}

body section #main-container #menu-container .menu-block i{
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(1px 2px 3px black) !important;
}

body section #main-container #menu-container .menu-block span{
    position: relative;
    filter: drop-shadow(1px 2px 3px black);
}

body section #main-container #menu-container .menu-block span::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background-color: red;
    transition: width 0.5s ease;
}

body section #main-container #menu-container .menu-block:hover span::after{
    width: 100%;
}

hr{
    background: #aaa !important;
}

/** Modal **/
.modal .modal-content{
    border-radius: 0;
    padding: 20px;
}

.modal .modal-content .modal-header{
    border: 0;
    padding: 0 1rem !important;
}

.modal .modal-content .modal-footer{
    border: 0;
    border-radius: 0;
    border-bottom: 5px solid black;
    padding-bottom: 30px;
}

.modal .modal-dialog{
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal .modal-body{
    max-height: calc(70vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/****/

/** Form **/
.form-group label{
    font-weight: bold;
}

.form-control{
    border: 1px solid #cdcdcd !important;
    border-radius: 8px !important;
    height: 42px !important;
}

.form-control:hover{
    border: 1px solid #797979 !important;
}

.form-control.is-invalid{
    border-color: red !important;
}

.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

textarea.form-control{
    height: unset !important;
}

.custom-control-input:checked~.custom-control-label::before{
    background: black !important;
    border-color: black !important;
}

.custom-file{
    height: 38px;
}

.custom-file .custom-file-label{
    border-radius: 0;
    border: 1px solid black;
    height: 38px;
}
.custom-file .custom-file-label::after{
    background: black;
    color: white;
    border-radius: 0;
    border: 0;
    height: 36px;
    line-height: 26px;
}
/****/


/** Nav **/
nav{
}

nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    background: black;
    overflow-x: auto;
}
nav ul li {
    padding: 10px;
    color: white;
}

nav ul li a {
    display: block;
    padding: 5px;
    color: white;
    font-weight:normal;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

nav ul li a:hover, nav ul li a.active {
    font-weight:bolder;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: red;
    transition: width 0.5s ease;
}

nav ul li a:hover::after, nav ul li a.active::after {
    width: 100%;
}
/****/


/** DATA TABLES **/



/*.dataTables_wrapper, .table{
    width: 100% !important;
}*/

.dataTables_wrapper{
    overflow-x: auto;
    padding: 5px;
}

.dataTables_wrapper .row{
    width: 100% !important;
    margin: 0 !important;
}

.dataTables_wrapper .table-header{
    margin-bottom: 10px !important;
}

.dataTables_wrapper .table-content{
    border: 2px solid #ececec !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

.dataTables_wrapper .table-footer{
    padding: 5px 10px;
    border: 2px solid #ececec !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dataTables_wrapper table.dataTable{
    margin: 0 !important;
    width: 100% !important;
    border-bottom: 0 !important;
}

.dataTables_wrapper table.dataTable thead{
    background: rgb(241,242,245);
    white-space: nowrap;
    text-transform: capitalize !important;
    color: black;
    border-bottom: 1px solid #ececec !important;
    border-collapse: collapse !important;
}

.dataTables_wrapper table.dataTable thead tr th{
    border: 0 !important;
    padding: 10px 18px;
}

.dataTables_wrapper table.dataTable tbody tr:not(:last-child) td{
    border-bottom: 1px solid #ececec !important;
    border-collapse: collapse !important;
}

.dataTables_wrapper table.dataTable tbody tr td{
    white-space: nowrap;
    border: 0;
    cursor: default;
    vertical-align: middle;
}

.dataTables_wrapper table.dataTable tbody tr td button,
.dataTables_wrapper table.dataTable tbody tr td a{
    cursor: pointer;
}

.dataTables_wrapper table.dataTable tbody tr.dt-hasChild.parent {
    background: #ffebb6;
}

.dataTables_wrapper table.dataTable tbody > tr.child ul.dtr-details{
    width: 100% !important;
}

.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{
    content: '' !important;
    background-color: unset !important;
    rotate: 90deg;
}

.dataTables_filter, .dataTables_filter label, .dataTables_filter label input[type=search]{
    width: 100% !important;
    margin: 0 !important;
}

.dataTables_paginate .pagination .page-item .page-link{
    border: 1px solid #ececec !important;
    color: black; !important;
    border-radius: 10px;
    margin: 0 3px;
}

.dataTables_paginate .pagination .page-item .page-link:hover{
    border: 0 !important;
    color: black; !important;
}

.dataTables_paginate .pagination .page-item.active .page-link{
    border-color: black !important;
    background-color: black !important;
    color: white !important;
}

table.dataTable tfoot th, table.dataTable tbody td, table.dataTable tfoot td{
    /*padding: 10px 18px !important;*/
    padding: 0.75rem !important;
}

.dataTables_length label{
    margin-bottom: 0 !important;
}

.dataTables_length label select{
    border: 0 !important;
    border-radius: 0 !important;
    height: 28px !important;
    border-bottom: 1px solid black !important;
}

.dataTables_info{
    padding-top: 0 !important;
}


table.dataTable tr th.select-checkbox.selected:not(.single)::after,
table.dataTable tr td.select-checkbox.selected:not(.single)::after,
table.dataTable tr.selected td.select-checkbox::after,
table.dataTable tr.selected th.select-checkbox::after {
    content: "✔" !important;
    font-size: 14px !important;
    text-align: center !important;
    text-shadow: 0 0 black !important;
    left: calc(50% + 1px) !important;
    top: calc(50% + 5px) !important;
}

table.dataTable tr th.select-checkbox::before,
table.dataTable tr td.select-checkbox::before{
    content: " " !important;
    border: 1px solid black !important;
    border-radius: 3px !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    top: calc(50% - 1px) !important;
    left: calc(50% - 1px) !important;
}


table.dataTable>thead>tr>th.select-checkbox.selected:not(.single)::before {
    content: initial !important;
}

table.dataTable>thead>tr>th.select-checkbox td  {
    cursor: pointer;
}



.dt-ellipsis-100
{
    min-width: 150px;
    width: 100%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-75
{
    min-width: 150px;
    width: 75%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-60
{
    min-width: 150px;
    width: 60%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-50
{
    min-width: 150px;
    width: 50%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-35
{
    min-width: 150px;
    width: 35%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-25
{
    min-width: 150px;
    width: 25%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-20
{
    min-width: 150px;
    width: 20%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-15
{
    min-width: 150px;
    width: 15%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-ellipsis-10
{
    min-width: 150px;
    width: 10%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/****/

/** LABELS **/
.label-status-APPROVED, .label-status-SUBMITTED, .label-status-COMPLETED
{
    color: green;
    font-weight: bold;
}

.label-status-PENDING, .label-status-IN_PROGRESS
{
    color: orange;
    font-weight: bold;
}

.label-status-NA, .label-status-NOT_STARTED
{
    color: silver;
    font-weight: bold;
}

.label-status-REJECTED, .label-status-SUSPENDED, .label-status-CANCELLED
{
    color: red;
    font-weight: bold;
}
/****/

/*** SECTION BOX ***/
.section-box {
    width: 100%;
    padding: 0 !important;
}

.section-box .section-inner-box {
    padding: 10px;
}

.section-box .section-inner-box .title {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    margin-bottom: 80px;
    flex-wrap: wrap;
    column-gap: 20px;
}

.section-box .section-inner-box .title h4, .section-box .section-inner-box .title h5 {
    margin: 0 !important;
    width: unset;
}

.section-box .section-inner-box .title .opts {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    font-weight: bold;
    gap: 10px;
}

.section-box .section-inner-box .title .opts form {
    padding-right: 0 !important;
    align-items: center;
}

.section-box .section-inner-box .title .opts button,
.section-box .section-inner-box .title .opts span,
.section-box .section-inner-box .title .opts a{
    all: unset;
    text-transform: capitalize;
    font-weight: bold;
    cursor: pointer;
    background: white;
    padding: 0 20px;
    color: black;
    height: 38px !important;
    line-height: 38px;
    display: inline-block;
    border: 1px solid #aaa;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 8px;
}

.section-box .section-inner-box .title .opts button:hover,
.section-box .section-inner-box .title .opts span:hover,
.section-box .section-inner-box .title .opts a:hover{
    background: black !important;
    color: white !important;
}

.section-box .section-inner-box .form-row, .section-box .section-inner-box .form-group {
    overflow-x: auto !important;
}
/******/


/*** SELECT 2 ***/
.select2-selection.form-control{
    padding: 0 !important;
}

.select2-selection.form-control, .select2-selection .select2-selection__rendered:not(ul), .select2-selection .select2-selection__arrow{
    height: unset !important;
    min-height: 42px !important;
    line-height: 42px !important;
}

.select2-selection ul.select2-selection__rendered, .select2-selection.select2-selection--multiple{
    line-height: initial !important;
    align-content: center;
}

.select2-selection .select2-selection__choice{
    background: black !important;
    color: white !important;
    border: 0 !important;
    border-radius: 4px !important;
    text-transform: capitalize;
    padding: 2px 5px !important;
    font-size: 14px;
}

.select2-selection .select2-selection__choice__remove{
    color: white !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: black !important;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple{
    background: #e9ecef !important;
}

.select2-container--default .select2-selection--multiple {
    position: relative;
}

.select2-container--default .select2-selection--multiple:after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 12px;
}

/* Alternative with border arrow */
.select2-container--default .select2-selection--multiple:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #666;
    pointer-events: none;
}

/******/

/************DragNDropBox************/

.DragDropBox
{
    width:100%;
    padding:1px;
    display: table;
    cursor: pointer;
}

.DragDropBox > .Boxwrapper
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='%23D2D2D2FF' stroke-width='3' stroke-dasharray='6' stroke-dashoffset='31' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 7px;
    padding: 30px;
}

.DragDropBox > .Boxwrapper i
{
    font-size: 30px;
    color:silver;
    padding-bottom: 10px;
}

.DragDropBox > .Boxwrapper p
{
    color: #adadad;
    font-size: 17px;
    margin:0;
}

.DragDropBox > .Boxwrapper input[type="file"]
{
    width:100%;
    height:100% !important;
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
    cursor: pointer;
}

/*****************************/


/*** FIELDSET ***/
fieldset{
    margin: 20px 0;
    border: 1px solid black;
    padding: 20px !important;
}

fieldset legend{
    text-transform: uppercase;
}
/* */


/*** SmartWizard ***/

.sw-main{
    width: 100%;
}

.sw-theme-arrows{
    border: 1px solid black !important;
    border-radius: 0 !important;
}

.sw-theme-arrows > ul.step-anchor{
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
}

.sw-theme-arrows > ul.step-anchor > li {
    text-transform: uppercase !important;
    font-weight: bold !important;
}
.sw-theme-arrows > ul.step-anchor > li.active > a{
    background: black !important;
    border-color: black !important;
}

.sw-theme-arrows > ul.step-anchor > li.active > a:after{
    border-left-color: black !important;
}

.sw-main .btn-toolbar .btn-group .btn{
    border: 0 !important;
}

/****/

/****** Signature Box *******/
.signature-box {
    border: 1px solid black;
    padding: 20px;
    margin-bottom: 10px;
    width: 100%;
    height: 200px;
    background-color: #e9ecef;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/***/


/****** FullCalendar *******/
.fc .fc-timegrid-slot{
    height: 4em !important;
}

.fc .fc-timegrid-col.fc-day-today{
    background-color: initial !important;
}

.fc .fc-button-primary{
    padding: .375rem .75rem !important;
    border: 2px solid black !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: bolder !important;
    font-size: 14px !important;
    height: 38px !important;
    white-space: nowrap !important;
}

.fc .fc-button-primary:hover, .fc .fc-button-active {
    color: white !important;
    background-color: black !important;
    border-color: black !important;
}

.fc .fc-button-primary:disabled{
    display: none;
}

.fc-timegrid{
    border: 1px solid black !important;
}

.fc .fc-scroller{
    border-bottom: 1px solid rgb(221, 221, 221) !important;
    overflow: hidden !important;
}

.fc-timegrid .fc-timegrid-axis{
    border:0!important;
    border-right: 1px solid rgb(221, 221, 221) !important;
}


.fc{
    width: 100%;
}

.fc-view-harness{
    min-width: 1000px;
}

.fc-col-header-cell-cushion {
    padding: 10px !important;
}
.fc-scrollgrid-sync-inner{
    background: #EDEDED;
}

.fc-col-header-cell, .fc-daygrid-day{
    padding: 10px !important;
    border: 0 !important;
}

.fc-col-header, .fc-scrollgrid, .fc-scrollgrid-section > td{
    border: 0 !important;
}

#calendar .fc-daygrid-event .fc-event-main{
    display: none !important;
}

.fc-daygrid-day-number{
    font-weight: bold !important;
}

.fc-day-disabled{
    background: transparent !important;
}

.fc-day-disabled > .fc-scrollgrid-sync-inner{
    background-color: #ffffff;
    opacity: 0.8;
    background: repeating-linear-gradient( -45deg, #d3d3d3, #d3d3d3 2px, #ffffff 2px, #ffffff 10px );
}

.fc-toolbar-chunk > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.fc-toolbar-chunk .fc-toolbar-title{
    width: auto !important;
    font-size: 25px !important;
    font-family: playfair--regular, serif !important;
    display: inline-block;
    font-weight: bolder !important;
}

.fc-toolbar-chunk .fc-toolbar-title::after{
    content: none !important;
}

.fc-toolbar-chunk button{
    border:0!important;
    border-radius: 0 !important;
    background: none !important;
    color: black !important;
    line-height:0 !important;
    padding: 0 !important;
    font-weight: bolder !important;
}

/****************/


/******intl-tel-input  para permitir input-group button ******/
.input-group>.intl-tel-input.allow-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

.flag-container {
    z-index: 4;
}
/*******************/

/************Custom Accordion************/

.custom-accordion {
    position: relative;
    margin: 20px 0;
}

.custom-accordion > .header {
    background: #EDEDED;
    border: 1px solid #EDEDED;
    text-transform: uppercase;
    padding: 20px;
    cursor: pointer;
    position: relative;
}

.custom-accordion > .header:after{
    font-family: "Font Awesome 5 Free";
    content: '\f078';
    font-weight: 900;
    font-style: normal;
    position: absolute;
    right: 15px;
    text-decoration:none;
}

.custom-accordion > .header b{
    position: relative;
    font-size: 16px;
}

.custom-accordion > .header b:after{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: black;
    transition: width 0.5s ease;
}

.custom-accordion > .header:hover b:after{
    width: 100%;
}

.custom-accordion > .header[aria-expanded="true"]:after{
    font-family: "Font Awesome 5 Free";
    content: '\f077';
    font-weight: 900;
    font-style: normal;
    position: absolute;
    right: 15px;
    text-decoration:none;
}

.custom-accordion > .header[aria-expanded="true"] b:after{
    width: 100%;
}

.custom-accordion > .item{
    background: #f9f9f9;
}

.custom-accordion > .item .table{
    margin: 0;
}

/*****************************/

/**menu list container**/
/** STEPBAR **/
.menu-list-container .item{
    padding: 20px;
    background: #EDEDED;
    border: 1px solid #EDEDED; /*TODO: ANTES ESTAVA 2PXXX*/
    margin-bottom: 10px;
    text-transform: uppercase;
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.menu-list-container .item.disabled{
    background: rgba(237,237,237,0.3) !important;
    pointer-events: none !important;
    color:rgba(0,0,0,0.3) !important;
}

.menu-list-container .item .opts{
    content: "";
    width: 20px;
    height: 20px;
    background-size: contain !important;
}

.menu-list-container .item.link:hover .opts{
    background: url("../images/icons/arrow-right.png") no-repeat center;
    filter: invert(1);
    mix-blend-mode: difference;
}

.menu-list-container .item.edit:hover .opts{
    background: url("../images/icons/icon-edit.png") no-repeat center;
    filter: invert(1);
    mix-blend-mode: difference;
    width: 25px;
    height: 25px;
}

.menu-list-container .item>div>b {
    position: relative;
}

.menu-list-container .item>div>b::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: red;
    transition: width 0.5s ease;
}

.menu-list-container .item:hover{
    border: 1px solid black;  /*TODO: ANTES ESTAVA 2PXXX*/
}



.menu-list-container .item:hover>div>b::after {
    width: 100%;
}

.menu-list-container .menu-footer{
    padding: 20px 0;
}

.menu-list-container .menu-footer a{
    font-size: 22px;
    cursor: pointer;
}

.menu-list-container .item .badge{
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 15px;
}

/****/

/*** breadcrumb ***/
.breadcrumb{
    margin: 20px 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: black !important;
    padding: .75rem 1rem !important;
}
.breadcrumb-item.active{
    color: black !important;
    font-weight: bold !important;
}

@media (max-width: 576px) {
    .breadcrumb{
        display: none;
    }
}

/******/

.gap-1{
    gap: 10px;
}

.gap-2{
    gap: 20px;
}

.gap-4{
    gap: 40px;
}

.gap-5{
    gap: 50px;
}

/*** Nav Tabs ***/

.nav-tabs .nav-item{
    padding: 0 5px;
}

.nav-tabs .nav-link{
    padding: .5rem 2rem !important;
    cursor: pointer;
}

.nav-tabs .nav-link.active{
    border: 0 !important;
    border-bottom: 3px solid black !important;
    font-weight: bolder !important;
}

.nav-tabs .nav-link:hover{
    border: 0 !important;
    border-bottom: 3px solid black !important;
}

.nav-tabs .nav-link:focus{
    border-color: transparent !important;
}
/****************/


/**** Cards ****/
.card{
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    position: relative;
    border-radius: 12px;
}

.card .card-img-top{
    width: 100%;
    aspect-ratio: 1.33/1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
}

.card .card-body{
    text-align: left !important;
    cursor: pointer;
}
.card .card-body .card-title{
    font-size: 20px !important;
    font-weight: bolder !important;
    margin-bottom: 0 !important;
}
.card .card-body .card-text{
    font-size: 16px !important;
    text-transform: uppercase !important;
}
.card .card-body .small{
    font-size: 12px !important;
    margin-bottom: 0 !important;
}

.card .card-thumbnail {
    position: relative;
}

.card .card-thumbnail .card-favorite{
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.card .card-thumbnail .card-points{
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    font-size: 8px;
    flex-direction: column;
    width: 60px;
    height: 60px;
    justify-content: center;
    font-weight: bolder;
    line-height: 14px;
}

.card .card-thumbnail .card-points .points{
    font-size: 16px;
}

.card .card-footer{
    display: flex;
    justify-content: space-evenly;
    border:0;
    background: transparent;
    font-size: 14px;
}

.card .card-footer i{
    color:black;
    font-size: 18px;
}
/****************/


/**** PaginateJS ****/

.paginationjs .paginationjs-pages li{
    margin: 0 2px;
    border-radius: 8px !important;
}

.paginationjs .paginationjs-pages li:not(.active){
    border: 1px solid #aaa !important;
}

.paginationjs .paginationjs-pages li>a{
    background: transparent !important;
    border-radius: 8px;
}

.paginationjs .paginationjs-pages li.active>a{
    background: black !important;
    color: white !important;
}

/****************/


/**** intl-tel-input ****/
.iti.iti--allow-dropdown{
    width: 100% !important;
}
/*********/


/*** BADGES ***/
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    gap: 0.5rem; /* space between dot and text */
}

.badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Primary */
.badge.badge-primary {
    background-color: #eaf3fc;
    color: #2b63b8;
}
.badge.badge-primary::before {
    background-color: #2b63b8;
}

/* Success */
.badge.badge-success {
    background-color: #e6f4ea;
    color: #2e7d32;
}
.badge.badge-success::before {
    background-color: #2e7d32;
}

/* Danger */
.badge.badge-danger {
    background-color: #fdecea;
    color: #d93025;
}
.badge.badge-danger::before {
    background-color: #d93025;
}

.badge.no-circle::before {
    display: none;
}

/* Warning */
.badge.badge-warning {
    background-color: #fff4e5;
    color: #c77700;
}
.badge.badge-warning::before {
    background-color: #c77700;
}
/* Info */
.badge.badge-info {
    background-color: #eaf3fc;
    color: #2b63b8;
}
.badge.badge-info::before {
    background-color: #2b63b8;
}


/**** Panels ****/
.panel{
    background-color: #f0f0f0;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;

    /*só para os paneis nao aparecerem brevemente enquanto a página ainda carrega*/
    position: fixed;
    right: -10000px;
}

.panel-body{
    overflow-y: auto;
    padding: 20px;
    flex: 1;
}

.panel-footer{
    padding: 20px;
}

.card-link:hover {
    text-decoration: underline !important;
}

.card-link:hover p {
    text-decoration: underline;
}

.card .card-thumbnail .card-featured {
    position: absolute;
    top: 4px;
    right: auto;
    left: 10px;
    font-size: 30px;
}



.btn-disabled {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(100%);
}

.rotate-icon {
    transition: transform 0.3s ease;
}

.toggle-section[aria-expanded="true"] .rotate-icon {
    transform: rotate(90deg);
}

.accordion {
    width: 100%;
}

.faq-accordion-item {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    background-color: white;
}

.faq-accordion-button {
    width: 100%;
    text-align: left;
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    font-size: 1.1rem;
    background-color: white;
    border: none;
}

.faq-accordion-body {
    padding: 1.5rem;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}
.floating-info-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.floating-info-button:hover {
    transform: scale(1.1);
}

.floating-info-button img {
    max-width: 100%;
    max-height: 100%;
}


/*Datatable nestedtable toggle icon*/
tbody td.row-toggle { cursor: pointer; }
tbody td.row-toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    display: inline-block;
    margin-right: .35rem;
    line-height: 1;
}
tbody tr.shown td.row-toggle::before {
    content: "\f078";
}


/* datepicker */

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
    background: unset !important;
    color: unset !important;
    border: unset !important;
}

.ui-datepicker-week-end.ui-state-highlight{
    background: rgb(241,242,245) !important;
}


.ui-state-highlight a, .ui-widget-content .ui-state-highlight a{
    color: white !important;
    background: black !important;
    border: unset !important;
}

.ui-state-active, .ui-widget-content .ui-state-active{
    color: unset !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    background: unset !important;
    border-radius: 15px !important;
    border: unset !important;
    margin: 3px !important;
    text-align: center !important;
}

td.ui-datepicker-week-end{
    background: rgb(241,242,245) !important;
}