@media only screen and (max-width: 500px) {
    .indent { margin-left: 10px; }
}


* {
    font-family: Arial, 'Helvetica', sans-serif;
    margin: 0;
}

h1, h2, h3, h4 {
    margin-top: 12px;
    margin-bottom: 8px;
}
h3 {
    width: 80%;
    border: 1px solid #237BAC;
    padding-left: 10px;
}

#dialog_text h1 {
    margin-top: 0;
}
#vcl_banner, .vcl_data_banner {
    background-color: #237BAC;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 1167px; /* To match the other banners: min-width see also #vcl_data_banner and .lm_pagination */
    white-space: nowrap;
    top: 0px;
    width: 100%;
    height: 32px;
}
#vcl_data_banner, .vcl_data_banner {
    border-top: 1px solid #A9CAE1;
    border-bottom: 1px solid #A9CAE1;
    background-color: ghostwhite; /* #3794BE; */
    height: 63px;
    min-width: 1167px; /* To match the other banners: min-width see also #vcl_banner and .lm_pagination */
}

#vcl_data_banner .vcl_button {
    position: relative;
    top: -23px; /* if you change this change it also in grid_view.php */
}

.vcl_logout {
    margin-right: 50px;
    position: relative;
    top: -10px;
}

#vcl_form {
    margin-left: 10px;
}

.vcl_banner_icon {
    margin-left: 10px; 
}

.vcl_banner_title {
    font-weight: lighter; 
    color: white;
    font-size: 28px;
    margin-left: 100px;
    margin-right: 100px;
    position: relative;
    top: -5px;
}

td.vcl_label {
    text-align: right;
    padding-right: 3px;
}

td {
    vertical-align: top;
}

td input, td select, td div {
    text-align: left;
    padding-left: 3px;
    height: 20px;
}

.primary_key {
    width: 50px;
}

.vcl_icon {
    cursor: pointer;
    position: relative;
    top: 12px; /* to line it up with buttons if they are on the same row */
    margin-left: 5px;
}

.vcl_icon_16 {
    cursor: pointer;
    position: relative;
    left: 5px;
    top: 4px; /* to line it up with buttons if they are on the same row */
}

.vcl_button, .ui-button {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #987D00;
    background-color: #FACB00;
    color: black;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 6px;
    height: 1.7em;
    width: 120px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
}

.readonly {
    background-color: #EAEAEA;
}

.vcl_input_text {
    text-align: left;
    padding-left: 3px;
}

.vcl_input_number {
    text-align: right;
    padding-right: 3px;
}
/* Hide spinner for numerical fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    width: 100px;
}
input[type=checkbox] {
    margin-bottom: 8px;
    margin-right: 5px;
}
.vcl_checkbox_group {
    position: relative;
    top: 5px;
    display: inline-block;
    margin-bottom: 20px;
}
.vcl_checkbox_group label {
    position: relative;
    top: -5px;
}
.vcl_input_contenteditable {
    border: 1px solid grey;
    width: 300px;
    height: 100px;
    display: inline-block; /* prevents the search icon from going onto a newline */
    overflow: auto;
    padding: 5px;
}

.vcl_delete_record {
    margin-left: 30px;
}

.ui-dialog {
    border: 2px solid black;
    box-shadow: 6px 6px 3px black;
    background-color: white;
    z-index: 9;
    display: none;
    /* Actually, the position of the dialog is set in the dialog_show function by: $('.ui-dialog').css({'top':'100px', 'left':'100px'}); */
    /* So the followin gmay be redundant: */
    position: absolute; /* ********************************************************************************** */
    top: 100px;         /* Do not mark theses as !important becuase doing so removes the "draggable" property */
    left: 100px;        /* ********************************************************************************** */
}
.ui-dialog-titlebar {
    background-color: #2D5384;
    border-right: 1px solid white;
    cursor: move;
}
.ui-dialog-titlebar-close {
    display: none !important;
}
.ui-dialog-title {
    font-size: larger;
    display: block;
    text-align: center;
    border: 1px solid ghostwhite;
    color: white;
    height: 26px;
}
.ui-dialog-buttonset {
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
}
.ui-dialog-buttonset button {
    width: 100px; margin-left: 5px;
}
.ui-icon-closethick {
}
#dialog_text {
    padding: 8px 8px 8px 8px;
    overflow: auto;
}

#record_banner_buttons {
    display: inline-block;
}

#vcl_record_navbar, #vcl_grid_banner {
    display: inline-block;
    width: 270px;
    height: 57px;
    margin-left: 20px;
    margin-right: 5px;
    position: relative;
    top: -5px;
}

.vcl_record_count {
    display: inline-block;
    width: 110px;
    font-size: 12px;
    text-align: center;
    margin-left: 5px;
}

.vcl_record_slider {
    width: 262px;
    position: relative;
    top: 8px;
    left: 0px;
    cursor: pointer;
}
.pg_notify {
    display: none;
}

.vcl_button:disabled, .vcl_button[disabled] {
    color: grey;
    background-color: silver;
}
#change_password {
    position: absolute;
    top: 180px;
    left: 450px;
}

#pg_jq_pager {
    color: white;
    background-color: #3794BE;
}
.loading {
    display: none !important;
}
.lm_data_row:hover {
    background-color: lightblue;
}
.lm_title_row {
    cursor: pointer;
}
.indent {
    margin-left: 50px;
}

/* DONUT */
#vcl_donut {
    display: inline-block;
    width: 40px;
    position: relative;
    top: -32px;
    margin-right: 20px;
    font-size: 12px;
}
/* (A) PIE CHART */
.donut {
    /* (A1) CIRCLE */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    /* (A2) SEGMENTS */
    background: conic-gradient( #237BAC 0deg 80deg, silver 81deg 360deg );
    cursor: default;
}

/* (B) DONUT "CONVERSION" */
/* (B1) SMALLER CIRCLE */
.hole {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: ghostwhite;
    text-align: center;
    vertical-align: middle;
}

/* (B2) "CONVERT PIE TO DONUT" - CENTER SMALLER CIRCLE */
.donut {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* END DONUT */


.vcl_grid_show_all_pages {
    display: none;
}

label[for=Created_By], label[for=Created_On], label[for=Modified_By], label[for=Modified_On], #Created_By, #Modified_By, .vcl_span_datetime {
    border: none;
    background-color: transparent;
    color: silver;
}
#table_name_title {
    margin-top: 4px;
}
#table_name_title_extra_wording {
    padding-left: 10px;
    font-weight: bold;
}

.vcl_wide_button {
    width: 200px;
}

.index_button {
    display: block;
    margin-bottom: 10px;
}
.ui-dialog-content {
    font-size: 14px;
}
#vcl_lightbox {
    border: 1px solid #237BAC;
    background-color: ghostwhite;
    display: inline-block;
    padding: 5px;
    overflow: auto;
    width: 500px;
    max-width: 500px;
    height: 135px;
    /* height: auto; */ /* if we want the div to autorgrow, do this */
    min-height: 86px;
    overflow: auto;
}

.vcl_lightbox_image {
    border: none;
    width: 100px;
    height: auto;
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
    vertical-align: top;
}

#drag_drop_upload {
    border: none;
    margin-left: 2px;
    // This lines it up vertically with the Notes box (or other input) of the last field in the roster. display: inline-block;
    position: relative;
    top: -5px;
    width: 150px;
}

.dropZone {
    margin-top: 5px;
    height: 4em;
    width: 140px;
    border: 1px solid #ccc;
    cursor: copy;
    text-align: center;
    background: repeating-linear-gradient( 45deg, #F8F8FF, #F8F8FF 10px, #E8EEFF 10px, #E8EEFF 20px );
}

#basic_file_name, #basic_message, #basic_progress, #basic_message {
    height: 1em;
    position: relative;
    z-index: 3;
}

.simple-upload-dragover {
    background-color: #eef;
}

.simple-upload-filename {
    margin-right: 0.5em;
}
/* The following 2 selectors enable us to set a custom caption for the upload "button" */
#basic_upload {
    display: none;
}

#select_file_label {
    /* You should add class='vcl_button' to the actual label, but buttons are a bit too high so that's why we change the height to 1em. */
    cursor: pointer;
    height: 1em !important;
}

.small {
    font-size: small;
}
#mfa_qr_code {
    position: absolute;
    top: 273px;
    left: 555px;
    width: 430px;
    border: 1px solid #237BAC;
    background-color: ghostwhite;
    padding: 5px;
    overflow: auto;
    height: 379px;
}
.gray, .grey {
    color: gray;
}