
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root 
{

/*//////////////////////// BODY ////////////////////*/    

    --body-font-family: 'Quicksand', sans-serif;
    --body-font-style: Normal;
    --body-font-size: 15px;
    --body-font-weight: 300;
    --body-line-height: 24px;
    --body-letter-spacing: 1px;
    --body-background-color: var(--input-background-color);
    --body-background: var(--body-background-color) url(/img/wood.jpg) center repeat;
    /*--body-background: #542300 url(../../img/body_bg1.jpg) center no-repeat;*/
    --body-background-size: cover;
    --body-background-attachment: fixed;
    
    --body-text-color: wheat;
    --body-text-color-dop: #693E20;
    
    --wrapper-max-width: 1360px;

    
/*//////////////////////// HEADER ////////////////////*/    

    --top-header-background: black url(/img/wood_header_bg.jpg) center repeat;
    --bottom-header-container-margin-top: 60px;
    --bottom-header-find-place-box-background-color: #995a24;
    --bottom-header-error-background-color: #a30000;
    --bottom-header-error-color: white;
    
    --place-param-background-color: #f5deb3;
    --place-param-triangle-background-color: rgba(79, 43, 12, 0.7);
    --place-param-box-border: 1px solid var(--input-background-color);
    
    
/*//////////////////////// MENU ////////////////////*/    

    --menu-link-opacity: 0.7;
    --menu-link-color: var(--body-text-color);
    
    --menu-hover-opacity: 1;
    --menu-hover-color: white;

    --menu-panel-background-color-05: rgba(245, 222, 179, 0.5);
    --menu-panel-background-color-1: rgba(245, 222, 179, 1);
    
    --menu-active-opacity: 0.4;
    --menu-active-color: white;

    --menu-lng-color: #ede2e1;
    
    --CLS-menu-box-background: var(--top-header-background);
    --CLS-mini-menu-box-background: black url(/img/wood_menu_bg.jpg) center repeat;
    

    

/*////////// AWESOME ИКОНКИ /////////////////////////////*/

    --awesome-icon-color: inherit;



/*//////////////////////// BUTTONS, CHECKBOX AND ... ////////////////////*/    
    
    --input-placeholder-color: rgba(192,158,158, 0.7);
    
    --input-color: var(--body-text-color);
    --input-hover-color: var(--input-color);
    --input-background-color: #4f2b0c;
    --input-border: 2px solid var(--input-background-color);
    --input-hover-border: 2px solid var(--opacity-input-background-color);
    --input-opacity-border: 2px solid rgba(140, 80, 40, 0.6);
    --input-hover-background-color: #391d05;
    --input-button-active-opacity: 0.8;
    --input-button-not-active-opacity: 1;
    --input-button-checked-color: white;
    --input-button-checked-background-color: #ff7b1d;

    --opacity-input-background-color: rgba(50, 20, 0, 0.6);
    --opacity-input-hover-background-color: rgba(50, 20, 0, 0.8);

    --input-checkbox-hover-background-color: var(--input-hover-background-color);
    --input-checkbox-border-color: #adb5bd;
    --input-checkbox-border-hover-color: #b3d7ff;
    --input-checkbox-checked-border-color: var(--input-checkbox-border-color);
    --input-checkbox-checked-border-hover-color: var(--input-checkbox-checked-border-color);
    --input-checkbox-checked-square-background-color: #ff7b1d;
    --input-checkbox-checked-background-color: #ff7b1d;
    --input-checkbox-shadow-hover: 0 0 0 0.2rem rgba(223, 146, 92, 0.25);;

    --input-radio-hover-background-color: rgba(255, 255, 255, 0.3);
    --input-radio-border-color: #adb5bd;
    --input-radio-border-hover-color: #b3d7ff;
    --input-radio-checked-color: var(--input-checkbox-checked-square-background-color);
    --input-radio-checked-border-color: var(--input-checkbox-checked-border-color);
    --input-radio-checked-border-hover-color: var(--input-checkbox-checked-border-color);
    --input-radio-checked-text-color: var(--input-radio-checked-color);
    --input-radio-checked-cercle-background-color: var(--input-checkbox-checked-square-background-color);
    --input-radio-checked-background-color: var(--input-background-color);
    --input-radio-shadow-hover: 0 0 0 0.2rem rgba(223, 146, 92, 0.25);

    --CLS-radio-label-background-color: var(--opacity-input-background-color);
    --CLS-radio-label-hover-background-color: var(--opacity-input-hover-background-color);

    --transition-300: all 300ms ease-in-out;
    
    --dialog-text-color: var(--input-background-color);
    
    --scrollbar-background-color: var(--input-hover-background-color);
    --scrollbar-thumb-background-color: var(--body-text-color-dop);
    --scrollbar-thumb-hover-background-color: #253861;

    --range-thumb-background-color: var(--input-background-color);
    --range-thumb-border-color: #fff;
    --price-range-down-background-color: #fff;

    --daterangepicker-td-in-range-background-color: rgba(209, 137, 50, 0.5);
    --daterangepicker-td-off-color: #e0c2a2;
    --daterangepicker-td-active-background-color: var(--input-background-color);
    --daterangepicker-td-active-color: var(--body-text-color);
    

/*//////////////////////// FILTR  ////////////////////*/    

/*    !!!!!! ПОЛНЫЙ background КАК НА body НА div НЕ РАБОТАЕТ  !!!!*/
    --filtr-background-image: url(/img/wood_surface.jpg);
    --filtr-background-color: #4f2b0c;
    --filtr-background-size: contain;
    --filtr-background-repeat: repeat;
    
    --filtr-kind-row-color: #ffa12c;
    --filtr-kind-row-font-size: 25px;
    --filtr-kind-row-font-weight: 700;
    
    --filtr-row-color: #f2c8ab;
    --filtr-row-font-size: 20px;
    --filtr-row-font-weight: 700;

    --filtr-msg-text-color: #ede2e1;
    
    --filtr-button-active-color: var(--filtr-kind-row-color);
    

/*//////////////////////// RENT  ////////////////////*/    

    --rent-object-background-color: rgba(245, 222, 179, 0.5);
    --rent-object-font-size: 20px;
    --rent-object-font-weight: 700;

    --rent-header-background-color_1: var(--menu-panel-background-color-05);
    --rent-header-background-color_2: var(--menu-panel-background-color-1);

    --rent-header-border: solid var(--input-background-color) 1px;
    
    --available-room-border-color: var(--body-text-color-dop);
    
    
/*//////////////////////// REG  ////////////////////*/    

    --reg-object-background-color: var(--rent-object-background-color);
    
    --cls-column-price-box-border-color: var(--input-background-color);
    
    --cls-room-name-background-color: var(--rent-object-background-color);
    
    --CLS-param-name-hover-border: var(--input-opacity-border);
    --CLS-param-name-hover-color: var(--input-color);
    --CLS-param-name-hover-background-color: var(--opacity-input-background-color);

   
/*//////////////////////// OTHER ////////////////////*/    


    --div-text-background-color: var(--rent-object-background-color);

    --id-description-background-color: var(--rent-object-background-color);
    --id-loaded-foto-background-color: var(--rent-object-background-color);
    
    --uppy-Dashboard-inner-background-color: var(--rent-object-background-color);
    
    --inputTN-border-hover-color:  var(--opacity-input-background-color);
    --inputTN-background-hover-color:  var(--opacity-input-hover-background-color);
    --inputTN-top-border-hover-color: var(--opacity-input-hover-background-color);
    
    --cls-choise-panel-background-color: var(--place-param-background-color);
    
    --cls-price-hide-background-color: gray;
    --cls-price-hide-hover-background-color: rgba(0,0,0,0);
    
    --cls-qty-rest-background-color: var(--input-background-color);
    --cls-qty-child-background-color: var(--input-background-color);
    --cls-qty-child-hover-background-color: var(--input-background-color);
    
    --cls-can-cancel-book-color: green;
    
    --cls-foto-slider-arrow-icon-color: white;
    
    --cls-filtr-scroll-box-background: var(--rent-object-background-color);
    
    --CLS-slider-arrow-icon-color: var(--menu-active-color);
    
    --CLS-qty-free: #035e03;
    --CLS-qty-busy: #e92323;
    
    --color-cancel-come: red;
    
    /*--filtr-clicked-color: #63d15f;*/
    --filtr-clicked-color: #6fd46b;
    
    --calendar-table-border: solid var(--input-background-color) 1px;

    --summ-color: brown;
    --rait-color: #112d94;
    --CLS-review-plus-color: #1e812399;
    --CLS-review-minus-color: #ff3f3f99;
    
    --filtr-status-active-label: #22be22;
    --filtr-status-reserv-label: #22be22;
    --filtr-status-live-label: #0dc4c4;
    --filtr-status-cancel-label: #f69b9b;
    --filtr-status-not-come-label: #f69b9b;
    --filtr-status-finish-label: gray;

    --status-active-color: green;
    --status-cancel-color: red;
    --status-finish-color: gray;
    --status-name-color: #2618d2;
    --status-live-color: #148d8d;

    --confirm-background-color: var(--menu-panel-background-color-1);
    
    --pac-container-color: inherit;
    --pac-item-border-bottom-color: var(--input-background-color);
    --pac-item-hover-color: var(--input-hover-color);
    --pac-item-hover-background-color: var(--input-background-color);
    
    --CLS-loading-box: var(--input-background-color);
    
    --cls-play-yuotube-color: lightgrey;
    
    --cls-show-pass: darkgray;
    
    --ql-snow-background-color: var(--rent-object-background-color);
    
    --CLS--back-timer-get-code-color: var(red);
    
    --mfp-popup-color: var(--body-text-color);

    --CLS-period-plus-color: var(--input-background-color);
    --CLS-period-plus-hover-color: var(--input-hover-background-color);
    
    --close-alert-background-color: var(--input-background-color);
    --close-alert-background-shadow: var(--filtr-background-shadow);
    
    --cls-review-object-background-color: var(--rent-object-background-color);
    
    --CLS-review-filtr-background-color: rgba(50, 20, 0, 0.7);
    --CLS-review-filtr-text-background-color: rgba(245, 222, 179, 0.7);
    
    --param-row-color: var(--filtr-row-color);
    --review-row-color: var(--filtr-row-color);
    
    --social-icon: var(--input-background-color);
    
}


