/**
*
* Basic styling for the mobile view of MoPat
*
**/
/**
*
* Sizes for the mopat web application
*
**/
/**
*
* Defines all colors that are used in MoPats less sheets
*
**/
/**
* This file contains color definition based on the material 
* design specification for color palettes
**/
/* Grayscales (from Bootstrap) */
/**
*
* Some variable values that will be repeated
* for MoPats views
* This file can be used as a central hub to change 
* many settings at once without touching the less files
*
**/
a {
  color: #377cbf;
}
.modal-header {
  border-bottom-color: #dddddd;
  background-color: #f5f5f5;
}
.box-shadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media only screen and (max-width: 768px) {
  .mobile-link {
    font-size: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .mobile-link {
    font-size: 130%;
  }
}
.form-switch .form-check-input {
  width: 70px !important;
  height: 30px !important;
}
.form-checkbox label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.login {
  width: 60%;
  text-align: center;
  margin: auto;
}
/* z-index for the additional information panel */
#additionalInformationPanel {
  z-index: 1003;
}
/* Image on login page - set min and max width and scale size in between accordingly */
.mopatImage {
  min-width: 250px;
  max-width: 550px;
  width: 35%;
}
.bi-large {
  font-size: 150%;
}
.bi-mirror-horizontal::before {
  -moz-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.bi-mirror-vertical::before {
  -moz-transform: scale(-1);
  -o-transform: scale(-1);
  -webkit-transform: scale(-1);
  transform: scale(-1);
}
/* Styles for the additional information button on the right site of the page */
.additionalInformation {
  position: fixed  !important;
  top: 50%;
  right: 0;
  width: 197px;
  height: 61px;
  -moz-transform: rotate(90deg) translateY(-77px);
  -o-transform: rotate(90deg) translateY(-77px);
  -webkit-transform: rotate(90deg) translateY(-77px);
  transform: rotate(90deg) translateY(-77px);
  z-index: 1003;
  /* rotates the info image on the addtional information button */
  /* Make the right borders edged */
}
.additionalInformation .bi-rotate {
  transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  margin-top: -6px;
}
.additionalInformation a {
  border-radius: 0 0 10px 10px !important;
}
.boxShadowMaterialSm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}
.boxShadowMaterialMd {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
}
.boxShadowMaterialLg {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}
.boxShadowMaterialXl {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}
.boxShadowMaterialXxl {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
}
.password-toggle-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.password-input-with-toggle {
  padding-right: 40px !important;
  width: 100%;
}
.password-toggle-btn {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  transform: none;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3e3e3b;
  background-color: #f5f5f5;
  border-color: #dddddd;
  border-width: 0;
  border-style: solid;
  border-radius: 0 5px 5px 0;
  transition: 0.25s ease-in-out;
  border-left: none;
}
@media only screen and (max-width: 768px) {
  .password-toggle-btn {
    width: 32px;
    font-size: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .password-toggle-btn {
    width: 36px;
    font-size: 120%;
  }
}
.password-toggle-btn:hover {
  color: #377cbf !important;
  background-color: #bfdff5 !important;
  border-color: #377cbf;
}
.password-toggle-btn .bi {
  line-height: 1;
  margin: 0;
  display: block;
}