/*
|--------------------------------------------------------------------------
| Theme Color Palletes
|--------------------------------------------------------------------------
*/
:root {
    --black-color: #171D30;
    --gray-color: #8C909F;
    --gray-color-100: #DEE2E6;
    --gray-color-200: #E9ECEF;
    --gray-color-500: #6c757d;
    --athens-gray: #E9ECEF;
    --primary-color: #4580F1;
    --white-color: #FFFFFF;
    --pale-white: #DDDDDD;
    --pink-color: #DEE8FB;
    --green-color: #4AB975;
    --danger-color: #E62D2D;
    --danger-color-fade-1: #EB0000;
    --warning-color: #F98937;
    --iron-color: #DDDDDE;

    /* Light Colors */
    --primary-light-color: #DEE8FB;
    --green-light-color: #CAF7D9;
    --warning-light-color: #FEF4EC;
    --danger-light-color: #FFECEC;
    --danger-light-color-fade-1: #F7DADA;

    /* Dark Colors */
    --green-dark-color: #0C9240;
    --warning-dark-color: #E05F00;

    /* Other */
    --price-color: #B1D690;

    /* Transitions */
    --transition-ease: all 0.4s ease;
}

body {
    background-color: #EAF2FF;
    /* transition: var(--transition-ease) !important; */
}

/*
|--------------------------------------------------------------------------
| Overlay To Prevent User To Access The Project
|--------------------------------------------------------------------------
*/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Semi-transparent black background */
    z-index: 10000;
    /* Ensure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    text-align: center;
}

.overlay-content {
    max-width: 80%;
}

.overlay button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Prevent to showing content while content load
|--------------------------------------------------------------------------
*/
[v-cloak] {
    opacity: 0;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.capitalize-fl::first-letter {
    text-transform: capitalize;
}

/*
|--------------------------------------------------------------------------
| Unset Default
|--------------------------------------------------------------------------
*/
.btn,
.badge {
    text-transform: unset !important;
}

/*
|--------------------------------------------------------------------------
| Text Colors
|--------------------------------------------------------------------------
*/
.cw-text-black {
    color: var(--black-color) !important;
}

.cw-text-gray {
    color: var(--gray-color) !important;
}

.cw-text-primary {
    color: var(--primary-color) !important;
}

.cw-text-white {
    color: var(--white-color) !important;
}

.cw-text-pink {
    color: var(--pink-color) !important;
}

.cw-text-green {
    color: var(--green-color) !important;
}

.cw-text-dark-green {
    color: var(--green-dark-color) !important;
}

.cw-text-green-price {
    color: var(--price-color) !important;
}

.cw-text-danger {
    color: var(--danger-color) !important;
}

.cw-text-dark-warning {
    color: var(--warning-dark-color) !important;
}

.cw-text-warning {
    color: var(--warning-color) !important;
}

/*
|--------------------------------------------------------------------------
| Background Colors
|--------------------------------------------------------------------------
*/
.cw-bg-black {
    background-color: var(--black-color) !important;
}

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

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

.cw-bg-iron {
    background-color: var(--iron-color) !important;
}

.cw-bg-primary {
    background-color: var(--primary-color) !important;
}

.cw-bg-white {
    background-color: var(--white-color) !important;
}

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

.cw-bg-pink {
    background-color: var(--pink-color) !important;
}

.cw-bg-green {
    background-color: var(--green-color) !important;
}

.cw-bg-green-parrot {
    background-color: var(--green-light-color) !important;
}

.cw-bg-green-price {
    background-color: var(--price-color) !important;
}

.cw-bg-danger {
    background-color: var(--danger-color) !important;
}

.cw-bg-warning {
    background-color: var(--warning-color) !important;
}

/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/
.cw-badge-primary {
    font-weight: 600 !important;
    background-color: var(--primary-light-color) !important;
    color: var(--primary-color) !important;
}

.cw-badge-green {
    font-weight: 600 !important;
    background-color: var(--green-light-color) !important;
    color: var(--green-color) !important;
}

.cw-badge-warning {
    font-weight: 600 !important;
    background-color: var(--warning-light-color) !important;
    color: var(--warning-color) !important;
}

.cw-badge-danger {
    font-weight: 600 !important;
    background-color: var(--danger-light-color) !important;
    color: var(--danger-color) !important;
}

.cw-badge-danger-fade-1 {
    font-weight: 600 !important;
    background-color: var(--danger-light-color-fade-1) !important;
    color: var(--danger-color-fade-1) !important;
}

.cw-badge-gray {
    font-weight: 600 !important;
    background-color: var(--gray-color-100) !important;
    color: var(--gray-color-500) !important;
}

/*
|--------------------------------------------------------------------------
| Font Sizes
|--------------------------------------------------------------------------
*/
.cw-fs-10px {
    font-size: 10px !important;
}

.cw-fs-12px {
    font-size: 12px !important;
}

.cw-fs-15px {
    font-size: 15px !important;
}

.cw-fs-17px {
    font-size: 17px !important;
}

.cw-fs-24px {
    font-size: 1.5rem !important;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
/* Primary Button */
.cw-btn-primary {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.cw-btn-primary:hover {
    color: var(--primary-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Primary Button Light */
.cw-btn-primary-light {
    color: var(--primary-color) !important;
    background-color: var(--primary-light-color) !important;
    border: 1px solid var(--primary-light-color) !important;
}

.cw-btn-primary-light:hover {
    color: var(--primary-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Primary Button With Outline */
.cw-btn-primary-outline {
    color: var(--primary-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.cw-btn-primary-outline:hover {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Success Button With Outline */
.cw-btn-success-outline {
    color: var(--green-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--green-color) !important;
}

.cw-btn-success-outline:hover {
    color: var(--white-color) !important;
    background-color: var(--green-color) !important;
    border: 1px solid var(--green-color) !important;
}

/* Warning Button With Outline */
.cw-btn-warning-outline {
    color: var(--warning-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--warning-color) !important;
}

.cw-btn-warning-outline:hover {
    color: var(--white-color) !important;
    background-color: var(--warning-color) !important;
    border: 1px solid var(--warning-color) !important;
}

/* Danger Button With Outline */
.cw-btn-danger-outline {
    color: var(--danger-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--danger-color) !important;
}

.cw-btn-danger-outline:hover {
    color: var(--white-color) !important;
    background-color: var(--danger-color) !important;
    border: 1px solid var(--danger-color) !important;
}

/* Green Button */
.cw-btn-green {
    color: var(--white-color) !important;
    background-color: var(--green-color) !important;
    border: 1px solid var(--green-color) !important;
}

.cw-btn-green:hover {
    color: var(--green-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--green-color) !important;
}

/* Danger Button */
.cw-btn-danger {
    color: var(--white-color) !important;
    background-color: var(--danger-color) !important;
    border: 1px solid var(--danger-color) !important;
}

.cw-btn-danger:hover {
    color: var(--danger-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--danger-color) !important;
}

/* Danger Button Light */
.cw-btn-danger-light {
    color: var(--danger-color) !important;
    background-color: var(--danger-light-color) !important;
    border: 1px solid var(--danger-light-color) !important;
}

.cw-btn-danger-light:hover {
    color: var(--danger-color) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--danger-color) !important;
}

/*
|--------------------------------------------------------------------------
| Hover Classes
|--------------------------------------------------------------------------
*/
/* (Primary Hover Effect) */
.hover-primary:hover {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
}

/*
|--------------------------------------------------------------------------
| Border Radius
|--------------------------------------------------------------------------
*/
.cw-br-4px {
    border-radius: 4px !important;
}

.cw-br-8px {
    border-radius: 8px !important;
}

.cw-br-12px {
    border-radius: 12px !important;
}

.cw-br-top-12px {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.cw-br-left-12px {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.cw-br-right-12px {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.cw-br-15px {
    border-radius: 15px !important;
}

.cw-br-16px {
    border-radius: 16px !important;
}

.cw-br-20px {
    border-radius: 20px !important;
}

.cw-br-top-left-20px {
    border-top-left-radius: 20px !important;
}

.cw-br-top-right-20px {
    border-top-right-radius: 20px !important;
}

.cw-br-left-20px {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

.cw-br-right-20px {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/*
|--------------------------------------------------------------------------
| Border Colors
|--------------------------------------------------------------------------
*/
.cw-border-gray-1px {
    border: 1px solid var(--gray-color) !important;
}

.cw-border-primary-1px {
    border: 1px solid var(--primary-color) !important;
}

.cw-border-bottom-primary-2px {
    border-bottom: 2px solid var(--primary-color) !important;
}

.cw-border-palewhite-1px {
    border: 1px solid var(--pale-white) !important;
}

.cw-border-left-palewhite-2px {
    border-left: 2px solid var(--pale-white) !important;
}

.cw-border-top-palewhite-1px {
    border-top: 1px solid var(--pale-white) !important;
}

.cw-border-bottom-palewhite-1px {
    border-bottom: 1px solid var(--pale-white) !important;
}

.cw-border-top-pinkcolor-1px {
    border-top: 1px solid var(--pink-color) !important;
}

.cw-border-bottom-pinkcolor-1px {
    border-bottom: 1px solid var(--pink-color) !important;
}

.cw-border-pinkcolor-1px {
    border: 1px solid var(--pink-color) !important;
}

.cw-border-warning-1px {
    border: 1px solid var(--warning-color) !important;
}

.cw-border-green-1px {
    border: 1px solid var(--green-color);
}

.cw-border-green-2px {
    border: 2px solid var(--green-color);
}

.cw-border-danger-1px {
    border: 1px solid var(--danger-color);
}

.cw-border-danger-2px {
    border: 2px solid var(--danger-color);
}

.cw-border-black-1px {
    border: 1px solid var(--black-color);
}

.cw-border-top-green-2px {
    border-top: 2px solid var(--green-color) !important;
}

.cw-border-bottom-green-2px {
    border-bottom: 2px solid var(--green-color) !important;
}

.cw-border-bottom-warning-2px {
    border-bottom: 2px solid var(--warning-color) !important;
}

/*
|--------------------------------------------------------------------------
| Theme Form
|--------------------------------------------------------------------------
*/
/* .cw-theme-form input:not(.selectator_input),
.cw-theme-iconed-form input:not(.selectator_input) {
    border: 1px solid var(--pale-white);
} */

/* .cw-theme-form input,
.cw-theme-iconed-form input {
    border: 1px solid var(--pale-white);
} */

.cw-theme-form ::-webkit-input-placeholder,
.cw-theme-iconed-form ::-webkit-input-placeholder {
    color: var(--gray-color) !important;
}

.cw-theme-iconed-form input {
    padding-left: 46px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| Styling for removing spin buttons from default number inputs
|--------------------------------------------------------------------------
*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.resize-none {
    resize: none !important;
}

/*
|--------------------------------------------------------------------------
| Text Wrappers
|--------------------------------------------------------------------------
*/
.text-wrap-2 {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.text-wrap-3 {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

/*
|--------------------------------------------------------------------------
| Widths
|--------------------------------------------------------------------------
*/
.w-180px {
    width: 180px !important;
}

/*
|--------------------------------------------------------------------------
| Image Properties
|--------------------------------------------------------------------------
*/
.object-fit-cover {
    object-fit: cover !important;
    object-position: center !important;
}

.object-fit-contain {
    object-fit: contain !important;
    object-position: center !important;
}


/*
|--------------------------------------------------------------------------
| Switch Button
|--------------------------------------------------------------------------
*/
.form-switch .form-check-input:checked {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

/* Form Check lg */
.form-switch.form-check-lg .form-check-input {
    width: 3.5rem !important;
    height: 30px !important;
}

.form-switch.form-check-lg .form-check-input:after {
    width: 26px !important;
    height: 26px !important;
}

.form-switch.form-check-lg .form-check-input:checked:after {
    transform: translateX(26px) !important;
}

/*
|--------------------------------------------------------------------------
| Check Box Customization Style
|--------------------------------------------------------------------------
*/
.form-check-input:checked[type="checkbox"] {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--primary-color) 100%) !important;
}

/*
|--------------------------------------------------------------------------
| Radio Box Customization Style
|--------------------------------------------------------------------------
*/
.form-check-input:checked[type="radio"] {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--primary-color) 100%) !important;
}

/*
|--------------------------------------------------------------------------
| Coloured Input Style
|--------------------------------------------------------------------------
*/
/* Primary Input */
.form-control-primary {
    background-color: var(--primary-light-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.form-control-primary:focus {
    border: 1px solid var(--primary-color) !important;
}

/* Danger Input */
.form-control-danger {
    background-color: var(--danger-light-color) !important;
    border: 1px solid var(--danger-color) !important;
    color: var(--danger-color) !important;
}

.form-control-danger:focus {
    border: 1px solid var(--danger-color) !important;
}

/*
|--------------------------------------------------------------------------
| Navbar Collapse Button
|--------------------------------------------------------------------------
*/
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
    color: var(--primary-color) !important;
}

/*
|--------------------------------------------------------------------------
| Dropdown Button
|--------------------------------------------------------------------------
*/
.dropdown {
    position: relative !important;
}

.dropdown .dropdown-menu:before {
    display: none !important;
}

.dropdown .dropdown-menu {
    position: absolute !important;
}

/*
|--------------------------------------------------------------------------
|  input Errors Or Alignment On Jquery Validation Plugin
|--------------------------------------------------------------------------
*/
label.error,
span.error {
    color: var(--danger-color) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
    /* margin-left: 10px !important; */
}

input.error,
textarea.error,
select.error {
    border: 1px solid var(--danger-color) !important;
}

/*
|--------------------------------------------------------------------------
| International Input Style
|--------------------------------------------------------------------------
*/
.iti {
    width: 100% !important;
}

.iti__selected-flag {
    max-height: 39px !important;
    background-color: transparent !important;
}

/*
|--------------------------------------------------------------------------
| Flatpickr Calendar Style
|--------------------------------------------------------------------------
*/
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.selected {
    background: var(--primary-color) !important;
}

/*
|-------------------------------
| Card Shadows
|-------------------------------
*/
/* card Shadow */
.card-shadow {
    filter: drop-shadow(0px 6px 20px rgba(166, 159, 157, 0.25)) !important;
}

/* Drop Shadow */
.drop-shadow {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2) !important;
}

/*
|--------------------------------------------------------------------------
| Page Loader Animation
|--------------------------------------------------------------------------
*/
.carway-loader i {
    font-size: 80px;
    color: #81A9F7;
}

.carway-loader {
    position: fixed;
    /* z-index: 99; */
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.carway-loader.hidden {
    display: none;
}