/*style for the template mrgpd-template-login
* + there is a JS script "mrgpd-workplace/src/main/custom/webapp/resources/js/mrgpd-template-login.js"
*USED for pages :
*** account locked;
*** password init /initpassword
*** mot de passe reinitialise
*** mot de passe perdu
 */

/*TEMPLATE STRUCTURE
*|body-container, container-fluid (container-fluid is a class automatically applied to all responsive block by Moovapps, not to modify it);
***|wrapper, container-fluid ;
******|logo-container, container-fluid ;
*********|row, default-mrgpd-main
************|sys-main-content > dont modify this class as it is the same for ALL TEMPLATES
******************Element we can find on different pages
******************|form-area
*********************|informations, info1 (message d'informations)
*********************|fields-area
*********************|fields-group
*********************if there is a table
************************|table, tbody
***************************|tr  (generally, the table is made of two columns)
******************************|cell-full, cell-left, cell-right
*********************|button-area, document-bottom-buttons, container-fluid
******|cgu-container, container-fluid
 */

/* General components */
.body-container {
    background-image: linear-gradient(to right, #1685BD, #9CDBC4);
    overflow: hidden;

    div {
        box-sizing: border-box;
    }

    h2 {
        font-size: 20px;
        color: #59B0C0;
        line-height: 20px;
        margin: 0;
        padding: 0;
    }

    h3 {
        color: #59B0C0;
    }
}
.body-container, .wrapper, .default-mrgpd-main {
    position: relative;
    z-index: 0;
}
.body-container, .wrapper, .default-mrgpd-main {
    height: 100%;
    width: 100%;
}
.wrapper, .div-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.body-container, .wrapper {
    padding:0;
}

.div-container {
    width: 480px;
    max-height: 580px;
    min-height: 480px;
    border-radius: 10px;
    background-color: white;
    padding: 1rem;

    .buttons-group, .button-area {
        width: 100%;
        ol, ul {
            width: inherit;
            display: inline-flex;
            justify-content: space-evenly;
            flex-direction: row-reverse;
            li {
                display: inline-flex ;
                flex-direction: row-reverse;
            }
            button {
                min-width: 10rem;
            }
        }
    }

    * {
        z-index: 5;
        max-width: 460px;
    }

    /*automatic div injected by Moovapps when generating responsive bloc*/
    .container-fluid, .row {
        padding: 0;
        margin: 0;
    }

}
/*containment of element with regards to the mrgpd-login-template to avoid propagation effect */
#div-container {
    .row, .logo-container, .default-mrgpd-main, .button-area, .col, .col-md-6, .col-md-offset-3, .button-area, .panel,  .bg-white, .shadowed-thin-bottom, .text-center, .system-page, .form-area, .informations, .info1 {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-content: center;
        align-items: center;
    }

    .row, .col, .col-md-6, .col-md-offset-3, .button-area, .form-area, .fields-area, .fields-group, .informations, .info1 {
        max-height: 480px;
        position: relative;
        width: 100%;
    }
}
#divv-container {
    form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }
}

#div-container {
    .informations {
        padding: 1rem;
        display: inline-block;
    }
}
/* styling of the button area for pages needing it */
#div-container {
    .button-area {
        position: relative;
        padding: 1rem;
        margin: 0;

        button {
            background-image: linear-gradient(to right, #4FA9C0, #65B7C1);
        }

        button:hover {
            transition: .8s ease-in-out;
        }
    }
}

/* sys-main-content is renammed default-mrgpd-main for styling on this template */
.default-mrgpd-main {
    * {
        font-family: Arial, Helvetica, sans-serif;
    }
    div {
        border: none;
    }
    p {
        font-size: 14px;
    }
    .informations p::before {
        display:none;
    }

    .col, .col-md-6, .col-md-offset-3 {
        height: 100%;
        padding:0;
        margin:0;
        display: inline-block;

        div, table, tbody, th, tr, td, .cell-right, .cell-full {
            max-width: 480px;
        }


        .panel, .bg-white, .shadowed-thin-bottom, .text-center, .system-page {
            padding: 0;
            margin: 0;
            height: 100%;
            box-shadow: none;
        }
        .fields-area{
            padding: 1rem;
            position: relative;
            width: 100%;
        }
        table, tbody {
            display: inline-block;
            position: unset;
            overflow-y: scroll;
            overflow-x: scroll;
        }
        tbody {
            width: 100%;
        }
    }
    .cell-left {
        display: none;
    }
    .cell-right, .cell-full {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-content: center;
        align-items: center;
        position: relative;
        flex: 1;
        gap: 1rem;
    }
    .cell-right > input {
        width: 100%;
    }
    .readonly-field {
        width : 100%;
    }

    tr, .cell-right {
        display: inline-flex;
        width: 100%;
    }
    .captcha {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 70%;
        }

        button {
            background-image: linear-gradient(to right, #4FA9C0, #65B7C1);
        }
    }
}

#div-container {
    .readonly-field {
        background-color: #f3f3f3;
        color: gray;
        width: 100%;
        padding: 0.8rem 1rem;
        border-radius: 5px;
    }
}
/* cgu container common on the template content is generated through translation keys */

.cgu-container {
    font-size: 10px;
    margin: 1rem;
    position: relative;
}

/************************************************************************************************
********************* INDIVIDUAL STYLING ********************************************************
*************************************************************************************************/

/* Password init */
#NAV_1_3 {
    li {
        padding: 1rem 0;
    }
}

#lostpassword-div,#password-init-div, #passwordinit-div, #account-locked-div, #error-page-div, #init-password-request-div, #password-initialized-div, #passwordinit-div, #expired-password-div {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

/*MRGPD/system/user profile */
#lostpassword-div {
    /*border: 1px solid red;*/
}
/*Mot de passe réintialisé, requestinitpassword */
#password-init-div {
    ul {
        width: inherit;
        li {
            width: 100%;
            margin-top: 2rem;
            label {
                width: 10rem;
                display: inline-flex;
                color: #59B0C0;
            }
            input {
                display: inline-flex;
                width: 100%;
            }
        }
    }
}
#account-locked-div {
    /*border: 1px solid yellow;*/
}
#error-page-div {
    /*border: 1px solid lime;*/
}
#init-password-request-div {
    /*border: 1px solid green;*/
}
#password-initialized-div {
    /*border: 1px solid cyan;*/
}
/*Mot de passe perdu password lost, getpassword*/
#passwordinit-div {
    .buttons-group, .button-area {
        width: 100%;
        ol, ul {
            button::before {
                display:none;
            }
        }
    }
}
/* MRGPD/system/system/ChangePassword, PasswordExpired*/
#expired-password-div {
    h2, h3 {
        text-align: center;
        padding-bottom: 1rem;
    }
    .cell-left, .cell-right {
        display: flex;
        align-items: center;
    }
    .cell-left {
        text-align: left;
        color: #59B0C0;
        width: 16rem;
    }
    .cell-right {
        input {
            width: 100%;
        }
    }
    label, strong.mandatory {
        color: #59B0C0;
    }
}

#changepassword-list {
    width: 100%;
    h2, h3 {
        margin-bottom : 1.2rem;
        text-align: center;
    }
    ol, ul {
        font-size: 12px;
        width: 100%;
        padding-left: 3rem;
        li::marker {
            color: #59B0C0;
        }
    }
}

/* Bg img for the mrgpd-login-template */
.bg-img {
    position: absolute;
    bottom:0;
    right:0;
    z-index: -3;

    img, svg {
        width: 1000px;
        filter:brightness(50);
        opacity: 10%;
    };
}

#return-link {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 0.8rem;
    color: #02C2EF;

    a {
        color: #02C2EF;
    }
    a:visited, a:active {
        color: #02C2EF;
    }
    a:hover {
        color: #1685BD;
    }
}