/* lato-regular - latin */
@font-face {
    font-family: 'Lato-Regular';
    font-style:  normal;
    font-weight: 400;
    src:         local('Lato Regular'), local('Lato-Regular'),
                 url('lato-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('lato-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-900 - latin */
@font-face {
    font-family: 'Lato-Bold';
    font-style:  normal;
    font-weight: 900;
    src:         local('Lato Black'), local('Lato-Black'),
                 url('lato-v14-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('lato-v14-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.sandbox {
    background-color:      #f6f7f7;
    border-radius:         8px;
    -moz-border-radius:    8px;
    -webkit-border-radius: 8px;
    padding:               12px;
    padding-bottom:        7px;
    box-sizing:            border-box;
    -moz-box-sizing:       border-box;
    -webkit-box-sizing:    border-box;
    /*box-shadow:            0px 3px 16px 0px #000000, 0px 8px 12px 0px #000000, 0px 4px 8px 0px #000000;
    -moz-box-shadow:       0px 3px 16px 0px #000000, 0px 8px 12px 0px #000000, 0px 4px 8px 0px #000000;
    -webkit-box-shadow:    0px 3px 16px 0px #000000, 0px 8px 12px 0px #000000, 0px 4px 8px 0px #000000;*/
}

.sandbox h1 {
    font-size:      20px;
    text-align:     center;
    display:        block;
    color:          #000 !important;
    letter-spacing: 0.04em;
    line-height:    32px;
    font-family:    "Lato-Bold", Arial, sans-serif;
    margin:         0;
    padding:        0 0 1px 0;
    text-transform: lowercase;
}

.sandbox p {
    font-family:    "Lato-Regular", Arial, sans-serif;
    font-size:      16px;
    display:        block;
    letter-spacing: -0.01em;
    line-height:    24px;
    padding:        0;
    margin:         0;
}

.sandbox .sandbox_hidden {
    display: none;
}

.sandbox_input {
    height:     100%;
    min-height: 100%;
}

.sandbox .sandbox_input_wrapper {
    display:               block;
    width:                 100%;
    border:                1px solid #b1b9c4;
    border-radius:         4px;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    padding:               10px;
    box-sizing:            border-box;
    -moz-box-sizing:       border-box;
    -webkit-box-sizing:    border-box;
    background-color:      #fff;
    position:              relative;
    height:                56px;
    overflow:              hidden;
}

.sandbox .sandbox_input_wrapper.focus {
    border-color: #2f7ed9 !important;
}

.sandbox .sandbox_input_wrapper:hover {
    border-color: #79808a;
}

.sandbox .sandbox_input_wrapper.sandbox_error {
    border-color: #F75C57;
}

.sandbox .sandbox_error p,
.sandbox .sandbox_error label {
    color: #ed1c1c !important;
}

.sandbox .sandbox_input_wrapper.active label,
.sandbox .sandbox_input_wrapper.focus label {
    font-family: "Lato-Regular", Arial, sans-serif;
    font-size:   10px;
    top:         3px;
}

.sandbox .sandbox_input_wrapper.focus label {
    color: #2c75db;
}

.sandbox .sandbox_input_wrapper.active label {
    color: #9fa7b3;
}

.sandbox .sandbox_input_wrapper label {
    font-family:    "Lato-Regular", Arial, sans-serif;
    font-size:      20px;
    line-height:    16px;
    letter-spacing: -0.01em;
    color:          #9fa7b3;
    text-align:     left;
    position:       absolute;
    left:           11px;
    top:            17px;
    z-index:        100;
    transition:     all linear 200ms;
}

.sandbox .sandbox_input_wrapper input {
    font-size:      20px !important;
    line-height:    20px;
    letter-spacing: -0.01em;
    background:     transparent;
    font-family:    'Lato-Regular', Arial, sans-serif;
    color:          #323538;
    position:       absolute;
    left:           0;
    top:            0;
    right:          0;
    bottom:         0;
    width:          100%;
    height:         100%;
    border:         0;
    padding-top:    15px;
    padding-left:   11px;
    padding-right:  35px;
}

.sandbox .sandbox_btn {
    background-color:      #ef7404;
    color:                 #fff !important;
    text-transform:        uppercase;
    font-size:             16px;
    line-height:           46px;
    text-align:            center;
    padding:               0;
    width:                 100%;
    border-radius:         8px;
    -moz-border-radius:    8px;
    -webkit-border-radius: 8px;
    border:                3px solid #ef7404;
    margin-top:            4px;
}

.sandbox .sandbox_btn:hover {
    background: transparent;
    color:      #ef7404 !important;
}


.sandbox label {
    font-family: "Lato-Regular", Arial, sans-serif;
    font-size:   12px;
    color:       #393d42;
}

.sandbox .sandbox_inner .sandbox_row:nth-child(8) {
    line-height: 22px;
}

.sandbox_center label,
.sandbox_center p,
.sandbox_center {
    text-align: center !important;
}

.sandbox_row {
    display: flex;
}

.sandbox_col {
    line-height: 16px;
}

.sandbox_col-12 {
    flex: 1 0 100%;
}

.sandbox-extra-margin {
    margin-bottom: 13px;
}

.sandbox .sandbox_inner .sandbox_row:nth-child(3),
.sandbox .sandbox_inner .sandbox_row:nth-child(4),
.sandbox .sandbox_inner .sandbox_row:nth-child(5),
.sandbox .sandbox_inner .sandbox_row:nth-child(7) {
    margin-bottom: 12px !important;
}

.sandbox_inner {
    overflow: hidden;
    padding:  5px;
}

.sandbox_row.sandbox_error,
.sandbox_success {
    height: 100%;
}

.sandbox_error .sandbox_col-12,
.sandbox_success .sandbox_col-12 {
    align-self: center;
}

#privacy {
    margin-left:  14px;
    margin-top:   8px;
    margin-right: 13px;
    width:        16px;
    height:       16px;
}

.sandbox_input_wrapper.focus .sandbox_input_clear {
    opacity:    1;
    visibility: visible;
}

.sandbox_input_clear {
    content:          '';
    background-image: url('remove.svg');
    width:            24px;
    height:           24px;
    position:         absolute;
    right:            11px;
    top:              15px;
    opacity:          0;
    transition:       all linear 200ms;
    cursor:           pointer;
    visibility:       hidden;
}

.sandbox .error-message.active {
    visibility: visible;
    opacity:    1;
    width:      150px;
    height:     auto;
}

.sandbox .error-message {
    transition:            opacity linear 200ms, visibility linear 200ms;
    visibility:            hidden;
    opacity:               0;
    width:                 150px;
    position:              absolute;
    font-size:             12px;
    line-height:           16px;
    padding:               13px;
    color:                 #fff;
    font-family:           "Lato-Regular", Arial, sans-serif;
    background-color:      #282a2e;
    z-index:               110;
    border-radius:         2px;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    margin-left:           7px;
}

.sandbox .error-message:before {
    position:     absolute;
    left:         -6px;
    top:          21px;
    content:      '';
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 7px 6px 7px 0;
    border-color: transparent #282a2e transparent transparent;
}

.sandbox_input_wrapper.sandbox_error + .error-message:before {
    display: none;
}

.sandbox_input_wrapper.sandbox_error + .error-message {
    display: none;
}

.sandbox_input_wrapper.sandbox_error.focus + .error-message {
    display:    block;
    visibility: visible;
    opacity:    1;
}

.sandbox_input_wrapper.sandbox_error + .error-message {
    left:                  17px;
    width:                 320px;
    margin:                -3px 0 0;
    top:                   auto;
    border:                1px solid #ed1c1c;
    background-color:      #ffdfdf;
    border-radius:         0 0 4px 4px;
    -moz-border-radius:    0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    color:                 #393d42;
    box-sizing:            border-box;
    -webkit-box-sizing:    border-box;
    -moz-box-sizing:       border-box;
}

@media only all and (max-height: 730px) {
    .sandbox {
        margin-top: -80px !important;
    }

    .sandbox .sandbox_input_wrapper {
        height: 45px;
    }
}

@media only all and (max-height: 768px) and (min-height: 731px) {
    .sandbox {
        margin-top: -40px !important;
    }
}

@media only all and (max-width: 770px) {
    .sandbox {
        margin: 0 auto !important;
    }
}