:root{
    --green: #34d500;
    --green-hover: #2bad00;
    --blue: #146ebe;
    --red: #D0130E;
}

@font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Regular.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-weight: 500;
    src: url(../fonts/Rubik-Medium.ttf);
}

@font-face {
    font-family: 'Rubik';
    font-weight: bold;
    src: url(../fonts/Rubik-Medium.ttf);
}

body{
    font-family: 'Rubik', sans-serif !important;
    position: relative;
    background-color: #f2f2f2;
    padding: 20px;
}

body > .navbar.navbar-expand .nav-link{
    color: #111;
}

.navbar{
    position: absolute;
    left: 0;
    right: 0;
}

.sidebar{
    background-color: #111;
    height: calc(100vh - 40px);
    z-index: 9;
    border-radius: 10px;
    position: sticky;
    top: 20px;
}

.sidebar-header{
    padding: 1.8rem 1rem;
    display: flex;
    justify-content: center;
}

.sidebar .nav-item{
    position: relative;
}

/* .sidebar .nav-item:before,
.sidebar .nav-item:after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: -5px;
    width: 15px;
    height: 5px;
    opacity: 0;
    z-index: 9;
    pointer-events: none;
    transition: ease all .3s;
    background: radial-gradient(180% 180% at left -65% top -65%, transparent 99%, #fff );
}

.sidebar .nav-item:after{
    top: auto;
    bottom: -5px;
    background: radial-gradient(180% 180% at left -65% bottom -65%, transparent 99%, #fff );
} */

.sidebar .nav-item.active:before,
.sidebar .nav-item:hover:before,
.sidebar .nav-item.active:after,
.sidebar .nav-item:hover:after{
    opacity: 1;
}

.sidebar .nav-item .nav-link{
    position: relative;
    padding: .85rem 1.5rem;
    transition: ease all .3s;
    z-index: 1;
    font-weight: 500;
}

.sidebar .nav-item .nav-link:before{
    content: "";
    position: absolute;
    width: 0%;
    left: 5%;
    top: 3px;
    bottom: 3px;
    margin: auto;
    background-color: var(--green);
    transition: ease all .3s;
    opacity: 0;
    z-index: -1;
    border-radius: 10px;
}

.sidebar .nav-item.active .nav-link:before,
.sidebar .nav-item:hover .nav-link:before{
    width: 90%;
    opacity: 1;
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item:hover .nav-link{
    color: #111;
}

.sidebar .nav-item .nav-link i{
    display: inline-block;
    min-width: 20px;
    text-align: center;
    margin-right: 5px;
}

.sidebar .nav-item .nav-link span{
    font-size: .9rem;
}

#wrapper #content-wrapper{
    padding-top: 4.5rem;
    padding-left: 20px;
}

footer.sticky-footer{
    padding-left: 20px;
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

footer.sticky-footer .copyright{
    font-size: .7rem;
}

.breadcrumb{
    padding: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
}

.breadcrumb a:not(.btn){
    color: #111 !important;
    text-decoration: none !important;
}

.alert{
    border-radius: 25px;
    border: none;
    background-color: white !important;
    color: #111;
    position: relative;
    padding-left: 55px;
    margin-bottom: 25px;
}

.alert:before{
    content: '';
    font-family: "Font Awesome 5 Free";
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(54,54,54,.3);
    font-weight: bold;
}

.alert.alert-success:before{
    content: "\f00c";
    background-color: rgba(52, 213, 0, .1);
    color: var(--green);
}

.alert.alert-info:before{
    content: "\f129";
    background-color: rgba( 20, 110, 190, .1 );
    color: var(--blue);
}

.alert.alert-danger:before{
    content: "\f12a";
    background-color: rgba( 208, 19, 14, .1 );
    color: var(--red);
}

.card{
    border: none;
    background-color: white !important;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,.1);
}

.card .card-footer{
    display: none;
}

.card-body-icon{
    left: 0;
    top: 0;
    right: auto;
    opacity: 1;
    color: #111;
    font-size: 1rem;
    position: relative;
    transform: none;
    padding-right: 15px;
}

.card-body-icon > i{
    display: block;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111;
    border-radius: 100%;
    color: white;
    box-shadow: 1px 1px 10px rgba(1,1,1,.1);
}

.card .card-body{
    display: flex;
    justify-content: space-between;
    text-align: right;
}

.card .card-body p{
    font-size: .65rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0;
}

.card .card-body h3{
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0;
    color: #111;
    line-height: 1;
}

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

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

.card.bg-secondary .card-body-icon > i{
    background-color: var(--primary) !important;
}

.card.bg-info .card-body-icon > i{
    background-color: var(--info) !important;
}

.card.bg-indigo .card-body-icon > i{
    background-color: var(--indigo) !important;
}

.card.bg-warning .card-body-icon > i{
    background-color: var(--orange) !important;
}

.card.bg-danger .card-body-icon > i{
    background-color: var(--red) !important;
}

.card.bg-success .card-body-icon > i{
    background-color: var(--green) !important;
}

.btn{
    padding: .5rem 2rem;
    border-radius: 25px;
    border: none;
    font-weight: bold;
}

.subtitle{
    font-size: 1.2rem;
}

.dataTables_wrapper table{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}

.dataTables_wrapper input,
.dataTables_wrapper select{
    border-radius: 25px;
    border: none;
    background-color: white;
    padding: .5rem 1rem;
}

.dataTables_wrapper table,
.dataTables_wrapper table *{
    border: none !important;
}

.dataTables_wrapper table th{
    font-size: .9rem;
    white-space: nowrap;
}

.dataTables_wrapper table td{
    font-size: .8rem;
    transition: ease all .3s;
    background-color: #f5f5f5;
}

.dataTables_wrapper table td .btn{
    width: 100%;
    margin-bottom: 5px;
    font-size: .8rem;
    padding: .3rem .8rem;
}

.dataTables_wrapper table td .btn:last-child{
    margin-bottom: 0;
}

.dataTables_wrapper table tr{
    transition: ease all .3s;
}

.dataTables_wrapper table tr:nth-child(odd) td{
    background-color: #eee;
}

.dataTables_wrapper table tbody tr:hover{
    transform: scale(1.01)
}

.dataTables_wrapper table tr:hover td{
    background-color: #fff;
    color: var(--green);
}

.dataTables_info{
    font-size: .8rem;
    color: #888;
}

.dataTables_paginate .pagination li .page-link{
    border: none;
    font-size: .8rem;
    background-color: transparent;
    color: #111;
    border-radius: 25px;
    box-shadow: none !important;
}

.page-item.active .page-link{
    background-color: var(--green) !important;
    color: #111;
    font-weight: bold;
}

.modal .modal-dialog{
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.modal-content{
    border-radius: 10px;
    /* text-align: center; */
}

.modal-header,
.modal-footer{
    padding: 30px 0 0;
    justify-content: center;
    border: none;
    text-align: center;
}

.modal-header .close{
    display: none;
}

.modal-footer{
    padding: 10px 0 30px;
}

.modal-title{
    font-size: 1.2rem;
}

.modal-body{
    padding-top: 10px;
}

.modal-body p{
    margin-bottom: 0;
    font-size: .9rem;
    color: #888;
    text-align: center;
}

.form-control, .select2-container .select2-selection--single{
    padding: .8rem 1rem !important;
    border-radius: 10px !important;
    background-color: #f5f5f5 !important;
    border: none !important;
    height: auto !important;
    box-shadow: none !important;
    transition: ease all .3s !important;
    font-size: .9rem !important;
}

.form-control:focus{
    background-color: rgba(52, 213, 0, .1);
}

input.form-control:read-only,
input.form-control:disabled{
    color: #999;
    background-color: #f9f9f9;
}

form.p-5{
    padding: 30px !important;
    border-radius: 10px;
    background-color: #fff;
}

form.p-5 hr{
    margin: 2rem 0
}

form > button.btn{
    max-width: 200px;
    padding: .7rem 2rem;
    margin: 30px 0 0 auto;
}

.detail_box{
    padding: 30px;
    border-radius: 10px;
    background-color: white;
}

.detail_box .h4,
form.p-5 .h4{
    color: var(--green);
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0 0 15px !important;
}

.detail_box .row{
    font-size: .9rem;
    margin-bottom: .2rem;
}

.detail_box .row:last-child{
    margin-bottom: 0;
}

.detail_box .row div:first-child{
    font-weight: bold;
}

.detail_box .row div:last-child{
    color: #777;
}

.detail_box hr{
    margin: 1.5rem 0;
}

.input-group{
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .select2-container{
    flex: 1;
}

.input-group-append{
    display: flex;
    align-items: center;
    background-color: #eee;
    border-radius: 0 10px 10px 0;
    margin-left: -1px;
}

.input-group-append .btn{
    border-radius: 0 10px 10px 0;
    height: 100%;
}

.input-group-append .btn.btn-primary{
    padding: .8rem 1.5rem;
}

.input-group-append .btn.btn-outline-secondary{
    padding: 0 10px;
    width: 50px;
    border: none;
}

.input-group-append .btn.btn-outline-secondary i.gj-icon{
    position: initial;
    display: block;
}

.badge{
    font-size: .8rem;
    padding: .4rem;
    color: white;
}

.bg-grey{
    background-color: var(--gray) !important;
}

.product_detail_row select{
    border-radius: 10px 0 0 10px;
}

.product_detail_row input{
    border-radius: 0;
}

.product_detail_row .btn{
    font-size: .8rem;
    border-radius: 0 10px 10px 0;
}

.login_bg{
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    min-height: 100vh;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #111;
}

.login_bg::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url(../images/dark_bg.webp);
    opacity: .3;
    background-size: cover;
    filter: blur(5px); /* Adjust the blur amount as needed */
    z-index: -1; /* Place the pseudo-element behind the content */
}

.login_box{
    background-color: #000;
    position: relative;
    max-width: 900px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

.login_box::before{
    content: "";
    position: absolute;
    width: 52%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../images/night_street.webp);
    background-position: center;
    filter: blur(3px); /* Adjust the blur amount as needed */
    pointer-events: none;
    opacity: .2;
}

.login_box img{
    display: block;
    max-width: 250px;
    margin: 5rem auto;
}

.login_box form{
    padding: 5rem 3rem;
    background-color: #fff;
}

.login_box h2{
    font-weight: bold;
}

.login_box h4{
    font-size: .9rem;
    font-weight: normal;
    color: #999;
    margin-bottom: 2rem;
}

.login_box form button.btn{
    margin: 30px auto 0;
}

.login_box form .form-control{
    padding: 1.15rem 1rem .85rem;
}

.login_box form label{
    padding: 1rem;
}

.login_box form .form-label-group input:not(:placeholder-shown) ~ label{
    font-size: .6rem;
}

.form-label-group.password input{
    padding-right: 50px;
    position: relative;
}

.form-label-group.password .btn{
    margin: 0 !important;
    position: absolute;
    right: 15px;
    font-size: 1rem;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    padding: 0;
    box-shadow: none !important;
}

.form-switch{
    padding-left: 0;
}

.form-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.form-switch label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.form-switch label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
    transition: 0.3s;
}

.form-switch input:checked+label {
    background: var(--green);
}

.form-switch input:checked+label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.form-switch label:active:after {
    width: 30px;
}

.navbar-nav .dropdown-menu{
    border-radius: 10px;
}

.navbar-nav .dropdown-menu .dropdown-item{
    font-size: .8rem;
}

.navbar-nav .dropdown-menu .dropdown-item:active{
    background-color: var(--green);
}

.sn-list-item{
    transition: all 0.3s ease;
}

.sn-list-item:hover{
    background-color: rgba(52, 213, 0, 0.1) !important;
    transform: translateX(5px);
}

@media screen and (max-width: 768px){
    .login_bg{
        overflow: hidden;
    }

    .sidebar .nav-item .nav-link span{
        display: none;
    }

    .login_box form{
        padding: 3rem 2rem;
    }

    .sidebar .nav-item .nav-link i{
        margin-right: 0;
    }

    .sidebar .sidebar-header .navbar-brand img,
    .sidebar .sidebar-header .navbar-brand{
        max-width: 100% !important;
        width: 100%;
        margin: 0;
    }

    .sidebar .nav-item.active .nav-link:before, .sidebar .nav-item:hover .nav-link:before{
        width: 80%;
    }

    .sidebar .nav-item .nav-link:before{
        left: 10%;
    }

    #myPieChart{
        min-height: 300px;
    }
}

a:hover {
    text-decoration: none !important;
}

td, th {
    border: 1px solid #000;
    text-align: left;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
}

.text-gray {
    color: #777;
}

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

body {
    counter-reset: page;
}
.page2 {
    page-break-before: always;
}

.page2 ol, .page2 ul {
    padding-inline-start: 20px;
}

.page2 ol li {
    margin-bottom: 1rem;
}

.page2 ul {
    list-style-type: disc;
}

.page2 ul li {
    margin-bottom: 0.25rem;
}


@media print {
    /* html, body {
        display: none;
    } */
    

    .sidebar, .breadcrumb, .copyright, .navbar, footer, .scroll-to-top {
        display: none;
    }

    .noprint {
        display: none;
    }

    .detail_box {
        display: block;
        padding: 0 !important;
    }

    /* Set A4 dimensions */
    @page {
        size: A4;
        margin: -2em -3em 0 -3.5em; /* Set margin to 0 for A4 sizing */
    }
    .page2 {
        page-break-before: always;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        padding-top: 10rem;
    }


}

.select2-container .select2-selection--single{
    display: flex !important;
}

/* Select2 Scrollable Dropdown */
.select2-dropdown-scrollable.select2-dropdown {
    max-height: 300px !important;
}
.select2-dropdown-scrollable .select2-results {
    max-height: 250px;
    overflow-y: auto;
}