@charset "utf-8";

:root {
	--blue-active: #0075FF ; 
    --pad: 5px;
    --line-height: 28px; /* calc(); to rem */
}

fieldset {border: none; margin:0; padding:0;}

.form button { border:solid 1px #ccc; }

.form .diagnostic {color: #999;}

.form fieldset {margin:0; padding:0; border:none;}

.form label {
    font-weight:bold; color:#666; line-height:var(--line-height); width: auto; min-width:40px;/*font-size:0.9em;*/ text-align: right; padding-right:var(--pad);
}

.form label.narrow { min-width:20px ; padding-left:0.2em;}




.form input, .form select {
    display:inline-block; 
    vertical-align: middle;
    border: 1px solid #ccc; 
    width: 160px; 
    height: var(--line-height);   
    padding:3px;
    box-sizing:border-box;
    margin:0;
}
.form input[type='radio'], .form input[type='checkbox']{
    height: auto;
    width: auto;
    margin: var(--pad);
}
.form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url(/climate/images/symbols/chevron-down-small.svg);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .2em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: 1.0em auto, 100%;
   
    padding-left: var(--pad);
    border-radius:none;
}
.form select:disabled  { 
    background-image: url(/climate/images/symbols/chevron-down-small-grey.svg);
}

/* constrain */
.form select option { padding: var(--pad); line-height: 25px;}

/* native disabled not explicit enough */
input[type="button"]:disabled, select[type="button"]:disabled { opacity: 0.3;cursor: default; background-color: #efefef !important;}



.icon.play     { background: url(/climate/images/symbols/play-24x24.png);}
.icon.stop     { background: url(/climate/images/symbols/stop-24x24.png);}
.icon.previous { background: url(/climate/images/symbols/previous-24x24.png);}
.icon.next     { background: url(/climate/images/symbols/next-24x24.png);}
.icon.last     { background: url(/climate/images/symbols/last-24x24.png);}
.icon.first    { background: url(/climate/images/symbols/first-24x24.png);}

/*icon-info-large.png svg currentcolor not inheriting into buttons could add a contextual class eg grey */
.icon.about    { background: url(/climate/images/symbols/info-circle-grey.svg) no-repeat left; min-width:24px; min-height:20px; display: inline-block; vertical-align: middle; }
.icon.download    { background: url(/climate/images/symbols/download-grey.svg) no-repeat left; min-width:24px; min-height:20px; display: inline-block; vertical-align: middle; } 
.icon.refresh    { background: url(/climate/images/symbols/refresh-grey.svg) no-repeat left; min-width:24px; min-height:20px; display: inline-block; vertical-align: middle; } 

.icon.close    { background: url(/climate/images/symbols/x-grey.svg) no-repeat left; min-width:24px; min-height:20px; display: inline-block; vertical-align: middle; }


.icon.map    { background: url(/climate/images/symbols/icon-map-24x24.png) no-repeat left; min-width:26px; min-height:26px; display: inline-block; vertical-align: middle;  margin-left:4px;}
.icon.location { 
background: url(/climate/images/symbols/map-pin-grey.svg) no-repeat left; 
min-width:30px; min-height:26px; display: inline-block; text-align: center; margin-left:4px;
	padding-left: 1px !important; font-family: monospace;
	line-height:35px;
	color: transparent;
}