html {
height: 100%;
}

body {
height: 100%;
display: flex;
flex-direction: column;
overscroll-behavior: none;
}

header {
user-select: none;
margin: 0;
}

#headerbar {
white-space:nowrap;
overflow-x:auto;
text-align:center;
}

#menubar {
display:inline-block;
width: 32px;
height: 32px;
margin:2px;
}
  
#datebar {
 display:inline;
}

#templatebar {
 margin:5px;
 display:none;
}

#toolbar {
vertical-align:middle;
display:inline;
}

#browsebar {
vertical-align:middle;
display:inline;
}

#footerbar {
font-size: 0.8em;
background-color:#efefef; /*#3396d4;*/
}
  
#data {
resize: none;
background-color: #ffffff;
box-sizing: border-box;
flex-grow: 1;
padding: 2px;
width:100%;
}

#data[disabled] {
  background-color: #eeeeee;
}
#data:focus {
  outline: none;
}

#showdate {
width:150px;
z-index: 999;
}

span#status {
float:right;
font-size: 0.8em;
padding-top: 3px;
padding-right: 10px;
text-align:right;
}

.statuscontainer {
font-size: 0.8em;
padding:5px;
background-color:#f4f442;
display:none;
}

.updatereminder {
padding:10px;
border:1px solid #b2dba1;
border-radius:3px;
color:#3c763d !important;
background:#c8e5bc;
width:100%;
display:none;
}

.updatereminderrefresh {
display:inline-block;
margin:0 10px 0 10px;
color: blue;
cursor:pointer;
}
.updatereminderclose {
display:inline-block;
margin:0 0 0 10px;
cursor: pointer;
}

.ajbut {
display:inline;
background-repeat: no-repeat;
margin:2px;
width:32px;
height:32px;
border: 0;
opacity: 80%;
}

.ajbut:hover {
opacity: 100%;
}
.ajbut:active {
position:relative;
top:2px;
}
.ajbut:disabled {
opacity: 30%;
pointer-events: none;
 }

.ajbut#today    {
background:url(../img/today.png);
}

.ajbut#firstentry    {
  background:url(../img/firstentry.png);
}

.ajbut#preventry    {
  background:url(../img/preventry.png);
}

.ajbut#nextentry    {
  background:url(../img/nextentry.png);
}

.ajbut#lastentry    {
  background:url(../img/lastentry.png);
}

.ajbut#prevday    {
background:url(../img/prevday.png);
}

.ajbut#nextday    {
background:url(../img/nextday.png);
}

.ajbut#insertdate    {
background:url(../img/insertdate.png);
}

.ajbut#inserttime    {
background:url(../img/inserttime.png);
}
.ajbut#save    {
background:url(../img/save.png);
}

.ajbut#cancel    {
background:url(../img/cancel.png);
}

.ajbut#delete    {
background:url(../img/delete.png);
}

.ajbut#logout    {
background:url(../img/logout.png);
}

.ajbut#settings    {
background:url(../img/settings.png);
}

#spinneroverlay {
  background-color: rgba(0,0,0,10%);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9999;
  top: 0;
  left: 0;
  text-align: center;
  padding-top: 200px;
}
.spinner {
    margin: 0 auto;
    height: 24px;
    width: 24px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid #000000;
    border-right-color: transparent;
    border-radius: 50%;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* --------------------------------------------- */
/* Dialogs */

.forgot-password, .login-register {
	font-size: .7em;
	padding-right:10px;
}
.my-expiredate {
	font-size: .8em;
  padding-bottom:20px;
}
.notification_ok {
  padding: 0 0 1em 0;
  color: green;
}
.notification_error{
  padding: 0 0 1em 0;
  color: red;
}
.instructions {
	padding:10px;
}

a.dialogclose{
    color: #000000;
    opacity:0.5;
    display: block;
    _font-size: .75em;
    padding: .2em .5em;
    position: absolute;
    top: 10px;
    right: 5px;
}
     
a.dialogclose:hover{
opacity:1;
cursor: pointer;
}
 
div.dialogoverlay{
    background-color: rgba(0,0,0,.5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:999;
}

    div.dialogoverlay > div.dialogwrapper {
        align-self: center;
        position: fixed;
        box-shadow:0px 0px 2px 2px #d5d5d5;
        max-width:95%;
        max-height:calc(100vh - 100px);
        border-radius: 15px;
        overflow-y:auto;
    }

        div.dialogoverlay > div.dialogwrapper > div.dialogcontent {
            background-color: rgb(255,255,255);
            padding: 10px;    
            border-radius: 15px;
        }
         
            div.dialogoverlay > div.dialogwrapper > div.dialogcontent > h3 {
                color: rgb(0,0,0);
                font-size: 21px;
                font-weight:bold;
                padding: 0;
                margin: 0px .5em 1em 0px;
            }
			
.shrink-container{
    position: relative;
    margin: 5px 0px;
    padding: 15px 0px 0px 15px;
}
.shrink-container label{
    position: absolute;
    top:15px;
    cursor: text;
}
.shrink-container input:focus + label,.shrink-container input:not(:placeholder-shown) + label{
    opacity:1;
    transform: translateY(-100%) translateX(-10px);
    color:#000;
    font-size: .7em;
}
.shrink-container label,.shrink-container input{
    transition: all 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:0.5;
}

.dialogcontent input, .dialogcontent select {
    border-bottom: 2px solid #eeeeee;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    outline: none;
    display: block;
    margin: 10px 0 12px 0;
    width: 90%;
}
 

.dialogcontent input:focus, select:focus { 
    border-bottom: 2px solid #4195fc;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
 
.dialogcontent input:invalid, select:invalid { 
    border-bottom: 2px solid #ff0000;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.dialogcontent .submit {
	background-color: #4285f4;
	border-radius: 15px;
	border: 1px solid #3079ed;
	color: #fff;
	margin: 0 8px 0 0;
	min-width: 72px;
	cursor: pointer;
  padding: .55em .9em;
}
    
.dialogcontent .submit:hover, .dialogcontent .submit:focus {
  outline:none;
	border: 1px solid #2f5bb7;
  box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.dialogcontent .cancel {
	background-color: #f8f8f8;
	border-radius: 15px;
	border: 1px solid #d8d8d8;
	color: #333;
	margin: 0 8px 0 0;
	min-width: 72px;
	cursor: pointer;
  padding: .55em .9em;
}

.dialogcontent .cancel:hover, .dialogcontent .cancel:focus {
  outline:none;
	border: 1px solid #c6c6c6;
  box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button-container {
    width: 100%;
    text-align: right;
}

.progress-line, .progress-line:before {
  height: 3px;
  width: 90%;
  margin: 0;
  padding: 0 15px 0 15px;
}
.progress-line {
  background-color: #eeeeee;
  display: -webkit-flex;
  display: flex;
}
.progress-line:before {
  background-color: #4195fc;
  content: '';
  -webkit-animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}


/* #menu-bar --------------------------------------------- */

ul.main-menu
{
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;    
}
ul.main-menu > li
{
    margin: 0;
    display: inline;
    list-style-type: none;
    padding: 6px 4px 6px 6px;
    line-height: 28px;
    vertical-align: middle;
    cursor: default;
    outline: none;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: transparent;
}

ul.main-menu > li.active-menu
{
    background-color: #fff;
    border-color: #ccc;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

ul.main-menu ul li a
{
    color: #000;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
ul.main-menu li ul li a span
{
    font-size: 11px;
    color: #999;
    float:right;
    right: 10px;
    left: auto;
    position: absolute;
}

/* SUBMENU */
ul.main-menu > li  ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    border-width:1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu li ul li
{
    display:list-item;
    margin: 0;
    line-height: 32px;
    padding-right: 40px;
    min-width: 100px;
    cursor: pointer;
    text-indent: 30px;
    white-space:nowrap;
}
ul.main-menu li:hover
{
    background-color: whiteSmoke; /*#fef7cb;*/
}
ul.main-menu li.active-menu:hover
{
    background-color: #fff;
}
ul.main-menu li ul li.disabled, ul.main-menu li ul li.disabled:hover, ul.main-menu li ul li.disabled a
{
    color: #ddd;
    cursor:default;
    background-color: #fff;
    pointer-events: none;
}

ul.main-menu li.separator  
{
    border-top: 1px solid #ddd; 
    margin-top: 5px;
    margin-bottom: 5px;
}

.submenu 
{
    background-image: url(../img/menu-right-arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
}

@media (hover: none) and (pointer: coarse) {
}