body {
    background: var(--white);
}

header nav {
    background-color: var(--white);
}

/*utility classes*/
.wiki-bg-transparent {
    background: var(--primary-transparent);
}

.wiki-cars-divider {
    color: var(--auxan);
}

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

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

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

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

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

.text-success {
    color: var(--auxan) !important;
}

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

/*button*/
.btn-primary {
    background-color: var(--primary);
    border: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-transparent);
}

.btn-primary:active {
    background-color: var(--primary-selected) !important;
}

.btn-primary:focus {
    background-color: var(--primary-selected) !important;
    box-shadow: none !important;
}

.btn-primary:disabled,
.btn-success:disabled {
    background-color: var(--disable-gray) !important;
    color: var(--white) !important;
}

.btn-info:disabled,
.btn-warning:disabled {
    background-color: var(--disable-gray) !important;
    color: var(--white) !important;
}

.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--auxan);
}

.btn-outline-primary:active {
    background-color: var(--primary-selected) !important;
}

.btn-outline-primary:disabled {
    border-color: var(--gray) !important;
    color: var(--gray) !important;
}

.btn-outline-info:disabled {
    border-color: var(--gray) !important;
    color: var(--gray) !important;
}

.btn-success {
    background-color: var(--auxan);
    border: var(--auxan);
    color: var(--text-in-auxan) !important;
}

.btn-outline-success {
    border: 1px solid var(--auxan) !important;
    color: var(--black) !important;
}

.btn-outline-success:hover,
.btn-outline-success:active {
    background-color: transparent !important;
}

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

.btn-success:active {
    background-color: var(--primary-selected) !important;
}

.btn-danger {
    background-color: var(--danger);
    border: none;
}

.btn-gray {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

.pill-allert {
    border: .1em solid var(--allert-fg);
    color: var(--allert-fg);
    background: var(--allert-bg);
}

.pill-success {
    border: .1em solid var(--success-fg);
    color: var(--success-fg);
    background: var(--success-bg);
}

.pill-danger {
    border: .1em solid var(--danger-fg);
    color: var(--danger-fg);
    background: var(--danger-bg);
}

/*border*/
.border-primary {
    border-color: var(--primary) !important;
}

.border-gray-50 {
    border: 1px solid rgba(112, 112, 112, 0.5)
}

.border-gray {
    border: 1px solid var(--disable-gray)
}

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

.bg-success {
    background-color: var(--auxan) !important;
}

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

.bg-gray {
    background: var(--gray);
}

.bg-light-gray {
    background: var(--light-gray);
}

.bg-auxan-transparent {
    background: var(--auxan-transparent);
}

.bg-dark {
    background: var(--black) !important;
}

/*squr*/
.squr.enable:hover {
    border-color: var(--auxan) !important;
    background-color: var(--auxan-transparent);
}

.squr.enable h2 {
    color: var(--black) !important;
}

.squr.enable i {
    color: var(--primary) !important;
}

.squr.active {
    border: 2px solid var(--primary) !important;
    background-color: var(--auxan-transparent);
}

.squr.active:hover {
    border: 2px solid var(--primary) !important;
}

/*breadcrumb*/
.breadcrumb-item a {
    color: var(--disable-gray);
}

.breadcrumb-item a:hover {
    color: var(--auxan);
}

/*nav*/
.nav-item .nav-link {
    border-bottom: 1px solid var(--white);
}

.nav-item:hover .nav-link {
    border-bottom: 1px solid var(--auxan);
}

.navbar-nav .nav-link {
    color: var(--black);
}

.navbar .dropdown-divider {
    border-top: 1px solid var(--disable-gray-trans);
}

.navbar .dropdown-menu li:hover + .dropdown-divider {
    border-top: 1px solid var(--auxan);
}

.navbar .dropdown-menu .dropdown-item:hover {
    background: var(--white);
    color: var(--black);
}

.navbar {
    box-shadow: 0 4px 10px var(--black-shadow);
}


.dropdown button {
    background-color: var(--white);
}

.form-select-custom .dropdown-toggle.is-empty {
    color: var(--gray);
}

.dropdown-custom .dropdown-menu .dropdown-item:active  {
    background-color: var(--primary) !important;
}
.dropdown-custom .dropdown-menu .dropdown-item:active svg path  {
    fill: #FFF !important;
}

.dropdown-custom .dropdown-menu li:last-child .dropdown-item:hover,
.dropdown-custom .dropdown-menu li:last-child .dropdown-item:focus  {
    background-color: var(--primary-selected) !important;
}
.dropdown-custom .dropdown-menu li:last-child .dropdown-item:hover svg path,
.dropdown-custom .dropdown-menu li:last-child .dropdown-item:focus svg path  {
    fill: #FFF !important;
}

/*formControls*/
.form-control {
    border: 1px solid rgba(0, 0, 0, 10%);
    color: var(--black);
}

.form-control::placeholder {
    color: var(--gray);
}

.form-control:hover {
    border: 1px solid rgba(0, 0, 0, 50%);
}

.form-control:focus {
    border: 1px solid var(--auxan);
}

/*todo for box shadow when its invalid*/
/*.form-control.is-invalid:focus{*/
/*    box-shadow: none;*/
/*}*/
/*.form-control.is-valid:focus{*/
/*    box-shadow: none;*/
/*}*/

.form-floating label {
    color: var(--gray);
}

.form-floating > .form-control:-webkit-autofill ~ label:after {
    background: transparent;
}

.form-check .form-check-input {
    border: 1px solid var(--disable-gray);
}

.form-check:hover .form-check-input {
    border: 1px solid var(--auxan);
}

.form-check .form-check-input:checked {
    border: 1px solid var(--auxan);
    background-color: var(--auxan);
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--auxan);
    border-color: var(--auxan);
}

.form-select-custom {
    border: 1px solid rgba(0, 0, 0, 10%);
}

.form-select-custom:hover {
    border: 1px solid rgba(0, 0, 0, 50%);
}

.form-select-custom .dropdown-menu {
    border: 1px solid var(--auxan);
}

.form-select-custom:has(.dropdown-toggle.show) {
    border: 1px solid var(--auxan);
}

@media (max-width: 992px) {
    .form-select-custom:has(.dropdown-toggle.show) {
        border: 1px solid var(--auxan) !important;
    }
}
.form-floating>.form-control:not(:placeholder-shown) {
    border-color: var(--primary);
}

.form-floating:has(> select option:checked:is([value=""])) .form-control {
    border-color: rgba(0, 0, 0, 10%);
}

    /*aside & main*/
aside ul li a {
    color: unset;
}

aside ul li.active {
    color: var(--primary);
}

aside ul > li:hover > a,
aside ul > li:hover > p,
aside ul > li:hover > .accordion-button {
    color: var(--auxan) !important;
}

aside ul > li:hover::marker {
    color: var(--auxan);
}

aside .account-setting a:hover {
    color: var(--auxan);
}

aside .account-setting a:hover svg path {
    fill: var(--auxan);
}

#accordionAsidePanel>.active a {
    color: var(--primary) !important;
    font-weight: bold !important;
}

.account-image {
    border: 1px solid var(--black-shadow);
}

@media (max-width: 992px) {
    aside {
        background: var(--white);
    }
}

/*accordion*/
.accordion-button {
    color: var(--black) !important;
    background: var(--white) !important;
}


/*announcement-card*/
.ads-card:hover {
    background-color: var(--auxan-transparent);
    outline: 3px solid var(--primary);
}

.ads-card:hover input {
    background-color: var(--auxan-transparent);
}

.ads-card.tagged {
    border: 3px solid var(--danger);
}

.ads-card.tagged input {
    background-color: transparent;
}

.ads-card.tagged:hover {
    background-color: rgba(214, 23, 23, 15%);
    outline: unset;
}

.ads-card input {
    color: var(--disable-gray);
}

.card-ckeck .form-check-input {
    border: 3px solid var(--gray);
}

.ads-card .card-ckeck .form-check-input:not(:checked) {
    background: transparent;
}

.card-badge {
    background-color: rgba(0, 0, 0, 25%);
    color: var(--white);
}

.card-label {
    background-color: var(--black);
    color: var(--white);
}

.ads-card-horizontal .badge {
    background-color: #D61717;
}

/*specification card*/
.spec-item {
    border-bottom: 1px solid #7070701A;
}

/*list of cars - modal*/
.modal-search-input,
.modal-search-input:focus {
    background-color: rgba(217, 217, 217, 20%);
}

.modal-search-input:hover {
    background-color: var(--auxan-transparent);
}

.listOfCarsModal .modal-body {
    scrollbar-color: var(--auxan-transparent) var(--light-gray);
}

.carBrand-icon {
    border: 1px solid var(--auxan);
}

/*Link Squre*/
.link-squr {
    border: 2px solid rgba(53, 49, 50, 0.20);
}

.link-squr:hover {
    border-color: var(--primary);
    background-color: var(--auxan-transparent);
}

.link-rect {
    border-color: var(--gray) !important;
    background-color: rgba(165, 163, 163, 0.1);
}

/*OTP*/
.otp-inputs input {
    border: 2px solid var(--light-gray) !important;
}

.otp-inputs input.invalid {
    border: 2px solid var(--bs-form-invalid-color) !important;
}

.otp-inputs input:hover {
    border-color: var(--gray) !important;
}

.otp-inputs input:not(:placeholder-shown) {
    border-color: var(--auxan) !important;
}

.otp-inputs input:placeholder-shown {
    border-color: var(--light-gray);
}

button svg:hover path {
    fill: var(--auxan);
}

.accent-underline {
    border-color: var(--auxan) !important;
}

.upload-squr button:hover svg path {
    fill: var(--auxan) !important;
}

.upload-squr .removeFile:hover svg path {
    fill: var(--danger) !important;
}

.upload-squr.hasFile {
    border: 2px solid var(--primary);
    background: var(--auxan-transparent);
}

.select-squr:has(input.is-invalid) {
    border-color: red;
}

/*form-wizard*/
.form-wizard .form-register .steps li .title::before {
    background: var(--gray);
}

.form-wizard .form-register .steps li .title::after {
    background: var(--gray);
}

.form-wizard .form-register .steps li.current a .step-icon {
    border-color: var(--auxan);
    background-color: var(--auxan) !important;
    outline: .75rem solid var(--auxan-transparent);
}

.form-wizard .form-register .steps li.done a .step-icon {
    background: var(--primary) !important;
    border-color: var(--primary);
}

.form-wizard .steps .done .title::after {
    background: var(--primary) !important;
}

.form-wizard .steps .done .title::before {
    background: var(--primary) !important;
}

.form-wizard .steps .current .title::before {
    background: var(--primary) !important;
}

.form-wizard .form-register .steps li a .title .step-icon {
    background-color: var(--white);
}

.form-wizard .form-register .steps .current .title::after, .form-wizard .form-register .steps .done .title::after {
    background: var(--gray);
}

/*Multi Range*/
.slider-track {
    background-color: var(--gray) !important;
}

.slider-selection, .slider-handle {
    background-color: var(--primary) !important;
}

/*announce card*/
card.announce-card:hover {
    background-color: var(--auxan-transparent);
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

/*nasrin for carpate*/
.c-car-plate {
    background: var(--white);
}

.c-car-plate__flag {
    background-color: var(--blue-ocean) !important;
}

.c-car-plate__flag .ir-flag div:nth-child(3) {
    background-color: var(--danger) !important;
}

.c-car-plate.is-invalid {
    border: 2px solid var(--bs-form-invalid-border-color);
}

.c-car-plate.is-invalid:has(.c-car-plate__input:focus) {
    box-shadow: 0 0 0 0.2rem var(--shaddow-invalid); /* Shadow for invalid state when input is focused */
}

.c-car-plate.is-valid {
    border: 2px solid var(--bs-form-valid-border-color);
}

.c-car-plate.is-valid:has(.c-car-plate__input:focus) {
    box-shadow: 0 0 0 0.2rem var(--shaddow-valid);
}

.c-car-plate__flag .ir-flag div:nth-child(1) {
    background-color: var(--primary) !important;
}

.c-car-plate , .c-car-plate-motor {
    border: 2px solid var(--bs-gray-500);
}

.c-car-plate__dash {
    background-color: var(--bs-gray-500);
}

.c-car-plate__input {
    color: var(--bs-gray-800);
}

.c-car-plate__input--section1, .c-car-plate__input--section3, .c-car-plate__input--section4 , .input--section1-motor, .input--section2-motor {
    border-bottom: 2px solid var(--bs-gray-500) !important;
}

.c-car-plate__input--section2 {
    background-image: url("/r/img/arr_down.svg");
}

.c-car-plate__input--section4 {
    background-image: url(/r/img/ir.svg);
}

/*img and class*/
/*nasrin for body Condition*/

.spec-card {
    border-color: var(--gray);
    background-color: #F2F3F4;
}
.card-green {
    border-color: #27AE60;
    background-color: rgba(39, 174, 96, .1);
}

.card-green .value {
    color: #27AE60;
}


.card-red {
    border-color: #EB5757;
    background-color: rgba(235, 87, 87, 0.1);
}

.card-red .value {
    color: #EB5757;
}

.card-yellow {
    border-color: #F2994A;
    background-color: rgba(242, 153, 74, 0.1);
}

.card-yellow .value {
    color: #F2994A;
}


.creditCursor {
    background-color: darkblue;
}

.share-icon:hover svg path {
    fill: var(--auxan);
}

.wallet-card {
    background: url(/r/img/introBgBlue.svg) bottom center / cover no-repeat, linear-gradient(to right, #001ED9 0%, #001CCD 10%, #00083A 100%);
}

/*stepSlider*/
.step-slider .carousel-control-next-icon, .step-slider .carousel-control-prev-icon {
    background-color: var(--light-gray) !important;
}

.step-slider .carousel-control-prev:hover .carousel-control-prev-icon {
    background-color: var(--auxan) !important;
}

.step-slider .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--auxan) !important;
}

.step-slider .carousel-indicators [data-bs-target] {
    background-color: var(--light-gray);
}

.step-slider .carousel-indicators .active {
    background-color: var(--auxan);
}

.step-slider .step {
    background-color: var(--light-gray);
}

.step-slider .step.active {
    background-color: var(--auxan);
    color: black;
}

.step-slider .step.done {
    background-color: var(--primary);
    color: white;
}