:root {
    --wrapper-padding: 24px;
    --button-background: #ec1846;
    --button-background-hover: rgba(236,24,70,.8);
    --button-text: #fff;
    --button-text-hover: #fff;
    --button-hover-opacity: 1;
    --text-color: #434345;
    --content-width: 100vh;
    --header-height: 64px;
    --app-install-height: 0;
    --app-install-top: 0;
    --highest-z-index: 999999999
}

body {
    color: #1D2851;
}

/*LOGIN*/

.socials {
    width: 45% !important;
}

.social__holder {
    margin-bottom: 40px;
}
.socials {
    margin-top: 15px !important;
    width: 60%;
    margin: 0 auto;
    cursor: pointer;
}

    .socials a {
        font-weight: 700;
        font-family: EredivisieDisplay,Verdana,EredivisieText,Arial,sans-serif;
        min-width: 370px;
        margin-bottom: 3px;
    }

.btn-lg {
    font-size: 1.4rem
}

.btn-facebook {
    background-color: #3b5998 !important;
    color: #fff;
    border: none !important;
}

.btn-google {
    background-color: #ec1846 !important;
    color: #fff;
    border: none !important;
}
.wrapper-inner .view ul {
    margin-top: 10px;
    padding: 0px;
}

.wrapper-inner .view ul li {
    display: inline-block;
    list-style-type: none;
}
/*LOGIN END*/

/*BUTTONS*/
.btn {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: EredivisieDisplay, Verdana, EredivisieText, Arial, sans-serif;
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: .1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-items: center;
    background-color: var(--button-background);
    border: 0;
    box-shadow: none;
    color: var(--button-text);
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-start;
    padding: 16px 24px;
    text-decoration: none;
    transition: background-color .15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*BUTTONS END*/
/*FORM*/

/*FORM END*/
/*OPTIN */
#TeamSelectList {
    position: absolute;
    z-index: 9999999;
    width: 100%;
    padding-right: 110px;
}

.team-select-option {
    display: flex;
}

.list-inline {
    display: inline-block !important;
}

#TeamSelectList > div > div {
    padding-left: 10px;
    height: 30px;
}

#TeamSelectList > div {
    overflow: auto;
    max-height: 300px;
    width: 100%;
    border: solid;
    border-width: thin;
    color: #999999;
    background-color: white;
}

.team-select {
    margin-bottom: unset !important;
}

    .team-select input {
        margin-bottom: unset !important;
    }

    .team-select .form-control[readonly] {
        cursor: inherit !important;
        background-color: white !important;
    }

.nav-profile li, .nav-profile a {
    list-style-type: none;
    display: inline-block;
}

#optinSection {
    margin-top: 20px;
    width: 100%;
    margin-bottom: 20px;
}

#authForm {
    background-color: #e9e8ef;
    padding: 40px;
    padding-bottom: 80px;
}

.view form {
    background-color: #e9e8ef;
    padding: 40px;
    padding-bottom: 80px;
}


.form-control:focus {
    outline: none !important;
    border-color: inherit;
    box-shadow: 0 0 10px inherit;
}

#TeamSelectList > div > div:hover {
    background-color: #056cdc;
    color: white;
}

#profileDateInputs select {
    width: 33%;
    display: inline-block !important;
}

.checkbox-wrapper {
    display: inline-block;
    padding: 5px;
    min-width: 305px;
}

/*OPTIN END*/

.logout-btn {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 200px;
    width: 100%;
}

.group-heading {
    display: block;
    color: #1D2851;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    border-bottom: 1px solid #000;
    margin: 20px 5px 5px 5px;
}

.item-wrapper {
    margin: 5px 5px 5px 10px;
    display: flex;
}

    .item-wrapper span:first-child {
        display: block;
        min-width: 150px;
        max-width: 40%;
        width: 100%;
        float: left;
        font-size: 22px;
        color: #1D2851;
    }

    .item-wrapper span:last-child {
        display: block;
        min-width: 150px;
        max-width: 60%;
        width: 100%;
        float: right;
        text-align: right;
        font-size: 22px;
    }

    .item-wrapper span:nth-child(3) {
        display: block;
        min-width: 50px;
        width: auto;
        float: right;
        text-align: right;
        font-size: 14px;
    }


.width5.optinRow {
    justify-content: center;
    margin: 1px;
}

/*PASSWORD BAR STYLING*/
.progress {
    background: #F8F8F8;
    border-radius: 10px;
}

.progress-bar {
    border-radius: 10px;
}

    .progress-bar span {
        border-radius: 10px;
        padding-left: 10px;
        display: block
    }

#pass_hint {
    display: none
}

#pass_icon {
    display: inline-block;
    text-align: right;
    margin-left: 8px;
    font-size: 20px;
}

.show_hint {
    display: block !important;
    position: absolute;
    background: #F8F8F8;
    padding: 10px;
    border-radius: 10px;
    margin-top: -10px;
}

#input_password_new {
    display: inline-block;
}

#pass {
    max-width: 100px;
    display: block;
    float: right;
    font-size: 14px;
    margin-left: auto;
    padding-right: 5px;
}

#languageform {
    width: 100%;
    max-width: 50px;
}

    #languageform li {
        list-style: none
    }

.item-wrapper span:last-child a {
    padding-left: 5px;
}

.checkbox-wrapper {
    display: inline-block;
    padding: 5px;
    min-width: 305px;
}

    .checkbox-wrapper label {
        margin: 0px;
        display: inline-block;
    }

    .checkbox-wrapper input[type="checkbox"] {
        vertical-align: middle;
        margin: 0px;
        margin-right: 5px;
        min-height: 20px;
        width: 60%;
    }

    .checkbox-wrapper p {
        font-style: normal;
        font-size: 12px;
        margin-bottom: 10px;
    }

.input-validation-error, .pro6pp-err {
    background-color: #f2dede !important;
    border-color: #b94a48 !important;
}

.input-required-field {
    background-color: #fcf8e3 !important;
    border-color: #C87533 !important;
}


.nav-profile {
    text-align: center;
}

body .white_background .nav-profile a {
    margin-right: 3%;
}

.nav-profile li, .nav-profile a {
    list-style-type: none;
    display: inline-block;
}

    .nav-profile a i {
        margin-right: 10px;
    }



@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/www/fonts/glyphicons-halflings-regular.eot');
    src: url('/www/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/www/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/www/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/www/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}
@media screen and (max-width: 990px) {
    .view p {
        padding: 20px 11px 6px 11px;
    }
}
@media screen and (min-width: 900px) {
    body {
        background-image: url('../images/willem-player-background.jpg');
        background-repeat: no-repeat;
        height: 100vh;
        margin: 0;
    }

}
    .page-node-type-page .layout-content {
        opacity: 0.9;
    }

    .glyphicon-pencil:before {
        content: "\270f";
    }

    .nav-profile a .glyphicon {
        margin-right: 5px;
    }

    .glyphicon-check:before {
        content: "\e067";
    }

    @media screen and (min-width: 900px) {

        .dialog-off-canvas-main-canvas {
            margin-top: 400px;
        }
    }

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

        .dialog-off-canvas-main-canvas {
            margin-top: 190px;
        }

        #authForm {
            padding: 10px;
        }

        .page-node-type-page .layout-content {
            padding: calc(var(--spacing-l) * 0);
        }
    }

    @media screen and (max-width: 300px) {
        .checkbox-wrapper {
        }
    }

    @media (max-width: 660px) {
        .white_background {
            padding: 20px;
        }
       
        .item-wrapper {
            margin: 2px;
        }

            .item-wrapper span:first-child {
                min-width: unset;
                margin-right: 1px;
                font-size: 1.1em;
            }

            .item-wrapper span:last-child {
                display: inline-block;
                min-width: unset;
                max-width: 100%;
                font-size: 1.1em;
            }

        .optins form {
            padding: 0;
        }
    }


    @media (max-width: 560px) {
        .divide li a span {
            display: block;
            padding: 5px;
        }

        .sso-container {
            padding-right: 5px;
            padding-left: 5px;
        }

        .socials {
            width: 80%;
        }
    }

    @media (max-width: 530px) {
        .sso-container .col-md-8 .view ul li {
            font-size: 12px;
        }

        .sso-container .col-md-8 .view .btn-login {
            margin-top: 10px;
        }

        .sso-container .col-md-8 .view {
            margin: 15px auto 25px auto;
            padding: 10px;
        }

        .socials a {
            font-size: 20px
        }

        .socials {
            margin: 0;
            width: 100%
        }
    }

    @media (max-width: 400px) {
        .divide li:first-child {
            max-width: 13ch;
        }
    }

    @media (max-width: 320px) {
        .socials a {
            font-size: 16px
        }
    }