html, body {
    background:                         #E6E6E6;
    animation-name:                     in_back;
    animation-duration:                 .2s;
}



#app {
    height:                             100vh;
    display:                            grid;
    grid-template-columns:              1fr auto 1fr;
    grid-template-rows:                 1fr;
    grid-template-areas:                "left form ."
}



#left {
    grid-area:                          left;
    z-index:                            10;
}

#left .wrap {
    position:                           fixed;
    display:                            flex;
    align-items:                        center;
    height:                             80px;
}

#left #button-menu:hover,
#left #button-back:hover {
    background:                         #D9D9D9;
}



#form {
    grid-area:                          form;
    width:                              788px;
    margin-top:                         40px;
    margin-bottom:                      96px;
    padding:                            96px 130px;
    background:                         white;
    animation-name:                     in_form;
    animation-duration:                 .5s;
    animation-delay:                    .2s;
    animation-fill-mode:                forwards;
    opacity:                            0;
}



.block-form .title {
    padding-bottom:                     8px;
}

.block-form .field {
    margin:                             32px 0 0 16px;
}

.field {
    display:                            flex;
}

.field.file {
    align-items:                        center;
}

.field .name,
.field .note {
    display:                            flex;
    align-items:                        center;
    height:                             40px;
    color:                              #666666;
}

.field .name {
    width:                              200px;
}

.field .note {
    justify-content:                    center;
}

.field .box-input,
.field .box-select,
.field .box-clear {
    width:                              312px;
}

.block-form .width-third {
    width:                              104px;
}





#buttons {
    display:                            flex;
    margin-top:                         88px;
}

#button-submit {
    margin:                             0 8px 0 auto;
}





.seperator {
    height:                             88px;
}

.seperator.small {
    height:                             64px;
}

.seperator.large {
    height:                             104px;
}





.block-note {
    display:                            flex;
    width:                              528px;
    height:                             172px;
    padding:                            0 32px;
    line-height:                        24px;
    text-align:                         center;
    align-items:                        center;
    justify-content:                    center;
    color:                              #666666;
    background:                         #F8F8F8;
}

.block-note.error {
    height:                             88px;
    padding-top:                        2px;
    color:                              #FF0000;
    background:                         #FF000026;
}





.agreements {
    margin-top:                         32px;
}

.agreements .wrap {
    width:                              788px;
    overflow-x:                         hidden;
    margin-left:                        -130px;
    padding-left:                       130px;
}

.agreement.disabled {
    display:                            none;
}

.agreement.disabled:hover {
    background:                         #F8F8F8;
}

.agreement .selector {
    width:                              32px;
    height:                             32px;
    margin-left:                        auto;
    padding:                            6px;
    border-radius:                      16px;
    background:                         #E6E6E6;
}

.agreements .buttons {
    position:                           absolute;
    display:                            flex;
    width:                              642px;
    padding:                            70px 48px 0 0;
    z-index:                            10;
    pointer-events:                     none;
}

.agreements .buttons .button {
    width:                              32px;
    height:                             32px;
    border-radius:                      16px;
    margin-left:                        24px;
    padding:                            8px;
    background:                         #E6E6E6;
    display:                            none;
    pointer-events:                     all;
}

.agreements .buttons .button:hover {
    background:                         #EBEBEB;
}

.agreements .buttons .button.solo {
    background:                         #FFDD34;
}

.agreements .buttons .button.solo:hover {
    background:                         #FFE45B;
}

.agreements .buttons .button-next.solo,
.agreements .buttons .button-previous {
    margin-left:                        auto;
}





.subjects {
    margin-top:                         32px;
}

.duration {
    display:                            flex;
    align-items:                        center;
    height:                             inherit;
}

.duration .dots {
    display:                            flex;
    padding-left:                       4px;
}

.duration .dot div {
    width:                              12px;
    height:                             12px;
    margin:                             10px 16px 10px 4px;
    border-radius:                      6px;
    background:                         #F0F0F0;
}

.duration .dot.narrow div {
    margin:                             10px 4px 10px 8px;
}

.duration .dot.very-narrow div {
    margin:                             10px 4px 10px 4px;
}

.duration .dot.active div{
    background:                         #FFDD34;
}

.duration .time {
    margin-left:                        auto;
    font-weight:                        600;
}





.switch {
    display:                            flex;
    align-items:                        center;
    width:                              200px;
}

.switch .button {
    margin-right:                       8px;
}

.switch .button.last {
    margin-right:                       0;
}

.switch .button.selected {
    background:                         #FFDD34;
}




#note-trial {
    margin-top:                         32px;
    padding:                            0 40px;
    text-align:                         left;
}





#agreements-wrap .title {
    padding:                            8px 0;
}

#agreements-wrap .remove {
    width:                              32px;
    height:                             32px;
    padding:                            6px;
    margin-right:                       6px;
    margin-left:                        auto;
    border-radius:                      16px;
    background:                         transparent;
    cursor:                             pointer;
    user-select:                        none;
}

#agreements-wrap .remove:hover {
    background:                         #F0F0F0;
}





@keyframes in_form {
    from { opacity: 0; transform: translateY(40px) }
    to   { opacity: 1; }
}

@-moz-keyframes in_form {
    from { opacity: 0; transform: translateY(40px) }
    to   { opacity: 1; }
}

@-webkit-keyframes in_form {
    from { opacity: 0; transform: translateY(40px) }
    to   { opacity: 1; }
}

@-ms-keyframes in_form {
    from { opacity: 0; transform: translateY(40px) }
    to   { opacity: 1; }
}





@keyframes in_back {
    from { background: white; }
    to   { background: #E6E6E6; }
}

@-moz-keyframes in_back {
    from { background: white; }
    to   { background: #E6E6E6; }
}

@-webkit-keyframes in_back {
    from { background: white; }
    to   { background: #E6E6E6; }
}

@-ms-keyframes in_back {
    from { background: white; }
    to   { background: #E6E6E6; }
}





@media (max-width: 840px) {

    #app {
        width: 100vw;
        overflow-x: hidden;
        display: block;
        padding: 0 12px 16px;
    }



    #left {
        position: fixed;
    }

    #left .wrap {
        height: 80px;
    }

    #left .title.page {
        font-size: 22px;
        letter-spacing: -.5px;
        padding-bottom: 1px;
    }

    #left .back {
        width: 24px;
        height: 24px;
        margin: 0 12px 0 4px;
        padding: 0;
    }



    #form {
        width: 100%;
        padding: 40px 32px;
        overflow-x: hidden;
        margin: 80px 0 0;
    }

    #form .field {
        margin: 32px 0 0;
    }

    #form .field .name {
        width: fit-content;
        margin-right: auto;
    }

    #form .box-input,
    #form .box-select {
        width: 192px;
    }

    #form .block-form .width-third {
        width: 64px;
    }

    #form .block-note {
        width: 100%;
    }



    .agreements {
        margin-top: 0;
    }

    .agreements .wrap {
        width:                          100%;
        margin-left:                    0;
        padding-left:                   0;
    }

    .agreements .buttons {
        width:                          100%;
        height:                         48px;
        position:                       unset;
        padding:                        0 0 16px 0;
    }



    .duration .dots {
        margin-left: auto;
    }

    .duration .time {
        margin-left: 0;
    }
}