/*Fonts*/

@font-face {
    font-family: 'AmplitudeWide-Light';
    src: url(../fonts/AmplitudeWide-Light.eot);
    src: url(../fonts/AmplitudeWide-Light.ttf) format('truetype'), url(../fonts/AmplitudeWide-Light.woff) format('woff'), url(../fonts/AmplitudeWide-Light.woff2) format('woff2');
}

@font-face {
    font-family: 'AmplitudeWide-Regular';
    src: url(../fonts/AmplitudeWide-Regular.eot);
    src: url(../fonts/AmplitudeWide-Regular.ttf) format('truetype'), url(../fonts/AmplitudeWide-Regular.woff) format('woff'), url(../fonts/AmplitudeWide-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot);
    src: url(../fonts/MaterialIcons-Regular.ttf) format('truetype'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2');
}

/*Document Style*/
* {
    box-sizing: border-box;
    font-family: AmplitudeWide-Light, "sans-serif";
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #F7F6F5;
    display: grid;
    grid-template-rows: 72px 1fr auto;
    height: 100vh;
}

/*Header Style*/
header {
    max-height: 72px;
    background-color: #FFFFFF;
    padding: 20px 48px 16px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

header img {
    height: 32px;
}

/*Shadow Box Style*/
.box {
    min-width: 480px;
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
}

.box-content {
    background: #FFFFFF;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    padding: 40px 56px 80px;
    background-image: url("../images/box-footer.svg");
    background-position: bottom;
    background-repeat: no-repeat;
}

.box-footer {
    text-align: center;
    padding: 48px 0 24px;
}

.box-footer p {
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 14px;
    letter-spacing: -0.2px;
    line-height: 20px;
    margin: 0;
}

.box h1 {
    font-size: 20px;
    letter-spacing: -0.2px;
    line-height: 28px;
    margin: 0 0 18px 0;
    text-align: center;
}

.box h1 strong {
    display: block;
    font-size: 36px;
    letter-spacing: -0.5px;
    line-height: 48px;
}

.box h2 {
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    font-weight: 300;
}

.box .divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #DFDEE2;
    margin: 0 0 32px 0;
    position: relative;
}

.box .divider[data-text]:before {
    content: attr(data-text);
    position: absolute;
    top: -9px;
    left: 50%;
    background: #fff;
    width: 60px;
    text-align: center;
    margin-left: -30px;
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 14px;
    letter-spacing: -0.2px;
    line-height: 20px;
}

.box-content p {
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    margin-bottom: 0;
    text-align: center;
}

.form-group-icon {
    position: relative;
}

.form-group-icon label {
    color: #828190;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    position: absolute;
    top: 16px;
    left: 16px;
    transition: all .3s linear;
}

.form-group-icon.focus label {
    font-size: 12px;
    line-height: 14px;
    top: 8px;
    transition: all .3s linear;
}

.form-group-icon.error label {
    color: #DB5537;
}

.input-error-message {
    color: #BA482E;
    font-family: AmplitudeWide-Light;
    font-size: 12px;
    letter-spacing: -0.2px;
    line-height: 14px;
    margin: 8px 16px 16px;
    display: block;
}

.form-control {
    border: 1px solid #D7D2CB;
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    padding: 24px 48px 8px 16px;
    width: 100%;
    position: relative;
    background: transparent;
}

.form-group-icon .btn-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 100%;
    background-image: url("../images/icons/arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.form-group-icon .btn-icon[disabled] {
    background-image: url("../images/icons/arrow-disable.svg");
}

.form-group-icon.success .btn-icon {
    background-image: url("../images/icons/check.svg");
}


.form-group-icon.error .btn-icon {
    background-image: url("../images/icons/error.svg");
}

/*Button Style*/

button[disabled] {
    cursor: not-allowed;
}

.btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.btn-primary-color {
    background: #3171AD;
}

.btn-secondary-color {
    background: #316CF4;
}

.btn-round {
    text-transform: uppercase;
    border-radius: 28px;
    font-family: AmplitudeWide-Regular;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 24px;
    padding: 16px;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-round img {
    margin-right: 16px;
}

.btn-disable {
    background-color: #E8E1D9;
    color: #C0BFC7;
    cursor: not-allowed;
}

.btn-disable img {
    opacity: .3;
}

.btn-active {
    color: #fff;
    cursor: pointer;
}

.btn-link {
    text-decoration: underline;
    color: #6B63A1;
    font-family: AmplitudeWide-Regular;
    font-size: 14px;
    letter-spacing: -0.2px;
    line-height: 20px;
}

.btn-text {
    color: #6B63A1;
    font-family: AmplitudeWide-Regular;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
}

.btn-outline {
    background: transparent;
    border: 1px solid #D7D2CB;
    color: #6B63A1;
}

.popup-btn {
    display: inline-block;
    position: relative;
    top: 3px;
    cursor: pointer;
    padding: 0 2px;
    width: 20px;
    height: 20px;
}

. popup-btn svg {
    width: 16px;
    height: 16px;
}
/*Section Wrapper Style*/
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    margin: 80px auto 0;
    max-width: 992px;
    grid-gap: 125px;
}

.info p.info-title {
    font-family: AmplitudeWide-Regular;
    font-size: 20px;
    line-height: 28px;
    margin-top: 32px;
    margin-bottom: 32px;
}

.info p {
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    margin-bottom: 24px;
}

.info p strong {
    display: block;
    font-family: AmplitudeWide-Regular;
    font-weight: 400;
}


/*Footer style*/
footer {
    padding: 29px 48px 21px 48px;
    background-color: #2F2D46;
    color: #C0BFC7;
}

.copy {
    font-family: sans-serif;
}

footer h2 {
    font-size: 20px;
    color: #fff;
    margin: 0 0 8px 0;
    font-family: "AmplitudeWide-Regular";
    font-weight: 400;
}

footer p {
    font-size: 12px;
    margin: 0;
    line-height: 16px;
}

.footer-links {
    border-bottom: 1px solid #58576B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 12px 0;
    padding: 0 0 18px 0;
}

.footer-links .footer-logo {
    width: 170px;
    height: 40px;
}

.footer-links p {

    overflow: hidden;
}

.footer-links a {
    float: left;
    list-style: none;
    margin-right: 24px;
    display: flex;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus {
    outline: none;
    text-decoration: none;
}

.footer-links img {
    display: inline-block;
    margin-right: 8px;
    width: 16px;
}

/*Popup Style*/
.popup-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(47, 45, 70, 0.5);
    z-index: 9999;
}

.popup-area {
    background: #fff;
    padding: 24px;
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    width: 550px;
    margin: 10% auto;
}

.popup-content h4 {
    color: #2F2D46;
    font-family: AmplitudeWide-Regular;
    font-size: 24px;
    letter-spacing: -0.2px;
    line-height: 32px;
    font-weight: 400;
    margin: 0 0 16px 0;
}

.popup-content ol {
    margin: 0 0 24px 0;
    list-style: disc;
}

.popup-content p {
    margin: 0;
}

.popup-footer {
    text-align: right;
    margin-top: 24px;
}

.popup-footer .btn {
    height: 32px;
    width: 58px;
}


/*signin specific Style*/
.signin-block .wrapper {
    grid-template-columns: 1fr;
}

.signin-block .box-content p {
    text-align: center;
}

.signin-block .btn-round {
    margin-bottom: 16px;
}

.signin-block .btn-outline {
    margin-bottom: 40px;
    text-decoration: none;
}

.signin-block .box {
    margin-bottom: 160px;
}


/*Error Style*/

.error-block .wrapper {
    grid-template-columns: 1fr;
    max-width: 100%;
    justify-items: flex-start;
    margin: 56px 120px 0;

}

.error-box {
    width: 100%;
    position: relative;
}

.error-box h1 {
    color: #2F2D46;
    font-family: AmplitudeWide-Regular;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 20px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 400;
}

.error-box h2 {
    color: #2F2D46;
    font-family: AmplitudeWide-Regular;
    font-size: 36px;
    letter-spacing: -0.5px;
    line-height: 48px;
    margin: 8px 0 24px 0;
    font-weight: 400;
}

.error-box ol {
    list-style: none;
    margin: 24px 0 48px 0;
    padding: 0;
}

.error-box ol li {
    margin-bottom: 16px;
}

.error-box ol li a, .error-box p a {
    color: #6B63A1;
    font-family: AmplitudeWide-Regular;
    font-size: 16px;
    letter-spacing: 0.2px;
    line-height: 24px;
    text-decoration: none;
}

.error-box ol li a img {
    width: 20px;
    position: relative;
    top: 4px;
}

.error-box ol li a span , .error-box p a span{
    text-decoration: underline;
    display: inline-block;
    margin-left: 8px;
}

.error-box p a span {
    margin-left:0;
}

.error-box p {
    color: #2F2D46;
    font-family: AmplitudeWide-Light;
    font-size: 16px;
    letter-spacing: -0.2px;
    line-height: 24px;
    z-index: -1;
}

.error-box p.error-image {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    margin:0;
    line-height: 0;
}

.error-image img {
    display: inline-block;
}

.error-box .btn-text {
    text-decoration: none;
    display: flex;
}

.error-box .btn-text img {
    margin-right: 8px;
}


/* Media Queries */
@media only screen and (max-width: 992px) {
    .box {
        width: 100%;
        min-width: 100%;
    }

    .wrapper,
    .error-block .wrapper{
        grid-template-columns: 1fr;
        grid-gap: 48px;
        margin: 16px;
    }

    header, footer {
        padding-left: 16px;
        padding-right: 16px;
    }

}

@media only screen and (max-width: 600px) {

    footer {
        height: auto;
    }

    .error-image {
        display: none;
    }

    .error-block .wrapper {
        margin-bottom: 48px;
    }

    .popup-area {
        width: auto;
        margin: 48px 16px;
    }
}

@media only screen and (max-width: 768px) {
    .footer-links {
        display: block;
    }

    .footer-links .footer-logo {
        margin-top: 15px;
    }

    footer a {
        margin: 10px 0;
    }
}

@media only screen and (max-height: 800px) {
    .error-image {
        display: none;
    }
}