:root {
    --text-color: #0b00b3;
    --text-color-darker: #0b00b3;
    --param-text-color: #0b00b3;
    --param-background: #fff;
    --due-meter-box-light: #eee;
    --due-meter-box-dark: #0b00b3;

}

body, html {
    display: grid;
    position: relative;
    justify-items: center;
    font-size: 14px;
    color: var(--text-color);
    background: #fff;
}

form {
    font-size: 1.2rem;
}

label > span {
    color: var(--text-color);
}

a.hover {
    text-decoration: none;
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: var(--text-color);
}
.container-fluid, .row {
    margin: auto;
    padding: 0;

}

.btn-80 {
    width: min(80vw, 400px);
}

.row {

}

.layout-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    justify-self:center;
    width: min(100vw, 600px);
    max-width: min(100vw, 600px);

}


.reefheader {
    display: grid;
    margin:0;
    height: 15vh;
    width:100%;
    text-align: center;
    align-items: center;
    font-size: 1.5rem;
    border-bottom: solid var(--text-color-darker) 2px;
}

.reefcontent {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    height: 70vh;
    width:100%;
    overflow-x:hidden;



}

/* Two column grid by default (mobile) */
.reefnav, .reefnavquickmenu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  justify-items: center;
  align-content:start;
  align-items: start;
  gap: 0.3rem;

  hheight:70vh;
  padding-top: 1vh;
  pposition:absolute;
  overflow-y: auto;
  overflow-x: hidden;

}

/* Three columns for 480-599px screens */
@media screen and (min-width: 480px) {
  .reefnav, .reefnavquickmenu {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* Four columns for 600px and wider screens */
@media screen and (min-width: 600px) {
  .reefnav, .reefnavquickmenu {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}



.reefnav-single-column {
    grid-template-columns: 1fr !important;
    width:100%;
}

.reefnavitem {
    display: grid;
    align-items:center;
    justify-items:center;
    height:60px;
    max-height: 60px;
    width: 135px;
    border-radius: 5px;
    margin: 0 5px 5px 0;
    color: var(--param-text-color);
    background-color: var(--param-background);
    border: solid var(--text-color) 1px;
}

.reefnavitem:hover, .reefnavitem:focus {
    cursor: pointer;
}

.tank_select {
    color: white;
}
.task_selected, .text_glow  {
    text-shadow: 0 0 10px white;
    background: #ffed1a !important;
    border: solid black 4px !important;
    color: #000 !important;

}

.due_overdue {
    background: var(--param-text-color);
    border: none;
    color: white;
}

.task_due_item {
    display: grid;
    grid-template-columns: 15% 60% 10% 15%;
    align-items: center;
    justify-items: center;
    width: min(65vw, 400px);
    height: 6vh;
    border-radius: 1.5vh;
    font-size: 1rem;
    margin-bottom: 2%;
    cursor: pointer;
}

/* parent div .due_overdue contains the .task_due_item_icon */
.due_overdue > .task_due_item_icon {
    color: white !important;
}

.due_now {
    background: #4473FF;
    border: none;
    color: white;
}

.due_now > .task_due_item_icon {
    color: white !important;
}

.task-due-item-name {
    text-align: left !important;
}

.reefnavmeter {
    width:75%;
    height: 35%;
    align-self:start;
    border: solid #0544aa 1px;
    background-image: linear-gradient(90deg, var(--due-meter-box-light) 0%, var(--due-meter-box-light) 19%,
                                      var(--due-meter-box-dark) 20%, var(--due-meter-box-light) 21%,
                                      var(--due-meter-box-light) 39%, var(--due-meter-box-dark) 40%, var(--due-meter-box-light) 41%,
                                      var(--due-meter-box-light) 59%, var(--due-meter-box-dark) 60%,
                                      var(--due-meter-box-light) 61%, var(--due-meter-box-light) 79%,
                                      var(--due-meter-box-dark) 80%, var(--due-meter-box-light) 81%);
}
.meterbox {
    height: 100%;
    /* width by template jinja */
    background: var(--text-color);
    opacity: 0.65;
}

.reefdetail {
    display: grid;
    width: 100%;
    max-height: 75vh;
    justify-items: center;
    align-items: center;
    font-size: 1.2rem;
    overflow-y: auto;
    position: absolute;
    visibility:hidden;
    left: 0;
    top: 15vh;

}

.reefconfirm {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 1fr;
    justify-items: center;
    align-items: center;

}

.task_view {
    background-color: #dddddd;
    /*font-size: 1.2rem;*/
    font-weight: bold;
    height: 10vh;
    width: min(100vw, 600px);
}


.font-smaller {
    font-size: 80%;
}

#form_input, #form_select_tank {
    width: min(75vw, 375px);
}

#form_select_tank {
    display: grid;
    margin-top: 2rem;
    justify-items: center;
    align-items: center;
}

#form_container {
    margin-top: 2vh;
}

#form_input_faq {
    justify-content: center;
    width: min(90vw, 700px);
}

#form_radio_buttons {
    margin-top: 2vh;
    border-top: solid #ccc 1px;
    border-bottom: solid #ccc 1px;
    padding: 1vh;
}

#form_meas_container {
    margin-top: 2vh;
}


#task_notes {
    margin-top: 2vh;
    height: 15vh;
}

#form_task_instructions {
    height: 35vh;
}
#form_back_button {
    position: absolute;
    top: 0;
    justify-self: right;
    padding-right: 0.5rem;
    font-size: 1.8rem;
    cursor: pointer;
}

.overlay {
    position: absolute;
    background: white;
    height: 80vh;
    width: 100vw;
    top: 0vh;
    left: 0vh;
    z-index: 0;
}

#task_value_input_container {
    margin-bottom: 1vh;

}

#task_status_display {
    margin-top: 0.5rem;
}

.icon_placeholder {
    visibility: hidden;
}
#task_instr_text {
    padding: 2vh;
    font-size: 1.2rem;
    overflow-y: scroll;
}

/* this class is the 'buttons' that have icons, task name
   and how many days until due (or negative for past due)
   in the full list view
*/



.task_instructions {
    /*font-size: 1rem;*/
    padding: 2vh;
    margin-top: 2vh;
    width: min(100vw, 600px);
}

.view-tasks-grid-container {
    display: grid;
    width: min(100%, 600px);
    grid-template-columns: 20% 50% 10% 10%;
    grid-gap: 10px;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.view-tasks-grid-item:nth-child(1) {
    text-align: center;
}

.view-tasks-grid-set {
    width: min(100%, 600px);
    border-top: solid #aaaaaa 2px;
}
.view-tasks-grid-set:nth-child(odd) {
    background: #dddddd;
}

.view-records-grid-container {
    display: grid;
    width: min(100%, 600px);
    grid-template-columns: 15% 15% 45% 20%;
    grid-gap: 10px;
    padding-left: 5vw;
}

.view-records-grid-container:nth-child(odd) {
    background: #dddddd;
}

.view-records-grid-date {
    grid-column: 2 / span 2;
}

.view-records-grid-param {
    grid-column: 2 / span 2 ;
}


.view-records-grid-notes {
    grid-column: 2 / span 2;
}


.reagent {
    width: 100vw;
}

/* TODO: This .hide class is unused?
*/
.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

.hide-space {
    visibility: hidden;
}

.reeffooter-container {
    width:100%;
    overflow-x:hidden;
}


.reeffooter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  justify-content: center;
  justify-items: center;
  align-items:center;
  font-size: 24px;
  border-top: solid var(--text-color) 2px;
  height: 15vh;
  width:200%;
  position: relative;

}

.reeffooter div {
  text-align: center;
}

.reeffooter_item {

}

/* Animation for reefdetail */
@keyframes anim_slide_left {
    from { opacity: 1; visbility:visible;}
    to { opacity: 0; visibility: visible;}
}

@keyframes anim_slide_right {
    from { opacity: 0;}
    to { opacity: 1; }
}

.slide_left {
    animation-name     : anim_slide_left;
    animation-duration : 0.6s;
    opacity 0;
    visibility:hidden;
}

.slide_right {
    animation-name     : anim_slide_right;
    animation-duration : 0.6s;
    opacity: 1;
    visibility: visible;
}

/* Parameter buttons slide left and right animation */
@keyframes anim_slide_nav_left {
    from { margin-left: 200%; }
    to { margin-left: 0; }
}

@keyframes anim_slide_nav_right {
    from { margin-left: 0;}
    to { margin-left: 200%;}
}

.slide_nav_left {
    animation-name     : anim_slide_nav_left;
    animation-duration : 0.6s;
    margin-left: 0;
}

.slide_nav_right {
    animation-name     : anim_slide_nav_right;
    animation-duration : 0.6s;
    margin-left: 200%;
}

/* Footer menu items animation */
@keyframes anim_slide_footer_left {
    from { left: 0%;}
    to { left: -100%; }
}

@keyframes anim_slide_footer_right {
    from { left: -100%;}
    to { left: 0; }
}

.slide_footer_left {
    animation-name     : anim_slide_footer_left;
    animation-duration : 0.6s;
    left: -100%;
}

.slide_footer_right {
    animation-name     : anim_slide_footer_right;
    animation-duration : 0.6s;
    left: 0;
}


@keyframes anim_fade_in {
    from { opacity: 0;}
    to { opacity: 1 !important; }
}

@keyframes anim_fade_out {
    from { opacity: 1;}
    to { opacity 0 !important; }
}

.hidden {
    margin-left: 200%;
}

.nav1 {
    left: 0;
}

.nav2 {
    left: -100%;
}


.faq_header {
    font-size: 1.5rem;
    padding-top: 1rem;
    padding-left: 1rem;
    justify-self: left;
}

.faq_item {
    font-size: 1.2rem;
    padding-left: 2rem;
    justify-self: left;
    color: var(--text-color);
}




.fas, .far {
    color: var(--text-color);
}

#measure-numpad {
    height: 60vh;
    background-color: white;
}

.reagent_label {
    margin-left: 1vh;
}

.form-control {
    /*font-size: 1.2rem;*/
}

#task_units {
    margin-left: 1.5vh;
}

.reagent_select_container {
    display: none;
}


/* ==========================================================

   BUTTONS

   ==========================================================
*/

.btn-default.btn-reef {
    /*font-size: 1.6rem;*/
    min-height: 8vh;
    height: 8vh;
    background-color: #0504aa;
    color: white;
}

.btn-default.btn-reef:hover, .btn-default.btn-reef:active, .btn-dark:active, .btn-default.btn-reef.active, .open .dropdown-toggle.btn-default.btn-reef {
    background-color: #2F3E48;
    border-color: #31347B;
}

.btn-info {
    /*font-size: 2rem;*/
    min-height: 6vh;
    height: 6vh;
    margin-bottom: 1vh;
}

.btn-edit, .btn-new {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #555555;
    /*font-size: 0.8rem;*/
    background-color: #0504aa;
    border-color: #31347B;
    color: white !important;
    margin-left:0.5vw;
    margin-right:0.5vw;
}

.btn-edit {
    width: 10vh;
    height: 4vh;
    border-radius: 5px;
}

.btn-new {
    width: 30vw;
}


#btn_save, #btn_instructions, .btn-dark {
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 5px;
    text-align: center;
    background-color: #0504aa;
    color: white;
    margin-top: 0.5vh;
    min-width: 180px;
}

#btn_upload {
    margin-top: 5vh;
}

derinput.form-control.btn-dark {
    height: 10vh;
    /*font-size: 2rem;*/
    border-radius: 10px;
}

/* /////////////////////////////////////////////////
//
// MODAL DIALOG
//
///////////////////////////////////////////////// */
.modal-body, .bootbox-accept, .bootbox-cancel {
    /*font-size: min(6vw, 4vh);*/
}

.modal-dialog {
    top: 30vh;
}


/*//////////////
//
// DB SCHEMA
//
//////////////
*/

.db_schema_container {
    width: min(100vw, 600px);
}
.db_schema_table_name {
    width: 100%;
    /*font-size: 1.5rem;*/
    margin-top: 2vh;
}

.db_schema_header, .db_schema_rows {
    width: 100%;
    min-width: 100%;

}

.db_schema_header {
    background: #99CCFF;
}

.db_schema_rows {
    background: #aaF2FF;
}

.db_schema_item {
    text-align: center;
    width: 25%;
    border: solid 1px #eee;
}

.db_schema_name_col {
    width: 30%;
    min-width: 30%;
}

.db_schema_nulls_col {
    width: 20%;
    min-width: 20%;
}