:root{
    --button-color: rgb(164,142,255);
    --button_hover-color: rgb(255, 99, 132);
    --button_down-color: rgb(255,219,99);
    --dividor-color: #d3d3d3;

    --genome-color-1 : rgb(99, 255, 132);
    --genome-color-2 : rgb(164,142,255);
    --genome-color-3 : rgb(255, 99, 132);
    --genome-color-4 : rgb(255,219,99);
    --genome-color-5 : rgb(99, 213, 255);
}

#about_title{
    width:100%;
    border-radius: 4px;
}

#about_col{
    width: 1200px
}
.break{
    height: 20px;
}
#genome_outer_div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}
#genome_div {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.divider{
    width:100%;
    height: 10px;
    background-color: var(--dividor-color);
    border-radius: 4px;

}

.genome_padding{
    width: 5px;
}
.genome_v{
    background-color: #181814;
    width:2px;
    height:30px;

    border-radius: 4px;
}

.genome_1{
    background-color: var(--genome-color-1);
    border-radius: 4px;
    padding:2px;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.genome_2{
    background-color: var(--genome-color-2);
    border-radius: 4px;
    padding:2px;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.genome_3{
    background-color: var(--genome-color-3);
    border-radius: 4px;
    padding:2px;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.genome_4{
    background-color: var(--genome-color-4);
    border-radius: 4px;
    padding:2px;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

.genome_5{
    background-color: var(--genome-color-5);
    border-radius: 4px;
    padding:2px;
    padding-bottom: 6px;
    padding-left: 4px;
    padding-right: 4px;
}
#title_box {
    position: absolute;
    background-color: var(--button-color);
    opacity: 0.8;
    font-size: xxx-large;
    padding: 10px;
    padding-right: 15px;
    border-bottom-right-radius: 4px;
    font-family: Arial;
}

#title{
    color: #181814;
}

#controls {
    min-width: 800px;
}

a:link, a:visited {

    color: var(--button-color);

    text-align: center;
    text-decoration: none;

}

#min-width{
    min-width: 800px;
}

html {
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    overflow-y: scroll;
}

html::-webkit-scrollbar {
    display: none; 
}

body,html {
    margin:0;
    padding:0;
}

input[type=text] {
    width: 30px;
    border: none;
    background-color: var(--dividor-color);
    border-radius: 4px;
    text-align: center;
}



#car_seed_text, #road_seed_text, #population_text, #sides_text, #mutation_text, #elitism_text, #bias_text{
    width: 65px;
}

#rnd_road_btn, #rnd_pop_btn, #seed_road_btn, #seed_pop_btn{
    min-width: 112px;
}

#state_text{
    width: 100%
}


input[type=range] {
    width: 100%;
    border: none;
}

input[type=range] {
    -webkit-appearance: none; 
    width: 100%;
    background: transparent; 
}


input[type=range] {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%; 
    height: 15px; 
    background: var(--dividor-color);
    outline: none; 
    -webkit-transition: .2s; 
    transition: opacity .2s;
}


input[type=range]:hover {
    opacity: 1; 
}


input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 20px;
    height: 20px; 
    border-radius: 4px;
    background: var(--button-color);
    cursor: pointer; 
}

input[type=range]::-moz-range-thumb {
    width: 25px; 
    height: 25px; 
    background: var(--button-color); 
    cursor: pointer; 
}

input[type=range]:focus {
    outline: none; 
}

input[type=range]::-ms-track {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

#racing_bar_chart, #generational_score_graph{
    min-height:400px
}

button{
    background-color: var(--button-color);
    border-radius: 4px;
    /*border: 2px solid #006BA6;*/
    border: none;
    /*height: 90%*/
    width: 100%
}

button:hover {
    background-color: var(--button_hover-color);
}

button:active {
    background-color: var(--button_down-color);
}

select{
    width: 100%;
    border-radius: 0;
    border-color: var(--button-color)
}

.fixed-key-width {
    flex: 0 0 230px;
}

.fixed-exp-width {
    flex: 0 0 160px;
}

.fixed-dot-width {
    flex: 0 0 10px;
}

.fixed-box-width {
    text-align: center;
    flex: 0 0 100px;
}

.load-box-width {
    text-align: center;
    flex: 0 0 120px;
}

#rnd_pop_btn, #rnd_road_btn{
    width: 100%;
}

#seed_pop_btn,#seed_road_btn{
    width:100%;

}


#game_div {
    text-align: center;
    display: flex;
    justify-content: center;
}


#controls{
    padding: 10px;
}

.row {
    padding: 2px;
}

.column {
    float: contour;
}


.ui-slider .ui-slider-handle {
     -webkit-appearance: none; 
     appearance: none;
     background: var(--button-color);
     width: 20px; 
     height: 20px; 

    position: center;

 }

.ui-slider .ui-slider-handle:hover {
    -webkit-appearance: none;  
    appearance: none;
    background: var(--button_hover-color);
    width: 20px; 
    height: 20px; 

    position: center;

}


.ui-slider .ui-slider-range {
    -webkit-appearance: none;  
    appearance: none;
    background: var(--dividor-color);
    border-radius: 0;
    outline: none;
    border: none;
    height: 5px;
    background-position: 10px,10px

}

.ui-slider {
    -webkit-appearance: none;  
    appearance: none;
    background: var(--dividor-color);
    border-radius: 0;
    outline: none;
    border: none;

}

.ui-slider-horizontal {
    height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.33em;
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
    top: 10px;
}