html, button, input, select, textarea {
    color: #222;
}
html, body {
    margin:0;
    padding:0;
    height: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size:12px;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}
.start-stop {position:absolute;top:10px;right:75px}
button {font-family: 'Roboto', sans-serif;font-size:1.2em;display: inline-block;padding: 20px 30px;border-radius: 5px;color: #f8f9fa;background-color: #495057;text-decoration: none;border:none;cursor:pointer;}
button#ec2-start, button#ec2-stop {height:32px;line-height:34px;padding:0 8px}
button#ec2-start {background-color:#20AA20}
button#ec2-stop {background-color:#CC1010}
#do-magic {color: #f8f9fa;background-color: #495057;}
#settings-panel label {display:inline-block;width:120px;text-align:left}
#settings-panel input {display:inline-block;width:2em;background-color:transparent;border:none;border-bottom:1px solid #f8f9fa;outline:none;color:#f8f9fa;text-align:center;font-size:15.5px}

.predict-item {font-size: 14px;font-family:courier, courier new, serif;  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f8f8f8;
  line-height:1.5em;
  min-width:500px;
}
#source-text {  width: 100%;
  height: 200px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 14px;
  resize: vertical;
  font-family:courier, courier new, serif;
  line-height:1.5em;
}
#source-text:focus {
  outline: none !important;
  border:1px solid #b0b0b0;
  background-color: #fafafa;
  box-shadow: none;
}

.page-container {padding:10px 20px;}
.page-container-inner {position:relative}

#settings-open {position:absolute;right:2em;top:10px;cursor:pointer;}
#settings-close, #error-close {position:absolute;right:10px;top:10px;cursor:pointer;}
#settings-panel {padding:20px 50px 20px 20px;background-color:#495057;border-radius:5px;color:#f8f9fa;user-select:none;z-index:1;font-size:15.5px}
#error-panel {padding:20px 50px 20px 20px;background-color:#CC1010;border-radius:5px;color:#f8f9fa;user-select:none;z-index:1;font-size:15.5px}

@media only screen and (max-width: 768px) {
  .page-container {padding:10px}
  #settings-open {right:10px;}
  .start-stop {right:60px}
  .predict-item {min-width:320px;}
}

.underlay {position: fixed;width: 100%;height:100%;display: flex;align-items: center;top: 0;left:0;right:0;bottom:0;background: rgba(20, 20, 20, 0.8);z-index:2000;-webkit-transition: opacity .3s ease;transition: opacity .3s ease}
.interface-disable {position: absolute;width: 100%;height:100%;top: 0;left:0;right:0;bottom:0;background: rgba(255, 255, 255, 0.7);z-index:2;}

#dialogs {background:rgba(255, 255, 255, .8);}
.pl, .pl:before, .pl:after {
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.pl {
    margin: 0 auto 1.5em auto;
    position: relative;
    width: 3em;
    height: 3em;
}
.pl:before, .pl:after {
    background: #aaa;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: 50% 100%; 
    clip-path: polygon(0 0,100% 0,50% 100%);
    -webkit-clip-path: polygon(0 0,100% 0,50% 100%);
}
.pl-origami {
    animation-name: origamiA;
    animation-timing-function: steps(4);
}
.pl-origami:before, .pl-origami:after {
    clip-path: polygon(50% 0,100% 100%,0% 100%);
    -webkit-clip-path: polygon(50% 0,100% 100%,0% 100%);
}
.pl-origami:before {
    animation-name: origamiB;
}
.pl-origami:after {
    animation-name: origamiC;
    transform: rotate(180deg);
}
@keyframes origamiA {
    from { transform: rotate(0) }
    to { transform: rotate(-360deg) }
}
@keyframes origamiB {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateX(0deg) }
    12.5%, 62.5% { opacity: 1; transform: translateZ(1px) rotateX(-180deg) }
    37.5%, 87.5% { opacity: 0; transform: translateZ(0) rotateX(0deg) }
}
@keyframes origamiC {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    12.5%, 62.5% { opacity: 0; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    37.5%, 87.5% { opacity: 1; transform: translateZ(1px) rotateZ(180deg) rotateX(-180deg) }
}
.hidden {display: none!important;}
.hidden-invisible {display: none!important;opacity: 0!important;}
.visible {opacity: 1!important;}
.active {display: block!important;}
.popup-window {position: fixed;z-index: 1010;top: 0;bottom: 0;right: 0;left: 0;max-width: 100vw;max-height: 100vh;margin: auto;transform: scale(0);transition: transform .3s ease;display:inline-block;max-width:320px}
.popup-window-active {transform: scale(1);}
.rate-container svg {cursor:pointer}