@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,400;1,700&display=swap');
html,
body {
        height:100%;
}
body.public{
        background-color: #eee;
        font-family: 'Open Sans', sans-serif;
        /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
        font-size:12px;
}
body .bg-img {
        content:'';
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-size:cover;
        background-attachment: fixed;
        opacity:.15;
        z-index:-1;
}
body.public #page {
        /*background: #013F51;*/
        position:relative;
}
body.login {
        display:flex;
        align-items:center;
        justify-content:center;
}
img,
iframe {
        max-width:100%;
        height:auto;
}
.js-only {
        display:none;
}
.col-md-12 {
        clear: both;
}
hr {
        border-top: 1px solid #00b1e6;
}
.strong {
        font-weight:bold;
}
.error {
        color:#CCC;
        font-size:14px;
        font-weight:bold;
}
.clear {
        clear:both;
}
.hide{
        display : none;
}
.underline{
        text-decoration: underline;
}
.relative {
        position:relative;
}
.right {
        float:right;
}
.center-vertically {
        display:flex;
        height:100%;
        align-items:center;
}
.flash-message-wrapper {
        position:fixed;
        bottom:0;
        top:0;
        left:0;
        right:0;
        z-index:1051; /* le même que inactive-overlay */
        width:100%;
        background: rgba(0, 0, 0, 0.5);
}
.flash-message {
        text-align: center;
        width: 600px;
        margin: 350px auto;
        font-weight: bold;
        z-index: 1058;
        position: relative;
        border: solid 3px;
        background: #FFF;
        box-shadow: 0 0 15px 2px rgba(46, 47, 51, 0.2);
        padding: 40px;
        font-size: 14px;
        background-image:url('../img/close-flash.png');
        background-repeat:no-repeat;
        background-position:top 3px right 3px;
}
.form-login .flash-message-wrapper {
        position: static;
        width: auto;
        background: none;
        /*display:none !important;*/
}
.form-login .flash-message-wrapper + .flash-message-wrapper {
        display:none !important;
}
.form-login .flash-message-wrapper .flash-message {
        width: auto;
        margin: 0 0 20px 0;
        padding: 10px 20px;
        background: #D9EDF7;
        box-shadow: none;
        border: solid 3px #2499b8;
        color: #444;
        border-radius:4px;
        font-size:13px;
}
.tooltip-inner {
        max-width: 400px;
}
.tooltip.bottom .tooltip-arrow {
        border-bottom-color: #5d5d5d;
}
.alert-alt {
        background: #cba1e0;
        border-color: #af86c3;
        color: #fff;
}
.alert-info .alert-info,
.alert-warning .alert-warning,
.alert-danger .alert-danger,
.alert-alt .alert-alt {
        background:#fff; /* alert dans une alert : passe le bg en blanc pour le faire ressortir */
}

.btn-alt {
        background: #b15ebb;
        border-color: #9b51a5;
        color:#fff;
}
.btn-alt:hover, .btn-alt:focus, .btn-alt:active, .btn-alt.active {
        background: #9b4fa5;
        border-color: #833f8c;
        color:#fff;
}

/*
 * Form elements
 */
input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        border: solid 1px #2499b8;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
}
.radio input[type="radio"], .radio-inline input[type="radio"] {
        margin: 1px 0 0 -19px;
}
input[type="radio"], input[type="radio"]:checked, input[type="radio"]:focus, input[type="radio"].form-control, input[type="radio"].form-control:checked, input[type="radio"].form-control:focus {
        border: solid 1px #2499b8;
        box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.2);
        outline: none;
}
input[type="radio"]:checked:after {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        overflow: hidden;
        background: #2499b8;
}
.input-description {
        font-style: italic;
        display: block;
        font-size: 11px;
        color: #444;
}
label .input-description {
        margin-top: 3px;
}
.input + .input-description {
        margin-top:-10px;
        margin-bottom:15px;
}


/*
 * Masquerade
 */
body.masquerade {
        background: repeating-linear-gradient(135deg, #eee, #eee 10px, rgba(36, 153, 184, 0.25) 10px, rgba(36, 153, 184, .25) 20px) !important;
}
#masquerade-info {
        position: fixed;
        right: 14px;
        top: 14px;
        background: #007596;
        padding: 5px 10px;
        border-radius: 5px;
        color: #fff;
        z-index:10;
        box-shadow:0px 0px 4px 0px rgb(1, 63, 81);
        z-index:9999;
        font-size:12px;
}
#masquerade-info a {
        color:#fff;
        font-size:11px;
        margin-left:2px;
}
@media (max-width:1450px) {
        #masquerade-info {
                right: 20px;
                top:80px;
        }
}

/*
 * Panels
 */
.panel {
        margin-bottom:30px;
        border:none;
        box-shadow:0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
}
.panel,
.panel a {
        color: #333;
}
.panel-heading {
        padding: 8px 15px 8px 15px;
        color: #fff;
        background: #2499B8;
        text-transform: uppercase;
        font-family: Montserrat;
        font-size: 13px;
        font-weight: 100;
}
.panel-title .glyphicon {
        font-size: 13px;
        margin-right: 3px;
        line-height:0;
}
.panel-body-inner {
        padding:10px;
}
.panel-body-inner .input:last-child {
        margin-bottom:0;
}

/*
 * Page d'erreurs
 */
.error-page,
.error-page body {
        height:auto;
}
.error-page body {
}
.error-page #page {
        max-width: none;
        margin-top: 20px;
}
.error-page .inner {
        /*background:#007596;*/
        padding:20px;
        color:#777;
        position:relative;
        text-align:center;
        max-width: 900px;
        margin: 0 auto;
}
/*.error-page .inner:before,
.error-page .inner:after {
        content:'';
        position:absolute;
        top:0;
        bottom:0;
        width:234px;
        background:url('../img/logo-grey.png') no-repeat center;
        opacity:0.2;
}*/
.error-page .inner:before {
        left:20px;
}
.error-page .inner:after {
        right:20px;
        transform:scale(-1, 1);
}
.error-page .logo {
        max-height:150px;
}
.error-page h1 {
        font-size:19px;
        font-weight:bold;
        margin-top:25px;
        margin-bottom:25px;
}
.error-page h1 .err {
        text-transform:uppercase;
}
.error-page h1 .message {
        font-size:16px;
        margin-top:6px;
        font-weight:normal;
        display:block;
        font-style:italic;
}
.error-page .btn {
        font-size:12px;
}
#logout-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #fff;
        background: #013f51;
        padding: 3px 6px;
        border-radius: 5px;
        z-index: 2;
        transition:all .2s;
}
#logout-btn:hover {
        background:#fff;
        color:#013f51;
}

/**
 * Overlay
 */
.inactive-overlay {
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        background:white;
        opacity:0.6;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index:1051;
}

/*
 * Loader
 */
#overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(45, 45, 45, 0.7);
        z-index: 999999;
}
#overlay-progress {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background: rgb(0, 117, 150);
        border-radius: 12px;
        box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
}
#overlay-progress .title {
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        pointer-events: none;
        padding: 0 20px;
        text-align: center;
}
#overlay-progress .progress {
        border-radius: 12px;
        height: 26px;
        box-shadow: 2px 2px 60px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 0;
        margin-top: 11px;
}
#overlay-progress .progress .progress-bar.progress-bar-striped.active {
        background-color: #007595;
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: linear-gradient(45deg,rgba(255,255,255,.7) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.7) 75%,transparent 75%,transparent);
        -webkit-background-size: 40px 40px;
        background-size: 40px 40px;
        animation: progress-bar-stripes 2s linear infinite;
}
#overlay-progress .progress .progress-bar.progress-bar-striped.active.undeterminate {
        width: 100%;
}


/*
 * Tmp Students
 */
.addtmpstudent h2{
        color: #ff3;
}
#conditions{
        background-color: #007596;
}
#conditions, .jumbotron p {
        font-size : 13px;
        color: #fff;
}
#conditions h4, .jumbotron h4{
        font-size: 20px;
        font-weight: bold;
}
#conditions h5, .jumbotron h5{
        font-size: 16px;
        font-weight: 600;
}
#conditions strong, #conditions a{
        font-size : 14px;
}
#confirm p a{
        font-size: 14px;
}
#confirm div{
        margin : 20px;
        border: solid 1px #00b1e6;
        padding : 10px;
        max-width: 500px;
}
.jumbotron{
        font-size : 20px;
        background-color: transparent;

}
.jumbotron h1{
        font-size: 100%;
}
.required-legend {
        margin-left:30px;
}
label .glyphicon {
        font-size:12px;
}

/**
 *  Formulaires
 */
.form-tmp-students, .form-login, .form-recover{
        margin: 0 auto;
        color: white;
        float: none;
}
.form-login a,
.form-recover a {
        text-decoration:underline;
}
.form-login .forgotten-password {
        display:block;
        margin-top:5px;
        margin-bottom:20px;
}
.form-tmp-students{
        border-top: 1px solid #00b1e6;
        background: #007596;
        padding-top: 30px;
        padding-bottom: 0px;
        margin-bottom: 0px;
}
.form-tmp-students .submit-zone{
        margin: 30px 30px 30px 30px;
        padding-bottom: 40px;
        clear:both;
}
.form-tmp-students .submit-zone a, .form-tmp-students .submit-zone a:hover{
        color: #333;
}
.form-tmp-student-header {
        padding:50px 0;
}
.form-tmp-student-header img{
        display: block;
        float : left;
        width : 200px;
        margin-left: 60px;
        margin-top:4px;
}
.form-tmp-student-header h2{
        margin-top:0;
}
.form-tmp-student-title{
        float : left;
        margin-left: 50px;
        color: #fff;
        max-width:800px;
}
.form-tmp-students h3{
        margin-left: 15px;
        margin-bottom: 20px;
        clear:both;
}
.form-tmp-students .col-md-9 h3{
        margin-left:0;
}
.form-tmp-students .col-md-6 hr{
        width : 85%;
        float : left;
        margin-left: 15px;
}
.form-tmp-students .col-md-6 .col-md-9 hr{
        width : 100%;
        margin-left: 0px;
}
.form-tmp-students .form-group {
        margin-bottom: 25px;
}
.form-tmp-students .form-inline input{
        margin-left: 15px;
        margin-right: 2px;
}
.form-tmp-students .form-recap{
        margin-left: 15px;
}
.form-tmp-students .form-recap blockquote,
.form-tmp-students .form-recap table{
        background-color: #fff;
        color : #333;
        width : 70%;
        font-size: 12px;
        font-weight: bold;
}
.form-tmp-students .form-recap h4{
        font-size: 14px;
}
.form-tmp-students .form-recap p{
        font-size: 13px;
}
.form-tmp-students a, .form-tmp-students a:hover{
        color: #fff;
        font-size: 16px;
}
.form-tmp-students input[type='submit'] {
        font-size: 16px;
}
.form-tmp-students .form-gateway input {
        font-size:inherit;
}
.form-tmp-students .form-recap a, .form-tmp-students .form-recap a:hover{
        color: #fff;
        font-size: 12px;
}
.form-tmp-students #submitFinal{
        margin : 20px 0 50px 0;
        background-color: #00b1e6;
}

.btn-jaune {
        background-color: #00b1e6;
        border:solid 1px #666;
}
.submit-zone .form-recap{
        width: 390px;
}
.modal-body .alert {
        margin-bottom:0;
        font-weight:bold;
}
.submit-zone .submit{
        text-align : right;
}
#captcha-contener label{
        display: block;
}
#UserPasswordRecoveryForm #captcha-contener{
        margin : 20px 0;
}
#UserPasswordRecoveryForm #captcha-contener .pull-right{
        display : none;
}
#UserPasswordRecoveryForm #captcha-contener p a{
        font-size:11px;
}
.jumbotron-form-tmp-students{
        color : #fff;
        font-size : 14px;
        background-color: #007596;
}
.form-tmp-students .error, #UserPasswordRecoveryForm .error{
        color: #f1eda2;
        font-size: 11px;
        margin-top: 2px;
}
.form-tmp-students input.error,
.form-tmp-students select.error,
.form-tmp-students textarea.error{
        background-color: #f1eda2;
        border-color: #f1eda2;
        color: #333;
        font-size: 14px;
        font-weight: normal;
}

/**
 * Formulaire Login & recovery password
 */
.form-login .logo-home,
.form-recover .logo-home{
        display: block;
        max-width:100%;
        margin:-170px auto 30px auto;
}
.form-login, .form-recover{
        width: 360px;
        padding: 15px;
        border-radius: 4px;
        margin-top: 50px;
}
.form-login .login-password {
        position:relative;
}
.form-login .login-password .btn-show-password {
        position:absolute;
        right:10px;
        top:10px;
        cursor:pointer;
}

.form-login div.input, .form-login div.submit, .form-recover div.input, .form-recover div.submit, label#UserPasswordCheck{
        margin-top : 10px;
}

#SubmitPasswordRecovery{
        margin-top : 20px;
}

.form-login .message,
.form-recover .message,
.error-message{
        margin-bottom: 20px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 4px;
}
.form-login .message,
.form-recover .message {
        padding: 15px;
        margin-top: 20px;
        color: #3A87AD;
        background-color: #D9EDF7;
        border-color: #BCE8F1;
}
.error-message{
        padding: 6px 12px;
        font-size: 12px;
        margin-top: 5px;
        color: #b94a48;
        background-color: #f2dede;
        border-color: #eed3d7;
}

/**Autocomplete ajax*/
.autocomplete-parent{
        position : relative;
}
.autocomplete-wrapper {
        position:absolute;
        left:0;
        width:100%;
        max-height:150px;
        z-index:5;
        overflow-y:scroll;
        overflow-x:hidden;
        background:white;
        border:solid 1px #CCC;
        box-shadow:5px 5px 12px -7px #B4B4B4;
}
.autocomplete-wrapper .autocomplete-item {
        padding:5px;
        color: #333;
}
.autocomplete-wrapper .autocomplete-item:hover {
        color:white;
        background:#666;
        cursor:default;
}

/*Datepicker*/
.datepicker-wrapper {
        position: relative;
}

.datepicker-wrapper .glyphicon-calendar {
        position: absolute;
        right: 7px;
        top: 9px;
        font-size: 1.2em;
        color: #000;
}

.cursus{
        padding-left: 5px !important;
        padding-right: 5px !important;
}

.col-md-3.cursus{
        padding-left: 0px !important;
}

.cursus-labels .label {
        font-size:14px;
        text-align:left;
        margin-bottom:5px;
}
.jumbotron-form-tmp-students a {
        color: #333;
        font-weight:bold;
}
blockquote {
        border-left: 5px solid #00b1e6;
}
#version {
        position: fixed;
        right: 10px;
        bottom: 5px;
        color: #fff;
        font-size: 12px;
}
#version a {
        color:inherit;
}

.login-container, .register-container{
        padding: 0;
}

.register-container #TmpStudentLoginForm{
        border-top: 0px;
}

.login-container .form-login{
        padding-left: 30px;
        margin-right: 15px;
        margin-left: 0;
        max-width: 100%;
}

#TmpStudentLoginForm h3{
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 5px;
}

#TmpStudentLoginForm .alert-info{
        margin : 0 auto;
}
.num-places{
        margin-top: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #d9534f;
}

@media screen and (max-width:991px)
{
        .flash-message {
                width:auto;
                margin-left:20px;
                margin-right:20px;
        }
}