/* todo @import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap') */

html, body, #content-wrapper, #content {
    height: 100%
}

.mfooter-in, .rheader-in {
    max-width: none
}

@media ( min-width :980px) {
    #content-wrapper {
        display: flex
    }
}

@media ( min-width :980px) {
    .cookie-present #content {
        min-height: calc(100vh - 152px)
    }
}

#content {
    text-align: center;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #000
}

@media ( min-width :980px) {
    #content {
        min-height: calc(100vh - 88px);
        display: flex;
        width: 100%
    }
    #content>* {
        width: 50%
    }
}

.container {
    width: 700px;
    margin: auto;
    padding: 0 15px;
    box-sizing: border-box;
    max-width: 100%
}

#form-section {    
    color: #fff;
    font-size: 18px;
    background-size: 776px 589px;
    background-position: calc(50% + 32px) bottom;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 43px;
    padding-bottom: 352px
}

@media ( min-width :980px) {
    #form-section {
        padding-top: 103px;
        display: flex
    }
}

#form-section .container {
    margin-left: auto;
    position: relative;
    z-index: 1;
    -ms-grid-row-align: center;
    align-self: center
}

@media ( min-width :980px) {
    #form-section .container {
        padding-left: 74px
    }
}

@media ( min-height :1200px) and (min-width:980px) {
    #form-section .container {
        position: relative;
        top: 73px
    }
}

#form-section #gr-logo {
    width: 181px
}

#form-section .main-errors {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center
}

#form-section .main-errors li {
    color: red;
    display: inline-block
}

@media ( min-width :980px) {
    #form-section .main-errors {
        position: absolute;
        top: -50px;
        right: 15px;
        left: 74px
    }
}

#form-section h1 {
    font-size: 26px;
    font-weight: 400;
    margin-top: 1.26em
}

#form-section form {
    width: 495px;
    max-width: 100%;
    margin: 37px auto auto
}

#form-section form .has-success .php-error, #form-section form>button:disabled+.form-fieldset .php-error
{
    display: none
}

#form-section form p {
    font-size: 12px;
    color: #7990a1;
    font-weight: 400;
    line-height: 1.47;
    margin: 1.4em 2.4em
}

#form-section form p a {
    color: inherit
}

#form-section .form-group:not (.recaptcha ){
    position: relative;
    width: 381px;
    max-width: 100%;
    margin: 0 auto;
    -ms-grid-row-align: start;
    align-self: start;
    min-height: 90px
}

#form-section .form-control {
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .03);
    padding-left: 1.2em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

#form-section .form-control+label {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #000;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: start;
    justify-self: start;
    letter-spacing: normal;
    padding-left: 1em;
    transform-origin: 10px top;
    transition: transform .1s linear;
    position: absolute;
    top: 14px;
    left: 0;
    pointer-events: none
}

#form-section .form-control.not-empty+label, #form-section .form-control:focus+label
{
    transform: translateY(-35px) scale(.8);
    color: #676c73;
    font-weight: 500
}

#form-section .form-group>input, #form-section .form-group>label {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    margin-bottom: 20px;
}

#form-section .has-error .form-control {
    border-color: red
}

#form-section .help-block {
    color: red;
    display: block;
    margin-top: 0;
    margin-left: 14px;
    text-align: left
}

#form-section div.help-block {
    font-size: 80%
}

#form-section .form-submit {
    margin-top: 9px
}

#form-section button[type=submit], #form-section input[type=submit] {
    -ms-grid-column-align: center;
    justify-self: center;
    background: #00b7fb;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: .65em 1.55em
}

#form-section button[type=submit]:not (:disabled ):hover, #form-section input[type=submit]:not
(:disabled ):hover {
    background: #00abea
}

#form-section button[type=submit]:disabled, #form-section input[type=submit]:disabled
{
    opacity: .6
}

#form-section .password-tips {
    display: none;
    bottom: 100%;
    right: 0;
    transform: translateY(-15px);
    text-align: left;
    padding: 15px 5px 7px 10px;
    width: 180px;
    position: absolute;
    z-index: 1;
    border-radius: 4px;
    background: rgba(0, 0, 0, .9)
}

@media ( min-width :980px) {
    #form-section .password-tips {
        bottom: auto;
        right: auto;
        left: calc(100% + 30px);
        top: 0;
        transform: translateY(-50%) translateY(25px)
    }
}

#form-section .password-tips:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
    border-top: 5px solid rgba(0, 0, 0, .9);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

@media ( min-width :980px) {
    #form-section .password-tips:after {
        bottom: 50%;
        left: -7px;
        transform: rotate(90deg)
    }
}

#form-section .password-tips p {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    display: block;
    margin: 0 0 9px;
    padding: 0
}

#form-section .password-tips ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto
}

#form-section .password-tips li {
    color: #fff;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    display: block;
    margin: 0 0 8px 2px;
    padding: 0 0 0 20px;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' width='15.812' height='15.812'%3E%3Cpath fill='%23464646' fill-rule='evenodd' d='M7.906-.003A7.908 7.908 0 00-.002 7.906a7.908 7.908 0 1015.817 0A7.909 7.909 0 007.906-.003zM6.561 12.166L2.824 8.428l1.591-1.591L6.56 8.983l4.954-4.953 1.591 1.591-6.544 6.545z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 0
}

#form-section .password-tips li.is-valid {
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' width='15.812' height='15.812'%3E%3Cpath fill='%2369c028' fill-rule='evenodd' d='M7.906-.003A7.908 7.908 0 00-.002 7.906a7.908 7.908 0 1015.817 0A7.909 7.909 0 007.906-.003zM6.561 12.166L2.824 8.428l1.591-1.591L6.56 8.983l4.954-4.953 1.591 1.591-6.544 6.545z'/%3E%3C/svg%3E")
}

#form-section input[type=password]:focus ~.password-tips {
    display: block
}

#details-section {
    position: relative
}

@media ( min-width :980px) {
    #details-section {
        display: flex
    }
}

#details-section:before {
    content: "";
    position: absolute;
    left: -18px;
    top: 350px;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 18px solid #fff
}

@media ( min-height :1200px) and (min-width:980px) {
    #details-section:before {
        top: calc(50% - 25px)
    }
}

#details-section .container {
    margin-right: auto;
    padding-top: 30px
}

@media ( min-width :980px) {
    #details-section .container {
        padding-top: 0;
        position: relative;
        top: -40px;
        padding-bottom: 156px;
        -ms-grid-row-align: center;
        align-self: center
    }
}

@media ( min-height :1200px) and (min-width:980px) {
    #details-section .container {
        padding-bottom: 0
    }
}

#details-section em {
    color: #00afec;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3px;
    word-spacing: 1px;
    line-height: 1.5
}

#details-section h2 {
    font-size: 26px;
    font-weight: 400;
    width: 445px;
    max-width: 100%;
    margin: 1em auto 2em
}

#details-section h2+p {
    width: 370px;
    max-width: 100%;
    margin: auto;
    line-height: 1.5
}

#details-section h2+p b {
    font-weight: 400
}

#details-section ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    max-width: 582px;
    max-width: 100%;
    margin: 11px auto 60px
}

@media ( min-width :980px) {
    #details-section ul {
        padding-left: 38px
    }
}

#details-section ul>* {
    list-style: none;
    width: 50%;
    padding-top: 80px;
    position: relative
}

@media ( min-width :980px) {
    #details-section ul>* {
        width: 25%
    }
}

#details-section ul>* svg {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 36px;
    max-height: 37px;
    fill: transparent;
    stroke: #576a7b;
    stroke-width: 2px
}

#details-section ul+p b {
    font-weight: 400
}

.logo-text {
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    text-decoration: none !important;
    color: #fff;
}

.pt-20 {
    padding-top: 80px !important;
}

#goodMessage, #authMessage, #flashMessage, #badMessage {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #449D44;    
    color: #FFF;
}

#authMessage {
    background-color: #ffc107 !important;
    color: #343a40!important;
}

#flashMessage, #badMessage {
    background-color: #DC3545 !important;
    color: #FFF!important;
}

.bg-red {
    background: #bc3f30;
}

.bg-blue {
    background: #709ebf;
}

.bg-green {
    background: #4CAF50;
}

.form-control, .btn {
    border-radius: 10px 0 10px 0;
}

.btn-red {
    background-color: #bc3f30 !important;
    border-color: #bc3f30 !important;
}