/* Styling for error messages */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
*{
    --basecolor: #007564;
    --basecolor2: #9a692e;
}
body{
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: normal;
    color: #141312;
}
a {
    color: var(--basecolor);
    text-decoration: none;
    transition: all .3s;
}
.link-primary {
    color: var(--basecolor) !important;
    text-decoration-color: var(--basecolor, var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover {
    color: var(--basecolor2) !important;
}
.error-block {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #fd625e;
}
.login-page .pb-lg-20 {
    padding-bottom: 0rem !important;
}
.btn.btn-primary {
    color: var(--basecolor);
    border-color: var(--basecolor);
    background-color: var(--basecolor);
    color: #fff;
}
.btn-check:active+.btn.btn-primary, .btn-check:checked+.btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show>.btn.btn-primary {
    color: #9a692e;
    border-color: #9a692e;
    background-color: #9a692e !important;
    color: #fff;
}
#kt_app_sidebar_logo .app-sidebar-logo-default {
    height: 100px !important;
}
.app-sidebar .menu .menu-item .menu-link.active {
    background-color: #007564 !important;
    color: #fff !important;
}
.app-sidebar .menu .menu-item .menu-link.active .menu-title {
    color: #fff !important;
}
.app-sidebar .menu .menu-item .menu-link.active .menu-icon, .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon, .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: #fff !important;
}
.app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: #fff !important;
}
.btn-check:active+.btn.btn-active-color-primary .svg-icon, .btn-check:active+.btn.btn-active-color-primary i, .btn-check:checked+.btn.btn-active-color-primary .svg-icon, .btn-check:checked+.btn.btn-active-color-primary i, .btn.btn-active-color-primary.active .svg-icon, .btn.btn-active-color-primary.active i, .btn.btn-active-color-primary.show .svg-icon, .btn.btn-active-color-primary.show i, .btn.btn-active-color-primary:active:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:active:not(.btn-active) i, .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:focus:not(.btn-active) i, .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:hover:not(.btn-active) i, .show>.btn.btn-active-color-primary .svg-icon, .show>.btn.btn-active-color-primary i {
    color: #2F3E56 !important;
}
.app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid #f1f1f4 !important;
}
.btn-check:active+.btn.btn-outline.btn-outline-dark, .btn-check:checked+.btn.btn-outline.btn-outline-dark, .btn.btn-outline.btn-outline-dark.active, .btn.btn-outline.btn-outline-dark.show, .btn.btn-outline.btn-outline-dark:active:not(.btn-active), .btn.btn-outline.btn-outline-dark:focus:not(.btn-active), .btn.btn-outline.btn-outline-dark:hover:not(.btn-active), .show>.btn.btn-outline.btn-outline-dark {
    color: #fff;
    border-color: #2F3E56 !important;
    background-color: #2F3E56 !important;
}
.btn-check:active+.btn.btn-outline.btn-outline-dark .svg-icon, .btn-check:active+.btn.btn-outline.btn-outline-dark i, .btn-check:checked+.btn.btn-outline.btn-outline-dark .svg-icon, .btn-check:checked+.btn.btn-outline.btn-outline-dark i, .btn.btn-outline.btn-outline-dark.active .svg-icon, .btn.btn-outline.btn-outline-dark.active i, .btn.btn-outline.btn-outline-dark.show .svg-icon, .btn.btn-outline.btn-outline-dark.show i, .btn.btn-outline.btn-outline-dark:active:not(.btn-active) .svg-icon, .btn.btn-outline.btn-outline-dark:active:not(.btn-active) i, .btn.btn-outline.btn-outline-dark:focus:not(.btn-active) .svg-icon, .btn.btn-outline.btn-outline-dark:focus:not(.btn-active) i, .btn.btn-outline.btn-outline-dark:hover:not(.btn-active) .svg-icon, .btn.btn-outline.btn-outline-dark:hover:not(.btn-active) i, .show>.btn.btn-outline.btn-outline-dark .svg-icon, .show>.btn.btn-outline.btn-outline-dark i {
    color: #fff;
}
.tool-tip-cls {
    cursor: pointer;
}
.bg-body {
    background-color: #f3bf8b  !important;
}
.form-check-label {
    color: #000000;
}
[data-kt-app-layout="light-sidebar"] .app-sidebar {
    background: linear-gradient(to bottom, #f1b87e, #ffffff);
    border-right: none; /* optional: remove or customize as needed */
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #5d5959;
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #007564;
}
.app-sidebar-logo-minimize{
    height: 42px !important;
}
[data-kt-app-layout=light-sidebar] .app-header-menu .menu>.menu-item.here>.menu-link .menu-title {
        color: #000000;
}
.app-header-menu .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title, .app-header-menu .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: #007564;
}
.btn.btn-light-primary {
    color: #fcfcfc;
    border-color: #9a692d;
    background-color: #9a692d;
}
.btn-check:active+.btn.btn-light-primary, .btn-check:checked+.btn.btn-light-primary, .btn.btn-light-primary.active, .btn.btn-light-primary.show, .btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .show>.btn.btn-light-primary {
    color: var(--bs-primary-inverse);
    border-color: #007564;
    background-color: #007564 !important;
}
.btn.btn-light-primary .svg-icon, .btn.btn-light-primary i {
    color: #ffff;
}
[data-kt-app-layout=light-sidebar]:not([data-kt-app-header-fixed=true]) .app-header {
        background: linear-gradient(to bottom, #f1b87e, #f0e1d1);
}
.text-muted {
    color: #6e727d !important;
}
.app-header-menu .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon, .app-header-menu .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .app-header-menu .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, .app-header-menu .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon, .app-header-menu .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .app-header-menu .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #007564;
}
.rectangleImagePreview,
.squareImagePreview {
    cursor: crosshair;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.invalid-feedback-custom {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #fd625e;
}
.logout-btn.nav-link.disabled {
    color: gray;
    cursor: not-allowed;
}
.squareImagePreview {
    width: 500px;
    height: 500px;
    background: url(../images/noBgSquare.png) 0 0 / contain no-repeat;
}
.rectangleImagePreview img,
.squareImagePreview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rectangleImagePreview {
    width: 800px;
    height: 300px;
    background: url(../images/noBgRectangle.png) 0 0 / contain no-repeat;
}
.pointer,
.pointer .pin {
    border-radius: 50%;
    height: 25px;
    width: 25px;
    position: absolute;
}
.pointer {
    left: 17%;
    top: 49%;
}
.pointer .pin {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #313533;
    right: 50%;
    top: -50%;
}
/* AFFILIATE PAGE */
.Affiliate-App .bg-body{
    width: 100% !important;
    max-width: 475px;
    height: auto;
    margin: auto;
    padding: 20px !important;
    background: #fff !important;
}
@media only screen and (min-width: 992px) {
    .Affiliate-App .bg-body{
        padding: 40px 60px 40px 40px !important;
        max-width: 575px;
    }
}
@media only screen and (min-width: 1551px) {
    .Affiliate-App .bg-body{
        max-width: 800px;
        padding: 60px 80px 60px 60px !important;
    }
}
.Affiliate-App .bg-body .flex-column{
    padding: 0 !important;
}
.Affiliate-App form h1{
    display: block;
    width: 100%;
    font-weight: 500 !important;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: left;
}
@media only screen and (min-width: 576px){
    .Affiliate-App form h1{
        font-size: 20px
    }
}
@media only screen and (min-width: 768px){
    .Affiliate-App form h1{
        font-size: 25px
    }
}
@media only screen and (min-width: 992px){
    .Affiliate-App form h1{
        font-size: 30px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 1551px){
    .Affiliate-App form h1{
        font-size: 45px;
        margin-bottom: 30px;
    }
}
.Affiliate-App .form-check{
    
    padding-left: 0
    float: right
}
.Affiliate-App .form-check input{
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer
}
.Affiliate-App .form-check label{
    position: relative;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: #141312;
    user-select: none;
    -webkit-user-select: none
}
@media only screen and (min-width: 1551px){
    .Affiliate-App .form-check label{
        font-size: 14px
    }
}
.Affiliate-App .form-check label:before{
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid rgba(154, 105, 46, 0.7);
    border-radius: 3px;
    padding: 6px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    margin-top: -2px;
}
@media only screen and (min-width: 1551px){
    .Affiliate-App .form-check label:before{
        padding: 7px;
    }
}

.Affiliate-App .form-check input:checked + label:after{
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 6px;
    width: 3px;
    height: 8px;
    border: solid rgba(154, 105, 46, 0.7);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}
@media only screen and (min-width: 768px){
    .Affiliate-App .form-check input:checked + label:after{
        top: 3px;
        left: 5px;
        width: 4px;
        height: 9px;
    }
}
@media only screen and (min-width: 992px){
    .Affiliate-App .form-check input:checked + label:after{
        top: 5px;
    }
}
@media only screen and (min-width: 1551px){
    .Affiliate-App .form-check input:checked + label:after{
        top: 4px;
        left: 6px;
        height: 10px;
    }
}
.Affiliate-App .text-gray-500{
    color: #141312 !important;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}
@media only screen and (min-width: 1441px){
    .Affiliate-App .text-gray-500{
        font-size: 16px
    }
}
.Affiliate-App .text-gray-500 a{
    margin-left: 5px;
}
.Affiliate-App .btn.btn-light{
    border: 1px solid #9a692e !important;
}