body {
    /*padding-top:5rem;*/
    background-color: #F6F9FB;
    font-family: Lato, open sans;
    font-size: 100%;
    color: rgb(132, 146, 167);
}

textarea {
    resize: none;
}

footer {
    position: fixed;
    height: 80px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
}

.unselectable {
    user-select: none;
}


.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-height {
    height: 8% !important;
    min-height: 8% !important;
}

.navbar-spa-right {
    margin-right: 3%;
}


.nav-background {
    background-color: #fff;
}

.circle {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: rgb(240, 239, 240);
    display: inline-block;
    margin-left: 20px;
}

.spa-fixed-bottom {
    padding: 20px 0px;
}

.spa-bold {
    font-weight: bold;
}

.spa-text-color {
    color: #8492A7;
}

.spa-text-color-black {
    color: #556178;
}

.spa-hidden {
    display: none;
}

.spa-visible {
    display: normal;
}


.spacolor,
.spa-header,
#bntback,
a,
a:hover {
    color: rgb(91, 169, 223);
}

.spa-front-logo:hover {
    text-decoration: none;
}

.spa-header {
    font-size: 120%;
    padding-left: 3%;
    user-select: none;
}

.bnt-login {
    width: 100%;
    color: #fff;
    border-radius: 23px 23px;
    font-weight: bold;
}

    .bnt-login:hover {
        cursor: pointer;
    }

.bnt-uni-login {
    padding-left: 3em;
    padding-right: 3em;
    color: #fff;
    border-radius: 5em 5em;
    font-weight: bold;
}

    .bnt-uni-login:hover {
        cursor: pointer;
    }


.bnt-consent {
    color: #fff;
    border-radius: 23px 23px;
    font-weight: bold;
}

    .bnt-consent:hover {
        cursor: pointer;
    }


.bnt-unilogin {
    width: 100%;
    color: rgb(97, 164, 222);
    background-color: #fff;
    border: 1.5px solid rgb(91, 169, 223);
    border-radius: 23px 23px;
    font-weight: bold;
}

    .bnt-unilogin:hover {
        background-color: #ecf3fa;
    }

/*
.starter-template {
    padding: 3rem 1rem;
    text-align: center;
}
    */
.login-box {
    background-color: white;
    border: 1px solid #d7d7d7;
    padding: 0;
}

.login-box-padding {
    padding-left: 10%;
    padding-right: 10%;
}

.login-box-space {
    padding: 3% 0%
}

.login-box-text-space {
    padding: 2% 0%
}

.login-box-line {
    display: inline-block;
    float: right;
}

.login-box-line-40 {
    width: 40%;
}

.login-box-line-20 {
    width: 20%;
}

.login-box-gray {
    color: #d7d7d7;
}


.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d7d7d7;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    color: #d7d7d7;
}

.form-control:-ms-input-placeholder { /* IE 10+ */
    color: #d7d7d7;
}

.form-control:-moz-placeholder { /* Firefox 18- */
    color: #d7d7d7;
}

.login-header {
    font-size: 1.5rem;
    user-select: none;
}

.login-space {
    margin-top: 12px;
    border-top: 1px solid #d7d7d7
}

.login-space-text {
    color: #d7d7d7;
    user-select: none;
}

.info-box-padding-top {
    padding-top: 16vh;
}

.info-box-padding-top-13 {
    padding-top: 13vh;
}

.info-box {
    border-radius: 3px 3px;
    background-color: white;
    border: 1px solid #d7d7d7;
    text-align: left;
    color: #8492A7;
    padding: 0;
    margin: 0;
}

.info-box-action {
    border: none;
    background-color: white;
    border-top: 1px solid #d7d7d7;
    text-align: center;
    color: #919eb1;
    padding: 10px 0;
    margin: 0;
}

.info-box-action-padding-right {
    padding-right: 30px;
}

.info-box-action-bottoms {
    border: none;
    background-color: white;
    border-top: 1px solid #d7d7d7;
    text-align: center;
    color: #919eb1;
    padding: 10px 30px;
    margin-top: 10px;
    min-height: 60px;
}


.info-box-header {
    background-color: rgb(222, 238, 249);
    padding: 10px;
    padding-left: 5%;
    color: #536279;
    font-weight: bold;
    user-select: none;
}

    .info-box-header img {
        position: relative;
        float: right;
        vertical-align: bottom;
        bottom: 0;
    }

.info-box-container {
    display: table;
    width: 100%;
}

.info-box-row {
    display: table-row;
}

.info-box-cell {
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

    .info-box-cell p {
        text-align: left;
    }

.info-box-finish-padding-top {
    padding-top: 25vh;
    padding-top: calc(100vh - 75vh);
}


.vertical {
    vertical-align: middle;
}

.spa-vertical-bottom {
    vertical-align: bottom;
}

.spa-vertical-center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.info-box-body {
    background-color: #fff;
    padding: 5px 3%;
    padding-bottom: 0;
    color: #8490a5;
    font-weight: bold;
    user-select: none;
}

.info-box-margin-bottom {
    margin-bottom: 30px;
}

.bnt-spa,
.bnt-spa-white,
.bnt-spa-next,
.bnt-spa-login-box,
.bnt-spa-next-disabled {
    padding-left: 30px;
    padding-right: 30px;
    color: #fff;
    border-radius: 23px 23px;
    font-weight: bold;
}

.bnt-login, .bnt-uni-login, .bnt-spa, .bnt-spa-next {
    background-color: rgb(91, 169, 223);
}

    .bnt-login:hover, .bnt-uni-login:hover, .bnt-spa:hover, .bnt-spa-next:hover {
        background-color: rgb(73, 144, 194);
        color: #fff !important;
    }

/*.bnt-spa:hover {
        color: #fff !important;
        background-color: rgb(97, 164, 222) !important;
        border-color: rgb(97, 164, 222) !important;
    }*/

.bnt-spa-login-box {
    background-color: #fff !important;
    color: rgb(97, 164, 222) !important;
    border-width: 1.5px;
    border-color: rgb(97, 164, 222) !important;
}

    .bnt-spa-login-box:hover {
        cursor: pointer;
        background-color: rgb(97, 164, 222) !important;
        color: #fff !important;
    }


.bnt-spa-white {
    background-color: #fff !important;
    /*    color: rgb(97, 164, 222) !important;*/
    color: rgb(148, 204, 243) !important;
    border-width: 1.5px;
    border-color: rgb(97, 164, 222) !important;
}

    .bnt-spa-white:hover {
        cursor: pointer;
        background-color: #ecf3fa !important;
        color: rgb(97, 164, 222) !important;
        /*background-color: inherit !important;
        border-color: rgb(97, 164, 222) !important;*/
    }

.bnt-spa-green {
    background-color: #8acc85;
    color: rgb(148, 204, 243) !important;
}

    .bnt-spa-green:hover {
        cursor: pointer;
        background-color: #8acc85 !important;
        color: #fff !important;
    }

.bnt-spa-red {
    background-color: #e85970;
    color: rgb(148, 204, 243) !important;
}

    .bnt-spa-red:hover {
        cursor: pointer;
        background-color: #e85970 !important;
        color: #fff !important;
    }



.bnt-spa-next {
    color: #fff !important;
    border-width: 1.5px;
    border-color: #ebf3f9 !important;
}

    .bnt-spa-next:hover {
        cursor: pointer;
    }

.bnt-spa-next-disabled {
    background-color: #ebf3f9 !important;
    color: rgb(200, 222, 239) !important;
    border-width: 1.5px;
    cursor: default;
    background-color: #ecf3fa !important;
    border-color: #ecf3fa !important;
}

.sound {
    margin-left: 10px;
}

    .sound:hover {
        cursor: pointer;
    }


.start-girl {
    width: 40%;
}

.practice-color {
    color: #EB586F;
    font-weight: bold;
}

.pt-reduced {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.right-color {
    color: #74B46F;
    font-weight: bold;
}

.no-touch.img {
    border-radius: 3px 3px;
    border-color: transparent;
    border-width: 3px;
    border-style: solid;
}

    .no-touch.img:hover {
        border-radius: 3px 3px;
        border-color: rgb(148, 204, 243);
        border-width: 3px;
        border-style: solid;
        cursor: pointer;
    }



.optionselected {
    border-radius: 3px 3px;
    border-color: rgb(148, 204, 243);
    border-width: 3px;
    border-style: solid;
}

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


.two-option-wrapper {
    display: flex;
    justify-content: center;
}


.two-option-circle {
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    /*display: table-cell;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;*/
    background-color: #d0d0d0;
    color: #fff;
    font-weight: normal !important;
}


    .two-option-circle.yes {
        /*background-color: #B8E78A !important;*/
        background-color: rgb(91, 169, 223) !important;
    }

    .two-option-circle.no {
        /*background-color: #FF999A !important;*/
        background-color: rgb(91, 169, 223) !important;
    }

#yes:hover {
    /*background-color: #B8E78A !important;*/
    background-color: rgb(91, 169, 223) !important;
}

#no:hover {
    /*background-color: #FF999A !important;*/
    background-color: rgb(91, 169, 223) !important;
}

.two-option-circle-padding-bottom {
    padding-bottom: 20px;
}

/*#bntback:hover {
    cursor:pointer;
}*/
@media screen and (max-width: 799px) {
    .spa-header {
        font-size: 100%;
    }

    .login-header {
        font-size: 1.1rem;
    }
    .bnt-login{
        font-size:80%;
    }
}


@media screen and (max-width: 1024px) and (min-width:800px) {
    .spa-header {
        font-size: 110%;
    }

    .login-header {
        font-size: 1.2rem;
    }
    .bnt-login {
        font-size: 90%;
    }
}

@media screen and (max-width: 1200px) and (min-width:1024px) {
    .spa-header {
        font-size: 110%;
    }

    .login-header {
        font-size: 1.2rem;
    }
}

.modal-title {
    font-size: 100%;
}

.modal-dialog-centered {
    height: calc(100% - (.5rem * 2))
}

@media (min-width:576px) {
    .modal-dialog-centered {
        height: calc(100% - (1.75rem * 2))
    }
}

.popover .close {
    position: absolute;
    top: 5px;
    right: 10px;
    outline: none;
}

.dpf-address {
    display: inline-block;
    font-size: 10px;
}