body.hidden {
   overflow: hidden;
   height:100%;
}
body {
   overflow: hidden;
   height:100%;
}

@-ms-viewport{
    width:device-width;
    height:device-height;
}

#fullpage {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
}

input {
   font-family: inherit;
}


.invisible {
    display:none;
}

.full {
    position:relative;
    width:100%;
    height:100%;
}

.halfvertical {
    position:relative;
    width:100%;
    height:50%;
}

.column_container {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:start;
    justify-content:left;
}

.vertical2on3 {
    width:100%;
    height:66%;
}

.vertical2on3bottom {
    width:100%;
    height:34%;
}

.halfcolumn1 {
    width:50%;
    height:100%;
}
.halfcolumn2 {
    width:50%;
    height:100%;
}

#myheader {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:15vh;
    height:calc(var(--vh, 1vh) * 15);
}

#mybody {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:85vh;
    height:calc(var(--vh, 1vh) * 85);
}

.centerflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:center;
    justify-content:center;
}

.columntopflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:column;
    align-items:center;
    justify-content:flex-start;
}

.columncenterflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:column;
    align-items:center;
    justify-content:center;
}

.leftflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:center;
    justify-content:left;
}

.rightflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:center;
    justify-content:right;
}

.buttonlefticon {
    margin-left: 1%;
    margin-right: 5%;
    display:flex;
    display:-webkit-flex;
    flex-flow:column;
    align-items:center;
    justify-content:center;
    font-size:4vh;
    color:white;
}

.buttoncover {
    margin-left: 1%;
    width:11vw;
    margin-right: 1%;
}

.textinputcontainer {
    width : 100%;
    height : 3.5vh;
    min-height : 3.5vh;
}

.textinput {
    width : 90%;
    height : 3.5vh;
    min-height : 3.5vh;
    border-style:solid;
    border-radius:6px;
    border-width:thin;
    margin-left:2%;
    margin-right:2%;
    margin-top:0.5%;
    margin-bottom:0.5%;
    color:blue;
}

.textline {
    width : 90%;
    height : 6vh;
    color:white;
    margin-left:2%;
    margin-right:2%;
    margin-top:1%;
    margin-bottom:1%;
}

.textbutton {
    width : 30%;
    height : 6vh;
    border-style:solid;
    border-radius:6px;
    border-width:thin;
    margin-left:2%;
    margin-right:2%;
    margin-top:1%;
    margin-bottom:1%;
}

.fontcolor {
    color:white
}




#overview {
    position:relative;
    width:100%;
    height:100%;
    background-color:red;
}

#detail {
    position:absolute;
    width:100%;
    height:100%;
    background-color:royalblue;
}

#addcompany {
    position:absolute;
    width:100%;
    height:100%;
    background-color:cyan;
}

#account {
    position:absolute;
    width:100%;
    height:100%;
    background-color:yellow;
}


#login {
    position:absolute;
    width:100%;
    height:100%;
    background-color:grey;
}

.verticalscroll {
    width:100%;
    height:100%;
    max-height: 100vh;
    max-height:calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
}


.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .35s;
    transition: .35s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.flexiblehalfcolumn1 {
    width:50%;
    height:100%;
}
.flexiblehalfcolumn2 {
    width:50%;
    height:100%;
}

.fexiblecenterflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:flex-start;
    justify-content:flex-start;
}

.verticalonethird {
    width:100%;
    height:33%;
}

.buttontext {
    margin-top:2px;
    margin-bottom:0px;
    font-size:2vh;
    color:white;
}

.textfontsize_s {
    font-size:3vh;
}

.textfontsize_m {
    font-size:4vh;
}

select {
    width: 150px;
    font-size: 16px;
    padding:5px;
    border: 1px solid #ccc;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://otonaki.co.il/graphics/selectarrow.png) 4% / 15% no-repeat #eee;
}


/* CAUTION: IE hackery ahead */
select::-ms-expand {
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
    }
}

.TFHd
{
    text-decoration: underline;
    text-align:center;
    background-color:red;
    border: 1px solid black;
}

.TFtable tr{
    background: #ffb3b3;
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}

.TFtable tr:nth-child(odd){
    background: #ffb3b3;
}
.TFtable tr:nth-child(even){
    background: #ffffff;
}


.cityselect:first-child {
    color: yellow;
}

.myr2l
{
    direction:rtl;
}

.capslockitem
{
    font-size: 1vw;
    width:7%;
    height:3vh;
}

.capstext
{
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("graphics/caps.png");
}