/* color scheme variables */
/*:root { /* orange theme *//*
    --bg-color: #f6f3ee;
    --bar-dark: #2f2d29;
    --text-color-main: #f47121;
    --menu-button: #535049;
    --menu-button-text: #f8931f;
    --menu-button-hover: #f57e36;
    --text-color-darker: #985700;
    --text-color-dark: #97691b;
    --flower-box-bg-dark: #2f2d29;
    --flower-box-bg-light: #535049;
    --flower-box-text-light: #ffcb87;
    --flower-box-text-title: #b16708;
}*/
:root { /* green theme */
    --bg-color: #fafdf9;
    --bar-dark: #3e4442;
    --text-color-main: #f4ebee;
    --menu-button: #6d8476;
    --menu-button-text: #f4ebee;
    --menu-button-hover: #f4ebee;
    --text-color-darker: #2c3630;
    --text-color-dark: #435b4d;
    --flower-box-bg-dark: #6d8476;
    --flower-box-bg-light: #f4ebee;
    --flower-box-text-light: #f4ebee;
    --flower-box-text-dark: #435b4d;
    --flower-box-text-title: #2c3630;
    --bar-selected: #6d8476;
    --bar-text: #3e4442;
    --bar-text-light: #fafdf9;
    
}

* { font-family: 'ubuntu', 'Open Sans',Helvetica, Arial, sans-serif; color: var(--bar-dark); }
body { align: center; margin: 0; padding: auto; background: var(--bg-color); } /*max-width: 960px;*/
b {font-weight: 500;}
/* ------------ 
| main-blocks |
-------------*/
header { width: 98%;   background: var(--bar-dark);   margin: auto;    display: block; clear: both; margin-top: 10px; }  
page   { width: 98%; display: block; margin: auto;  min-height: 300px; }
footer { width: 98%;   background: var(--bar-dark);   color: var(--text-color-main);  margin: auto;   display: block; clear: both; min-height: 50px;font-size:12px;line-height:20px;text-align:right;padding-right:15px;}
logo { display: block; background: var(--bg-color); height: 150px;}
topmenu { display: block;   margin:0; max-width: 1260px; height:27px; text-align: left; margin-left:3%; z-index: 0;overflow:hidden;}
topmenu a:link, a:visited { background-color: var(--menu-button);   color: var(--menu-button-text);   padding: 5px 25px;      font-size:13px; text-align: center;    
        text-decoration: none;      display: inline-block; z-index: 0;}
topmenu a.mmcurrent {  background-color: #7a7a7a;  }
topmenu a:hover { background-color: var(--menu-button-hover);   color: var(--menu-button); }

main-title {display: block; color: var(--text-color-darker); font-size:40px; margin-left: 30px;}

sub-title {display: block; color: var(--text-color-dark); font-size:20px; margin-left: 30px; font-weight: 100}

/*filters { display: block;   width: 100%;    min-height: 50px;   background-color: var(--menu-button-text);  color: var(--bar-dark); }color: var(--bar-dark);      */
filters { display: block;   width: 100%;    min-height: 50px;   background-color: var(--bg-color); overflow:hidden;}      /*   var(--text-color-dark);  */
path { background-color: var(--bar-dark); display: block; width: 100%; height:16px; min-height: 16px; font-size: 11px;    padding-top: 0px; color: var(--text-color-main); } 

left { width: 22%; min-width: 240px; display: inline-block; float:left;  min-height: 600px; background-color: var(--bg-color); margin-top: 10px;}
mainL {width: 77%;  min-width: 560px; display: inline-block; float:right; background-color: var(--bg-color); color: var(--text-color-darker); min-height: 600px; margin-top: 10px;}
leftT { width: 16%; min-width: 150px; display: inline-block; float:left;  min-height: 600px; background-color: var(--bg-color); margin-top: 10px;}
mainLT {width: 82%;  min-width: 630px; display: inline-block; float:right; background-color: var(--bg-color); color: var(--text-color-darker); min-height: 600px; margin-top: 10px;}
filter {background-color: var(--bg-color);  float:left; width: 98%;}
maintext {margin-bottom: 15px; line-height: 160%;font-size: 16px;  vertical-align: top; }

/* arrows */
block { padding: 6px; /*width: 90%;*/ display: block; margin-bottom: 2px;background-color: var(--bg-color); color: var(--text-color-darker);}       /*    var(--menu-button-text);  */
arrow { border: solid var(--text-color-dark); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
arrow[point='right']{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg);  }
arrow[point='left'] { transform: rotate(135deg); -webkit-transform: rotate(135deg);  }
arrow[point='up']   { transform: rotate(-135deg);-webkit-transform: rotate(-135deg); }
arrow[point='down'] { transform: rotate(45deg);  -webkit-transform: rotate(45deg);   }
label {color: var(--text-color-dark); font-size: 12px;}

filter colors {width: 33%;display: block; float: left; text-align: center; height: 100px; }
color-name, color-results {width: 90%; display: inline-block; padding: 0 5px;}
color-results {color: gray; font-size: 10px; padding-bottom: 10px;}                 /* ?????? what is this ????? */
color-name {color: var(--text-color-dark); font-size: 12px;}
color-check .other {background-image: linear-gradient(to right, red, orange , yellow, lightgreen);}
color-check {display: inline-block; float: none; margin: 0 auto; padding: 12px; border-radius: 80% 80% 2% 80% ;
            border-style: solid; border-width: 1px; color: lightgray; transform: rotate(45deg);  -webkit-transform: rotate(45deg);  }
filter colors.isChecked {background-color: var(--menu-button-hover); border-radius: 35% 35% 10% 85%; }

filterCategory {display: block; padding-left: 20px;}

flower {padding: 5px 0; display: block; float: left; width: 20%;cursor: pointer; pointer-events:auto;}
flower img {width: 98%; max-width: 98%; height: 180px; }
flower p {box-sizing: border-box; padding:5px; margin: -3px 0 0 0;  width:98%; background-color: var(--flower-box-bg-light); color: var(--flower-box-text-dark); height: 65px; overflow: hidden; font-weight: 350;} 
flower cn {display: block; padding: 6px 0; width:98%; text-align: center; background-color:  var(--flower-box-bg-dark); color: var(--flower-box-text-light); font-style: italic; height: 16px; overflow: hidden; font-weight: 400;}
flower cn l {color: var(--flower-box-text-light); font-style: normal;} 
flower b {color:  var(--flower-box-text-title);font-weight: 400;}   


slider {width: 70%; float: left;}
.slider-values,slider-values {color: var(--bar-text); font-size: 12px; width: 12%;font-weight: 500;}
.noUi-horizontal {height: 12px;font-size: 12px; line-height:100%;}
/*.noUi-base {background-color: var(--text-color-light); /*height: 8px;*//*}*/
.noUi-connect {background-color: var(--bar-selected);}
.noUi-base .noUi-handle {   background-color: var(--bar-text);    border-radius: 4px;       color: var(--bar-text-light);
    display: table;
    height: 4px;
    width: 12px;
    top: 0; left: 12px; top: -3px;
    position: absolute;
    text-align: center;
}
.noui-target {}
.noUi-horizontal .noUi-base .noUi-handle { cursor: ew-resize; }
.noUi-base .noUi-handle:hover {    background-color: var(--bar-selected); }
.noUi-handle:focus {outline: 0 none !important;}
.noUi-base .noUi-handle.noUi-active {   background-color: var(--bar-selected);  color: var(--bar-text-light); outline: 0 none !important;}
.noUi-base .noUi-handle::before { background: transparent;     content: '|';     display: table-cell;
        font-size: 8px;     font-weight: 500;       position: static;       width: 100%;        vertical-align: middle; 
}
.noUi-base .noUi-handle::after {    display: none;  }
.noUi-pips-horizontal {height: 35px; line-height: 2;}
.noUi-marker {background-color: var(--bar-selected);}
.noUi-marker-large {line-height: 10%; background-color: var(--bar-selected);}
.noUi-value {color: var(--bar-text); font-size: 12px; font-weight: 500;}

aFilter {position: relative; display: inline-block; margin-top: 2px; padding-right: 18px; border: 1px solid var(--bar-dark); line-height: 20px; overflow: hidden; 
        white-space:pre; text-overflow:ellipsis; max-width: 760px; background-color: var(--menu-button); color: var(--menu-button-text); border-radius: 25px; font-size: 12px;
        pointer-events:none; 
}
filters span {display: inline-block; padding: 3px 5px 3px 0; margin: auto; line-height: 20px; font-size: 14px; vertical-align: top;}
aFilter b { color: var(--text-color-main); font-weight: 400; padding-left: 4px;}
aFilter::before,
aFilter::after {  cursor: pointer; pointer-events:auto;
    position: absolute; 
    content: ''; right: 4px; top: 8px;
    width: 12px;
    height: 4px; /* cross thickness */
    background-color:  var(--text-color-main); /*var(--bar-dark);*/
}
aFilter::before { transform: rotate(45deg); }
aFilter::after { transform: rotate(-45deg); }
/*filters span{position: relative; display: inline-block; top: 20px; padding-top: 0px; line-height: 12px; background-color:green;}
*/

flowerInfo {display: block; float: left; width: 55%;}
flowerPhotos {display: block; float: right; width: 45%; position:relative;}
.text-block {position: absolute;bottom: 20px;right: 5px;background-color: black;color: white;padding-left: 10px;padding-right: 10px;font-size:11px;}

full_width {display: block; float: left; width: 100%; padding: 10px 0;}
tab {  display: block;      overflow: hidden;       border: 1px solid #ccc;       background-color: var(--flower-box-bg-light);    }
tab button {  background-color: inherit;      float: left;              border: none;       outline: none;
              cursor: pointer;                padding: 14px 15px;       transition: 0.3s;
}
tab button:hover {  background-color: #ddd; }
tab button.active { background-color: var(--flower-box-bg-dark); color: var(--flower-box-bg-light); }
.tabcontent {   display: none;      padding: 6px 12px;      border: 1px solid #ccc;
                border-top: none;   animation: fadeEffect 0.6s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {  from {opacity: 0;} to {opacity: 1;}    }

.vertical-menu {width: 220px;font-size: 14px;}
.vertical-menu a {background-color:#f4ebee; color: black;display: block;padding: 10px;text-decoration: none;}
.vertical-menu a:hover {background-color: #ccc;}
.vertical-menu a.active {background-color: #7a7a7a; color: white;}
.vertical-menu a.sub {padding-left:40px;font-size: 13px;}
.vertical-menu1 {width: 220px;}
.vertical-menu1 a {padding-left:40px;font-size: 14px;}
.vertical-menu1 a.active {background-color: #7a7a7a; color: white;}


.mapouter{position:relative;text-align:right;height:520px;width:800px;}
.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:800px;}

.halfScreen{width: 49%;}
.floatR{margin-right: 0; margin-top: 5px; float: right; clear: right;}
.floatL{margin-top: 5px; margin-left: 0; float: left; clear: left;}
.backWhite {background: #ffff;}
.boxEd  { padding: 10px;  margin-bottom: 15px;  font-size: 16px;  font-size: 1rem; vertical-align: top;border: 1px solid #ddd;box-shadow: 0 0 5px #ddd;box-sizing: border-box;   -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;}

/*Responsive Styles*/
@media screen and (max-width : 1050px){
#showmenu {height:70px;}
}

map {margin-top:300px;line-height:2px;}