@import url("/assets/css/css2_0.css");

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}
a {
    transition: all 0.3s ease-out 0s;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", sans-serif;
}
.orange-color {color: #072C3A;}
.dark-gray {color:#5B5B5B}

.vertical-menu-bar {display:none;}
.card {margin-bottom: 15px;}

/*Login, Reset Password CSS*/

.auth-body-bg {
    background-color:#F6F4F2;
}
.auth-top-title {
    font-size: 24px;
    font-weight: 600;
    color: #072C3A;
    text-transform: capitalize;
}
.auth-box-wrap {
    background-color: #fff;
    padding:25px 40px 25px 40px;
    border-radius: 15px;
    max-width: 550px;
    margin: 0 auto;
    border: 1px solid #F3F5F9;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
}

.auth-form-group-custom .auti-custom-input-icon {color: #DFC9A6;}
.half-screen-wrap .half-screen {margin-bottom: 0;}
.half-screen img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

body[data-sidebar="dark"] .mm-active .active {
    color: #5B5B5B !important;
  }

.auth-box-wrap .form-control {
    border-radius: 15px;
}

.link-color-orange {color: #DFC9A6 !important;}
.main-btn {
    background-color:#285667;
    border-color: #285667;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Lato", sans-serif;
}
.main-btn:active {
    background-color:#285667 !important;
    border-color: #285667 !important;
}
.main-btn:hover  {
    background-color: #DFC9A6;
    color: #285667;
}
.form-control:focus {
    box-shadow: none;
    border-color: #285667;
}
.form-check-input:checked {
    background-color: #285667;
    border-color: #285667;
}
.form-check-input:focus {box-shadow: none;}

/*Login, Reset Password CSS*/


/*Header and leftside bar css*/

.page-title-box {
    padding-bottom: 15px;
}
.page-title-box h1 {
    text-transform: capitalize;
    color: #5B5B5B;
    font-size: 16px;
    font-weight: 600;
}
.section-title h4 {
    text-transform: capitalize;
    color: #4D4D4D;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
}
.section-title {
    align-items: center;
    padding-bottom: 15px;
}
.viewall-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 8px 23px;
    display: inline-block;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}
.light-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 8px 23px;
    display: inline-block;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}
.viewall-btn:hover {
    background-color: #DBDCDE;
}
.light-btn:hover {
    background-color: #DBDCDE;
}

body[data-sidebar=dark] .navbar-brand-box {background: #fff;}
.navbar-header {height: 90px;}
.app-search span {
    font-size: 20px;
    left: auto;
    color: #5B5B5B;
    right: 13px;
}
.app-search .form-control {
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid #D9D9D9;
}
.app-search .form-control::-webkit-input-placeholder {color:#D9D9D9;}
.app-search .form-control::-moz-placeholder {color:#D9D9D9;}
.app-search .form-control:-ms-input-placeholder {color:#D9D9D9;}
.app-search .form-control:-moz-placeholder {color:#D9D9D9;}
.page-content {padding: calc(90px + 1.5rem) calc(1.5rem / 2) 60px calc(1.5rem / 2);}
.vertical-menu {top: 110px;}
.navbar-header .noti-icon {
    border: 1px solid #D9D9D9 !important;
    height: 40px;
    width: 40px;
    border-radius: 100px;
    line-height: 40px;
    padding: 0;
}
.noti-icon .noti-dot {
    top: 7px;
    background-color:#072C3A;
    height: 8px;
    width: 8px;
    right: 11px;
}
.navbar-header .d-flex {align-items: center;}
.header-profile-user {
    height: 40px;
    width: 40px;
    padding: 0;
}
#page-header-user-dropdown span {
    font-size: 16px;
    font-weight: 500;
    font-family: "Lato", sans-serif;
    color: #000;

}
#page-header-user-dropdown  {
    display: inline-flex;
    align-items: center;
    text-align: left;
    line-height: normal;
}
.top-title-wrap {
    position: relative;
    padding-left: 17px;
}
.top-title-wrap:before {
    position: absolute;
    left: 0;
    background-color: #F3F5F9;
    height: 90px;
    content: "";
    width: 2px;
    top: -10px;
    bottom: 0;
}
header#page-topbar {
    background-color: #fff;
    border-bottom: 2px solid #F3F5F9;
    box-shadow: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
body[data-sidebar=dark] .vertical-menu {
    background: #FFFFFF;
    border-right: 2px solid #F3F5F9;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 15px 15px 0px 0px;
}
body[data-sidebar=dark] #sidebar-menu ul li a {
    color: #5B5B5B;
    font-size: 16px;
    font-weight: 500;
    font-family: "Lato", sans-serif;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    border-radius: 10px;
    transition: none;
    padding: 10px 15px;
}
body[data-sidebar=dark] .menu-title {
    color: #072C3A;
    opacity: 1;
    font-size: 14px;
    font-weight: 400;
    font-family: "Lato", sans-serif;
    padding: 10px 15px !important;
}
body[data-sidebar=dark] #sidebar-menu ul li a img {
    width: 22px;
    top: -2px;
    position: relative;
    margin-right: 7px;
}
#sidebar-menu ul li {
    padding: 1px 10px;
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active a
{
    color: #fff !important;
    background-color: #285667;
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover img,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active a img
{
    filter: brightness(100);
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover i {color: #fff !important;}

.switch-main {
    width: 210px;
    border: 1px solid #F3F5F9;
    box-shadow: 0px 1px 4px rgba(54, 74, 99, 0.20);
    border-radius: 15px;
    padding: 0;
}
.switch-menu-wrap ul {padding: 0;margin: 0;}
.switch-menu-wrap ul li {
    list-style-type: none;
    margin-bottom: 18px;
}
.switch-menu-wrap ul li:last-child {margin-bottom: 0;}
.switch-menu-wrap ul li a {
    display: inline-block;
    vertical-align: middle;
}
.switch-menu-wrap ul li a img {
    margin-right: 13px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -3px;
}
.switch-menu-wrap li a span {
    font-size: 16px;
    color: #5B5B5B;
    font-weight: 500;
    line-height: 19px;
}
.switch-menu-wrap {
    padding: 30px 30px;
}
.top-arrow {position: relative;}
.top-arrow:before {
    display: none;
    position: absolute;
    content: "";
    background: url(../images/top-arrow.svg);
    width: 28px;
    height: 25px;
    top: -20px;
    right: 0;
}
/* .switch-menu-wrap ul li a:hover img, .switch-menu-wrap ul li.active a img {
    filter: invert(61%) sepia(67%) saturate(500%) hue-rotate(345deg) brightness(100%) contrast(100%);
} */
.switch-menu-wrap ul li a:hover span, .switch-menu-wrap ul li.active a span {
    color: #285667;
}
.notification-item img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.notifications-box-wrap {
    width: 370px;
    border: 1px solid #F3F5F9;
    box-shadow: 0px 1px 4px rgba(54, 74, 99, 0.20);
    border-radius: 15px;
}
.noti-header-border {
    border-bottom: 1px solid #D9D9D9;
    padding: 10px 0;
    margin-bottom: 10px;
}
.noti-header {
    padding: 0 25px;
}
.notification-item .d-flex {
    padding: 12px 25px;
}
.noti-footer-wrap {
    display: block;
    padding: 0 25px;
    margin-top: 10px;
}
.noti-footer {
    border-top: 1px solid #D9D9D9;
    padding: 20px 0;
    text-align: center;
}
.noti-footer-wrap .orange-main-btn {
    padding: 8px 40px;
    font-size: 14px;
}
.noti-header h6 {
    font-size: 16px;
    color: #000000;
}


.logout-menu a {
    color: #285667 !important;
}
.logout-menu a i {
    color: #285667 !important;
    opacity: 1 !important;
}
.card-box-main {
    background: #FFFFFF;
    border: 1px solid #F3F5F9;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 15px;
}
.card-box-main .title-cal {
    font-size:40px;
    color:#DFC9A6;
    font-weight: 600;
}
.card-box-title {
    color: #072C3A;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 28px;
}
.orange-main-btn {
    background-color: #285667;
    color: #fff;
    padding: 15px 28px;
    display: inline-block;
    line-height: 22px;
    border-radius: 10px;
    font-size: 18px;
}
.orange-main-btn:hover {
    background-color: #DFC9A6;
    color: #285667;
}

.card-box-main .cardbox-title-wrap {
    min-height: 80px;
}
.cardbox-title-wrap p {
    font-size: 14px;
    color: #5B5B5B;
    margin-top: 3px;
    margin-bottom: 3px;
}
.card-hidden {
    /* background: #D9D9D9; */
    /* background: #EAEFF0; */
    background: #DADFDF;

}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    background-color: transparent !important;
    color: #5B5B5B !important;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 5px 8px 35px;
    line-height: 18px;
}

/*Dashboard Css*/

.logout-menu-dash a {
    color:#285667;
    font-size: 16px;
    font-weight: 500;
}
.logout-menu-dash i {
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}
.w-200 {width: 200px;}
.footer-dashboard {
    left: 0;
    background-color: transparent;
    color: #bab6b6;
    box-shadow: none;
}
.dashboard-top-sec .title {
    font-size: 38px;
    color: #FFFFFF;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}
.visit-website-btn {
    display: inline-block;
    background-color: #fff;
    color: #285667;
    /* text-decoration: underline !important; */
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 500;
    letter-spacing: 0.2px;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
.visit-website-btn:hover {
    background-color: #fff;
    color: #542102;
}
.dashboard-top-sec {
    background-color: #285667;
    padding: 26px 60px 30px 60px;
    border-radius: 15px;
    margin-top: 20px;
}
.owner-wrap .owner-img {
    position: absolute;
    bottom: -30px;
    left: 50%;
    z-index: 9;
}
.dash-left-shape {
    position: absolute;
    left: -50px;
    bottom: -40px;
    z-index: 0;
}
.dash-center-shape {
    position: absolute;
}
.dash-center-shape {
    position: absolute;
    left: 50%;
    bottom: -34px;
    margin-left: -20px;
}
.dash-right-shape {
    position: absolute;
    right: -10px;
    top: -28px;
}

/*Mobile Bottom bar css*/

.bottom-menu-mobile {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    width: 100%;
    padding: 0 10px;
    display: none;
}
.bottom-menu-mobile .bottom-menu-inner {
    background: #fff;
    border-radius: 15px;
    padding: 13px 20px;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border: 1px solid #F3F5F9;
}
.bottom-menu-inner ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}
.bottom-menu-inner ul li {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.bottom-menu-inner ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bottom-menu-inner ul li a img {
    max-width: 20px;
    margin-bottom: 5px;
}
.bottom-menu-inner ul li a span {
    color:#285667;
    font-size: 14px;
    font-weight: 500;
}


/*Evaluator admin design*/

.evaluator-his-box .card-body {
    padding: 12px;
}
.evaluator-his-box .img-part{margin-right: 10px;}
.evaluator-his-box .cont-part h4 {
    font-size: 16px;
    font-weight: 500;
    color: #072C3A;
    line-height: 22px;
    margin-bottom: 0;
}
.evaluator-his-box .time-box i {
    color: #DFC9A6;
    vertical-align: middle;
}
.evaluator-his-box .time-box span {
    color: #5B5B5B;
    font-size: 13px;
    font-weight: 400;
}
.evaluator-his-box .d-flex {align-items: center;}
.evaluator-his-box .cont-part {
    padding-right: 10px;
    padding-left: 10px;
}
.eva-avi-headerleft h4 {
    font-size: 22px;
    font-weight: 500;
    color: #5B5B5B;
    margin-bottom: 0;
}
.eva-avi-headerleft h4 span {
    color: #000;
}
.eva-ava-map iframe {
    border-radius: 15px;
    box-shadow: 0px 1px 3px 0px rgba(54, 74, 99, 0.05);
}


.eva-ava-list a {/* Rectangle 1921 */
    background: #FFFFFF;
    border: 1px solid #F3F5F9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px 10px;
}
.eva-ava-list ul li {
    list-style-type: none;
    margin-bottom: 15px;
}
.eva-ava-list ul {
    padding: 0;
    margin: 0;
}
.eva-ava-img {
    width: 47px;
    border: 1px solid rgba(223, 201, 166, 1);
    border-radius: 6px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eva-ava-cont {
    padding: 0 40px 0 20px;
}
.eva-ava-cont h6 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}
.eva-ava-cont p {
    font-size: 12px;
    margin-bottom: 0;
    color: rgba(77, 77, 77, 1);
}
.eva-ava-list a:after {
    content: "\f0142";
    right: 20px;
    position: absolute;
    font: normal normal normal 24px / 1 "Material Design Icons";
    color: rgba(91, 91, 91, 1);
}
.health-box-left h4 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px;
}
.health-box-inner {
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    text-align: center;
}
.bottom-health-bar {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #F6F4F2;
    color: #5B5B5B;
    font-size: 16px;
    padding: 3px 10px;
    display: flex;
}
.bottom-health-bar i{margin-right: 4px;}
.health-box-inner {
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    text-align: center;
    margin-left: auto;
}
.health-box-inner h2 {
    font-size: 40px;
    font-weight: 400;
    color: #DFC9A6;
    margin-bottom: 0;
    padding: 14px 0 13px 0;
}


.popup-inner h2 {
    font-size: 38px;
    font-weight: 700;
    color: #072C3A;
    margin-bottom: 20px;
    margin-top: 20px;
}
.popup-inner {
    text-align: center;
    padding: 50px 40px;
}
.popup-inner p {
    color: #5B5B5B;
    margin-bottom: 25px;
    font-size: 16px;
}
.popup-inner .btn-close {
    position: absolute;
    right: 15px;
    top: 15px;
    border: 1px solid #5B5B5B;
    border-radius: 100%;
    padding: 15px;
}
.send-request-btn {
    background-color: #285667;
    color: #fff;
    padding: 14px 30px 15px 30px;
    display: inline-block;
    font-size: 24px;
    border-radius: 15px;
    margin: 0 10px;
    vertical-align: top;
}
.secret-shopping-btn {
    color: #285667;
    padding:8px 20px 8px 55px;
    display: inline-block;
    font-size: 22px;
    border-radius: 15px;
    border: 1px solid #285667;
    line-height: 24px;
    text-align: left;
    position: relative;
    font-weight: 500;
    margin: 0 10px;
    vertical-align: top;
}
.popup-main .modal-dialog {max-width: 600px;}
.secret-shopping-btn img {
    position: absolute;
    left: 20px;
    top: 20px;
}
.evaluation-main-wrap .eva-avi-headerleft h4 {
    font-size: 18px;
    color: #4D4D4D;
    font-weight: 500;
}
.evaluation-main-wrap .bottom-health-bar {
    border-radius: 0;
}
.monthly-score-title h4 {
    color: #3A3541;
    font-size: 18px;
    font-weight: 600;
}
.monthly-score-title .dropdown .btn, .monthly-score-title .dropdown .btn:hover {
    background: #FFFFFF;
    border: 1px solid #DBDCDE !important;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 8px 20px;
    display: inline-block;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}
.monthly-score-title .dropdown {
    display: inline-block;
    margin-left: 5px;
}
.select-location-wrap h4 {
    color: #5B5B5B;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
}
.select-location-wrap .lo-col-round {
    width: 15px;
    height: 15px;
    border-radius: 100%;
}  
.select-location-wrap ul {
    padding: 0;
    margin: 0;
}

.select-location-wrap ul li {
    list-style-type: none;
    display: flex;
    border: 1px solid #DBDCDE;
    padding: 10px 10px;
    border-radius: 10px;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
}
.select-location-wrap .lo-col-round.green {
    background: #97A675;
}
.select-location-wrap ul li h5 {
    color: #072C3A;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    margin-left: 10px;
}
.loc-min {
    background-color: #F6F4F2;
    width: 24px;
    height: 24px;
    border: 0;
    display: flex;
    align-items: center;
    border-radius: 5px;
    position: absolute;
    right: 2px;
}
.loc-min span {
    width: 10px;
    height: 2px;
    background-color: #4d4d4d;
    display: inline-block;
}
.blue {background-color: #00738C;}
.light-blue {background-color: #81B0B2;}
.add-new-wrap .add-new {
    background: #F6F4F2;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    width: 100%;
    border: none;
    padding: 10px 0;
}
.mobile-footer-wrap {
    display: none;
}
.mob-bar-dropdown ul {
    display: block;
}
.mob-bar-dropdown ul li {
    display: flex;
}
.mob-bar-dropdown .switch-menu-wrap {
    padding: 10px 15px;
}
.mob-bar-dropdown ul li a {
    display: inline-block;
}
.mob-bar-dropdown .notification-item .d-flex {width: 100%;}
.mob-bar-dropdown .notification-item img {max-width: 40px;}
.bottom-menu-inner ul li .mob-pro-dropdown a {display: inline-block;}

body[data-sidebar=dark] #sidebar-menu.mm-active ul li ul.sub-menu li a.active {
    color: #dfc9a6 !important;
}
.footer {background-color: transparent;}

.card {border-radius: 15px;}

.active > .page-link, .page-link.active {background-color: #285667;color: #fff !important;}
.page-link {color: #285667;}
.page-link:hover {color: #285667;}
.spinner .spin-icon {color: #285667;}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: #285667;
    border-color: var(--bs-btn-active-border-color);
  }
  .nav-link:focus, .nav-link:hover {
    color: #285667;
  }

/*Eelements css*/


.big-size .form-check-input[type=checkbox] {
    width: 20px;
    height: 20px;
}
.offcanvas-footer {
    display: flex;
    /*justify-content: flex-end;*/
    align-items: center;
    padding: 15px;
    border-top: 1px solid #f1f5f7;   
}
.offcanvas-footer button {
    margin: 0 5px;
}

/*@media (max-width: 480px) {
    .offcanvas-footer {
        margin-bottom: 22%
    }
}
*/
/*.filter-fixed-btn {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1049;
    background-color: #285667;
    border-color: #285667;
}*/
.filter-fixed-btn:hover {background-color: #DFC9A6;}
.filter-fixed-btn:hover i {color: #285667;}
.filter-fixed-btn i {
    font-size: 20px;
}
.btn-primary {
    background-color: #285667;
    border-color: #285667;
}
.btn-primary:hover {
    background-color:#DFC9A6;
    color: #285667;
    border-color: #DFC9A6;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background-color: #285667;}
.nav-tabs-custom .nav-item .nav-link::after {background: #285667;}
.nav-tabs-custom .nav-item .nav-link.active {color:#285667;}

.mob-pro-dropdown {padding-top: 0.5rem; padding-bottom: 0.5rem;}




.floating-overlay {
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 9998;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.floating-bar-enabled .floating-overlay {
    display: block;
}


.req-ev-mob {display: none;}
.ev-map-listview button {box-shadow: none;border: none;}
.top-title-wrap button {opacity: 0;}
/*.offcanvas {z-index: 99999;}
*/


/*Drag & Drop CSS start*/

.form-header-bor {
    border: 1px solid #EAEFF0;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    background-color: #fff;
}
.form-header-bor .form-box-n {
    background-color: #EAEFF0;
    border-radius: 10px;
    color: #5B5B5B;
    font-size: 18px;
    font-weight: 600;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.form-header-bor h3 {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    color: #5B5B5B;
    padding-left: 15px;
}
.form-header-bor .form-header-bor-inner {
    display: flex;
    align-items: center;
    padding: 15px;
    width: 100%;
}

.form-header-bor.active {
    background: linear-gradient(0deg, rgba(40, 86, 103, 0.1), rgba(40, 86, 103, 0.1));
    border: 1px solid #285667;
}
.form-header-bor.active .form-box-n {
    background-color: #285667;
    color: #fff;
}

.select-create-form .icon {
    background-color: #285667;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 10px;
}
.select-create-form h4 {
    margin-bottom: 0;
    font-size: 18px;
    color: #5B5B5B;
    font-weight: 600;
    margin-top: 10px;
}
.select-create-form .card-body {
    padding: 0;
}
.select-create-box {
    padding: 1.25rem !important;
    display: flex;
    height: 250px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.popup-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #3A3541;
    margin-bottom: 0;
}
.popup-inner.popup-inner-wrap {
    padding: 15px 20px 25px 20px;
}

.popup-inner-wrap .popup-header button {
    position: relative;
    top: 0;
    right: 0;
}
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.select-field-wrap label {
    display: block;
    color: #7D7D7D;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}
.select-field-wrap input, .select-field-wrap select {
    width: 100%;
    display: block;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 15px;
    height: 50px;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 500;
}
.select-field-wrap {
    margin-bottom: 10px;
}
.popup-inner-wrap .send-request-btn {
    width: 100%;
    font-size: 16px;
    margin: 20px 0 0 0;
    font-weight: 600;
}


.select-field-wrap input:focus,
.select-field-wrap select:focus {
    outline: none;
}
.template-box {
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 15px;
    padding: 20px 20px;
    text-align: left;
    margin-bottom: 20px;
}
.template-box h3 {
    color: #072C3A;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}
.template-box p {
    color: #5B5B5B;
    font-size: 14px;
    line-height: normal;
    font-weight: 500;
    margin-bottom: 20px;
}
.select-template-btn {
    padding: 8px 20px;
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    border-radius: 50px;
    color: #5B5B5B;
    font-size: 14px;
    display: flex;
    width: auto;
    justify-content: center;
    align-items: center;
    max-width: 170px;
}
.select-template-btn i {
    font-size: 21px;
    margin-right: 8px;
}
.template-box.active {
    background: #EAEFF0;
    border: 1px solid #285667;
}
.select-template-btn:hover {
    background-color: #285667;
    color: #fff;
}
.select-form-left {
    padding-right: 20px;
}
.select-preview-box {
    background: #EAEFF0;
    border-radius: 15px;
    padding: 20px 30px;
    border: 1px solid #285667;
}
.preview-box-field {
    margin-bottom: 20px;
}
.preview-box-field label {
    color: #5B5B5B;
    font-size: 16px;
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
    text-align: left;
}
.preview-box-field input {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    display: block;
}
.preview-box-field textarea {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    border-radius: 20px;
    padding: 10px 20px;
    width: 100%;
    display: block;
    min-height: 200px;
}
.preview-box-field input:focus,
.preview-box-field textarea:focus
{outline: none;}

.form-header-bor.filled {
    background-color: #EAEFF0;
}
.form-header-bor.filled .form-box-n {
    background-color: #285667;
    color: #fff;
}
.next-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 5px 9px 5px 13px;
    font-size: 14px;
    font-weight: 500;
    color: #5B5B5B;
    vertical-align: middle;
    display: inline-flex;
    line-height: 24px;
}
.next-btn i {
    line-height: normal;
    font-size: 21px;
    margin-left: 0px;
}

.prev-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 5px 13px 5px 9px;
    font-size: 14px;
    font-weight: 500;
    color: #5B5B5B;
    vertical-align: middle;
    line-height: 24px;
    display: inline-flex;
}
.prev-btn i {
    line-height: normal;
    font-size: 21px;
    margin-left: 0px;
}

.section-header-right {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}
.section-header-right h6 {
    color: #285667;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}
.section-header-right select {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 9px 10px;
}
.section-header-right select:focus {outline: none;}
.section-header h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 22px;
    color: #072C3A;
    margin-bottom: 0;
}
.section-header {
    margin-bottom: 15px;
    align-items: center;
}
.preview-form-header h2 {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #285667;
    margin-bottom: 0;
}
.preview-form-box {
    background-color: #F8F9FA;
    border-radius: 10px;
    padding: 15px 20px;
}
.preview-form-header {
    margin-bottom: 15px;
}
.form-field label {
    font-weight: 400;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
    color: #000;
}
.form-field input {
    width: 100%;
    background-color: #EAEFF0;
    border: 1px solid #DBDCDE;
    border-radius: 10px;
    padding: 10px 15px;
    color: #5B5B5B;
    font-size: 16px;
    font-weight: 400;
}
.form-field input:focus {
    outline: none;
}
.form-field textarea {
    width: 100%;
    background-color: #EAEFF0;
    border: 1px solid #DBDCDE;
    border-radius: 10px;
    padding: 10px 15px;
    color: #5B5B5B;
    font-size: 16px;
    font-weight: 400;
    min-height: 120px;
}
.form-field textarea:focus {
    outline: none;
}
.receipt-image-wrap {
    position: relative;
    display: inline-block;
    right:8%;
}
.manage-receipt-btn {
    background: #285667;
    color: white;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 6px 20px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    width: 170px;
    margin: 0 auto;
}
.receipt-view-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 100%;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #DBDCDE;
}
.preview-form-field h6 {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 400;
}
.preview-form-field {
    margin-bottom: 15px;
}
.preview-form-field label.form-check-label {
    font-weight: 500;
    color: #5B5B5B;
    font-size: 16px;
    vertical-align: top;
}

.preview-form-btns {
    text-align: center;
    padding-top: 17px;
}
.back-btn {
    border: 1px solid #EAEFF0;
    border-radius: 50px;
    color: #5B5B5B;
    padding: 10px 40px;
    display: inline-block;
    font-size: 14px;
    background-color: #fff;
    margin: 0 5px;
}
.save-btn {
    border: 1px solid #EAEFF0;
    background-color: #285667;
    border-radius: 50px;
    color: #fff;
    padding: 10px 40px;
    display: inline-block;
    font-size: 14px;
    margin: 0 5px;
}
.upload-img-btn {
    background: #285667;
    color: white;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 6px 20px;
}
.photo-selection-header h4 {
    font-size: 18px;
    color: #285667;
    font-weight: 600;
    margin-bottom: 0;
}

.photo-secbox-inner h5 {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #5B5B5B;
    margin-bottom: 0;
    margin-top: 10px;
}
.photo-view-btn {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #DBDCDE;
    position: absolute;
    top: 5px;
    right: 20px;
}
.photo-secbox-inner {
    position: relative;
    width: 20%;
}
.photo-secbox-inner img {
    width: 100%;
}
.photo-selection-header {
    margin-bottom: 15px;
}
.photo-view-btn i {
    color: #285667;
}
.photo-view-btn a {
    height: 35px;
    width: 35px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
}
.receipt-view-btn a {
    height: 40px;
    width: 40px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
}
.receipt-view-btn i {color: #285667;}





.upload-options label {
    margin-top: 0 !important;
    width: auto !important;
}
.js--image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.js--image-preview {
    width: 80px;
    height: 80px;
    position: relative;
    background-color: #e0e0e0;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.js--image-preview button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
}
.upload-options {
    margin-top: 10px;
    margin-bottom: 10px;
}
.upload-options input {
    display: none;
}
.build-form-header {
    padding: 20px 20px !important;
}
.build-form-header .back-btn {
    padding: 10px 20px;
    line-height: 22px;
    font-size: 14px;
    color: #5B5B5B;
    width: 120px;
    font-weight: 500;
    transition: all 0.3s ease-out 0s;
}
.build-form-header .back-btn i {
    margin-right: 5px;
    vertical-align: middle;
    line-height: normal;
    
}
.build-form-header .save-btn {
    padding: 10px 20px;
    line-height: 22px;
    font-weight: 500;
    width: 120px;
    font-size: 14px;
    transition: all 0.3s ease-out 0s;
}
.build-form-header .back-btn:hover {
    background-color: #285667;
    color: #fff;
}
.build-form-header .save-btn:hover {
    border: 1px solid #EAEFF0;
    color: #5B5B5B;
    background-color: #fff;
}
.build-form-header h3 {
    color: #5B5B5B;
    font-weight: 600;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 7px;
}
.build-form-header p {
    color: #5B5B5B;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 0;
}
.buildform-preview-wrap .card-body {
    padding: 20px 30px;
}
.buildform-preview-wrap .section-header-right {
    margin-bottom: 15px;
}

.form-management-left {
    padding: 20px 20px;
}
.form-management-left .section-lists {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}
.section-lists ul {
    padding: 0;
    margin-bottom: 0;
    width: calc(100% + 60px);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.section-lists ul li {
    list-style-type: none;
}
.section-add-icon {
    width: 50px;
    text-align: center;
}
.section-add-icon i {
    font-size: 25px;
    color: #5B5B5B;
}
.section-lists ul li a {
    color: #285667;
    font-size: 14px;
    font-weight: 600;
}





.fielddrag-box-top {
    display: flex;
    width: 100%;
}
.fielddrag-box-topleft {
    width: 50%;
    display: flex;
    align-items: center;
}
.fielddrag-box-topright {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.field-drag-box {
    background-color: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 13px 15px 15px 12px;
    margin-bottom: 15px;
}
.fielddrag-box-topleft h6 {
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 16px;
    color: #5B5B5B;
    font-weight: 600;
}

.edit-field {
    border: 1px solid #EAEFF0;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    margin-right: 14px;
}
.edit-field i {
    font-size: 18px;
    color: #285667;
    line-height: 30px;
}
.down-arrow {
    margin-left: 8px;
}


.fielddrag-box-bottom {
    border-top: 1px solid #EAEFF0;
    padding-top: 15px;
    margin-top: 10px;
    display: none;
}
.down-arrow.uparrow img {
    transform: rotate(-60deg);
}
.fielddrag-bottom-up-left h6 {
    color: #7D7D7D;
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 600;
}
.fielddrag-bottom-down input {
    /* border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 13px 12px;
    width: 100%; */
}
.fielddrag-bottom-down input:focus {outline: none;}
.fielddrag-bottom-down {
    margin-top: 15px;
    display: block;
}
.field-drag-box.border-color {
   border-color: #285667;
}
.fielddrag-bottom-up-right .form-check-label {
    color: #5B5B5B;
    font-size: 14px;
    font-weight: 500;
}
.fielddrag-bottom-up {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fielddrag-bottom-up-left {
    width: 40%;
}
.fielddrag-bottom-up-right {
    width: 60%;
    display: flex;
    justify-content: end;
}
.fielddrag-bottom-up-right .form-check {
    padding-right: 10px;
}
.icon-wrap {
    border-left: 1px solid #cdcdcd;
    padding: 0 5px;
    border-right: 1px solid #cdcdcd;
}
.more-icon {
    padding-left: 5px;
    line-height: 24px;
    vertical-align: middle;
}
.icon-wrap span {
    margin: 0 2px;
}
.icon-wrap i {
    font-size: 16px;
}
.new-que-btn {
    padding: 16px 20px;
    line-height: 22px;
    font-weight: 500;
    font-size: 18px;
    transition: all 0.3s ease-out 0s;
    border: 1px solid #EAEFF0;
    background-color: #285667;
    border-radius: 50px;
    color: #fff;
    display: block;
    width: 100%;
}
.new-que-btn:hover {
    border: 1px solid #EAEFF0;
    color: #5B5B5B;
    background-color: #fff;
}
.sec-adddelete-wrap {
    display: flex;
}
.section-delet-icon i {
    font-size: 25px;
    color: #285667;
}
.section-delet-icon {
    position: relative;
}
.section-delet-icon .dropdown-item i {
    font-size: 20px;
    line-height: normal;
    line-height: 26px;
}
.section-delet-icon .dropdown-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    padding: 4px 7px;
    line-height: 24px;
}
.section-delet-icon .dropdown-menu {
    padding: 6px 7px;
}
.fielddrag-box-topleft input {width: 100%;}


/*Drag & Drop CSS end*/


.select-all-dropdown button {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.select-all-dropdown .dropdown-menu {
    width: 100%;
}
.select-all-dropdown .dropdown-menu a i {
    margin-right: 10px;
}




.checkbox-create-box {
    display: none;
}
.checkbox-create-box input {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    display: block;
}
.Checkboxcont {
    padding: 0;
    margin-top: 10px;
}

.Checkboxcont .text-delete-wrapper {
    list-style-type: none;
    background-color: #EAEFF0;
    display: inline-block;
    margin-right: 10px;
    padding: 2px 7px 4px 10px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
}
.Checkboxcont .text-delete-wrapper .delete-btn {
    margin-left: 10px;
    background-color: #cccccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.checkbox-create-box .tag .tag-input {
    width: 60px;
    display: inline-block;
    padding: 4px 10px;
    margin-right: 5px;
}

.checkbox-create-box .tag .add-icon {
    font-size: 22px;
    color: #848080;
    margin-left: 10px;
    font-weight: bold;
}
.checkbox-create-box .tag {
    margin-bottom: 3px;
}

.checkbox-container {
    display: inline-block;
    /*width: 95px;*/
}

.tag-label {
    font-weight: 500;
    color: #5B5B5B;
    font-size: 14px;
}

.tag-checkbox {
    display: inline-block !important;
    width: auto !important;
    margin-right: 4px;
}

.tag-checkbox:checked {
    background-color: #5664d2;
    border-color: #5664d2;
}



/**/
.form-management-left .section-lists {
    display: block;
    width: 100%;
}
.section-header-right {
    display: inline-block;
    width: 100%;
}
.sec-adddelete-wrap {
    display: inline-block;
    width: 70px;
    text-align: right;
    vertical-align: middle;
}
.section-header-right h6 {
    display: inline-block;
    margin-right: 5px;
}
.section-header-right select {
    margin-right: 10px;
    margin-bottom: 10px;
}
.prev-btn {
    margin-right: 10px;
}
.section-add-icon {
    width: auto;
    display: inline-flex;
}
.section-delet-icon {
    display: inline-block;
    width: auto;
}
.buildform-preview-wrap .section-header-right {width: 100%;}

.preview-box-field select {
    background: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 9px 10px;
}

.preview-box-field select:focus {
    outline: none;
}


.section-box-top {
    display: flex;
    width: 100%;
}
.section-drag-box {
    background-color: #FFFFFF;
    border: 1px solid #DBDCDE;
    box-shadow: 0px 1px 3px rgba(54, 74, 99, 0.05);
    border-radius: 10px;
    padding: 13px 15px 15px 12px;
    margin-bottom: 15px;
}
.sectiondrag-box-topleft {
    width: 50%;
    display: flex;
    align-items: center;
}
.sectiondrag-box-topleft h6 {
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 16px;
    color: #5B5B5B;
    font-weight: 600;
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.course-grid {
    display: flex;
    flex-direction: column; /* Stack cards vertically on mobile */
    gap: 1rem; /* Space between cards */
}

@media (min-width: 768px) {
    .course-grid {
        flex-direction: row; /* Side by side on larger screens */
        flex-wrap: wrap; /* Allow wrapping */
    }
}

.filter-fixed-btn {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 120px;
    padding: 12px 10px;
    background-color: #285667;
    border: none;
    border-radius: 8px 0 0 8px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 1060;
    transition: right 0.3s ease-in-out;
}

.filter-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}

.filter-fixed-btn i {
    transform: rotate(-90deg);
    font-size: 20px;
}
.offcanvas {
    position: fixed;
    top: 0;
    right: -275px; /* Hidden by default */
    width: 275px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1050;
    overflow-y: auto;
}
    .offcanvas.show {
        right: 0;
    }

/* Move button when panel is open */
.filter-fixed-btn.shifted {
    right: 400px;
}

/* Shift full layout-wrapper when offcanvas is open */
body.shifted #layout-wrapper {
    margin-right: 400px;
    transition: margin-right 0.3s ease-in-out;
}
body.shifted #page-topbar {
    margin-right: 410px;
}