@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

* {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-sizing: border-box;
}

/**=== === NAVBAR === ===**/
.navbar {
    background-color: #0f203d;
}

.navbar a {
    color: white;
}
.navbar .dropdown-item {
    color: #333;
    transition: 0.2s;
}

.navbar .dropdown-item:hover {
    background-color: #f1f1f1;
    color: black;
}

.dropdown-menu {
    padding: 0;
}

#deconnected {
    background-color: #FF5733;
    color: white;
    transition: 0.2s;
}

#deconnected:hover {
    background-color: #EC421D;
}

/**=== === LOGIN PAGE === ===**/
.bodypage-login {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 60vw 40vw;
}

.center-pages {
    display: grid;
    align-items: center;
}

.page-left {
    background-color: #0f203d;
}

.page-right {
    background-color: #f3f3f3;
    box-shadow: 5px 0px 40px rgba(0, 0, 0, .3);
    border-left: 5px solid #c70017;
}

.center-horizontally {
    display: block;
    margin: auto;
    align-items: center;
}

.center-horizontally > img {
    display: block;
    margin: auto;
}

h1 {
    text-align: center;
}

.center-horizontally > h1 {
    font-size: 1.4em;
    text-align: center;
    margin-top: 1em;
}

.page-right > .center-horizontally > h1 {
    color: #c70017;
}

.page-left > .center-horizontally > h1 {
    color: white;
}

input {
    padding: 0.5em;
    border-radius: 3px;
}

.login-container {
    display: block;
    margin: auto;
    width: 50%;
    text-align: center;
    color: white;
}


/**=== === BUTTONS === ===**/
.submit-buttons-group {
    margin-top: 2em;
}

.submit-buttons {
    width: 100%;
    display: block;
    background-color: #0f203d;
    color: white;
    padding: 0.7em;
    border-radius: 5px;
    border: none;
    transition: 0.2s;
}

.submit-buttons:hover {
    background-color: #162f5b;
}

.submit-buttons:target {
    border: none;
}

.edit-button {
    width: 100%;
    display: block;
    background-color: orange;
    color: white;
    padding: 0.7em;
    border-radius: 5px;
    border: none;
    text-decoration: none;
    transition: 0.2s;
}

.edit-button:hover {
    background-color: darkorange;
    text-decoration: none;
    color: white;
}

#validate, .btn-success {
    background-color: #3FD95D;
    border-color: #3FD95D;
    transition: 0.2s;
}

#validate:hover, .btn-success:hover {
    background-color: #26C16A;
    border-color: #26C16A;
}

.submit-buttons-group > a {
    margin-top: 0.7em;
}

.buttonSud {
    display: block;
    color: white;
}

#connect {
    background-color: #c70017;
}

#pdp {
    width: 120px;
    height: 120px;
    background-color: #c70017;
    margin: auto auto 1em auto;
    display: block;
    border-radius: 50%;
}


#user_profile {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #c70017;
    /*background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    background-size: cover;*/
    color: white;
    font-weight: bold;
    font-size: 2em;
    border: none;
    transition: 0.4s;
}

h2 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: lighter;
}

/**=== === TITLES === ===**/
#login-form > h2,
.createaccount-form > h2 {
    font-size: 1.5em;
    padding-bottom: 0.4em;
}

.createaccount-form > h3 {
    font-size: 1em;
    padding-bottom: 0.6em;
}

/*#lettre_motivation {
    height: 300px;
}*/

.modal-body {
    margin: 1.5em;
    padding: 0;
}

.modal-body input {
    margin-bottom: 0.5em;
}


/**=== === SIGN UP FORM === ===**/
/*.bodypage-createaccount {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 15vw 85vw;
}*/

.form-test {
    padding: 0em 15%;
    margin-bottom: 4em;
}

.vehicule > input, .active_mission > input {
    margin-left: 1em;
}

.vehicule > label, .active_mission > input {
    margin-left: 0.5em;
}

.page-right h2 {
    color: #FF5733;
}

.page-right > .center-horizontally > a {
    display: block;
    padding: 3em;
    background-color: black;
}


/** ===== other ===== **/

#logo {
    border-radius: 50%;
}

#info {
    background-color: palegreen;
    color: #333;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 0.5em 0.5em 0 0.5em;
    text-align: center;
}

/**=== === DIVIDERS === ===**/
.divider, .divider1, .divider2 {
    height: 0.4px;
    width: 50%;
    background-color: rgba(0, 0, 0, .3);
    display: block;
}

.divider {
    margin: 2.5em auto 2.5em auto;
}

.divider1 {
    margin: 1em auto 1em auto;
}

.divider2 {
    margin: 2em auto 2em auto;
    width: 30%;
    background-color: rgba(0, 0, 0, .1);
}

.divider3 {
    margin: 4.5em auto;
    height: 0.4px;
    width: 60%;
    background-color: rgba(0, 0, 0, .3);
    display: block;
}


/**=== === DOCUMENTS === ===**/
.statusButtonUpdate {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.listDoc {
    padding-bottom: 2em;
}

.edit_doc > .row {
    margin: 0.5em auto 0.5em auto;
}

.preview_files {
    display: block;
    margin: 1em auto;
}

input[type=file]::-webkit-file-upload-button {
    padding: 0.5em;
    background-color: #c70017;
    color: white;
    border: none;
    border-radius: 5px;
    transition: 0.2s;
}

input[type=file]::-webkit-file-upload-button:hover {
    background-color: #a10013;
}

.docs {
    display: block;
    margin: auto;
}

.info_doc {
    width:70%;
    margin: auto;
}

/**=== === USER'S INFO BOX === ===**/
.summary_info {
    margin-top: 1em;
}

.summary_info label {
    display: block;
}

.summary_info h1 {
    margin-bottom: 1em;
}

.summary_info h2 {
    margin-bottom: 1em;
}


.tooltip-wrapper .btn[disabled], .input[disabled] {
    pointer-events: none;
  }

.tooltip-wrapper.disabled {
    cursor: not-allowed;
}

.pe-none{
    pointer-events: none !important;
}


/**=== === MAIN ICONS FOR EACH PAGE === ===**/
#profile {
    font-size: 3em;
    color: #c70017;
    text-align: center;
    margin: auto;
    display: block;
}

abbr {
    color: #FF5733;
    text-underline-offset: none;
}

/**=== === USED IN PASSWORD_EDIT PAGE === ===**/
#see {
    border: none;
    padding: 0 1em;
    border-radius: 0 3px 3px 0;
}

#eyebutton {
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid lightgrey;
}

#errStatus {
    margin-top: 2em;
}

/**=== === === MEDIA SCREEN === === ===**/
@media screen and (max-width: 900px) {
    .form-test {
        padding: 0em 5%;
    }

    .login-container {
        display: block;
        margin: auto;
        width: 80%;
        text-align: center;
        color: white;
    }

    .bodypage-login {
        display: block;
    }

    .page-left {
        height: 70vh;
    }

    .page-right {
        height: 30vh;
        border-left: none;
        border-top: 5px solid #c70017;
    }

    .page-right img {
        width: 50%;
    }

}

/*see buttons*/
.input-group-append .btn-primary{
    background-color: #6c757d;;
}