@charset "UTF-8";
.calendar-no-scrollbar::-webkit-scrollbar 
{
  display: none;
}

.calendar-popup
 {
   background-color : var(--bg-color-max);
   z-index          : 3; 
   position         : absolute; 
   padding-top      : 0px; 
   padding-bottom   : 0px; 
   background-color : var(--bg-color-max); 
   overflow         : none;
 }
 .calendar-popup-normal
 {
   border-radius    : 5px; 
   box-shadow       : 0px 5px 10px 6px var(--bg-color-min);
 }
 .calendar-popup-small
 {
   overflow : hidden;
   width    : calc(min( 100vw, 100vh));
 }
.calendar-heading
{
  font-size               : 1.3em;
  font-weight             : bold;
}
 .no-user-selection
 {
   user-select           : none;
   -webkit-user-select   : none;
 }
 .menu-overlay
 {
   z-index : 10;
   position : fixed;
   left : 0px;
   top  : 0px;
   width: 100vw;
   height: 100vh;
   background-color : var(--bg-color-modal);
 }
 .summary-overlay
 {
   font-size     : 0.6em;
   position      : absolute;
   right         : 0px;
   bottom        : 0px;
   padding-right : 5px;
 }
 .menu-overlay-small-device
 {
   z-index : 25;
   position : fixed;
   display: flex;
   flex-flow: row;
   flex-grow: 1;
   flex-shrink: 1;
   align-items: flex-end;
   justify-content: center;
   vertical-align: bottom;
   left : 0px;
   top  : 0px;
   width: 100vw;
   height: 100vh;
   background-color : rgba(127, 127, 127, 0.5);
 }
 /*.input
 {
   text-align       : right;
   outline          : none;
   box-shadow       : none;
   border           : 0px solid transparent;
   background-color : transparent;
   color            : inherit;
   padding          : 0px;
   margin           : 0px;
 }*/
 .month-and-day
 {
   font-size   : 1em;
   flex        : 1;
   display     : flex;
   flex-flow   : row-reverse;
   flex-grow   : 0;
   flex-shrink : 1;
   overflow    : none;
   max-height  : 16.5em;
 }
 .disabled 
 {
   opacity : 0.3;
 }
 .outside 
 {
   color : var(--fg-color-min);
   font-style: italic;
 }
 .outside-range
 {
   width            : 100%;
   height           : 100%;
   vertical-align   : middle;
   justify-content  : center;
   align-content    : center;
   text-align       : center;
   color            : var(--fg-color-min);
   background-color : var(--bg-color-normal);
   cursor           : default;
 }
 .calendar-picker
 {
   position         : relative;
   border-radius    : 3px;
   align-items      : center;
   text-align       : center;
   vertical-align   : middle;
   width            : fit-content;
   display          : flex;
   flex-flow        : row;
   overflow         : none;
   color            : inherit;
   background-color : transparent;
   border-width     : 1px;
   border-style     : solid;
   border-color     : var(--bg-color-min);
   margin-top       : 1px;           
   margin-bottom    : 1px;           
 }
 .calendar-picker:focus-within
 {
   box-shadow       : 0px 0px 2px 2px var(--bg-color-focus);
 }
 .calendar-picker:focus
 {
   box-shadow       : 0px 0px 2px 2px var(--bg-color-focus);
 }
 .placeholder
 {
   opacity : 0.5;
 }
 .time-pane
 {
   border-left : 1px solid var(--bg-color-normal);
 }
 .center-align
 {
   text-align      : center;
   align-items     : center;
   justify-content : start;
   vertical-align  : middle;
 }
 .clickable
 {
   padding-left  : 2px;
   padding-right : 2px;
   border-radius : 5px;
   border-style  : solid;
   border-width  : 1px;
   border-color  : transparent;
   cursor        : pointer;
 }
 .clickable:hover
 {
   border-color: var(--bg-color-min);
 }
 .clickable-touch
 {
   padding-top   : 2px;
   padding-right : 2px;
   padding-left  : 4px;
   padding-right : 4px;
   border-radius : 5px;
   border-style  : solid;
   border-width  : 1px;
   border-color  : transparent;
   cursor        : pointer;
 }
 .no-clickable
 {
   padding-left  : 2px;
   padding-right : 2px;
   border-radius : 5px;
   border-style  : solid;
   border-width  : 1px;
   border-color  : transparent;
   cursor        : default;
 }
 .calendar-heading
 {
   text-align              : center;
   background-color        : var(--bg-color-focus);
   border-top-left-radius  : inherit;
   border-top-right-radius : inherit;
 }
 .calendar-title
 {
   font-size   : 1.3em;
   font-weight : bold;
 }
 .header
 {
   min-height            : 2em;
   padding-top           : 2px;
   padding-bottom        : 2px;
   padding-left          : 5px;
   padding-right         : 5px;
   border-bottom         : 1px solid var(--bg-color-normal);
   overflow              : hidden;
 }
 .header-date
 {
   min-width             : max-content;
   white-space           : nowrap;
   padding-top           : 2px;
   padding-bottom        : 2px;
   padding-left          : 5px;
   padding-right         : 5px;
   font-size             : 1.2em;
   font-weight           : bold;
   align-items           : center;
 }
 .year-select
 {
   background-color      : var(--bg-color-normal);
   border-bottom         : 1px solid var(--fg-color-min);
   padding  : 3px;
   font-weight: bold;
   font-size: 1.1em;
   cursor                : pointer;
 }
 .year-select:hover
 {
   background-color      : var(--bg-color-min);
 }
 .year-month
 {
   margin         : 3px;
   padding-top    : 3px;
   padding-bottom : 3px;
   padding-left   : 20px;
   padding-right  : 20px;
 }
 .year-months
 {
   display: grid;
   grid-template-columns : auto auto auto auto;
   padding               : 0px;
   justify-items         : center;
   align-items           : center;
   text-align            : center;
   background-color      : var(--bg-color-max);
   cursor                : default;
   width                 : 100%;
 }
 .footer
 {
   display: grid;
   grid-template-columns : auto auto auto auto;
   justify-items         : center;
   align-items           : center;
   text-align            : center;
   border-top            : 1px solid var(--bg-color-normal);
   padding-top           : 0.25em;
   padding-bottom        : 0.25em;
 }
 .footer-3
 {
   display: grid;
   grid-template-columns : auto auto auto;
   justify-items         : center;
   align-items           : center;
   text-align            : center;
   border-top            : 1px solid var(--bg-color-normal);
   padding-top           : 5px;
   padding-bottom        : 5px;
 }
 .footer-small
 {
   padding     : 0.25em;
   font-weight : bold;  
 }
 .date-icon
 {
   width               : 16px;
   height              : 16px;
   background-image    : var(--date-icon);
   background-repeat   : no-repeat;
   background-position : center center;
   background-size     : 16px;  
 }
 .icon
 {
   padding             : 2px;
   width               : 16px;
   height              : 16px;
   background-repeat   : no-repeat;
   background-position : center center;
   background-size     : 12px;
 }
 .dropdown
 {
   background-image    : var(--dropdown-icon);
   background-size     : 24px 24px;
 }
 
 .dropup
 {
   background-image    : var(--dropup-icon);
   background-size     : 24px 24px;
 }
 .legend
 {
   font-weight: bold;  
 }
 .calendar-icon
 {
   background-repeat   : no-repeat;
   background-position : center center;
 }
 .calendar-small-icon
 {
   padding             : 4px;
   width               : 14px;
   height              : 14px;
   background-size     : 12px;
 }
 .calendar-normal-icon
 {
   padding             : 2px;
   width               : 18px;
   height              : 18px;
   background-size     : 16px;
 }
 .prev-month-icon
 {
   background-image    : var(--prev-icon);
 }
 .next-month-icon
 {
   background-image    : var(--next-icon);
 }
 .month-items
 {
   width                 : 100%;
   display               : grid;
   grid-template-columns : auto auto auto auto auto auto auto auto;
   justify-items         : center;
   align-items           : center;
   vertical-align        : middle;
   text-align            : center;
   padding               : 0px;
 }
 .month-item
 {
   min-height     : 2em;
   max-height     : 2em;
   margin-left    : 3px;
   margin-right   : 3px;
   display        : flex;
   text-align     : center;
   vertical-align : middle;
   justify-content: center;
   align-content  : center;
   flex-direction : column;
   border         : 2px solid transparent;
 }
 .week
 {
   width            : 3em;
   background-color : var(--bg-color-normal);
 }
 .time-item
 {
   padding-top    : 3px;
   padding-bottom : 3px;
   padding-left   : 5px;
   padding-right  : 5px;
 }
 .day
 {
   width          : fit-content;
   vertical-align : middle;
   min-width      : 2em;
   min-height     : 2em;
   border-radius  : 50%;
   text-align     : center;
   cursor         : pointer;
 }
 .day:hover
 {
   border-color  : var(--fg-color-normal);
 }
 .day-title
 {
   margin-bottom :4px;
   background-color:  var(--bg-color-normal); 
 }
 .today
 {
   font-weight      : bold;
   background-color : var(--bg-color-focus);
 }
 .day-selected
 {
   border-color     : var(--fg-color-max);
 }
 .time-selected
 {
   border-color     : var(--fg-color-max);
   background-color : var(--bg-color-focus);
 }
 .horizontal-space
 {
   column-gap: 0px;
 }
 .time-item-input
 {
   font-size     : inherit;
   border        : 2px solid var(--fg-color-min);
   border-radius : 5px;
   padding-left  : 5px;
   padding-right : 5px;
   margin        : 0px;
   background-color: var(--bg-color-max);
   outline: none;
   color : solid var(--fg-color-max);
 }
 .small-padding
 {
   margin-top : 5px;
   margin-bottom : 4em;
 }
 .normal-padding
 {
   margin-top : 5px;
   margin-bottom : 5px;
 }
 .small-device-time-item
 {
   font-size      : 4em;
 }
 .not-active
 {
   opacity      : 0.1;
 }
 .time-item-padding
 {
   border-right   : 1px solid var(--bg-color-min);
 }
 .current-style
 {
   outline             : 0px solid transparent;
   user-select         : none;
   -webkit-user-select : none;
   -ms-user-select     : none;
 }
 .current-style-edit
 {
   background-color: transparent;
 }
 .current-style-edit:focus-within
 {
   background-color: var(--bg-color-normal);
 }
 .keyboard-root
 {
   background-color      : lightgray;
   width                 : 100%;
 }
 .keyboard
 {
   user-select           : none;
   -webkit-user-select   : none;
   display               : grid;
   column-gap            : 5px;
   row-gap               : 5px;
   grid-template-columns : 2.5fr 2.5fr 2.5fr 2.5fr;
   justify-items         : center;
   align-items           : center;
   text-align            : center;
   padding               : 5px;
 }
 .portrait
 {
   font-size: 3em;  
 }
 .landscape
 {
   font-size: 2em;  
 }
 .keyboard-button
 {
   min-width        : 100%;
   min-height       : 100%;
   color            : black;
   font-size        : inherit;
   border-radius    : 5px;
 }
 .numeric-button
 {
   background-color : white;
 }
 .non-numeric-button
 {
   background-color : darkgrey;
   
 }
 .active-button
 {
   background-color : grey;
 }
 .backspace-button
 {
   background-image: url("/img/backspace.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 32px;
 }
 .down-button
 {
   background-image: url("/img/down.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 32px;
 }