/* GENERAL SETTINGS */

:root{
        
    /* variables used in different elements */

    --font-min: 8;
    --font-max: 20;

    --view-min: 320;
    --view-max: 1920;
    
    --size-mult: calc(1px + (4 - 1) * (100vw - var(--view-min)*1px)) / (var(--view-max) - var(--view-min));
    --size-mult-low: calc(1px + (2 - 1) * (100vw - var(--view-min)*1px)) / (var(--view-max) - var(--view-min));

    --font-size: calc(var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vw - (var(--view-min)*1px)) / (var(--view-max) - var(--view-min))));

    --height-header: 8vh;                                   /* header is 6.5% of total viewport height */
    --height-footer: 6vh;                                   /* footer is 5% of total viewport height */
    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));

    --height-logo: calc(var(--height-header) - (var(--size-mult) * 10));

    --width-bckgrnd: 60vw;                                  /* set width to 60% of viewport */
    --height-bckgrnd: calc(0.325 * var(--width-bckgrnd));  /* side.svg: 800x260 >> height = 0.325 * width */

     /* --height-v-slider: calc(0.54 * var(--height-main)); */
    --height-v-slider: calc(var(--height-main) - (var(--height-bckgrnd) + var(--font-size) + (var(--size-mult) * 30)));

}

html, body {

    height: 100%;
    /* font-size: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320))); */
    /* font-size: calc(var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vw - (var(--view-min)*1px)) / (var(--view-max) - var(--view-min))));*/
    font-size: var(--font-size);

}

/* HEADER */

#header {
    /*height: 50px;*/
    height: var(--height-header);
}

#logo_img {
    /*max-width:100%;*/
    /*height:auto;*/
    height: var(--height-logo);
}

/* FOOTER */

#footer {
    /*height: 36px;*/
    height: var(--height-footer);
}

/* MAIN */

#main {

    /* fill remaining height: calculate as viewport height - (header + footer) */
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);

}

/* background image */
#main_sliders {
    background-image: url('../../src/images/side.svg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: var(--width-bckgrnd); 
}

/* buttons */

.btn {

    cursor: pointer;
    outline: none; 

    --pad-top: calc(3 * var(--size-mult));
    --pad-side: calc(5 * var(--size-mult));
    --btn-border: calc(1 * var(--size-mult));
    --btn-radius: 6px;

    padding: var(--pad-top) var(--pad-side);
    font-size: 1rem;
    border: var(--btn-border) solid;
    border-radius: var(--btn-radius);
}

/* RADIO INPUTS */

/*-- Radio selector items --*/

/*-- male - female images --*/
.gender_m{background-image:url("../images/gender_m-1.png");}
.gender_f{background-image:url("../images/gender_f-1.png");}

/*-- body profile images --*/
.profile_1{background-image:url("../images/profile_1-1.png");}
.profile_2{background-image:url("../images/profile_2-1.png");}
.profile_3{background-image:url("../images/profile_3-1.png");}
.profile_4{background-image:url("../images/profile_4-1.png");}

/*-- disable radio selector items --*/
.radio-selector{
    display: inline-block;
    vertical-align: middle;
}

.radio-selector input{
    margin:0;padding:0px;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

/* change opacity when hovering/active/checked... */
.radio-selector input:active +.radio-type{
    opacity: .9;
}

.radio-selector input:checked +.radio-type{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.radio-type{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    outline: none; /* prevent from showing a blue border when selected...*/
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.radio-type:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.radio-type {
    width: calc(50px + 10 * var(--size-mult));
    height:calc(50px + 10 * var(--size-mult));
    border-radius: calc(3px + 1 * var(--size-mult));
}

.summary-img {
    width: calc(50px + 10 * var(--size-mult));
    height:calc(50px + 10 * var(--size-mult));
    border-radius: calc(3px + 1 * var(--size-mult));    
}
.unknown {
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.known {
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

/* IMAGE - ROUNDED CORNERS */

img.rounded {
    outline: none; /* prevent from showing a blue border when selected... */
    border-radius: calc(3 * var(--size-mult));
}


/* TABS */

div.card-body.hide { 
    display: none; 
}
div.card-body.show{
    display: block;
}

/* SQUARE */

.square {
    --sq-m: calc(5px + 10 * (var(--size-mult) - 1));
    --sq-h: calc(10px + 20 * (var(--size-mult) - 1));
    --sq-r: calc(4px + 10 * (var(--size-mult) - 1));
    --sq-s: calc(2px + 5 * (var(--size-mult) - 1));

    margin: 0px var(--sq-m);
    height: var(--sq-h);
    width: var(--sq-h);
    border-radius: var(--sq-r);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    box-shadow: 0 0 var(--sq-s);
}

/* SLIDERS */


/* TOOLTIP: only show the tooltip when dragging a particular slider: */

.noUi-tooltip {
    display: none;
}
.noUi-active .noUi-tooltip {
    display: block;
}

/* HORIZONTAL (PROFILE) SLIDERS */

.sliders.profile {
    display: inline-block;
    vertical-align: bottom;
}
.sliders.profile {
    /*width: 280px;*/
    width: 60%;
    height: calc(4px + 4 * var(--size-mult));
    margin: calc(12px + 4 * var(--size-mult));
}	
.sliders.profile .noUi-handle {
    height: calc(10px + 4 * var(--size-mult)); 
    width: calc(10px + 4 * var(--size-mult)); 
    border-radius: 6px; 
    border: none;
}
.noUi-pips-horizontal {
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px 0;
    height: 40px;
}
.sliders.profile .noUi-handle::after {
    display: none;
}
.sliders.profile .noUi-handle::before {
    display: none;
}	
.sliders.profile .noUi-value {
    /* don't show pip values */
    display: none;
}

/* VERTICAL (MODULE) SLIDERS */

/* show tooltip at right hand side */
.noUi-vertical .noUi-tooltip {
      -webkit-transform: translate(220%, -50%);
     transform: translate(220%, -50%);
}
.sliders.vertical {
    /*
    height: -webkit-calc(50vh);
    height: -moz-calc(50vh);
    height: calc(50vh);
    */
    height: var(--height-v-slider);
    width: calc(60 * var(--size-mult-low)); 
    margin: calc(10 * var(--size-mult-low)); /* 10px;*/
    display: inline-block;
    /*
    margin-left: auto;
    margin-right: auto;
    */
}
.sliders.vertical .noUi-handle{
    height: calc(10px + 40 * var(--size-mult-low)); 
    width: calc(10px + 60 * var(--size-mult-low)); 
}

.zonecontrol{
    height: calc(var(--height-v-slider) / 3);
}

#general-slider {
    margin-left: calc(20 * var(--size-mult));
}