* {
     box-sizing: border-box;
   }

   body{
      background-color: #082126;
      color: white;
      font-size: 14px;
   }

   .container{
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
   }

   .bgimg{
      background-image: url('images/5156047.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100vw;
      height: 100vh;
      overflow: auto;
   }

   .middlediv{
      overflow: auto;
   }

   .glass{
      background: rgba(255, 255, 255, 0.2);
      border-radius: 0px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
   }
   
   input:read-only:disabled {
      background: rgba(105, 105, 105, 0.7);
      border-radius: 0px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: black;
   }
   input:required {
      border: 1px solid #72c172;
   }

   .header{
      padding: 5px;
      height: 40px;
      text-align: center;
      width: 100vw;
      position: fixed;
      top: 0%;
      z-index: 1;
   }

   .footer{
      padding: 5px;
      height: 40px;
      text-align: center;
      margin-top: 7px;
      width: 100vw;
      position: fixed;
      bottom: 0%;
   }

   .menu {
      float: left;
      width: 20%;
      text-align: center;
      margin-top: 47px;
   }
   
   .main {
      float: left;
      width: 60%;
      padding-top: 47px;
      padding-bottom: 47px;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
      min-height: 600px;
      display: none;
   }

   .right {
      float: left;
      width: 20%;
      margin-top: 47px;
      text-align: center;
   }
   .rightmenu {
      display: none;
   }

   .btn{
       margin-top: 5px;
       width: 180px;
   }
   .btn_sm{
       margin-top: 5px;
       width: 120px;
   }
   .btn_xs{
       margin-top: 5px;
       width: 100px;
   }

   .btn_xxs{
       margin-top: 0px;
       width: 40px;
       font-size: 0.75em;
   }

   .menubut{
      width: 210px;
   }

   .m_splash{
      padding-top: clamp(100px,calc(50vh - 200px),calc(50vh - 200px));
      text-align: center;
   }

   .m_main{
      text-align: center;
   }

   .vehdiv, .admindiv {
      border-style: solid;
      border-width: thin;
      border-radius: 5px;
      padding: 7px;
      margin: 5px;
   }
   
   .manualcapviddiv {
      border-style: solid;
      border-width: thin;
      padding: 0px;
      margin: 0px;
      display: inline;
   }
   
   .admindiv {
      max-width: 400px;
      margin: auto;
   }

   table tbody tr:hover {
     background-color: #526367;
   }

   table tbody tr:hover > .sorting_1 {
     background-color: #394d51;
   }
   
   .img_orcr {
      max-width: 300px;
   }

   .modal-body {
      padding: 5px;
      border: 5px;
      border-color: white;
   }

   .load-icon {
      display: none;
   }

.imglogo:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.form-switch .form-check-input {
    height: 15px;
    width: 30px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

   @media only screen and (max-width: 620px) {
      /* For mobile phones: */
      .menu, .main, .right {
         width: 100%;
      }
      .main {
         padding-top:40px;
      }
      .m_splash{
         text-align:center;
         padding-top: 100px;
      }
      .middlediv{
         min-height: 600px;
         padding-top: 100px;
      }
      .right{
         display: none;
      }
      .menutxt{
         font-size: 0.55em;
      }
      .rightmenu{
         display: inline;
      }
      .menubut{
         width: 90px;
         margin-top: 3px;
         margin-bottom: 3px;
      }
      .regbutS{
         width: 90px;
      }
      .regbutM{
         width: 100px;
      }
      .regbut{
         width: 130px;
      }
      .regbutL{
         width: 150px;
      }
      .menu{
         position: fixed;
         top: 40px;
         margin-top: 0px;
         z-index: 2;
         
         // glass
         background: rgba(255, 255, 255, 0.2);
         border-radius: 0px;
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
         border: 1px solid rgba(255, 255, 255, 0.3);
         color: white;
      }
   }