html{
    --color-primary:#FFFFFF;
    --color-reverse:#000000;
    --color-desc:#f5f5f5;
    --color-555:#555;
    --gap-default: 16px;

    --font-size-h1: 36px;
    --font-size-h2: calc(var(--font-size-h1) - 4px);
    --font-size-h3: calc(var(--font-size-h2) - 4px);
    --font-size-h4: calc(var(--font-size-h3) - 4px);
    --font-size-h5: calc(var(--font-size-h4) - 4px);
}
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
.container{
    width: 768px;
    margin: 0 auto;
}
.w-768{
    width: 768px;
}
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        height: 100%;
        padding: 16px;
    }
}
a{text-decoration: none!important;}
h1,.fs-h1{
    font-size: var(--font-size-h1);
}
h2,.fs-h2{
    font-size: var(--font-size-h2);
}
h3,.fs-h3{
    font-size: var(--font-size-h3);
}
h4,.fs-h4{
    font-size: var(--font-size-h4);
}
h5,.fs-h5{
    font-size: var(--font-size-h5);
}
.fs-14{
    font-size: 14px;
}
.fs-16{
    font-size: 16px;
}
.fs-18{
    font-size: 18px;
}

.fs-h1-p {
    font-size: calc(var(--font-size-h1) + 4px);
}
.fs-h1-pp {
    font-size: calc(var(--font-size-h1) + 8px);
}
.fs-h1-ppp {
    font-size: calc(var(--font-size-h1) + 12px);
}
.fs-h1-{
    font-size: calc(var(--font-size-h1) - 2px);
}
.fs-h2-{
    font-size: calc(var(--font-size-h2) - 2px);
}
.fs-h3-{
    font-size: calc(var(--font-size-h3) - 2px);
}
.fs-h4-{
    font-size: calc(var(--font-size-h4) - 2px);
}
h1,h2,h3,h4,h5{
    margin: 0;
}
img{
    width: 100%;
}
ol, ul {
    margin:16px;
    margin-left: 32px;
    padding: 0;
}
li+li{
    margin-top: 0.5em;
}

dd{
    margin-left: 0.5em;
}
input{
    padding:5px;
    font-size: 18px;
    border: none;
    border-bottom: 1px solid var(--color-primary);
}
input:focus {
    border: none;
    outline: none;
    text-align: center;
    border-bottom: 1px solid var(--color-primary);
}
label{
    font-size: 18px;
    border-bottom: 1px solid var(--color-reverse);
}
/*.button{*/
/*    border:none;*/
/*    outline: none;*/
/*    margin:0 auto;*/
/*    background-color: var(--color-primary);*/
/*    width: 100%;*/
/*    border-radius: 20px;*/
/*    padding-top:16px;*/
/*    padding-bottom:16px;*/
/*    opacity: 1;*/
/*    font-size: 18px;*/
/*    font-weight: bold;*/
/*    color: var(--color-reverse);*/
/*}*/
/*.button:active {*/
/*    opacity: 0.8;*/
/*}*/
/*.button-b:active {*/
/*    border: none;*/
/*}*/

.dn{
    display: none;
}

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-inline {
    display: flex;
    align-items: center;
}

.flex-auto {
    flex: 1;
}
.p-f{
    position: fixed;
}
.t-0{
    top: 0;
}
.b-0{
    bottom: 0;
}
.l-0{
    left: 0;
}
.r-0{
    right: 0;
}
.w,.w-100p {
    width: 100%;
}
.h,.h-100p {
    height: 100%;
}
.wh,.wh-100p{
    width: 100%;
    height: 100%;
}
.w-30p{
    width: 30%;
}

.wm-vr {
    writing-mode: vertical-rl;
}

.c-green {
    color: green;
}

.c-red {
    color: #dd2222 !important;
}

.c-white {
    color: white;
}
.c-primary {
    color: var(--color-primary);
}

.bc-green {
    background-color: green;
}

.bc-red {
    background-color: #dd2222;
}

.bc-white {
    background-color: white;
}

.bc-black {
    background-color: black;
}

.bc-ccc {
    background-color: #CCCCCC;
}

.bc-333 {
    background-color: #333333;
}
.bc-444 {
    background-color: #444444;
}
.bc-555 {
    background-color: #555555;
}

.bc-primary {
    background-color: var(--color-primary);
}

.bc-desc {
    background-color: var(--color-desc);
}

.br-5 {
    border-radius: 5px;
}
.br-10 {
    border-radius: 10px;
}
.br-15 {
    border-radius: 15px;
}

.bs-gray {
    box-shadow: 0 0 10px -2px var(--color-reverse);
}

.ts-gray{
    text-shadow: 2px 2px 2px grey;
}
.ts-black{
    text-shadow: 0 0 15px #000000;
}

.fs-i{
    font-style:  italic;
}

.fw-b {
    font-weight: bold !important;
}

.fw-n {
    font-weight: normal !important;
}

.m {
    margin: var(--gap-default)!important;
}

.mlr {
    margin-left: var(--gap-default);
    margin-right: var(--gap-default);
}

.mlr-10 {
    margin-left: 10px!important;;
    margin-right: 10px!important;;
}

.mlr-20 {
    margin-left: 20px!important;;
    margin-right: 20px!important;;
}

.mlr-30 {
    margin-left: 30px!important;;
    margin-right:30px!important;;
}

.mlr-40 {
    margin-left: 40px!important;;
    margin-right: 40px!important;;
}

.mlr-50 {
    margin-left: 50px!important;;
    margin-right: 50px!important;;
}

.mtb {
    margin-top: var(--gap-default)!important;;
    margin-bottom: var(--gap-default)!important;;
}

.mtb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mtb-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mtb-50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mr {
    margin-right: var(--gap-default);
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.ml {
    margin-left: var(--gap-default);
}

.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-30 {
    margin-left:30px;
}
.ml-40 {
    margin-left: 40px;
}
.ml-50 {
    margin-left: 50px;
}

.mt {
    margin-top: var(--gap-default)!important;;
}

.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}

.mb {
    margin-bottom: var(--gap-default);
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}

.p {
    padding: var(--gap-default);
}
.p-30 {
    padding: 30px;
}

.plr {
    padding-left: var(--gap-default);
    padding-right: var(--gap-default);
}

.plr-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.plr-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.plr-30 {
    padding-left: 30px;
    padding-right: 30px;
}
.plr-40 {
    padding-left: 40px;
    padding-right: 40px;
}
.plr-50 {
    padding-left: 50px;
    padding-right: 50px;
}

.ptb {
    padding-top:var(--gap-default);
    padding-bottom: var(--gap-default);
}

.ptb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ptb-20 {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}
.ptb-30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}
.ptb-40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}
.ptb-50 {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.pt {
    padding-top: var(--gap-default);
}

.pt-5{
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pb {
    padding-bottom: var(--gap-default);
}

.pb-3 {
    padding-bottom: 3px;
}
.pb-5 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pl {
    padding-left: var(--gap-default);
}

.pl-10 {
    padding-left: 10px;
}

.pl-20 {
    padding-left: 20px;
}

.pr {
    padding-right: var(--gap-default);
}

.pr-10 {
    padding-right: 10px;
}

.pr-20 {
    padding-right: 20px;
}

.b {
    border: 1px solid var(--color-primary) !important;
}
.b-reverse-2 {
    border: 2px solid var(--color-reverse) !important;
}

.bt {
    border-top: 1px solid var(--color-primary) !important;
}

.bb {
    border-bottom: 1px solid var(--color-primary) !important;
}

.bb-3 {
    border-bottom: 3px solid var(--color-primary) !important;
}

.bl {
    border-bottom: 1px solid var(--color-primary) !important;
}
.br {
    border-bottom: 1px solid var(--color-primary) !important;
}


.d-i {
    display: inline;
}

.d-ib {
    display: inline-block;
}
.ai-c {
    align-items: center;
}

.ai-fe {
    align-items: flex-end;
}

.ai-b {
    align-items: baseline;
}

.jc-c {
    justify-content: center;
}

.jc-fe {
    justify-content: flex-end;
}

.ta-l {
    text-align: left;
}

.ta-r {
    text-align: right;
}

.ta-c {
    text-align: center;
}

.c-desc {
    color: #555555;
}

.c-333 {
    color: #333333;
}

.c-black {
    color: black;
}

.c-green {
    color: green;
}

.c-red {
    color: red;
}

#progress-bar {
    width: 100%;
    height: 30px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

#progress {
    height: 100%;
    width: 0%;
    background-color: #0563bb;
    border-radius: 5px;
    transition: width 0.1s;
}

#progress-bar:active #progress {
    width: 100%;
    transition: width 5s;
}



@keyframes switch {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
p > strong {
    margin-right: 5px;
    font-size: 1.3em;
}
.fix-button {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    background: #e44719 !important;
    border: none !important;
    color: #ffffff;
    font-size: 18px;
    padding: 20px;
    border-radius: 5px;
    animation: switch 1.5s ease-out infinite;
}