@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #f1f2f4;
    font-size: 14px;
    line-height: 125%;
    font-weight: 400;
    color: #222;
}

a {
    text-decoration: none;
    color: #da9d43;
    cursor: pointer;
}

a:hover {
    color: #e2b36c;
}

h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.text-right {
    text-align: right;
}

.btn, input.form-control{height: 38px;}
.btn.btn-sm{height: auto;}

.btn.btn-primary {
    color: #FFFFFF;
    background-color: #da9d43;
    border-color: #cf943a;
}

.btn.btn-primary:hover {
    background-color: #cf943a;
}

.btn-outline-primary {
    color: #da9d43;
    border-color: #da9d43;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #da9d43;
    border-color: #da9d43;
}
.btn:focus,
.form-control:focus,
.form-check-input:focus, .form-select:focus {
    outline: none;
    box-shadow: none;
}
/* .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
} */

.btn.btn-light-primary {
    color: #da9d43;
    background-color: #e2b36c;
    border-color: transparent;
}

.btn.btn-light-primary:hover {
    background: #da9d43;
    color: #FFFFFF;
    border-color: transparent;
}

.section{transition: none;}

.form-group label{width: 100%;}

.marb32 {
    margin-bottom: 32px;
}
.mar8{margin-right: 8px;}

.mt25{ margin-top: 25px;}



.login-card-body{padding: 32px 16px;}
.login-page{display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #333;}
.login-box, .register-box {
    width: 360px;
}
.login-logo{width: 100%;  text-align: center; font-size: 24px; font-weight: 400; margin-bottom: 8px;}
.login-logo a{display: flex; align-items: center; justify-content: center; display: block;}
.login-logo h4{color: #fff; font-size: 30px; margin-top: 8px; font-weight: 700; text-transform: uppercase; display: block;}
.login-logo h4 span{color: #da9d43;}

.login-box .col-4{ text-align: right;margin-bottom: 8px; }
.login-box .card{background: #333; color: #fff; border: none;}
.login-box .input-group-text{background: #333; color: #da9d43; border: 1px solid #fff; border-radius: 0 .25rem .25rem 0;}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    box-shadow: 0px 1px 10px rgb(1 41 112 / 5%);
    background-color: #fff;
    padding-left: 20px;
    display: flex;
    align-items: center
}

.logo img {
    max-height: 26px;
    margin-right: 6px;
}

.logo >span {
    font-size: 24px;
    font-weight: 700;
    color: #da9d43;
    font-family: "Nunito", sans-serif;
}
.logo >span >span{
    color: #333;
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: #da9d43;
}

.header-nav ul {
    list-style: none;
    margin: 0;
}

.header-nav ul li {
    position: relative;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #da9d43;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.nav-link  span{color: #333;}

.nav-link:focus,
.nav-link:hover {
    color: #da9d43;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #da9d43;
}

.header-nav .dropdown-menu {
    padding: 0;
}

.header-nav .dropdown-item {
    padding: 0.5rem 1rem;
}

.header-nav .badge-number {
    position: absolute;
    inset: 4px 6px auto auto;
    font-weight: normal;
    font-size: 11px;
    padding: 3px 6px;
}

.header-nav .nav-icon {
    font-size: 20px;
    color: #da9d43;
}

.header-nav .nav-icon {
    font-size: 20px;
    color: #da9d43;
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 275px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    box-shadow: 0px 0px 10px rgb(1 41 112 / 5%);
    background-color: #333;
    display: flex;
    flex-direction: column;
}

.copyText{color: #ccc; margin-top: auto; font-size: 11px;}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 5px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: 0.3;
    /* background: #e2b36c; */
    padding: 10px 15px;
    border-radius: 4px;
}
.sidebar-nav .nav-link span{color: #fff;}
.sidebar-nav .nav-link:hover,
.sidebar-nav li.active .nav-link {
    color: #fff;
    background: #da9d43;
}

.sidebar-nav .nav-link.collapsed {
    color: #da9d43;
    background: #fff;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    margin-right: 10px;
    color: #fff;
}

#main {
    margin-top: 60px;
    padding: 20px 30px;
    transition: all 0.3s;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin:8px 0 1rem;
    list-style: none;
    font-size: 14px;
    color: #e2b36c;
    font-weight: 600;
}

.breadcrumb a {
    color: #da9d43;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #da9d43;
}

.breadcrumb-item.active {
    color: #ebbd7a;
}

.card-primary .card-header {
    background: #f8f2d1;
    min-height: 55px;
}

.card-title {
    margin: 4px 0;
}

.card.card-custom {
    -webkit-box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
    box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);

}





.dInfo {
    display: flex;
    padding: 32px;
}

.dInfo .info {
    width: 50%;
    text-align: center;
}

.dInfo .info h2 {
    font-size: 50px;
    color: #da9d43;
    font-weight: 600;
}

.dInfo .info span {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.dInfo i {
    font-size: 70px;
    margin: 0 auto;
    color: #da9d43;
}

.table th,
.table td {
    /* white-space: nowrap; */
    vertical-align: middle;
}
.table td{
    height: 48px;
}
.ulHeader {
    display: flex;
    align-items: center;
}

.ulHeader form {
    margin-left: auto;
}

.ulHeader .searchWrap {
    margin-right: 8px;
}

.aUser {
    font-size: 24px;
}

.mr8 {
    margin-right: 8px;
}

.form-switch .form-check-input {
    font-size: 22px;
    margin-left: -30px;
}

.form-check-input:checked {
    background-color: #da9d43;
    border-color: #da9d43;
}

.form-check-input:focus {
    border-color: #da9d43;
}

/* .form-switch .form-check-input:focus{} */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    margin-bottom: 8px;
}

.paginationPan{text-align: right;}
.paginationPan .pagination{display: inline-flex; }
.paginationPan .pagination a{color: #da9d43; font-weight: 600;}

.paginationPan .page-link:focus { z-index: 3; color: #da9d43; background-color: #f8f2d1;  outline: 0; box-shadow: none;}
.page-link:hover{background-color: #f8f2d1;}
.page-item.active .page-link{background-color: #da9d43; border-color: #f8f2d1;}

.pagination{margin-bottom: 0;}

.modal-header{background: #f8f2d1;}
.delMod{position: relative; padding: 0 0 16px 0; text-align: center;}
/* .delMod .btn-close{position: absolute; right: 8px; top: 8px;} */
.delMod .modal-header{background: none; border: none; padding-bottom: 0;}
.delMod .btnWrap{margin-top: 16px; text-align: center;}
.delMod .modal-body{padding: 16px 32px; font-size: 16px; line-height: 24px;}

.bWord{word-break: break-all; width: 40%;}

.mart16{margin-top: 16px;}
.storeTable{margin-bottom: 0;}
.storeTable .w120{ min-width: 120px;}
.storeTable .w160{ min-width: 160px;}
.storeTable .w200{ min-width: 200px;}
.storeTable .w300{ min-width: 300px;}
.table img{width: 50px; height: 50px; object-fit: cover;}
.table th{ white-space: nowrap;}


.pRow{display: flex;}
.pRow .marr8{margin-right: 8px;}
.pRow .marr16{margin-right: 16px;}


.table .bglgreen td{background-color: #e2b36c!important; color: #da9d43; font-size: 16px; height: auto;}

.table-hover>tbody>tr.bglgreen:hover>*{background-color: #e2b36c!important; --bs-table-accent-bg:#e2b36c;}

.tRight{text-align: right;}
.ubtn{margin-top: 24px; margin-left: auto; display: inline-flex;}

.table-responsive { max-height: 59vh;}
.table>thead{position: sticky; top: 0; background: #fff; }
.table>thead>tr{position: relative;}
.table>thead>tr:after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; background: #da9d43;}
/* .table>thead>tr>th{border-bottom: 2px solid #333;} */
.table>:not(:first-child) {border-top: none;}
.table.nolineTable{margin-bottom: 0;}
.table.nolineTable td{border: none;}

.table tr:last-child td{border-bottom-width: 0;}

.table.table-bordered thead tr, .table.table-bordered thead th{border-width:0} 
.table .tCel-g{ background: #00FF00;}
.table .tCel-r{background: #FF0000; cursor: pointer;}
.table .tCel-y{background: #FFFF33; cursor: pointer;}
.table .tCel-a{ background: #ccc; cursor: pointer;}
.Box-bord{border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px;}



.eBox{display: inline-block; width: 90px; text-align: right; padding: 8px; background-color: #e2b36c;}
.eBox:disabled{background: none;}

.editFild{width: 55px;}

.oneLine{display: flex; align-items: center; justify-content: flex-end;}
.oneLine input{text-align: left;}


.gridWrap{ display: flex; flex-wrap: wrap; }
.gridWrap .item{ width: calc( 25% - 16px); margin: 8px; position: relative; -webkit-box-shadow: 0 0 5px 0 #999999;  box-shadow: 0 0 5px 0 #999999;}
.gridWrap .month_g{ height: 70px; width: calc( 25% - 16px); margin: 8px; position: relative; -webkit-box-shadow: 0 0 1px 0 #999999; box-shadow: 0 0 1px 0 #999999; padding: 8px; background: #00FF00; cursor: pointer;}
.gridWrap .month_r{ height: 70px; width: calc( 25% - 16px); margin: 8px; position: relative; -webkit-box-shadow: 0 0 1px 0 #999999; box-shadow: 0 0 1px 0 #999999; padding: 8px; background: #FF0000; cursor: pointer;}
.gridWrap .month_y{ height: 70px; width: calc( 25% - 16px); margin: 8px; position: relative; -webkit-box-shadow: 0 0 1px 0 #999999; box-shadow: 0 0 1px 0 #999999; padding: 8px; background: #FFFF33; cursor: pointer;}
.gridWrap .month_a{ height: 70px; width: calc( 25% - 16px); margin: 8px; position: relative; -webkit-box-shadow: 0 0 1px 0 #999999; box-shadow: 0 0 1px 0 #999999; padding: 8px; background: #ccc; cursor: pointer;}
.gridWrap .item img{width: 100%; height: 200px; object-fit: cover;}
.gridWrap .item .itemInfo{position: absolute; display: flex; align-items: center; justify-content: space-between; bottom: 0; left: 0; right: 0; padding: 0 8px; background-color: rgba(0, 0, 0, 0.6); color: #fff;}
.gridWrap .item .itemInfo .iiRight{margin: 0 0 0 auto; display: inline-flex; align-items: center;}
.gridWrap .item .itemInfo .iiRight .edit{ color: #da9d43;}
.gridWrap .item .itemInfo .iiRight .delete{color: #e95353;}

.rGroup{padding: 0px 0; display: inline-flex; align-items: center;}
.rGroup .form-check{margin-bottom: 0;}
.lcRight th:last-child, .lcRight td:last-child{ text-align: right;}

.errorTxt{color: red; text-align: center; display: block; margin-top: 8px;}
.subheading{font-size: 14px; line-height: 125%; font-weight: 700; padding-left: 10px;}
.table-center{text-align: center;}
.delMod img{width: 100%;}


@media (min-width: 1200px) {
    .logo {
        width: 240px;
    }

    #main,
    #footer {
        margin-left: 275px;
    }

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -275px;
    }
}

@media (max-width: 1199px) {
    .sidebar {
        left: -275px;
    }

    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (max-width: 900px) {
    .gridWrap .item{ width: calc( 33.33% - 16px);}
}

@media (max-width: 600px) {
    #main {
        padding: 20px;
    }
    .ulHeader form{margin: 0; width: 100%;}
    .ulHeader form .d-flex{ flex-direction: column; }
    .ulHeader .searchWrap{margin: 0 0 8px;}
    .bWord{min-width: 150px;}

    .gridWrap .item{ width: calc( 100% - 16px);}
    .mobCol{flex-direction: column;}
    .mGap{margin-bottom: 32px;}
}