@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
  --dark-blue:        #003d52;
  --blue:             #00b0f0;
  --light-blue:       #ccffff;
  --very-light-blue:  #eeffff;

  --green:            #92d050;
  --light-green:      #cbf38f;
  --very-light-green: #f8ffed;
}

* {
  font-family:  'Roboto', 'Segoe UI', Tahoma, sans-serif;
  box-sizing: border-box;
  margin: 0;
}

.invisible {display: none;}

.hcenter {text-align: center;}

h3 {
  display: inline-block;
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 600;
}

.svg-inline--fa {
  position: relative;
  bottom: -3px;
  height: 32px;
  margin: 0 10px 0 10px;
}

span.line-break:before {content: "\A"; white-space: pre;}

.column-container {display: flex;}
.column-container > section {flex-grow: 1; /*equal widths=*/flex-basis: 0;}

/* use this for a div wrapper to contain float elements */
.clear-float:before,
.clear-float:after {
  content: " "; /* Note the space between the quotes. */
  display: table;
}
.clear-float:after {clear: both;}

/*****************************************************************************
 * NAV BAR
 ****************************************************************************/
#logo {height: 32px; margin: 15px 15px -10px 33px;}

header {
  background-color: var(--very-light-blue);
  border-bottom: 1px solid var(--green);
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 0;
  z-index: 10;
}

#search {width: 700px;}

nav {
  display: inline-flex;
  min-height: 43px;
  z-index: 100;
  padding-left: 5px;
}

/*****************************************************************************
 * MODULE ASIDE & SECTIONS
 ****************************************************************************/
main#module { display: flex; padding: 5px 0; height: calc(100vh - 97px);}

main#module > aside,
main#module > div,
main#module > section {padding: 0 5px; overflow-y: auto;}

aside { 
  flex-shrink: 0; /* prevents shrinkage, assuming other flex elements are set to default (1) or greater */
  flex-basis: 430px; /* width */
}

main > section {flex-grow: 1;}

main > aside > header,
main > section > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* horizontal */
  align-items: center; /* vertical */
  padding: 4px;
  min-height: 46px;
}
main > aside > header > h3,
main > section > header > h3 {
  margin: 0 auto 0 5px;
}

#aside-left-list {
  overflow-x: hidden;
}
#aside-left-list .list-item-clickable {
  cursor: pointer;
  padding: 3px 0 3px 7px;
  /* these allow smooth transitioned appearance */
  /* transform: scaleY(0); */
  transform-origin: top;
  transition: 0.2s;
}
#aside-left-list .list-item-clickable:hover {
  background-color: var(--very-light-green);
}
#aside-left-list .list-item-clickable .secondary {
  white-space: nowrap;
  color: lightgrey;
  margin-left: 25px;
}
#aside-left-list hr { border: 1px solid var(--light-blue); }

main#module .vert-partition { /* parent container must be display: flex */
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 5px; /* width */
  cursor: col-resize;
  border-left: 1px solid var(--blue);
  border-right: 1px solid var(--blue);
  background-color: var(--very-light-blue);
  padding: 0; /* to override default padding of children of main#module */
}
.vert-partition div {
  width: inherit;
  height: 10px;
  background-color: var(--blue);
  margin-bottom: 4px;
}

/* for future reference
section#primary {
  default flex: 1 1 0 (flex-grow, flex-shrink, flex-basis [aka width])
}
*/

 /*****************************************************************************
 * TABLES
 ****************************************************************************/
table {border-collapse: collapse;}

caption {
  color: var(--blue);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0 0 15px 0;
}

th, td {padding: 3px;}
th {
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 0;
  background-color: var(--very-light-blue);
}
th:first-of-type {border-top-left-radius: 4px;}
th:last-of-type {border-top-right-radius: 4px;}
#p section#primary th {
  top: 30px;
}
td.grid {border: 1px solid var(--light-blue);}
/* tr {text-align: left;} */
tr.inactive {visibility: collapse;}
tr.colored-rows:nth-child(even) {background-color: var(--blue)18;}

.selectable:hover {
  cursor: pointer;
  color: var(--blue);
  text-decoration-line: underline;
  background-color: var(--very-light-blue);
}

/*****************************************************************************
 * FORMS
 ****************************************************************************/
.button-container-right {display: inline-flex; float: right;}
.button-container-left {display: inline-flex;}

form {position: relative; display: inline-block;}
section#primary > form {
  display: flex;
  flex-wrap: wrap;
}
.form-section {
  display: inline-block;
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 15px 5px;
  margin: 15px 5px 2px;
  min-width: 196px;
}
.form-section > h4 {
  position: absolute;
  transform: translate(4px, -27px);
  background-color: #ffffff;
  padding: 0 4px;
}

fieldset {
  border: 2px solid var(--light-blue);
  border-radius: 4px;
  padding: 4px;
  margin: 12px 0 4px;
  min-height: 21px; /* to properly position <label> in case of empty <fieldset> of tags */
}
fieldset.tags {
  display: inline-block;
  border: initial;
  padding: initial;
  margin: initial;
}

legend {
  position: absolute;
  font-size: 0.9rem;
  line-height: 13px;
  transform: translate(3px, -17px);
  background-color: #ffffff;
  padding: 0 4px;
}
label > span {
  position: absolute;
  color: lightgrey;
  font-size: 0.8rem;
  line-height: 12px;
  transform: translate(12px, -2px);
  background-color: #ffffff;
  padding: 0 4px;
}
.tag-container-label {
  position: absolute;
  color: lightgrey;
  line-height: 12px;
  font-size: 0.8rem;
  transform: translate(3px, -13px);
  background-color: #ffffff;
  padding: 0 4px;
}

/* TODO choose a better location for tag rules, possibly also tag-container */
div.tag-container { /* another rule also specifies .tag-container */
  max-width: 250px;
  padding: 5px 0 0 4px;
}
.tag-shell {
  display: inline-block;
  border: 1px solid var(--blue);
  border-radius: 4px;
  line-height: initial;
  padding-left: 5px;
  margin-right: 2px;
}
.tag-shell > span {
  color: pink;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 10px;
  cursor: pointer;
  padding: 1px;
}
.tag-shell > span:hover {
  color: red;
  display: inline-block;
  background-color: pink;
  height: 20px;
}
.tag {
  display: inline-block;
  font-family: Consolas, 'Courier New', Courier, monospace;
  background-color: #ffffff;

  /* undo standard input style= */
  border: none;
  line-height: initial;
  min-height: initial;
  padding: 0;
  margin: 0;
}
.tag-generator {
  margin: initial;
  border: none;
  width: 239px;
}

.array-of-objects > legend > span {
  display: inline-block;
  color: var(--light-green);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 10px;
  border: 1px solid var(--light-green);
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  padding: 1px;
  margin: 0 3px;
  transform: translateY(2px);
}
.array-of-objects > legend > span:hover {
  color: var(--green);
  background-color: var(--light-green);
  border-color: var(--green);
}

.object-in-array {
  padding-top: 10px;
  margin-top: 16px;
}
.object-in-array > legend {
  transform: translate(-10px, -21px);
}
.object-in-array > legend > span {
  display: inline-block;
  color: pink;
  font-size: 2rem;
  font-weight: 900;
  line-height: 10px;
  border: 1px solid pink;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  padding: 0 2px;
}
.object-in-array > legend > span:hover {
  color: red;
  background-color: pink;
  border-color: red;
}




input, select, button, a.button, textarea, .tag-container {
  border-radius: 4px;
  border: 1px solid var(--green);
  line-height: 29px;
  min-height: 29px;
  padding: 0 13px;
  margin: 5px 4px; /* was 15px 4px 2px;*/
}
input, textarea, .tag-container {
  font-size: 14.5px;
  padding-top: 3px;
  width: 250px;
}
textarea {padding-top: 6px;}

input.table {
  border: 1px solid #ffffff;
  min-height: none;
  padding: none;
  margin: none;
}
input.table:focus {
  border-radius: 2px;
  border: 1px solid var(--green);
}

input[type=radio],
input[type=checkbox] {
  vertical-align: middle;
  -webkit-appearance: none; /* Chrome & Safari */
  background: #ffffff;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-image: url("/icons/check_blue.png"); /* radial-gradient(var(--green), var(--green), #ffffff, #ffffff */
}
label.radio,
label.checkbox {padding-right: 12px;}

input[type=button],
input[type=submit],
select,
a.button,
button {
  font-size: 1.05rem;
  background-color: var(--light-green);
  cursor: pointer;
  appearance: none; /* hides select's native down arrow */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none;
}
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='2 1 17 13' width='30' height='14' %3E%3Cg %3E%3Cpath fill='%2392d050' d='M2.73 5.06L9.23 11.56L15.73 5.06L13.4 2.73L9.23 6.9L5.06 2.73L2.73 5.06Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
a.button {text-decoration: none; padding-top: 3px;}
input[type=button]:hover, input[type=button]:focus,
input[type=submit]:hover, input[type=submit]:focus,
a.button:hover, a.button:focus,
button:hover, button:focus {color: #ffffff; background-color: var(--green);}

input[type=button].inactive,
input[type=submit].inactive,
a.inactive, /* must use JS & DOM to remove href attribute to deactivate <a> */
button.inactive {
  background-color: lightgrey;
  pointer-events: none;
}

/* button variations ********************************************************/
a.button.white,
select.white,
button.white {color: var(--green); background-color: #ffffff;}
a.button.white:hover,
a.button.white:focus,
button.white:hover,
button.white:focus {color: #ffffff; background-color: var(--light-green);}
a.button.lg {min-height: 32px; padding: 12px 24px;}

.green-light {
  border-radius: 4px;
  border: 1px solid var(--blue);
  height: 32px;
  padding: 0px 16px;
  margin: 4px;
  background-image: url("/icons/check_green.png");
}

.yellow-light {
  border-radius: 4px;
  border: 1px solid var(--blue);
  height: 32px;
  padding: 0px 16px;
  margin: 4px;
  background-image: url("/icons/arrow_yellow.png");
}

.red-light {
  border-radius: 4px;
  border: 1px solid var(--blue);
  height: 32px;
  padding: 0px 16px;
  margin: 4px;
  background-image: url("/icons/x_red.png");
}

.async-status-container {
  position: absolute;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.spinner {
  width: 70px;
  height: 70px;
  border: 12px solid #f3f3f3;
  border-top:12px solid var(--blue);
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.msg-good {
  border-radius: 4px;
  border: 1px solid var(--green);
  background-color: var(--light-green);
  padding: 16px 32px 16px 64px;
}
.msg-good:before {
  position: absolute;
  content: "";
  width: 9px;
  height: 25px;
  transform: rotate(45deg) translate(-28px, 17px);
  border-bottom: 4.5px solid var(--green);
  border-right: 4.5px solid var(--green);
}
.msg-bad {
  border-radius: 4px;
  border: 1px solid red;
  background-color: rgb(243, 144, 144);
  padding: 16px 32px 16px 64px;
}
.msg-bad:before {
  position: absolute;
  content: "x";
  font-size: 42px;
  font-weight: 600;
  color: red;
  transform: translate(-34px, -23px);
}

/*****************************************************************************
 * TABS
 ****************************************************************************/
a.tab,
button.tab {
  position: relative;
  color: #000000;
  text-align: center;
  text-decoration: none;
  font-size: 1.05rem;
  background-color: var(--light-green);
  padding: 3px 0px;
  margin: 9px 1px 0px 0px;
  width: 150px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  border: 1px solid var(--green);
  border-bottom: none;
}
a.tab:hover,
a.tab:focus,
button.tab:hover,
button.tab:focus {color: #ffffff; background-color: var(--green);}

a.current-tab,
button.current-tab {
  color: var(--blue);
  font-weight: 700;
  background-color: #ffffff;
  cursor: default;
}
a.current-tab:before,
button.current-tab:before {
  content: " ";
  display: inline-block;
  position: absolute;
  width: 145.5px;
  border: 1px solid #ffffff;
  left: 0px;
  top: 34px;
}
a.current-tab:focus,
a.current-tab:hover,
button.current-tab:focus,
button.current-tab:hover {color: var(--blue); background-color: #ffffff;}

/*****************************************************************************
 * MODALS
 ****************************************************************************/
#modal-container {position: absolute; top: 0; z-index: 500;}

#modal-background {
  display: flex;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

#modal-content {
  margin: auto;
  background-color: var(--very-light-blue);
  border: 1px solid var(--green);
  border-radius: 4px;
  padding: 5px 20px 20px 20px;
}
.modal-header {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 3px 3px 0 0;
  background-color: var(--blue);
  padding-left:10px;
  margin: -5px -20px 10px;
}
.modal-close {
  margin-left: auto;
  color: #aaa;
  font-size: 28px;
  padding: 0 10px 5px 10px;
}
.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*****************************************************************************
 * MENUS
 ****************************************************************************/
i.button {cursor: pointer;}
i.button:hover {stroke: var(--blue); stroke-width: 20;}
.right-menu-background {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  /* these allow smooth transitioned appearance */
  transform: scaleX(0);
  transform-origin: right;
  transition: 0.2s;
  z-index: 200;
}
.right-menu-background.visible {transform: scaleX(1);}
.right-menu-content {
  position: absolute;
  right: 0;
  top: 55px;
  background-color: var(--very-light-blue);
  border-bottom: 1px solid var(--green);
  border-left: 1px solid var(--green);
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  padding: 0 70px 25px 25px;
}
.right-menu-close {
  color: #aaa;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
  background-color: var(--blue);
  border-top-left-radius: 4px;
  height: 41px;
  padding-right: 30px;
  margin: 0 -70px 10px -25px;
}
.right-menu-close:hover,
.right-menu-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.right-menu-content h2 {
  padding-bottom: 10px;
}

.menu-list-item {
  display: block;
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 7px;
}
.menu-list-item:hover {
  color: var(--blue);
  text-decoration-line: underline;
}

/*****************************************************************************
 * SCROLL BAR
 ****************************************************************************/
 ::-webkit-scrollbar {width: 12px;}

 /* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px var(--very-light-blue); 
  -webkit-box-shadow: inset 0 0 6px var(--very-light-blue); 
  /* for reference in case of desired future changes
  -webkit-border-radius: 4px;
  border-radius: 4px; */
 }
 
 /* Handle */
::-webkit-scrollbar-thumb {
  /* for reference in case of desired future changes
  -webkit-border-radius: 4px;
  border-radius: 4px; */
  background: var(--light-green); 
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  */
}
 /* for reference in case of desired future changes
::-webkit-scrollbar-thumb:window-inactive {
  background: var(--very-light-green); 
} */
 
 /* OTHER ********************************************************************/
.error {color: red;}

/*****************************************************************************
 * ANIMATIONS TO SLIDE & FADE IN ELEMENTS FROM SIDES AND BOTTOM
 ****************************************************************************/
 .to-fade-in {opacity: 0;}
 .fade-in.from-left   {animation: fade-in-from-left 1.4s;}
 .fade-in.from-bottom {animation: fade-in-from-bottom 1.4s;}
 .fade-in.from-right  {animation: fade-in-from-right 1.4s;}
 @keyframes fade-in-from-left {
   from {opacity: 0; transform: translateX(-450px)}
   to {opacity: 1;}
 }
 @keyframes fade-in-from-bottom {
   from {opacity: 0; transform: translateY(450px)}
   to {opacity: 1;}
 }
 @keyframes fade-in-from-right {
   from {opacity: 0; transform: translateX(450px)}
   to {opacity: 1;}
 }
 
/* MEDIA QUERIES *************************************************************
   DEVICE          SCREEN SIZE
   Samsung S7 edge 360 x 640
   iPad, 2nd gen   768 x 1024
*/


/* for testing */
/* h1, h2, h3, p, div, span, table {border: 1px solid lightgrey} */