/* fonts */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-Regular.ttf") format("ttf");
}

/* CSS GLOBAL */

/* ALERT */
.alertError {
    border: 1px solid #d63031;
    border-left: 7px solid #d63031;
    color: #2d3436;
    padding: 10px;
    font-weight: 500;
    border-radius: 2px;
}

.alertSuccess {
    border: 1px solid #00e1a0;
    border-left: 7px solid #00e1a0;
    color: #2d3436;
    padding: 10px;
    font-weight: 500;
    border-radius: 2px;
}
/* ALERT */

/* BOUTON */
.btnPurple {
    margin: 0 auto;
    border: none;
    color: #fff;
    background: #4b00ff;
    border-radius: 5px;
    padding: 10px 0 10px 0;
    text-align: center;
}
.btnWhite {
    margin: 0 auto;
    border: none;
    color: #4b00ff;
    background: #dfe6e9;
    border-radius: 5px;
    padding: 10px 0 10px 0;
    text-align: center;
}
.btnPurple:hover, .btnWhite:hover {
    cursor: pointer;
}
.btnPostuler, .btnMsg, .btnPwd, .btnAccepted {
    border: 1px solid #4b00ff;
    background: none;
    color: #4b00ff;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 20px 5px 20px;
    transition: 0.3s;
}
.btnPostuler:hover, .btnMsg:hover, .btnPwd:hover, .btnAccepted:hover {
    cursor: pointer;
    color: #fff;
    background: #4b00ff;
    transition: 0.3s;
}
.btnRefused {
    border: 1px solid #d63031;
    background: none;
    color: #d63031;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 20px 5px 20px;
    transition: 0.3s;
}
.btnRefused:hover {
    cursor: pointer;
    color: #fff;
    background: #d63031;
    transition: 0.3s;
}
.btnRed {
    background: #d63031;
    color: #fff;
    font-weight: 500;
    border: 1px solid #d63031;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
    transition: 0.3s;
}
.btnRed:hover {
    transition: 0.3s;
    cursor: pointer;
    background: transparent;
    color: #d63031;
}

.btnRemove {
    border: none;
    background: #d63031;
    color: #fff;
    font-weight: 500;
    border-radius: 60px;
    font-size: 0.8em;
    border: 1px solid #d63031;
    transition: 0.3s;
}
.btnRemove:hover {
    background: transparent;
    color: #d63031;
    cursor: pointer;
    transition: 0.3s;
}
.btnSup {
    border: none;
    background: transparent;
    color: #d63031;
    padding: 2px 10px;
    border: 1px solid #d63031;
    transition: 0.3s;
}
.btnSup:hover {
    background: #d63031;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}
.btnGestion {
    border: none;
    background: transparent;
    color: #4b00ff;
    padding: 2px 10px;    
    border: 1px solid #4b00ff;
    transition: 0.3s;
}
.btnGestion:hover{
    background: #4b00ff;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

/* BOUTON */

/* MARGIN*/
.margin_tb_20{
    margin:20px 0;
}

/* MARGIN*/

/* WIDTH */
.min_width_300_px {
    min-width: 300px;
}
.width_100 {
    width: 100%;
}
.width_90 {
    width: 90%;
}
.width_45 {
    width: 45%;
}
.width_50 {
    width: 50%;
}
.width_20 {
    width: 20%;
}
.width_35 {
    width: 35%;
}
/* WIDTH */

/* TITRE */
.titreNormal {
    font-weight: 500;
    font-size: 1.6em;
    color: #2d3436;
}
/* TITRE */

/* TEXTE */
.centered {
    text-align: center;
}
.txtLeft {
    text-align: left;
}
.txtRight {
    text-align: right;
}
.txtGreen {
    color: #00e1a0;
}
.txtPurple {
    color: #4b00ff;
}
.txtGrey {
    color: #3B4351;
}
.txtRed {
    color: #d63031;
}
/* TEXTE */

/* FORMULAIRE INFO PERSO */
.labelForm {
    padding-top: 10px;
    padding-bottom: 5px;
}
.inputSelect, .inputText, .inputTextarea {
    background: #fff;
    border: 1px solid #A0A0A5;
    padding: 10px;
    border-radius: 4px;
}
.noresize {
    resize: none;
}
.importAvatar {
    border: none;
    color: #fff;
    background: #4b00ff;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    text-align: center;
}
.importAvatar:hover {
    cursor: pointer;
}

.btnCross {
    color: #fff;
    font-weight: 500;
    background: none;
    border: none;
    display: inline-block;
}
.btnCross:hover {
    cursor: pointer;
}
/* FORMULAIRE INFO PERSO */

/* UTILES */
.marginAuto {
    margin: 0 auto;
}
.margin_auto {
    margin:auto;
}
.inputNone {
    display: none;
}

.centeredElement {
    width: 100%;
    text-align: center;
}

.stickyTop {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

.marginCenter {
    margin: 0 auto;
}
/* UTILES */