@font-face {
    font-family: OpenSans;
    src: url('OpenSans-Regular.ttf');
  }


body {
    margin: 0;
    background-color: #f1f1f1;
    user-select: none;
}

 /* =========================================================*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .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: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }


  .suwak {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .suwak::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #2196F3;
    cursor: pointer;
  }
  
  .suwak::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
  }

  /* =========================================================*/


#map { height: 86%; width: 100%;}
#open_app {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    text-align: center;
    visibility:visible;
    opacity:1;
    transition:visibility 0.2s linear,opacity 0.2s linear;
}
#open_app img {width: 50%; margin-top: 5%;}
#open_app .progressbar {position: relative; max-width: 60%; width: 100%; margin: 5% auto 0; height: 30px; background: #ddd; overflow: hidden;}
#progress {position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #495afe; transition: all .3s;}

.vehicle_login {
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    font-family: OpenSans;
    font-weight: bold;
    font-size: 200%;
    text-align: center;
}

table.inputt tr td {
    font-family: OpenSans;
    font-weight: bold;
    font-size: 200%;
    color: #000;
}

.vehicle_login p {padding-top: 40px;}
.vehicle_login .cont {display: flex; width: 75%; margin-left: auto; margin-right: auto; margin-top: 10%;}
.vehicle_login .cont .login_inputs {width: 50%;}
.vehicle_login .cont .login_inputs table tr td #input_nr_pojazdu {text-align: center; width: 300px; background-color: white; border: 1px black solid; height: 45px; margin-left: 20px;}
.vehicle_login .cont .login_inputs table tr td #input_nr_kierowcy {text-align: center; width: 300px; background-color: white; border: 1px black solid; height: 45px; margin-left: 20px;}
.vehicle_login .cont .login_inputs table tr td #input_linia {text-align: center; width: 300px; background-color: white; border: 1px black solid; height: 45px; margin-left: 20px;}
.vehicle_login .cont .login_inputs table tr td #input_brygada {text-align: center; width: 300px; background-color: white; border: 1px black solid; height: 45px; margin-left: 20px;}
.vehicle_login .cont .login_keyboard {width: 50%;}
.vehicle_login .cont .login_keyboard .keyboard {width: 70%; margin-left: auto; margin-right: auto;}
.vehicle_login .cont .login_keyboard .keyboard .k_button {float: left; padding: 15px; margin: 10px; width: calc(33% - 55px); height: 60px;background-color: rgb(155, 180, 248); display: flex; justify-content: center; align-items: center; box-shadow: 0px 0px 8px rgb(0,0,0,0.3);}
.vehicle_login .cont .login_keyboard .keyboard .k_button:hover {background-color: rgb(117, 131, 255);}
.inputs {display: flex;}
#main_view {font-family: OpenSans;font-size: 200%;width: 100%;}
#map_menu {font-family: OpenSans;font-size: 200%;width: 100%;}
#zap_menu {font-family: OpenSans;font-size: 200%;width: 100%;}
#roz_menu {font-family: OpenSans;font-size: 200%;width: 100%;}
#menu {font-family: OpenSans;font-size: 200%;width: 100%;}
table.nav {font-size: 160%;}
#monitor {
    font-family: OpenSans;
    font-size: 100%;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
#load {
    padding: 100px;
    background-color: #eee;
    text-align: center;
    font-family: OpenSans;
    font-size: 200%;
    box-shadow: 0px 0px 7px black;
    border-radius: 20px;
}
.button_next {float: left; width: 50%; text-align: center; font-size: 200%;}
#bottom_menu {width: 100%; height: 40%; bottom:0; position: absolute;}
.disp_punkt {
    font-family: OpenSans; 
    font-size: 300%; 
    color: #00a000; 
    float: right;
    margin-right: 10%;
    padding: 0;
    margin-top: -20px;
    text-shadow: 0px 0px 7px #555;
}
img.bus {height: 100%; transform:translateX(-50%);}
#menu_button {font-family: OpenSans; font-size: 165%;}
.menu_option {cursor: pointer; padding: 15px; background-color: #eee; width: calc(100% - 30px); border: 1px solid black; font-family: OpenSans; font-size: 115%; border-radius: 20px; margin-bottom: 30px;}

table.zap {
    width: 50%;
    font-family: OpenSans;
    font-size: 160%;
    margin-left: auto;
    margin-right: auto;
}
#loading_info {
    font-size: 70%;
    font-style: italic;
}

img.globe {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
span.nointernet {
  font-family: OpenSans;
  font-size: 170%;
}
#retryButton {
  font-family: OpenSans;
  font-size: 160%;
  border: 0;
  background-color: #ddd;
  padding: 10px 50px;
  border-radius: 35px;
}
#retryButton:hover {background-color: #aaa;}


@media only screen and (max-width: 1200px) {
    #open_app img {width: 90%; margin-top: 50%;}
    #open_app .progressbar {margin: 15% auto 0;}
    .vehicle_login p {margin-left: auto; margin-right: auto; font-size: 230%;}
    .vehicle_login .cont {font-size: 240%;flex-direction: column; width: 95%; margin-top: 30%;}
    .vehicle_login .cont .login_inputs {width: 100%;}
    .vehicle_login .cont .login_keyboard {width: 100%; margin-top: 30%;}
    .vehicle_login .cont .login_keyboard .keyboard {width: 90%;}
    .vehicle_login .cont .login_keyboard .keyboard .k_button {height: 100px;}
    .vehicle_login .cont .login_inputs table tr td #input_nr_pojazdu {width: 95%; height: 100px;}
    .vehicle_login .cont .login_inputs table tr td #input_nr_kierowcy {width: 95%; height: 100px;}
    .vehicle_login .cont .login_inputs table tr td #input_linia {width: 95%; height: 100px;}
    .vehicle_login .cont .login_inputs table tr td #input_brygada {width: 95%; height: 100px;}
    table.inputt {width: 100%; } 
    table.inputt tr td{width: 50%;font-size: 430%;}
    .inputs {flex-direction: column;}
    #monitor {font-size: 230%;}
    table.nav {font-size: 230%;}
    .disp_punkt {font-size: 500%;}
    img.bus {height: 60%;}
    #menu_button {font-size: 300%;}
    .menu_option {font-size: 132%;}
    table.zap {width: 90%; font-size: 170%;}
    .switch {
        width: 90px;
        height: 51px;
    }
    .slider:before {
        height: 39px;
        width: 39px;
        left: 6px;
        bottom: 6px;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(39px);
        -ms-transform: translateX(39px);
        transform: translateX(39px);
    }
    .suwak::-webkit-slider-thumb {
        width: 38px;
        height: 38px;
    }
    .suwak::-moz-range-thumb {
        width: 38px;
        height: 38px;
    }
}