:focus {
    outline: transparent;
    background-color: transparent;
}

:root {
    --color_matelko-lcn: rgba(250,190,0,1);

    --selector_selected_focused_fill: #00618E;
    --selector_selected_focused_outline: #43FF00;

    --selector_focused_fill: #292929;
    --selector_focused_outline: #9EF538;

    --selector_selected_fill: #004261;
    --selector_selected_outline: #5FC4D1;

    --selector_normal_fill: #0F0F0F;
    --selector_normal_outline: #222222;

    --selector_muted: #606060;

    --progress_background: #101010;
    --progress_foreground: rgba(70,140,210,1);

    --c_time: #FFFFFF60;
    
    --button_border_radius: 0.7vh;

    


}

div{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
   // background-color: red;
}

/* Using * overrides the variable for all html tags where it is actually used */
/* {
    --hl-color-green: #0cc120;
}*/

/* https://www.cdnfonts.com/samsungone.font */


.layouts {
    position:fixed;
    height:100%;
    width:100%;
   /* overflow: hidden;*/
    
}



.overlay {
    z-index: 100000;
    position:fixed;
    height:100%;
    width:100%;
    // background-color:#FF000020;
    pointer-events: none;
}


@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

/*https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-and-then-fade-out*/
.overlay_network_status {

    animation: pulse 0.5s linear infinite;

    text-align: center;
    vertical-align: middle;
    top: calc(50% - 5.5%);
    left:calc(50% - 5.5%);
    position:absolute;
    margin: auto;

    padding:20px;

    width: fit-content;
    height:fit-content;
    font-size: 5vh;
    box-sizing: content-box;
    font-weight: bold;
    opacity: 60%;

    color: #FF6040;
    background-color: #101010;
    border-radius: 20px;
}


body {

    //font-family: Verdana, Arial, Helvetica, sans-serif;
    //  font-family: Arial;
    //font-family: Arial;

    font-family: 'SamsungOne', sans-serif;
    /* font-family: 'Samsung Sharp Sans', sans-serif;*/

    font-size: 1.5vw;
    color: #ffffff;
    background-color: #202020FF;
    margin: 0px;
    overflow:hidden;
    padding: 0px;
    height:100vh;
    width:100vw;
    
 /* position: fixed;
    top: 0;
    left: 0;*/
    /* background-image: url('stream.gif');
     background-size:100vw 100vh;*/
}

a:link {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}
a:visited {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}
a:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}
a:active {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}


div.layout{
    position: absolute;
    width:100%;
    height:100%;
    
}


div.button.scrollable {
    font-size: 2.5vh;
    padding: 2.3vh;
    color:#CCCCCC;

}

div.button {
    background-color: var(--selector_normal_fill);
    border: solid 0.33vh var(--selector_normal_outline);
    border-radius: var(--button_border_radius);
}

.button.muted{
    color:var(--selector_muted);
}

.button.hover{
    background-color: var(--selector_focused_fill);
    border: solid 0.33vh var(--selector_focused_outline); 
}

.button.selected{
    background-color:var(--selector_selected_fill);
    border: solid 0.33vh var(--selector_selected_outline);
}

.button.selected.hover{
    background-color:var(--selector_selected_focused_fill);
    border: solid 0.33vh var(--selector_selected_focused_outline);
}


.menu_button_container{
    display: flex;
    width:auto;
    height:5vh;
    flex-grow: 1;
    flex-shrink: 0;
    align-items: center;
    text-align: center;
    padding: 0.3vh;
    margin:  0.3vh;
    
    //padding-top: 2.5vh;
    //padding-bottom: 2.5vh;
    /* font-size: 1.5vw;*/
    border-radius: 0.5vh;
    background-color: rgba(255,255,255,0.1);
    border: solid 1px rgba(40,40,40,1);
    cursor: pointer;
    cursor: hand;
    
    // margin:0.3vh;
    //line-height: 150%; 
    //display: table-cell;
    // width: calc(25vw - 0px);
    /* height: calc(9vh - 24px); */
    /* height: calc(10vh - 12px); */
    /* border: solid 1px yellow; */
    
}

.button_text {
    width: 100%;
    /* font-size: calc((2.0vh + 2.0vw)/2); */
    font-size: 110%;
    line-height: 0px;
    vertical-align: middle;
    
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}




.radiobutton_div{
    padding-left: 10px;
    margin:0.3vh;
    border-radius: 0.4vh;
}

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(2.5);
    vertical-align:middle;
    margin:2vh;

    pointer-events: none;


    //   font-size: 60em;
}

input[type="radio"] + label {
    font-size: 3.5vh;
    vertical-align: middle;
    pointer-events: none;
    padding:3vh;
}







/* width */
::-webkit-scrollbar {
    width: 1.5vh;

}

/* Track */
::-webkit-scrollbar-track {
    background: #00000090;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00FF00;
    border-radius: 0.5vh;
    border-style: 1px 1px 1px 1px red;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #FFFF20;
}

/*.button{
    background-color:#1616FFFF;
    border: solid 2px #303030;
}*/

/*.hover{
    background-color:#292929;
    border: solid 2px #9EF538;
}*/



/*div.hover.selected{
    background-color:#2929FF;
    border: solid 4px #9EF5FF;
     z-index: 1000;
     
}*/

/*body{
    margin:0;
    padding:0;
    //background-image: url('stream.gif');

    /*background-size:100vw 100vh;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.5vw;
}*/