@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
    --white: #FFFFFF;
    --black: #000000;
    --grey: #F1F1F1;
    --blue-main: #2041bb;
    --blue-main-hover: #486ae8;
    --blue-second: #617fec;
    --blue-dark: #001f8d;
    --blue-soft: #b3c3ff;
    --danger-soft: #ffd5df;
    --danger: #fb3569;
    --warning-soft: #ffe7ca;
    --warning: #ff8a02;
    --success-soft: #ccf5e7;
    --success: #02cb87
}

*,
pre {
    font-family: "Red Hat Display", sans-serif;
}

/* html {
    scroll-behavior: smooth;
} */

.content-wrapper {
    margin-left: 100px;
}


/* SELECT2 */

span.select2-selection.select2-selection.is-invalid {
    border-color: #dc3545;
}


/* CUSTOMIZING TITLE PAGE */

.news-title{
    height:50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

.news-title-b{
    height:70px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

.title-page h1.fw-bold {
    margin-top: -18px;
    margin-bottom: 0px;
}

.waves {
    z-index: -1;
}

.swal-modal {
    border-radius: 15px;
}


/* STYLING SIDEBAR ADMIN */

.sidebar.navbar-wrapper a span.col.notif-active.rounded-circle {
    background: #e73838;
    height: 10px;
    width: 10px;
    position: absolute;
    right: 25px;
    top: 5px;
}


/* COSTUMIZING SIDEBAR */

.content-outer-wrapper {
    max-width: 1500px;
}

.navbar-wrapper {
    z-index: 99;
    position: fixed;
    margin: 0;
    padding: 0;
    width: 85px;
    height: 100%;
    background: white;
}

.navbar-wrapper .navbar-item i,
.navbar-wrapper .navbar-logout i {
    font-size: 28px;
}

.navbar-wrapper .navbar-item span,
.navbar-wrapper .navbar-logout span {
    font-size: 16px;
}

.navbar-wrapper .navbar-item:hover {
    /*margin: 10px;*/
    transition: 0.3s;
    background: #2041bb;
    -webkit-border-radius: 0px 20px 20px 0px;
    -moz-border-radius: 0px 20px 20px 0px;
    -ms-border-radius: 0px 20px 20px 0px;
    -o-border-radius: 0px 20px 20px 0px;
    border-radius: 0px 20px 20px 0px;
}

.navbar-wrapper .navbar-item:hover span,
.navbar-wrapper .navbar-item:hover i {
    transition: 0.3s;
    color: #fff;
}

.navbar-wrapper .navbar-item.nav-active {
    border-radius: 0px 20px 20px 0px;
    background: #2041bb;
}

.navbar-wrapper .navbar-item.nav-active span,
.navbar-wrapper .navbar-item.nav-active i {
    color: #fff;
}

nav.navbar .navbar-nav .notif-active {
    background: rgb(232, 45, 45);
    padding: 5px;
    position: absolute;
    top: 5px;
    left: 30px;
}

@media only screen and (max-width: 500px) {
    .navbar-wrapper .navbar-item.nav-active {
        border-radius: 0px 10px 10px 0px;
    }
}


/* STYLING SEARCH */

.search input {
    height: 60px;
    /* padding-left: 55px; */
    font-size: 18px;
    border: 2px solid rgb(193, 193, 193);
    border-radius: 0px 20px 20px 0px;
    border-left: 0px;
}

.search i.bx {
    z-index: 10;
    font-size: 30px;
    top: 15px;
    left: 2%;
    color: rgba(0, 0, 0, 0.5);
}

.search form .btn-search {
    border: 2px solid rgb(193, 193, 193);
    border-right: 0px;
    border-radius: 20px 0px 0px 20px;
    background: #fff;
}

@media only screen and (max-width: 925px) {
    /* WAVES */
    .waves {
        width: 100vw !important;
        height: 300px !important;
        object-fit: cover;
    }
}

@media only screen and (max-width: 768px) {
    .content-wrapper {
        margin-left: 80px;
    }
    .title-page h1.fw-bold {
        margin-bottom: 20px !important;
    }
    .navbar-toggle {
        z-index: 3;
        padding: 5px 5px 5px 2px !important;
    }
    .navbar-toggle i.bx-chevrons-right {
        font-size: 16px !important;
    }
    .navbar-wrapper {
        width: 70px;
        height: 100vh;
    }
    .navbar-wrapper .navbar-item i,
    .navbar-wrapper .navbar-logout i {
        font-size: 24px;
    }
    .navbar-wrapper .navbar-item span,
    .navbar-wrapper .navbar-logout span {
        font-size: 12px;
    }
    .navbar-wrapper .navbar-item:hover {
        border-radius: 0px 10px 10px 0px;
    }
    .overflow-x-scroll {
        overflow-x: scroll;
    }
}

@media only screen and (max-width: 375px) {
    .content-wrapper {
        margin-left: 70px;
    }
    .navbar-wrapper {
        width: 60px;
        height: 100vh;
    }
    .navbar-wrapper .navbar-item i,
    .navbar-wrapper .navbar-logout i {
        font-size: 20px;
    }
    .navbar-wrapper .navbar-item span,
    .navbar-wrapper .navbar-logout span {
        font-size: 10px;
    }
    .navbar-wrapper .navbar-item:hover {
        border-radius: 0px 10px 10px 0px;
    }
}


/* OTHER */

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

.clear {
    clear: both;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.border-secondary-hover {
    border: 2px solid rgb(230, 230, 230);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.border-secondary-hover:hover {
    /* box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 9px 0 rgba(0, 0, 0, 0.19); */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.border-secondary-2 {
    border: 3px solid rgb(230, 230, 230);
}

.cursor-pointer {
    cursor: pointer;
}

.rounded-20 {
    -webkit-border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    -ms-border-radius: 13px 13px 13px 13px;
    -o-border-radius: 13px 13px 13px 13px;
    border-radius: 13px 13px 13px 13px;
}

.rounded-15 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.shadow-custom {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-custom-2 {
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.25);
}

.blue-line {
    height: 7px;
    width: 100%;
    background-image: linear-gradient(to right, #3c5eda, #d4dcf7);
}


/* TEXT */

.text-primary {
    color: #2041bb;
}

.text-link {
    color: #2041bb;
}

.text-link:hover {
    color: #486ae8;
}

.text-link-black {
    color: rgb(24, 24, 24);
}

.text-link-black:hover {
    color: #486ae8;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.text-gray{
    color: rgba(0,0,0,.64);
}
.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}


/* BUTTON */

.btn-primary {
    background-color: #2041bb;
    color: #fff;
}

.btn-primary:hover {
    background-color: #486ae8;
    color: #fff;
}

.btn-blue-gr {
    background-image: linear-gradient(to right, #3759d6, #b9c7f7);
    color: #fff;
}

.btn-blue-gr:hover {
    background-image: linear-gradient(to right, #b9c7f7, #3759d6);
    color: #fff;
}

button:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}

.btn-light-primary {
    background: #a0c6ff;
    border: 2px solid #4989e9;
    color: #044fc0;
    font-weight: 700;
}

.btn-light-primary:hover {
    transition: 0.25s;
    background: #044fc0;
    color: #fff;
}

/* PAGINATION */

.page-link {
    color: #2041bb;
}

.page-item.active .page-link {
    background: #2041bb;
}


/* MARGIN PADDING */


/* CK EDITOR */

.ck-file-dialog-button {
    display: none;
}

:root {
    --ck-border-radius: 5px;
}


/* STYLING LOADER */

#loading-wrapper {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
}

#loading-wrapper.dark {
    background: rgba(0, 0, 0, 0.1);
}

#loading-wrapper .loading-img {
    position: absolute;
    top: 45vh;
    left: 48vw;
}

@media only screen and (max-width: 500px) {
    #loading-wrapper .loading-img {
        left: 40vw;
    }
}


/* STYLING SOCIAL MEDIA FOOTER */

#footer {
    background: #fff;
    margin-top:-100px;
}

.footer-text .social-wrapper .social-item div i {
    font-size: 40px;
}

.footer-text .social-wrapper .social-item:nth-child(1) div i {
    color: #4267B2;
}

.footer-text .social-wrapper .social-item:nth-child(2) div i {
    color: #833AB4;
}

.footer-text .social-wrapper .social-item:nth-child(3) div i {
    color: #1DA1F2;
}

.footer-text .social-wrapper .social-item div {
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.footer-text .social-wrapper .social-item:nth-child(1) div {
    background: #a9beea;
}

.footer-text .social-wrapper .social-item:nth-child(2) div {
    background: linear-gradient(to top right, rgba(131, 58, 180, 0.6), rgba(247, 119, 55, 0.6));
}

.footer-text .social-wrapper .social-item:nth-child(3) div {
    background: #94cff3;
}


/* STYLING PROGRESS BAR */

.progressbar-wrapper {
    background: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}

.progressbar li {
    list-style-type: none;
    /* width: 20%; */
    float: left;
    font-size: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

.progressbar li:before {
    width: 30px;
    height: 30px;
    content: "";
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.progressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #7d7d7d;
    top: 15px;
    left: -50%;
    z-index: 0;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.reject {
    color: #f53535;
    font-weight: bold;
}

.progressbar li.reject:before {
    color: #fff;
    border-color: #f53535;
    background: #ff5f5f;
}
.progressbar li.reject+li:after {
    background-color: #f53535;
}

.progressbar li.reject:before {
    background: #f53535;
    background-size: 60%;
}

.progressbar li.waiting {
    color: rgb(255,193,7);
    font-weight: bold;
}

.progressbar li.waiting:before {
    color: #000;
    border-color: rgb(255,193,7);
    background: rgb(255,193,7);
}
.progressbar li.waiting+li:after {
    background-color:  rgb(255,193,7);
}

.progressbar li.waiting:before {
    background:  rgb(255,193,7);
    background-size: 60%;
}


.progressbar li.active {
    color: #5f44f7;
    font-weight: bold;
}

.progressbar li.active:before {
    color: #fff;
    border-color: #2041bb;
    background: #5f44f7;
}

.progressbar li.active+li:after {
    background-color: #2041bb;
}

.progressbar li.active:before {
    background: #2041bb;
    background-size: 60%;
}

.progressbar li.info {
    color: var(--warning);
    font-weight: bold;
}

.progressbar li.info:before {
    color: #fff;
    border-color: var(--warning);
    background: var(--warning-soft);
}

.progressbar li.info+li:after {
    background-color: var(--warning);
}

.progressbar li.info:before {
    background: var(--warning);
    background-size: 60%;
}

.progressbar li::before {
    background: #fff;
    background-size: 60%;
}

.progressbar {
    counter-reset: step;
}

.progressbar li:before {
    content: counter(step);
    counter-increment: step;
}

/* STYLING CODE BLOCK/ CODE LINE */
.code {
    padding: 10px 15px;
    border-radius: 10px;
    background: rgb(73, 73, 73);
    margin: 0 0 15px 0;
}

.code p, .code span, .code ol {
    color: rgb(250, 250, 250);
    margin-bottom: 0;
}

.code .comment {
    color: rgb(167, 167, 167);
}

.code .info {
    color: rgb(119, 208, 255);
}

.code .important {
    color: rgb(255, 226, 123);
}

/* BLACK AND WHITE IMG */
.bnw {
    transition: 0.3s ease;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.5;
}

.bnw:hover {
    transition: 0.3s ease;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    opacity: 1;
}

/* MEDIA SOCIALS */
.media-social a{
    font-size: 40px;
}

@media only screen and (max-width: 500px) {
    .sidebar.navbar-wrapper a span.col.notif-active.rounded-circle {
        right: 21px;
    }
}

@media only screen and (max-width: 400px) {
    .media-social a{
        font-size: 30px;
    }

    /* TOAST */
    #toastWarning.toast{
        width: auto;
    }
}