:root {
  --height-block-before-table: 64px; /* Distance from the top border of the block where the table is located to the top border of the table itself */
  --indent-bootstrap-row: 15px; /* Adjusting bootstrap class "row" */
}

.chosen-container-single .chosen-single {
  height: calc(1.5em + 0.5rem + 2px);
  line-height: calc(1.5em + 0.5rem + 2px);
}

input.small {
  width: 6em;
}

input.medium {
  width: 9em;
}

input.large {
  width: 20em;
}

#contentTable.optionTable th, #contentTable.optionTable td {
  vertical-align: top;
}

#contentTable.userTable th, #contentTable.userTable td {
  text-align: center;
}

#contentTable.userTable .colMonitor, #contentTable.userTable .colUsername {
  text-align: left;
}

#contentTable th {
  text-align: left;
}

#content table .colCanMove,
#content table .colCanZoom,
#content table .colCanFocus,
#content table .colCanIris,
#content table .colCanWhiteBal,
#content table .colHasPresets {
  text-align: center;
}

#sidebar {
  min-width: 160px;
}

#optionsContainer {
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 15px;
  display: flex;
}

#options {
/*  margin-right: -15px;*/ /* you shouldn't do this for the sake of shifting the scrool bar, it breaks the style in different places. done differently*/
  width: 100%;
}

body.sticky #options {
  height: calc(100% - 50px); /* It's bad, but it's temporary */
  overflow-x: hidden;
  overflow-y: auto;
}

body.sticky #sidebar {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#options div.col-md {
  text-align: left;
}

input[type="text"] {
  min-width: 50%;
}
input[name="newConfig[ZM_OPT_GOOG_RECAPTCHA_SITEKEY]"],
input[name="newConfig[ZM_OPT_GOOG_RECAPTCHA_SECRETKEY]"],
input[name="newConfig[ZM_OPT_GEOLOCATION_TILE_PROVIDER]"],
input[name="newConfig[ZM_OPT_GEOLOCATION_ACCESS_TOKEN]"],
input[name="newConfig[ZM_AUTH_HASH_SECRET]"],
input[name="newConfig[ZM_FONT_FILE_LOCATION]"],
input[name="newConfig[ZM_JANUS_SECRET]"],
input[name="newConfig[ZM_JANUS_PATH]"],
input[name="newConfig[ZM_UPDATE_CHECK_PROXY]"],
input[name="newConfig[ZM_WEB_TITLE]"],
input[name="newConfig[ZM_WEB_TITLE_PREFIX]"],
input[name="newConfig[ZM_HOME_URL]"],
input[name="newConfig[ZM_HOME_CONTENT]"],
input[name="newConfig[ZM_WEB_CONSOLE_BANNER]"],
input[name="newConfig[ZM_LOG_DEBUG_TARGET]"],
input[name="newConfig[ZM_LOG_DEBUG_FILE]"],
input[name="newConfig[ZM_MESSAGE_ADDRESS]"],
input[name="newConfig[ZM_MESSAGE_SUBJECT]"],
input[name="newConfig[ZM_FROM_EMAIL]"],
input[name="newConfig[ZM_URL]"],
input[name="newConfig[ZM_SSMTP_PATH]"],
input[name="newConfig[ZM_CSP_REPORT_URI]"],
input[name="newConfig[ZM_TELEMETRY_UUID]"],
input[name="newStorage[Name]"],
input[name="newStorage[Path]"],
input[name="newStorage[Url]"] {
  width: 90%;
}

#options label {
  font-weight: bold;
}

#options .help-block {
  margin-top: 0;
}

#options .form-group {
  margin-bottom: 20px;
  margin-right: 5px;
  border-bottom: 1px solid #e7e7e7;
}
#options .col-md {
  text-align: left;
}

form {
/*  display: flex;*/
/*  flex-direction: column;*/
  width: 100%;
  height: 100%;
/*  padding-top: 2rem; */
}

@media screen and (max-width:767px) {
  #options label,
 label.col-form-label {
    text-align: left;
  }
}

div.dnsmasq,
.dnsmasq .config {
text-align: left;
}
.dnsmasq .container {
margin-left: 0;
}
.dnsmasq .config .row > label {
width: 150px;
text-align: right;
}
.dnsmasq .config .row {
min-height:36px;
text-align: left;
display: flex;
align-content: space-around;
}
#leasesTable td,
#leasesTable th {
  text-align: left;
}
input[name="config[dhcp-range][min]"],
input[name="config[dhcp-range][max]"] {
  width: 120px;
  min-width: 120px;
}
input[name="config[dhcp-range][expires]"] {
  width: 100px;
  min-width: 100px;
}
textarea.form-control-sm {
  min-height: 3rem;
}

body.sticky .wrapper-scroll-table {
  position: absolute;
  margin-right: calc(var(--indent-bootstrap-row) * -1);
  margin-left: calc(var(--indent-bootstrap-row) * -1);
  padding-right: var(--indent-bootstrap-row);
  padding-left: var(--indent-bootstrap-row);
  width: 100%;
  height: calc(100% - var(--height-block-before-table));
  overflow-x: hidden; 
  overflow-y: auto; 
}
body.sticky .bootstrap-table {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.sticky .fixed-table-container {
  overflow-y: auto;
}

body.sticky #controlTable thead {
    position: sticky;
    top: 0;
    box-shadow: 0 0px 0, 0 -3px 0 #dfe4ea;
}
