html, body {
    height: 100%;
    margin: 0px;
}

body {
    background: black;
    color: white;
}

input {
    box-sizing: border-box;
}

button {
    vertical-align: bottom;
}

.RoundedL {
    border-top-left-radius: 5000px;
    border-bottom-left-radius: 5000px;
}

.RoundedR {
    border-top-right-radius: 5000px;
    border-bottom-right-radius: 5000px;
}

.RoundedT {
    border-top-left-radius: 5000px;
    border-top-right-radius: 5000px;
}

.RoundedB {
    border-bottom-left-radius: 5000px;
    border-bottom-right-radius: 5000px;
}

.RoundedUL {
    border-top-left-radius: 5000px;
}

.RoundedUR {
    border-top-right-radius: 5000px;
}

.RoundedLL {
    border-bottom-left-radius: 5000px;
}

.RoundedLR {
    border-bottom-right-radius: 5000px;
}

.DECOR {
    /*background-color: #b485ff; *//* hsv(263,48,100) */
    background-color: #a277e6; /* hsv(263,48,90) */
    /*background-color: #906acc; *//* hsv(263,48,80) */
    color:#000000;
    border:solid black;
}

.FIELD {
    background-color:#AEE0FF; /* hsv(203, 32% ,100%) */
    color:#000000;
    border:solid black;
}
.FIELD:disabled {
    background-color:#577080;
}

.FIELD:focus {
    background: radial-gradient(#AEE0FF 20%,#8BB4CC 66%,#577080 90%);
    outline-color:transparent;
    outline-style:none;
}
.FIELD:enabled:active, .FIELD.active {
    background: radial-gradient(#8BB4CC 20%,#577080 66%,#2B3840 90%);
}

.TOOL {
    background-color:rgb(36,97,191); /* HSB 217, 81, 75 */
    color:#e0e0e0;
    border:solid black;
}
.TOOL:disabled {
    background-color:#112E5A;
}

.TOOL:focus {
    background: radial-gradient(rgb(48,129,255) 20%, rgb(39,103,204) 66%, rgb(24, 65, 128) 90%);
    outline-color:transparent;
    outline-style:none;
}
.TOOL:enabled:active, .TOOL.active {
    background: radial-gradient( rgb(39,103,204) 20%, rgb(24, 65, 128) 66%, rgb(12, 32, 64) 90%);
}

.CONFIRM {
    background-color: rgb(183,255,173);
    color: #000000;
    border: solid black;
}
.CONFIRM:disabled {
    background-color: rgb(91,128,87);
}
.CONFIRM:focus {
    background: radial-gradient(rgb(183,255,173) 20%,rgb(146,204,139) 66%,rgb(91,128,87) 90%);
    outline-color: transparent;
    outline-style: none;
}
.CONFIRM:enabled:active, .CONFIRM.active {
    background: radial-gradient(rgb(146,204,139) 20%,rgb(91,128,87) 66%,rgb(46,64,43) 90%);
}

.PAGER {
    background-color:#F6AEFF;
    color:#000000;
    border:solid black;
}
.PAGER:disabled {
    background-color:#7C5780;
}
.PAGER:focus {
    background-color:#FBD9FF;
    background-color:#FFFFFF;
    background: radial-gradient(#F6AEFF 20%,#c58bcc 66%,#7B5780 80%);
    outline-color:transparent;
    outline-style:none;
}
.PAGER:enabled:active, .PAGER.active {
    background-color:#c58bcc;
    background: radial-gradient(#c58bcc 20%,#7B5780 66%,#3D2B40 80%);
}

.ERROR {
    background-color: rgb(255,128,128);
    color: #000000;
    border: solid black;
}
.ERROR:disabled {
    background-color: rgb(128,64,64);
}
.ERROR:focus {
    background: radial-gradient(rgb(255,128,128) 20%,rgb(204,102,102) 66%,rgb(128,64,64) 90%);
    outline-color: transparent;
    outline-style: none;
}
.ERROR:enabled:active, .ERROR.active {
    background: radial-gradient(rgb(204,102,102) 20%,rgb(128,64,64) 66%,rgb(64,32,32) 90%);
}

.NAV {
    background:#FFCDAE;
    color:#000000;
    border:solid black;
}
.NAV:disabled {
    background:#806757;
}
.NAV:focus {
    background-color:#FFE7D9;
    background-color:#FFFFFF;
    background: radial-gradient(#FFCDAE 20%,#CCA48B 66%,#806757 80%);
    outline-color:transparent;
    outline-style:none;
}
.NAV:enabled:active, .NAV.active {
    background-active: #CCA48B;
    background: radial-gradient(#CCA48B 20%,#806757 66%,#40332B 80%);
}

.WARNING {
    background-color:#FFFF00;
    color:#000000;
    border:solid black;
}
.WARNING:disabled {
    background-color:808000;
}
.WARNING:focus {
    background-color:#FFFFD9;
    background-color:#FFFFFF;
    background: linear-gradient(to right, #FFFF00, #FFFFD9, #000000);
    background: radial-gradient(#ffff00 20%,#cccc00 66%,#808000 80%);
    outline-color:transparent;
    outline-style:none;
}
.WARNING:enabled:active, .WARNING.active {
    background-color:#CCCC00;
    background: radial-gradient(#cccc00 20%,#808000 66%,#404000 80%);
    color:#000000;
}

.RO {
    background:#000000;
    color:#FFFFFF;
    border:solid black;
}

.OK {
    border:solid black;
}

.FAILURE {
    border:solid #ff8080;
}

.UNSAVED {
    border:solid #ffff00;
}

.UNAVAILABLE {
    color:#808080;
}

.OPTIONAL {
    color: rgb(183,255,173);
}

.REQUIRED {
    color:solid #ffff00;
}

/* Switch */
:host {
    --switch-height: 68px;
}

.switch {
    position: relative;
    display: inline-block;
    width: calc(2 * var(--switch-height) - 8px);
    height: var(--switch-height);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: X;
    background-color: #577080;
    -webkit-transition: .4s
    transition: .4s
}

.slider:before {
    position: absolute;
    content: T;
    height: calc(var(--switch-height) - 8px);
    width: calc(var(--switch-height) - 8px);
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #AEE0FF;
}

input:focus + .slider:before {
    background: radial-gradient(#AEE0FF 20%,#8BB4CC 66%,#577080 90%);
}

.slider.round {
    border-radius: var(--switch-height);
}

.slider.round:before {
    border-radius: 50%;
}

input:checked + .slider:before {
    -webkit-transform: translateX(calc(var(--switch-height) - 8px));
    -ms-transform: translateX(calc(var(--switch-height) - 8px));
    transform: translateX(calc(var(--switch-height) - 8px));
}

.hack::before {
    content: "";
}

/* Checkbox */
:host {
    --checkbox-height: 16px;
}

.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    height: var(--checkbox-height);
    width: var(--checkbox-height);
}

.checkbox > span {
    color: black;
}

.checkbox > input {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #AEE0FF;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #AEE0FF;
    cursor: pointer;
  }

.checkbox > input:focus {
  background: radial-gradient(#AEE0FF 20%,#8BB4CC 66%,#577080 90%);
}

.checkbox > input:checked {
}

.checkbox > input:checked + span::before {
    content: '\2714';
    display: block;
    text-align: center;
    font-size: var(--checkbox-height);
    color: black;
    position: absolute;
    left: calc(var(--checkbox-height) / 8);
    top: calc(var(--checkbox-height) / -8 - var(--checkbox-height) / 16);
}

.checkbox > input:active {
    background: radial-gradient(#8BB4CC 20%,#577080 66%,#2B3840 90%);
}

@font-face {
  font-family: MyFont1;
  src: url(/font1.ttf) format(truetype);
}
@font-face {
  font-family: MyFont2;
  src: url(/font2.ttf) format(truetype);
}
@font-face {
  font-family: MyFont3;
  src: url(/font3.ttf) format(truetype);
}
@font-face {
  font-family: MyFont4;
  src: url(/font4.ttf) format(truetype);
}

#cursor {
    border:0;
}

.deleted {
    display: none;
}