:root {
  --primary-color: #3498db; 
  --secondary-color: #2ecc71;
  --text-color: #333333; 
  --background-color: #f7f7f7;
  --block-shadow:  rgba(0, 0, 0, 0.14) 0px 3px 6px; 
  --border-radius: 4px;
}
header,main,footer{
    box-shadow: var(--block-shadow); margin-bottom: 6px;
}
header {
  background-color:var(--primary-color);
  background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 130, 199, 1) 50%, rgba(83, 214, 237, 1) 100%);
  text-align: center;
}
header h1{
    padding: 0; margin: 0.4em;
}
main {  
    background-color:var(--background-color); 
}
main .content {
    padding: 1em;
    background-color: #ffffff;
    overflow: auto;
}
footer {
  background-color:var(--primary-color);
  background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 130, 199, 1) 50%, rgba(83, 214, 237, 1) 100%);
  color: white;
  text-align: center;
  padding: 1em;
  font-size: 0.9em;
}

section{}
.accordion {
    float: right ;
    width: 300px;
    font-size: 0.85em;
}


.tabs_fake{}
.tabs_fake li{
    display: inline-block;
    margin-right: 0.3em;
    margin-bottom: 0.3em;
}    
.tabs_fake li a{
    text-decoration: none;
    border: solid 1px #969696;
    color: #6d6d6d;
    background-color: var(--background-color);
    padding: 0.3em 0.7em ;
    border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
   
}
.tabs_fake li a.active{ 
    border: solid 1px var(--primary-color);  
    background-color: var(--primary-color);
    color: white;
}



.fromto{ 
    border:1px solid var(--primary-color); 
    padding:0.5em;    
    margin-bottom:1em;
   
    display: block;
    float: left;   
    width: 650px; 
    border-bottom-right-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
}

section #tabs{
    display: none;
}
.fromto h1{
    text-align: center;
    font-size: 1.2em;
    padding: 0; margin: 0;
    
}

.fromto label { 
   
    float: left;
    width: 50%;
     padding: 0.5em ;
    /*margin: 0.5em;*/
   /* border: solid 1px green;*/
}
.fromto .select_list,.fromto .input_fromto{
    width: 100%;
    clear: both;
 
}
.fromto .select_list label{
   
}
.fromto #swap{
    display: block;
    float: left;
    clear: both;
    margin: 0.5em;
    width: 5%;
    height: 2.5em;
    background-image: url("../images/repeat-alt.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2em 1.5em;
    cursor: pointer;
    display: none;
}

#from_value{border-bottom-color:var(--primary-color) ;}
#to_value{border-bottom-color:var(--secondary-color) ;}
#from_measure_type::selection{ background-color: var(--primary-color); color: white;}
#to_measure_type::selection{ background-color: var(--secondary-color); color: white;}
/*.page_content{float: left; display: block; width: auto;}*/

@media (max-width: 650px){
    .tabs_fake li{
    
    margin-right: 0.4em;
    margin-bottom: 0.35em;
}    
.tabs_fake li a{
    font-size: 0.8em;
    padding: 0.4em 0.8em ;  
   
}
    .fromto{ 
        width: 100% !important;  
        clear: both !important;
        float: none !important; 
        
        overflow: auto;}
    .fromto label,.fromto .select_list label{
        width: 100%;
        clear: both;
       padding: 0.5em 
        
    }
    .fromto #swap{
      
        text-align: center;
        clear: both;
        margin: auto;
    }
    .accordion{
        float: none !important;
        clear: both !important;
        width: 100% !important; 
        font-size: 0.85em;
    }
} 

.fromto label input, .fromto label select{
    width: 100%;
    margin-top: 0.5em 0.5em 0 0;
    font-size: 1em;
}
.fromto label span{ display: block;}

.converter-groups{font-size: 0.85em; background-color: var(--background-color);}
.converter-groups div{
    padding: 1em;
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--block-shadow);
    margin-bottom: 1em;
}
.converter-groups h4{ padding: 0; margin: 0; margin-bottom: 1em;}
.converter-groups ul{}
.converter-groups ul li{}
.converter-groups ul li a{
   
}