@font-face {
    font-family: 'Unageo'; src: url('fonts/Unageo.ttf');
}

html,
body {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Unageo';
    font-weight: lighter;
    font-size: 1em;
}

button {
  background-color: #e7e7e7;
  border: none;
  color: black;
  padding: 15px 32px;
  margin: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #b7b7b7;
  font-family: 'Unageo';
}

i{
    font-style: normal;
}

h1{
    margin: 5px 25px;
}

h2{
    text-align: center;
}

h2{
    margin: 0px 10px;
}

h3{
    margin: 0px 5px;
}

button:hover{
    background-color: #008CBA;
    color: white;
}

input[type='button']{
  background-color: #e7e7e7;
  border: none;
  color: black;
  padding: 15px 32px;
  margin: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #b7b7b7;
}

input[type='button']:hover{
    background-color: #008CBA;
    color: white;
}

.globalError{
    background-color: #902C3E;
    border-bottom: 1px solid #AA2C3E;
    text-align: center;
    display: flex;
}

.globalError p{
    padding: 5px;
    margin: 0px;
    font-size: large;
    color: white;
    flex-grow: 4;
}

.globalError i{
    padding: 8px;
    margin: 0px;
    font-size: large;
    color: white;
}

.globalError i:hover{
    color: black;
}

.link{
    cursor: pointer;
    margin-top: 25px;
    text-align: center;
}

.info{
    margin: 5px;
    text-align: center;
    color: #151575;
}

.link:hover{
    color: #2525AA;
}

.tab1{
    margin-left: 65px !important;
}

.tab2{
    margin-left: 130px !important;
}

.openHFirstC{
    margin-left: 25px !important;
    width: 185px !important;
}

.logo{
    background-color: #252525;
    display: flex;
}

.logo img{
    margin-left: auto;
    margin-right: auto;
}

.base{
    box-sizing: border-box;
    min-height: 100%;

    display: flex;
    flex-direction: column;
}

header{
    min-width: 1000px;
}

footer{
    min-width: 1000px;
    border-top: 1px solid #999999;
    background-color: #333333;
    flex-grow: 0;
    flex-shrink: 0;
}

footer div{
    display: flex;
    flex-direction: row-reverse;
}

footer button{
    color: #fefefe;
    border: 0;
    font-size: 13px;
    padding: 10px;
    margin: 0px;
    background: none;
    box-shadow: none;
    border-radius: 0px;
}

main {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
}

input {
    border-radius: 4px;
    border: 1px solid rgba(200, 200, 200, 0.2);
    color: rgb(30, 30, 30);
    font-family: 'Unageo';
}

input[type='text']{
    height: 25px;
    margin: 5px;
}

input[type='password']{
    height: 25px;
    margin: 5px;
}

.itemName{
  width: 265px;
  height: 25px;
  padding-left: 10px;
}

select {
    border-radius: 4px;
    border: 1px solid rgba(200, 200, 200, 0.2);
}

.mediumButton{
    padding:7px;
    display: flex;
}

.mediumButton i{
    font-size: 20px;
    padding: 1px;
}

.mediumButton p{
    margin: 2px 10px;
}

.wrapButton{
    padding: 7px;
    height: 34px;
}

.tinyButton{
    font-size: 10px;
    width: 25px !important;
    height: 25px;
    padding: 0px;
}

.toolButton{
    height: 30px;
    padding: 0px 8px;
    margin: 0px 5px;
    font-size: 13px;
}

.flexbox-center {
    display: flex;
    justify-content: center;
}

.flexbox {
    display: flex;
}

.flexbox-reverse{
    display: flex;
    flex-direction: row-reverse;
}

.settingsBox {
    width: 343px;
}

.dateName {
    font-size: 32px;
    background-color: rgb(255, 255, 255);
    color: #212121;
    width: 400px;
    text-align: center;
}

.dateName optgroup {
    font-size: 20px;
    text-align: left;
}

.dateName option {
    font-size: 20px;
    text-align: center;
}

.dates:has(~ .today) {
   background-color: #d5d5d5;
}

.today {
    background-color: #c4e5ff;
}

.dayListWeekDays {
    display: flex;
    justify-content: center;
    margin: 5px 0px 30px 0px;
}

.dayListWeekDays div{
    margin: 5px;
    padding: 5px;
    border: 1px solid #AAA;
    border-radius: 5px;
    width: 30px;
    text-align: center;
    background-color: #f9f9f9;
    cursor: pointer;
}

.dayListWeekDays div:has(~ .today) {
   background-color: #d0d0d0;
   color: #424242;
}

.dayListWeekDays div.today{
    background-color: #c4e5ff;
}

.dayListWeekDays div.current{
    border: 2px solid #000;
    font-weight: bold;
}

.dayListWeekDays div:hover{
    color: #fff;
    background-color: #008CBA;
}

.toolbar{
    display:flex;
    justify-content: space-between;
    flex-grow: 100;
}

.toolbar > div{
    display:flex;
}

.multiDaySelect {
    background-color: rgb(255, 255, 255);
    color: #212121;
    height: 250px !important;
}

.daySelect {
    background-color: rgb(255, 255, 255);
    color: #212121;
}

.settingsSelect {
    background-color: rgb(255, 255, 255);
    color: #212121;
    width: 140px;
}

.profileSelector {
    display: flex;
    margin-bottom: 14px;
    align-items: center;
}

.profileSelector label{
    padding-right: 5px;
    writing-mode: sideways-lr;
}

.profileSelector select{
    width: 270px;
    font-size:22px;
}

.selectedProfile {
    background-color: rgb(255, 255, 255);
    color: #212121;
    text-align: left;
    padding: 2px;
    text-align: left;
    width: 240px;
    margin-right: 40px;
}

input.amount {
    width: 50px;
    height: 25px;
    margin: 0px;
    font-size: 1rem;
    color: rgb(30, 30, 30);
    border-radius: 4px;
    border: 1px solid rgba(200, 200, 200, 0.2);
    outline: none;
    text-align: right;
    display: inline-block;
}

.dayStats{
    width: 310px;
}

.lGrayBg{
    background: #E3E3E3;
}

.vlGrayBg{
    background: #F3F3F3;
}

.left-sideways-text{
    writing-mode: sideways-lr;
    text-align: center;
    width: 20px;
}

.left-sideways-text div{
    writing-mode: horizontal-tb;
    position: relative;
    left: -24px;
}

.dayItems .mealName:hover {
    cursor: grab;
}

.dayItems .mealName button{
    visibility: hidden;
}

.dayItems .mealName:hover button{
    visibility: visible;
}

.right-sideways-text{
    writing-mode: sideways-rl;
    text-align: center;
    width: 20px;
}

.right-sideways-text div{
    writing-mode: horizontal-tb;
    position: relative;
    left: +28px;
}

.dragged button{

}

.chosen button{

}

.ghost button{

}

.tablePageHeader{
    display:flex;
    margin-bottom: 10px;
}

.tablePageToolBox{
    display: flex;
    margin-left: 25px;
    height: 49px;
    width:50%;
}


.filter{
    padding: 5px;
    background-color: #f8f8f8;
}

div.mealSeparator{
    display:flex;
}

div.mealSeparator.first{
    height: 20px;
}

div.mealSeparator div{
    width: 120px;
}

div.mealSeparator .firstCol{
    width: 285px;
}

div.mealSeparator .firstCol div{
    width: 300px;
}

div.mealSeparator .dataRow{
    background: #F3F3F3;
}

div.mealSeparator button{
    visibility: hidden;
    margin: 3px 10px 3px 0px;
}

div.mealSeparator:hover button{
    visibility: visible;
}

div.mealSeparator .separator {
    border-top: 1px dashed #999;
    width: 120px;
    height: 16px;
    padding: 0px;
    margin-top: 15px;
}

div.separator{
    height:20px;
}

.profile{
    width: 100%;
}

div.profileCard{
    border: 1px solid #ccc;
    background-color: #fafafa;
    padding: 5px;
    margin: 10px;
}

div.profileCard div{
    height: 25px;
    width: 130px;
    margin: 5px;
}

.profileAction{
    position: relative;
    top: -30px;
    left: +70px;
    visibility: hidden;
}

div.profileCard:hover div .profileAction{
    visibility: visible;
}

.bordered-box{
    border: 1px solid #eee;
    padding: 10px;
    margin: 5px;
}

.bordered-box.mediumBox{
    width: 430px;
}

.edit-wrap{
    display:flex;
    align-items: center;
    margin-bottom: 8px;
}

.edit-wrap input{
    text-align: left;
    height: 30px;
    width: 300px;
}

.edit-wrap p{
    width: 120px;
    font-size: 18px;
    margin: 7px;
}

.edit-wrap label{
    text-align: left;
    width: 120px;
    font-size: 18px;
    padding-right: 20px;
}

.edit-wrap select{
    font-size: 16px;
    height: 30px;
    width: 310px;
    text-align: center;
}

.day-label-wrap{
    display:flex;
    align-items: center;
}

.day-label-wrap label{
    text-align: right;
    width: 120px;
    padding-right: 5px;
}

.day-label-wrap p{
    text-align: center;
    font-weight: bold;
    width: 120px;
    margin: 0px;
}

.day-label-wrap i{
    text-align: center;
    width: 120px;
    margin: 0px;
}

.label-wrap{
    display:flex;
    align-items: center;
    height: 39px;
}

.label-wrap input[type="checkbox"]{
    margin-top: 6px;
    height: 22px;
    width: 22px;
    margin-left: 5px;
}

.label-wrap input{
    text-align: left;
    height: 29px;
    margin: 5px;
    padding: 1px 8px;
    width: 140px;
}

.label-wrap input.email{
    width: 250px;
}

.label-wrap .number{
    width: 55px;
}

.label-wrap .date{
    width: 100px;
}

.label-wrap > div{
    display: flex;
    width: 170px;
}

.label-wrap > select{
    width: 156px;
    height: 29px;
    margin: 5px;
    padding: 1px 8px;
    background-color: rgb(255, 255, 255);
    color: #212121;
}

.label-wrap > p{
    width: 165px;
    margin: 7px;
}

.label-wrap > label{
    text-align: right;
    width: 150px;
    padding-right: 5px;
    font-size: 14px;
}

.label-wrap label.small{
    font-size:14px;
}

.label-wrap label.short{
    width: 50px;
}

.label-wrap .tinyLabel{
    width: 20px;
}

.label-wrap .calculated{
    width: 175px;
    height: 39px;
    margin: 0px;
    padding: 0px 5px;
    background-color: #F3F3F3;
}

.label-wrap .calculated p{
    margin-top: auto;
    margin-bottom: auto;
}

.label-wrap div:has(> .item-name){
    width: 324px;
}

.label-wrap .item-name {
    width: 300px;
}

.label-wrap .middle{
    width: 35px;
    text-align: left;
    padding: 5px;
}

.label-wrap .unit{
    padding-left: 5px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0px;
    width: 50px;
}

p.shortText{
    width: 50px;
    text-align: right;
}

.additional{
    background-color: #fafafa;
}

.checkbox-wrap {
    display:flex;
    align-items: center;
    height: 30px;
    width: 440px;
}

.checkbox-wrap input{
    transform: scale(1.25);
}

.checkbox-wrap label{
    text-align: left;
    font-size: 16px;
    padding-left: 10px;
    width: 380px;
}

.level2 {
    margin-left: 20px;
    width: 420px;
}

.level2 label{
    width: 330px;
}

.level2 p{
    width: 60px;
    margin: 0px;
}

td.consumed {
    width: 10px;
    padding-right: 0px;
    padding-top: 8px;
}

td.consumed input{
    width: 18px;
    height: 18px;
}

input.rangeInput{
    width: 50px;
}

div.fields {
    padding-top: 7px;
}

label.unit {
    padding: 5px;
    display: inline-block;
}

p.error {
    font-weight: bold;
    color: red;
}

div.logout {
    float: right;
}

.align-bottom {
    align-self: flex-end;
}

.weight {
    width: 500px;
    min-height: 383px;
}

.header{
   font-weight: bolder;
}

.header2{
   font-weight: bolder;
   font-style: italic;
   border-top: 1px dotted #151515;
}

.mediumHeader{
    height: 40px !important;
    font-weight: bolder;
}

.mediumHeader div{
    align-self: flex-end;
}

.tallHeader{
    height: 95px !important;
    font-weight: bolder;
}

.tallHeader div{
    align-self: flex-end;
}

.headerCol{
    margin: 15px 5px;
    font-weight: bolder;
    text-align: right;
    font-size: 14px;
}

.headerCol div{
    height:25px;
    width:100px;
    margin: 5px;
}

.daySummary .row{
    display: flex;
    height: 25px;
    font-size: 14px;
}

.daySummary .row div{
    width: 120px;
    padding: 0px;
    margin: 0px;
}

.daySummary .row div p {
  margin: 0px;
  padding: 5px;
}

.itemsMiddle .row .handle{
    width: 20px;
    height: 30px;
}

.itemsMiddle>div:hover{

}

.itemsMiddle>div:hover .handle{
    cursor: grab;
    --dot-bg: white;
    --dot-color: black;
    --dot-size: 1px;
    --dot-space: 5px;
    background:
        linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        var(--dot-color);
}

.itemsBlock{
    margin-top: 20px;
}

.itemsBlock .row{
    display: flex;
    align-items: center;
    height: 30px;
    flex-direction: row;
}

.itemsBlock .row .offHandle{
    width: 20px;
    height: 30px;
}

.itemsBlock .row .firstCol{
    width: 280px;
}

.itemsBlock .row .dataRow{
    height: 30px;
    background: #F3F3F3;
}

.itemsBlock .row .dataRow p{
    margin: 0px;
    padding: 5px;
}

.itemsBlock .row > div{
    width: 120px;
    padding: 0px;
    margin: 0px;
}

.itemsBlock .row input[type='text'] {
    margin: 0px;
}

.notch{
    width: 40px !important;
}

.news{
    width: 750px;
}

.news div .date{
    text-align: right;
    font-style: italic;
}

.table{
    width: 100%;
}

.table .row{
    display: flex;
    align-items: center;
    height: 30px;
    flex-direction: row;
    font-size: 14px;
}

.table .row .firstCol{
    width: 270px;
}

.table .row .firstHalfCol{
    width: 150px !important;
}

.table .row .tinyCol{
    width: 25px !important;
}

.table .row > div{
    width: 100px;
    padding: 5px;
    margin: 0px;
}

.table .row button{
    visibility: hidden;
}

.table .row:hover button{
    visibility: visible;
}

.table .openMeal{
    width: 25px !important;
}

.table .noData{
    padding: 20px;
    text-align: center;
    font-size: 20px;
}

div.itemAction {
    width: 100px !important;
}

div.itemAction2 {
    width: 65px !important;
}

div.itemAction1 {
    width: 32px !important;
}

.dividerTop{
    border-top: 1px solid #111111;
}

.dividerBottom{
    border-bottom: 1px solid #111111;
}

nav {
    margin-bottom: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
  display: flex;
}

nav ul button{
   color: #FFF;
   border: 0;
   padding: 15px;
   margin: 0px;
   background: none;
   box-shadow: none;
   border-radius: 0px;
}

nav ul button:hover{
    background-color: #008CBA;
}

[aria-current]:not([aria-current="false"]){
  background-color: #00AA8B;
}

.tabs{
    display: flex;
    flex-direction: row-reverse;
}

.tabs div{
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    position:relative;
    top: 1px;
    padding: 2px 8px;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    border-radius: 5px 5px 0px 0px;
    margin: 0px 5px 0px 0px;
    background-color: #ddd;
    font-size: 13pt;
}

.tabContent{
    border-top: 1px solid #777;
    border-radius: 5px;
    padding-top: 10px;
}

.tabs div:hover:not([class="current"]){
    background-color: #008CBA;
}

.tabs .current{
    background-color: #fff;
    border-bottom: none;
}

.pagination{
    display: flex;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.pagination button{
    background-color: #fff;
}

.pagination button:hover{
    background-color: #008CBA;
}

.pagination .current{
    background-color: #90D5FF;
}

.fieldBox{
    background-color: #f1f1f1;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    height: 32px;
    width: 160px;
    margin: 5px;
    cursor: grab;
}

.fieldBox label{
    text-align: left;
    padding-left: 10px;
    cursor: grab;
}

.sHeader p{
    font-weight: bolder;
    font-style: italic;
    margin: 0px;
}

.sBox{
    display: flex;
    border: 1px solid #959595;
    background-color: #F3F3F3;
    margin-bottom: 2px;
}

.sBox:hover{
    border: 1px solid #37B3FF;
    background-color: #90D5FF;
}

.sBox:hover .users{
    background-color: #80C5EE;
}

.sBox div{
    display: flex;
    flex-wrap: wrap;
}

.sBox p{
    padding: 5px;
    margin: 0px;
}

.sBox p.name{
    width: 184px;
    font-weight: bolder;
}

.sBox p.unit{
    text-align: right;
    width: 50px;
}

.sBox .users{
    width: 42px;
    padding: 0px 5px 0px 5px;
    background-color: #E0E0E0;
}

.sBox .users p {
    text-align: center;
    padding: 0px;
}

.sBox .users p:nth-child(2){
    font-size: 30px;
    margin: auto;
}

.sBox .stats p{
    font-size: 12px;
}

.eula{
    resize: none;
    width: 425px;
    height: 300px;
}

.red {
    color: #800000
}

.green {
    color: #006400
}

.blue {
    color: #000080
}

.yellow {
    color: #BA8E23
}


/***** MODAL DIALOG ****/

.modalForm{
    padding: 20px;
}

#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}

/* PROGRESS BAR */

progress {
  width: 230px;
  display: block;
  margin: 5px;
  padding: 3px;
  border: 0 none;
  background: #e7e7e7;
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}

progress::-webkit-progress-bar {
    background: transparent;
}

progress.red::-moz-progress-bar {
    background: #800000
}

progress.green::-moz-progress-bar {
    background: #006400
}

progress.yellow::-moz-progress-bar {
    background: #BA8E23
}

progress.red::-webkit-progress-value {
    background: #800000
}

progress.green ::-webkit-progress-value {
    background: #006400
}

progress.yellow::-webkit-progress-value {
    background: #BA8E23
}