[data-tooltip]:hover::after {
    display: block;
    position:absolute;
    content: attr(data-tooltip);
    border: 1px solid black;
    //text-align: center;
    //align-self: center;
    transform: translate(0px,-5vh);

    //background: #eee;
    padding: .25em;
    //float: outside;
}


.matelko_vertical_menubutton{
    display:flex;
    z-index: 0;
    width:fit-content;
   /* height:100%; *//*height:99.4%;*/
  height:1.0 vh; 

    flex-shrink:0;
    flex-grow:0;

    background-color: rgba(16,16,16,1);
    border-radius: 6px;
    border: solid 2px rgba(40,40,40,1);
    cursor: pointer;
    cursor: hand;
    min-width: 10px;


    /*border-collapse: separate;
       padding: 0px 0px 0px 0px;
        /* overflow: hidden; */
    //text-align: center;
    ///vertical-align: middle;

}

.matelko_vertical_menubutton_text{

    // display: table-cell;
    writing-mode: vertical-rl;
    transform: rotate(-0.50turn);
    // transform-origin: top left;
    //  text-orientation: upright;
    // white-space: pre;
    // width: 5.5vh;
    height: 100vh;
    /*  overflow: scroll; */
    padding: 0px;
    margin: 0px;
    // margin-left: -6px;
    font-size: 4vh;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    color: var(--color_matelko-lcn);
    //  color: rgba(255,120,0,1);


    // text-orientation: upright;
    /* writing-mode: sideways-lr; */
    /* border: solid 1px blue; */
}





/*style items (options):*/
.select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

select {
    appearance: none;
    /* safari */
    -webkit-appearance: none;
    /* other styles for aesthetics */
    width: 100%;
    font-size: 2.0rem;
    padding: 0.675em 6em 0.675em 1em;
    background-color: #202020;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #FF0000;
    cursor: pointer;
    // padding: 50px;
}

option {
    padding: 60px;

    color: #ffffff;
    height:200px;
    margin: 20px;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
}


option-select {
    color: #00FF00;
}





.input_text{
    text-align:center;
    font-size:1.5vw;
    box-sizing:border-box;

}
.input_text:focus{
    outline: none !important;
    //   border: solid 2px #9EF538;
    text-align:center;

}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.input_common{
    width:100%;

    padding:0.9vh;
    box-sizing: border-box;

    background-color:#0F0F0F;
    color:rgba(0,0,0,1);
    font-size: 3vh;
    font-weight:bold;
    cursor:pointer;
    cursor:hand;

    border-radius:var(--button_border_radius);
    border:solid 0.35vh #222222;
    color:#ffffff;
    box-shadow:0px 2px 6px 0px rgba(0,0,0,0.5);
    text-align: center;



}


.dropdown{
    width:100%;
    height:auto;
    flex-grow: 1;
    flex-shrink: 1;

    //line-height: 150%; 
    //display: table-cell;
    // width: calc(25vw - 0px);
    /* height: calc(9vh - 24px); */
    /* height: calc(10vh - 12px); */


    padding-top: 1.2vh;
    padding-bottom: 1.2vh;


    // font-size: 1.5vw;
    font-size: 3.0vh;




    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.5vh;
    background-color: rgba(255,255,255,0.1);
    border: solid 1px rgba(40,40,40,1);
    cursor: pointer;
    cursor: hand;



}

.dropdownex{
    width:100%;
    height:fit-content;
    flex-grow: 1;
    flex-shrink: 1;
    align-self: center;

    /*padding-top:20px;*/
    /*line-height: 150%; */
    /*display: table-cell;*/
    /* width: calc(25vw - 0px);
    /* height: calc(9vh - 24px); */
    /* height: calc(10vh - 12px); */
    /* font-size: 1.5vw; */

    font-size: 3.0vh;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.5vh;
    background-color: rgba(255,255,255,0.1);
    border: solid 1px rgba(40,40,40,1);
    cursor: pointer;
    cursor: hand;

}

.dropdown_popup{
    position: absolute;
    z-index: 2;

    width:100vw;
    height:100vh;
    background-color: #00000050;

    //left:0px;
    // top:0px;

}

.dropdownlist{
    border-radius: 0.5vh;
    background-color: #505050;
    position:sticky;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    align-self: center;
    z-index: 3;
    overflow-y: auto;
    bottom: 0px;
    top:50px;
    max-height: 100vh;
    //max-height: 70%;
    //transform: translateY(-50%);

    // z-index: 90000;


}

.dropdownitem{
    font-size: 3vh;
    margin: 2px;
    border-radius: 0.5vh;
    z-index: 4;
    cursor: pointer;
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
}


input[type="checkbox"], input[type="radio"]  {

    /*height: 100%;*/
    width: auto;

    transform : scale(1.5);
    margin-left: 1vw;
    margin-right: 1vw;
}

.radiotext #radio {
    // -webkit-appearance: radio;

    // height: 90%;

    // border-color: red;
    // border: 0px solid #999;
}



div.radiotext {
    display:flex;
    padding-left: 0.1vw;
    padding-right: 0.5vw;
    border-radius: 0.5vh;
    cursor: pointer;
    align-content: center;
    align-items: center;

    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    vertical-align: middle;
    box-sizing:border-box;
}

div.radiotext #text {
    font-weight: bold;
    font-size: 3vh;
    vertical-align: middle;
    //padding-top: 1.2vh;
    //padding-bottom: 1.2vh;

}


/* SWITCH !!!!!! */
.switch {
    display: flex;
    flex-direction: row-reverse;
    /* Finetune the switch */
    --switch-height: calc((2.5vh + 2.5vw)/2);
    --switch-width: calc((5vh + 5vw)/2);
    --switch-border: 0px;

    --switch-color-checked: #307080;
    --switch-color-unchecked: gray;
    --switch-dot-color-checked: #00FF00;
    --switch-dot-color-unchecked: #FF0000;

    font-size: 2vh;

    align-items: center;
    align-content: center;
    align-self: center;
}

.switch label {
    display: flex;
    cursor: pointer;
    min-width: var(--switch-width);
    min-height: var(--switch-height);
    align-items: center;
    justify-content: center;

}

.switch label::before,
.switch label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.25s ease-in-out;
    box-sizing: border-box;
    margin: auto;

}

.switch label::before {
    z-index: 1;
    background-color: var(--switch-color-unchecked);
    width: var(--switch-width);
    height:  calc(var(--switch-height)*0.70);
    border-radius: calc(var(--switch-height) * 0.5);
    margin: auto;

}

.switch label::after {
    z-index: 2;
    background-color: var(--switch-dot-color-unchecked);
    height: calc(var(--switch-height) - (var(--switch-border) * 2));
    width: calc(var(--switch-height) - (var(--switch-border) * 2));
    transform: translate(var(--switch-border), var(--border));
    border-radius: calc(var(--switch-height) / 2);
}

.switch input {
    width: 0;
    height: 0;
    visibility: hidden;
    display: flex;
}

.switch input:checked+label::before {
    transition: 0.5s;
    background-color: var(--switch-color-checked);
}

.switch input:checked+label::after {
    transform: translate(calc(var(--switch-width) - 100% - var(--switch-border)), var(--switch-border));
    background-color: var(--switch-dot-color-checked);
}

.switch.align-left label {
    display: flex;
    width:auto;
    padding-right: 0;
}

.switch.align-left label::before,
.switch.align-left label::after {

    position: relative;
    order: 2; /* could technically be 1, but this is more intuitive */
    margin-left: 8px;

}

.switch.align-left label::after {
    margin-left: calc(var(--switch-width)*-1);
}