/*
 * Vik Rent Car - Colors adaptation for "Automatic Light/Dark" Appearance .
 * Media queries should detect the OS/Browser preferences for the Dark Color Scheme
 * and override the CSS variables within that preference.
 */

/* Variable declarations when a dark color scheme is preferred. */
@media (prefers-color-scheme: dark) {
	:root {
        /* Backgrounds */
        --vrc-white-bg-color: #282b33;
        --vrc-grey-bg-color: #0f1216;
        --vrc-light-grey-bg-color: #383c47;
	    --vrc-dark-grey-bg-color: rgba(255, 255, 255, 0.87);
	    --vrc-dark-grey-bg-color-hover: rgba(255, 255, 255, 0.77);
        
        /* Borders */
        --vrc-border-color: #404551;
        --vrc-light-border-color: #555c6c;
        
        /* Texts */
        --vrc-text-color: rgba(255, 255, 255, 0.87);
        --vrc-light-text-color: rgba(255, 255, 255, 0.77);
        --vrc-contrast-text-color: #444;

        /* Input Style */
        --vrc-input-style: #1e222b;
        --vrc-input-style-deactive: #282b33;
        --vrc-input-style-nested-deactive: #181b22;

        /* Colors */
        --vrc-darkblue-color: #08738F;
        --vrc-blue-color: #467388;
        --vrc-blue-color-hover: #4B7B92;
        --vrc-lightblue-color: #6a92a5;
        --vrc-lightblue-color-hover: #649fbb;
        --vrc-green-color: #4e7638;
        --vrc-green-color-hover: #4c794c;
        --vrc-orange-color: #CB7B2B;
        --vrc-red-color: #b12a2a;
    }

    [data-vrc-expl]:after {
        background-color: hsla(0, 0%, 42%, 0.9);
    }
    [data-vrc-expl]:before {
        border-bottom-color: hsla(0, 0%, 42%, 0.9);
    }
    .vikfxg-overlay {
        background: var(--vrc-white-bg-color);
    }
    .vikfxg-wrapper .vikfxg-image .vikfxg-caption {
        color: var(--vrc-text-color);
    }
    .vikfxg-wrapper button {
        background: var(--vrc-light-grey-bg-color);
        color: var(--vrc-text-color) !important;
    }
    .vikfx-gallery-container .vikfx-gallery-navigation-controls .vikfx-gallery-navigation-controls-prevnext > a {
        background: rgba(0, 0, 0, 0.8);
    }
    .vikfx-gallery-container .vikfx-gallery-navigation-controls .vikfx-gallery-navigation-controls-prevnext > a:hover {
        background: rgba(0, 0, 0, 1);
    }
    .vrccal .vrctdbusy {
        color: #fff;
    }
    .vrcsfentrycont #vrccomselph select, .vrcsfentrycont #vrccomselpm select, .vrcsfentrycont #vrccomseldh select, .vrcsfentrycont #vrccomseldm select, form .vrcselectm {
        background: var(--vrc-white-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23f6f6f6' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center !important;
        background-size: 10px 12px !important;
    }
    .vrcstepsbarcont .vrc-stepbar li:after {
        border-left-color: var(--vrc-white-bg-color);
    }
    #ui-datepicker-div {
        background: var(--vrc-white-bg-color);
        border-color: var(--vrc-white-bg-color);
        color: var(--vrc-text-color);
    }
    #ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
        color: var(--vrc-text-color);
    }
    #ui-datepicker-div th {
        color: var(--vrc-text-color) !important;
    }
    #ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-widget-header .ui-state-default {
        color: var(--vrc-text-color);
    }
    #ui-datepicker-div table tbody > tr > td {
        border: 1px solid #3c414d;
    }
    #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next {
        border: 1px solid #3c414d;
    }
    #ui-datepicker-div .ui-datepicker-group-first {
        border-right: 1px solid #3c414d;
    }
}