/* STYLE DOM */
html, body {
    background-color: #f5f5f5;
    height: 100vh;
    font-size: 16px;
    color: #494949;
}

/* CARD LOGIN */
.card-login {
    border:0;
    border-radius: 40px;
    padding: 50px 20px;
}
.card-login > .card-header, .card-login > .card-body, .card-login > .card-footer {
    background-color: inherit;
    border: 0;
}
.card-login > .card-footer .forget-link {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
/* FORM LOGIN */
.form-login input, .form-login button {
    border-radius: 100px;
    text-align: center;
    padding: 8px 20px;
    margin-bottom: 15px;
}
.form-login input {
    border:0;
    background-color:#ebebeb;
}
.form-login label {
    font-weight: 600;
    color: #494949;
    margin-bottom: 6px;
}
.form-login button {
    font-weight: 600;
    font-size: 14px;
}
.border-danger input {
    border: solid 1px #af1717;   
}

/* DASHBOARD - ASIDE NAVBAR */
#sidebar {
    width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    transition: all 0.3s;
    padding:10px;
    background-color: #f5f5f5;
}
#sidebar.active {
    width: 80px; 
}
#sidebar .sidebar-header {
    text-align: center;
}
#sidebar .sidebar-header .figure, .figure .avatar {
    max-width: 52px;
    height: 52px;
    border-radius: 10px;
}
#sidebar .username, #sidebar .title {
    display: block;
    width: 100%;
    overflow: hidden;
    transition: .3s;
}
#sidebar.active .username, #sidebar.active .title{
    width: 0px;
    opacity: 0;
}

#sidebar ul li a {
    text-decoration: none;
    display: flex;
    font-weight: 600;
    color: #494949;
    border-radius: 10px;
    transition: .3s;
    z-index: 2;
    position: relative;
    align-items: center;
    justify-content: start;
    text-align: left;
}
#sidebar ul li {
   margin-bottom: 10px;
}
#sidebar ul li a i {
    padding: .875rem .785rem .875rem .785rem;
}

#sidebar ul li a:hover {
   background: #fff;
}
#sidebar ul li.active > a {
    background: #fff;  
    justify-content: center;
    
}
#sidebar.active ul li a {
    justify-content: center;
}
#sidebar .submenu  {
    position: relative;
    background: #fff;
    z-index: 1;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
#sidebar .submenu li a {
    font-size: 14px;
}
a[aria-expanded="true"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #fff;
}
a[aria-expanded="true"] .dropdown-nav:after {
    transform: rotate(180deg);
}
.dropdown-nav::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    background-repeat: no-repeat;
    background-size: 0.8rem 0.8rem;
    background-position: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 18px;
    right: 20px;
    transition: 0.3s;
}

/* DASHBOARD - HEADER */
.header-content {
    width: calc(100vw - 245px);
    min-height: 60px;
    transition: all 0.3s;
    position: fixed;
    top: 0;
    right: 0;
    border:0;
    z-index: 1000;
    background-color: #f5f5f5;
}
.header-content.active {
    width: calc(100vw - 95px);
}
.navbar {
    padding:0;
    min-height: 60px;
}
.btn-header {
    display: flex;
    background-color: inherit;
    border:0;
    height: 42px;
    width: 42px;	
    cursor: pointer;
    color: #1873a5;
    transition: all .3s;
    background-color: #fff;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    line-height: 0;
}
.btn-header:hover {
    background-color: #f5f5f5;
}	

.iconSidebar, .iconUserCollapse {
    display: block;
    width: 20px;
    height: 20px;
}
.iconSidebar::before, .iconUserCollapse::before  {
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.2rem 1.2rem;
    transition: all 0.3s;
    width: 20px;
    height: 20px;
}
.iconSidebar::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/></svg>');
}
.iconSidebar.active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>');
}
.iconUserCollapse::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/></svg>');
}
.iconUserCollapse.active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-wide-connected" viewBox="0 0 16 16"><path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/></svg>');
}


/* DASHBOARD MAIN CONTAINER */
.main-content {
    display:block;
    width: calc(100vw - 240px);
    min-height: calc(100vh - 120px);
    transition: all 0.3s;
    position: relative;
    top: 60px;
    margin-left: auto;
    padding: 10px;
}
.main-content.active {
    width: calc(100vw - 95px);
}
.page-title {
    color: #6c757d;
    font-size: 1.5rem;
    font-weight: lighter;
}

/* CARD DASHBOAR */
.card-dashboard {
    border-radius: 20px;
    border:0;
    background-color: #fff;
    overflow: hidden;
}
.card-dashboard .card-header, 
.card-dashboard .card-body, 
.card-dashboard .card-footer {
    background-color: inherit;
    border: 0;
}
.card-dashboard .card-header {
    padding: .5rem 1.5rem;
}
.card-dashboard .card-body {
    padding: 0 0 1.5rem 0;
}
.card-dashboard .card-header-title {
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.card-dashboard .card-header-options {
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    display:block;
}
.card-dashboard .card-text {
    padding: 0.5rem 1.5rem;
}
.card-counters .card-number {
    font-size: 3rem;
}


/* TABLES */
.table  {
    color: #494949;
    vertical-align: middle;
}
.table th {
    font-weight: 600;
    font-size: 14px;
}
.table th:first-child, .table td:first-child {
    padding-left: 1.5rem;
}
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.875em;
}
.dataTables_empty {
    font-size: 0.875em;
}
.table .btn.btn-table {
    border-radius: 50px;
    border: solid 1px #e9e9e9;
    padding: 0.275rem .575rem;
    margin-left: 8px;
}
.table .btn.btn-table:hover {
    border: solid 1px #cecece;
    background-color:#cecece;
}

/* FORMS */
.form-dashboard {
    width: 100%;
}
.form-dashboard label, .form-dashboard .btn {
    font-size: 14px;
    font-weight: 600;
}
.form-dashboard .form-control, .form-dashboard .form-select {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
}
.form-dashboard .mce-panel {
    background-color: #f5f5f5;
    background: #f5f5f5;
    border: 0;
    padding: 6px 10px;
    border-radius: 10px;
}
.mce-widget, .mce-btn {
    border: 0 !important;
    text-shadow: inherit !important;
    border-radius: 10px;
    padding: 6px !important;
}
.mce-edit-area {
    background-color: #fff !important;
    background: #fff !important;
    border-radius: 8px;
}
.mce-btn-group {
    border: 0 !important;
}
.mce-toolbar-grp {
    padding: 6px 0 !important;
}

/* MODALS */
.modal .modal-content, .modal .modal-content > * {
    border: 0;
}
.modal .modal-content {
    border-radius: 20px;
}

/* DASHBOARD FOOTER CONTENT */
.footer-content {
    display: block;
    width: calc(100vw - 240px);
    transition: all 0.3s;
    position: relative;
    border:0;
    z-index: 1000;
    border-radius: 100px;
    padding: 20px;
    font-weight: 700;
    color: #1873a5;
    font-size: 12px;
    text-decoration: none;
    margin-left: auto;
    margin-top:60px;
}
.footer-content a {
    color:#494949;
    text-decoration: none;
}
.footer-content.active {
    width: calc(100vw - 80px);
}
.hidden {
    display:none;
}
.sticky-qr {
    top: 70px;
}
.fw-bold {
    font-weight: 600 !important;
}
.mce-branding {
    display: none !important; 
}