/* Html replace style */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
}

.rounded-5 {        
  border-radius: 5px 5px 5px 5px;
}

.rounded-10 {        
  border-radius: 10px 10px 10px 10px;
}
/* ---------------------------------- */

body {
    font-family: Arial, Helvetica, sans-serif;

    touch-action: manipulation;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
}

a {
    color: #388BD4;
    text-decoration: none;
}

a:hover {
    color: #388BD4;
}

a:visited {
    color: #388BD4;
}

a:active {
    color: #388BD4;
}

textarea {
    resize: none;
}

.bg-darkgray {
  background-color: #555;
}

.bg-darkgray-gradient {
  background-color: linear-gradient(to bottom, #3498db, #8e44ad);
}

.bg-lightblue {
  background-color: #93AAD4;
}

.bg-white {
  background-color: #FFFFFF;
}

.txt-blue { color: #388BD4; }
.txt-blue:hover { color: #ffffff; }
.txt-lightblue { color: #93AAD4; }
.txt-green { color: #056938; }
.txt-gray { color: #888; }
.txt-darkgray { color: #555; }
.txt-lightgray { color: #ddd; }
.txt-white { color: #fff; }
.txt-red { color: #CB4335; }
.txt-yellow { color: #FDDD5C; }

.btn-darkgray {
    background-color: #555;
    border-color: #555;
    color: #fff;
    font-size: small;
  }
  
  .btn-darkgray:hover {
    background-color: #fff;
    border-color: #fff;
    color: #555;
    font-size: small;
  }
  
  .btn-darkgray-outline {
    background-color: #fff;
    border-color: #555;
    color: #555;
    font-size: small;
  }
  
  .btn-darkgray-outline:hover {
    background-color: #555;
    border-color: #555;
    color: #fff;
    font-size: small;
  }

  .btn-blue {
    background-color: #388BD4;
    color: #fff;
    font-size: small;
  }

  .btn-blue:disabled {
    background-color: #eee;
    color: #aaa;
    font-size: small;
  }
  
  .btn-blue:hover {
    background-color: #fff;
    border-color: #388BD4;
    color: #388BD4;
    font-size: small;
  }
  
  .btn-blue-outline {
    background-color: #fff;
    border-color: #388BD4;
    color: #388BD4;
    font-size: small;
  }
  
  .btn-blue-outline:hover {
    background-color: #388BD4;
    border-color: #388BD4;
    color: #fff;
    font-size: small;
  }
  
  .btn-blue-reverse {
    background-color: transparent;
    border-color: #388BD4;
    color: #388BD4;
    font-size: small;
  }
  
  .btn-blue-reverse:hover {
    background-color: #388BD4;
    border-color: #388BD4;
    color: #fff;
    font-size: small;
  }
  
  .btn-white {
    background-color: #fff;
    border-color: #888;
    color: #888;
    font-size: small;
  }
  
  .btn-white:hover {
    background-color: #888;
    color: #fff;
    font-size: small;
  }
  
  .btn-gray {
    background-color: #888;
    color: #fff;
    font-size: small;
  }
  
  .btn-gray:hover {
    background-color: #fff;
    border-color: #888;
    color: #888;
    font-size: small;
  }
  
  .btn-lightgray {
    background-color: #ddd;
    color: #fff;
    font-size: small;
  }
  
  .btn-lightgray:hover {
    background-color: #fff;
    border-color: #ddd;
    color: #ddd;
    font-size: small;
  }
  
  .btn-lightgray.active {
    background-color: #fff;
    border-color: #ddd;
    color: #ddd;
    font-size: small;
  }
  
  .btn-green {
    background-color: #056938;
    color: #fff;
    font-size: small;
  }
  
  .btn-green:hover {
    background-color: #fff;
    border-color: #056938;
    color: #056938;
    font-size: small;
  }
  
  .btn-green-outline {
    background-color: #fff;
    border-color: #056938;
    color: #056938;
    font-size: small;
  }
  
  .btn-green-outline:hover {
    background-color: #056938;
    border-color: #056938;
    color: #fff;
    font-size: small;
  }
  
  .btn-green-reverse {
    background-color: transparent;
    border-color: #056938;
    color: #056938;
    font-size: small;
  }
  
  .btn-green-reverse:hover {
    background-color: #056938;
    border-color: #056938;
    color: #fff;
    font-size: small;
  }
  
  .btn-red {
    background-color: #CB4335;
    color: #fff;
    font-size: small;
  }
  
  .btn-red:hover {
    background-color: #fff;
    border-color: #CB4335;
    color: #CB4335;
    font-size: small;
  }
  
  .btn-red-outline {
    background-color: #fff;
    border-color: #CB4335;
    color: #CB4335;
    font-size: small;
  }
  
  .btn-red-outline:hover {
    background-color: #CB4335;
    border-color: #CB4335;
    color: #fff;
    font-size: small;
  }
  
  .btn-trans {
    background-color: transparent;
    border: none;
    color: #888;
    font-size: small;
  }
  
  .btn-trans:hover {
    background-color: #888;
    border-color: #888;
    color: #fff;
    font-size: small;
  }