:root {

    --default-text-color: #63686e ;
    --primary: #344CB7;
    --primary-dark: #27496D;
    /* --secondary: #5584AC; */
    --dark: #3b495c;
    --primary-hover: #1a34a5;
    --primary-light: #577BC1;
    --primary-dark: #000957;
    --rgba-primary-1: rgba(52, 76, 183, 0.1);
    --rgba-primary-2: rgba(52, 76, 183, 0.2);
    --rgba-primary-3: rgba(52, 76, 183, 0.3);
    --rgba-primary-4: rgba(52, 76, 183, 0.4);
    --rgba-primary-5: rgba(52, 76, 183, 0.5);
    --rgba-primary-6: rgba(52, 76, 183, 0.6);
    --rgba-primary-7: rgba(52, 76, 183, 0.7);
    --rgba-primary-8: rgba(52, 76, 183, 0.8);
    --rgba-primary-9: rgba(52, 76, 183, 0.9);

    --success: #28DF99;
    --success-light: #37f3ab;
    --success-dark: #34c08b;
    --rgba-success-1: rgba(40, 223, 153, 0.1);
    --rgba-success-2: rgba(40, 223, 153, 0.2);
    --rgba-success-3: rgba(40, 223, 153, 0.3);
    --rgba-success-4: rgba(40, 223, 153, 0.4);
    --rgba-success-5: rgba(40, 223, 153, 0.5);
    --rgba-success-6: rgba(40, 223, 153, 0.6);
    --rgba-success-7: rgba(40, 223, 153, 0.7);
    --rgba-success-8: rgba(40, 223, 153, 0.8);
    --rgba-success-9: rgba(40, 223, 153, 0.9);

    --danger : #ff4c41;

    --font-family-base: Roboto, sans-serif;
    --font-family-title: Roboto, sans-serif;
}


/* Univ */

body, .table{
    color: var(--default-text-color);
}

.text-default{
    color: var(--default-text-color) !important;
}

.text-dark, .input-group-text, .card-title, .modal-title, h1, h2, h3, h4, h5, h6, .header-right .header-profile > a.nav-link .header-info span{
    color: var(--dark) !important;
}

.text-xs{
    font-size: .8rem;
}

.w-fit{
    width: fit-content !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--primary);
    border-color: var(--primary);
    filter: brightness(.9);
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
    display:none !important;
}

/* .btn-secondary {
    color: #fff;
    background-color: var(--secondary);
    border-color: var(--secondary);
} */

.btn-dark {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary-hover);
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary-hover);
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary-hover);
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--rgba-primary-5);
}

.btn-success:hover {
    background-color: var(--success-dark);
    border-color: var(--success-dark);
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: var(--success-light);
    border-color: var(--success-light);
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--rgba-success-3);
}


/* Sidebar */

.logo{
    font-size: 1.3rem;
    line-height: 1.5rem;
}

.logo-desc{
    font-size: .8rem;
}

.deznav .metismenu ul a:hover, .deznav .metismenu ul a:focus, .deznav .metismenu ul a.mm-active {
    background: var(--rgba-primary-1);
}

.authincation-content{
    box-shadow: 0 0 35px 0 rgb(229, 236, 247);
}

.deznav .main-profile .image-bx {
    height: 80px;
    width: 80px;
}

.avatar {
    height: 80px;
    width: 80px;
    min-width: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px 3px var(--rgba-primary-2);
}

.icon-placeholder {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.avatar.avatar-sm {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 40px;
    border: 2px solid #fff;
}

.avatar-sm .icon-placeholder {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    height: 36px;
    width: 36px;
    border-radius: 36px;
    justify-content: center;
    align-items: center;
}

/* main */

form label{
    color: var(--dark);
    font-weight: 500;
}

.form-control.is-invalid {
    border: 1px solid  var(--danger) !important;
}

.form-control:focus {
    border-color: var(--rgba-primary-5);
    box-shadow: 0 0 0 0.2rem var(--rgba-primary-3);
}

.alert.hide {
    height: 0;
    border-width: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: .1s ease;
    margin: 0 !important;
}

.search-area .form-control, .input-group-text, thead tr th{
    background-color: var(--rgba-primary-1)!important;
}

.custom-control-label:before, .custom-control-label:after{
    border-color: #e2e6fd;
}

.checkbox-primary .custom-control-label::before {
    background-color: #d5ddff;
    border-color: #e2e6fd;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--primary);
    background-color: var(--primary);
}

.usulan-content table tbody tr td:nth-child(4), .usulan-content table tbody tr td:nth-child(5){
    white-space: nowrap !important;
    width: fit-content !important;
}

table.dataTable thead th{
    padding: 10px 23px 10px 10px;
    font-size: .85rem;
    color: var(--dark);
}

.dataTables_wrapper .dataTables_paginate span {
    padding: 0 .3rem;
    background: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    height: 40px;
    width: 40px;
    font-size: 1rem;
    color: var(--dark) !important;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    background: var(--rgba-primary-1) !important;
    margin: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate span .paginate_button{
    background: var(--rgba-primary-1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled.current {
    background:  var(--rgba-primary-2) !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button{
    color: var(--dark) !important;
}

@media(max-width: 767px){
    [data-header-position="fixed"] .content-body {
        padding-top: 5.5rem;
    }
}

.ce-block__content{
    max-width: 1000px;
}