:root {
    --preview-border: none;
    --preview-border-: dotted 1px black;
    --color60: snow;
    --color30: #CEBFAF;
    --color30-bak: #d4dfed;
    --color10: black;
    --color: transparent;
}

@font-face { font-family: "Body"; src: url("/css/font/Roboto-Regular.ttf"); }
@font-face { font-family: "Title"; src: url("/css/font/NotoSerif-Regular.ttf"); }

body { background-color: var(--color60); color: var(--color10); font-family: Body; font-size: 15px; margin: 0px; padding: 0px; }
.body { position: fixed; top: 0px; left: 0px; width: calc(100vw - 0px); height: calc(100vh - 0px); transition-duration: 0.5s; transition-timing-function:ease-out; z-index: 0; }
.waiting { position: fixed; width: 100px; top: calc(50vh - 50px); left: calc(50vw - 50px); z-index: 999; }
.message { font-size: 1.3em; position: absolute; top: -42px; left: 0px; width: 100vw; height: auto; border-bottom: dashed 2px gray; 
           padding-top: 20px; padding-bottom: 20px; text-align: center; background: rgba(255,255,255,0.9); 
           transition-duration: 0.5s; transition-timing-function:ease-in-out; opacity: 0; }
.background { position: absolute; top: 0px; left: 0px; width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; }

label { background-color: transparent; display: block; font-family: Body; font-size: 0.9em; padding-left: 10px; padding-top: 5px; position: relative; width: fit-content; }
input, textarea, select, span { background-color: transparent; border: none; color: black; font-family: Body; font-size: 1em; margin: 0px; padding: 5px 10px; position: relative; width: 100%; z-index: 0; }
input:focus, textarea:focus, select:focus { outline: none; }
input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; top: 10px; left: 15px; }
input[type="checkbox"] + label { display: inline;  left: 10px; top: 7px; }
input[type="radio"] { cursor: pointer; width: 15px; height: 15px; top: 10px; left: 15px; }
input[type="radio"] + label { display: inline; left: 10px; padding-right: 10px; top: 7px;}
input[type="color"] { height: 30px; padding: 0px 0px 0px 10px; width: 40px; }
input[type="color"]::-webkit-color-swatch { border: none; }
input[type="submit"] { font-family: Body; font-size: 1em; outline: none; border: none; display: inline-block; color: black; background-color: gainsboro; padding: 10px 20px; margin: 5px; }
input[type="submit"]:hover { cursor: pointer; color: white; background-color: black; }
input[type="submit"]:disabled { cursor: not-allowed; opacity: 0.5; }
textarea { height: 50px; }
textarea:focus { height: 150px; }
button { background-image: linear-gradient(to top, silver, gainsboro); border: none; border-radius: 3px; color: black; display: inline-block; font-family: Body; font-size: 0.9em; font-weight: bold; height: auto; margin-bottom:5px; outline: none; padding: 8px 10px; z-index: 0; }
button:not(:disabled):hover { background-image: linear-gradient(to top, gray, gray); color: white; cursor: pointer; }
button:disabled { color: gray; cursor: not-allowed; }

.scroll { overflow-y: auto; overflow-x: hidden; height: 90%; }
.scroll-bak { overflow-y: auto; overflow-x: hidden; height: 90%; }

.title { color: var(--color10); display: block; font-family: Title; font-weight: bold; margin: 0px 0px 10px 0px; text-shadow: 1px 1px whitesmoke; }
.title-inline { color: var(--color10); display: inline-block; font-family: Title; font-weight: bold; margin: 0px 15px 15px 0px; text-shadow: 2px 2px white; }
.title-big { font-size: 2em; margin-top: -5px; }
.title-medium { font-size: 1.8em; }
.title-small { font-size: 1.4em; }
.title-tiny { font-size: 1.2em; }

.form-section { border: var(--preview-border); margin: 0px; padding: 20px; width: calc(100% - 40px); }
.form-action { background-color: transparent; border: none; display: block; height: auto; margin: 0px 0px 7px 0px; padding: 0px; width: auto; z-index: 0; }
.form {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5));
    border: none;
    border-color: gray;
    border-radius: 5px;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    display: inline-block;
    height: auto;
    margin: 0px -3px 10px 0px;
    min-height: 57px;
    padding: 0px 5px 0px 0px;
    vertical-align: top;
    z-index: 0;
}
.form { &:focus-within { label { font-weight: bold; } } }

.icon { background-repeat: no-repeat; background-position: right; background-size: 20px; }
.icon-email { background-image: url("/images/input-icon-email.png"); }

.image-button { background-color: transparent; border: none; height: auto; margin: 0px; padding: 0px; padding-right: 10px; vertical-align: middle; width: auto; }
.image-button:disabled { opacity: 0.5; }
.image-button:hover { cursor: pointer; transform: scale(1.1, 1.1); }
.image-label { cursor: pointer; float: right; height: 12px; margin-left: 5px; }

.item { border: none; color: var(--color10); display: flow; font-family: Body; font-size: 1em; height: auto; overflow-x: hidden; padding: 2px 10px; scroll-behavior: smooth; white-space: nowrap; }
.item:hover { cursor: pointer; font-weight: bold; left: 10px; }
.dropzone-separator[drop-active=true] { border-bottom: 1px dashed black; margin-bottom: 5px; }
.dropzone-separator { border-bottom: 1px solid transparent; height: 5px; margin: 0px 10px; width: calc(100% - 40px); }
.attachment { background-color: DarkSlateGrey; border-radius: 3px; color: white; display: inline-block; margin-right: 5px; padding: 5px 10px; }

.col { border: var(--preview-border); display: inline-block; margin-right: -5px; padding: 0px; vertical-align: top; width: auto; }
.middle { height: 100vh; vertical-align: middle; }
.readonly { font-style: italic; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.line-through { text-decoration: line-through; }
.caption { color: gray; font-size: 0.8em; }
.radius { border-radius: 3px; background-color: transparent; display: inline-block; height: 10px; margin-right: 7px; width: 15px; }
.vertical {
    text-align: right;
    text-orientation: mixed;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}
.min { height: 0px; visibility: hidden; }
.max { height: auto; visibility: visible; }
.code { font-family: "Courier New"; font-size: 16px; overflow: auto; white-space: nowrap; }
.obs { color: gray; font-size: 0.8em; font-style: italic; }

.table { border: none; table-layout: auto; width: auto; }
.table th, .table td { font-family: Body; border-bottom: dotted 1px gray; width: auto; vertical-align: middle; }
.table th { font-size: 0.9em; padding: 8px 10px; text-align: left; white-space: nowrap; }
.table td { font-size: 0.8em; padding: 5px 10px; }
.table tr:hover { cursor: pointer; font-weight: bold; }
.table-x th { background-image: linear-gradient(to top, silver, gainsboro); position: sticky; top: 0px; }
.table-group { background-color: white; font-weight: bold; }

.row { border-bottom: dotted 1px gray; padding: 5px 10px; }
.row:hover { cursor: pointer; font-weight: bold; }
.row-mark { padding: 2px 10px; border-radius: 0px; }

.post-it { background: linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,.25)); background-color: whitesmoke; border-radius: 5px; box-shadow: 5px 5px 10px -2px rgba(33,33,33,.3); display: block; font-size: 1em; float: left; height: auto; margin: 0 15px 15px 0; padding: 15px; position: relative; transition: transform .10s; width: auto; z-index: 1; line-height: 1.3em;}
.post-it:hover { cursor: pointer; transform: rotate(-0.5deg) translate(5px, 0px); }
.post-it-light { background-image: linear-gradient(to right bottom, var(--color), transparent, transparent, transparent); border-image: linear-gradient(to bottom, black, gainsboro) 1 100%; border-left: solid 1px black; display: block; float: left; font-family: Body; font-size: 0.9em; height: auto; margin: 0 10px 5px 0; padding: 10px; position: relative; transition: transform .10s; width: auto; z-index: 1; }
.post-it-light:hover { cursor: pointer; transform: rotate(-0.5deg) translate(5px, 0px); }
.post-it-clear { background-color: transparent; border: none; display: inline-block; font-size: 1em; float: left; height: auto; margin: 0 10px 10px 0; padding: 15px; position: relative; transition: transform .10s; width: auto; z-index: 1; line-height: 1.3em;}
.post-it-clear:hover { cursor: pointer; transform: rotate(-0.5deg) translate(5px, 0px); }

.agenda { border: none; border-radius: 5px; box-shadow: 5px 5px 10px -2px rgba(33,33,33,.3); font-size: 0.8em; margin: 0px 0px 10px 0px; padding: 15px; transition: transform .10s; width: 170px; }
.agenda:hover { cursor: pointer; transform: rotate(-0.5deg) translate(5px, 0px); }
.agenda-pending { background-image: linear-gradient(rgba(255, 255, 255, 0.5)); }
.agenda-finished { background-image: linear-gradient(rgba(255, 255, 255, 0.5)); opacity: 0.4; }
.agenda-delayed { background-image: linear-gradient(rgba(192, 192, 192, 0.5)); }
.agenda-title { font-size: 1.2em; margin-bottom: 10px; text-align: center; width: 100%; }
.agenda-today { font-weight: bold; }

::-webkit-scrollbar { width: 5px; height: 5px; } 
::-webkit-scrollbar-track { background: whitesmoke; } 
::-webkit-scrollbar-thumb { background: gray; } 
::-webkit-scrollbar-thumb:hover { background: gray; }

@media only screen and (min-width: 401px) {
    .col-25 { width: calc(25% - 50px); }
    .col-30 { width: calc(30% - 50px); }
    .col-50 { width: calc(50% - 50px); }
    .col-70 { width: calc(70% - 50px); }
    .col-75 { width: calc(75% - 50px); }
    .form-10 { width: calc(10% - 7px); }
    .form-25 { width: calc(25% - 7px); }
    .form-50 { width: calc(50% - 7px); }
    .form-75 { width: calc(75% - 7px); }
    .form-90 { width: calc(90% - 7px); }
    .form-100 { width: calc(100% - 7px); }
}
@media only screen and (max-width: 400px) {
    .col-25, .col-30, .col-50, .col-70, .col-75 { position: absolute; width: calc(100vw - 100px); }
    .form-10, .form-25, .form-50, .form-75, .form-90, .form-100 { width: calc(100vw - 50px); }
    .image-button { width: 30px; padding-left: 10px; }
    .table td { font-size: 0.7em; }
}