Poster un message: CSS

/* - - - - - -
------ POSTER UN MESSAGE (SUJET/MESSAGE/MP) - JEI
--- Merci de me créditer ! C'était un travail assez titanesque, je ne demande
--- que la mention de mon pseudo en guise de remerciement <3
--- ^^^ et vous pouvez enlever ces 4 lignes si vous voulez gagner un peu de place ~
- - - - - - */

/* - - - BLOCK REGROUPANT LA QUASI-INTÉGRALITÉ DU TEMPLATE POSTING_BODY - - - */
.pf_container {
    padding-top: 10px;
}

.pf_container input, .pf_container select {
    outline: 0;
    border: 0;
}

/* - - */
/* - - - BLOCK .PF_MSG, QUI REGROUPE LES DONNÉES DU SUJET/MESSAGE - - - */
.pf_msg {
    margin-top: 2.5%;
}

.pf_msg[post_type="Titre du message"] .pf_subject_colors, .pf_msg[post_type="Titre du message"] .pf_subject, .pf_msg[post_type="Titre du message"] .pf_posticons, {
    display: none !important;
}

.pf_msg[post_type="Titre du message"] {
    margin-top: 0;
}

.pf_msg[post_type="Titre du message"]::before {
    content: "Poster une réponse";
    font-family: "Krub";
    display: block;
    margin: 5px 0 20px 15px;
    font-weight: 600;
    background-image: url(https://i.imgur.com/iITm6Dg.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px auto;
    padding-left: 28px;
    color: #394247;
}

/* - - */
/* - - - TITRE DU SUJET, DESCRIPTION (SI ACTIVÉE) & CHOIX DE LA COULEUR (IDEM) - - - */
.pf_subject {
    box-sizing: border-box;
    width: 75%;
    text-align: left;
    margin: 1% 0 .25% 0;
    display: inline-block;
}

.pf_subject > * {
    display: inline-block;
}

.pf_subject_titleinput input.post, .pf_subject_desc input.post {
    width: 100% !important;
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    padding: 0 10px 0 65px;
    font-size: 16px;
    border: 1px solid #f4f4f4;
    box-shadow: 3px 3px 3px 0px #f0f0f040;
    font-family: "Krub";
    font-weight: 600;
}

.pf_subject_colors > select[name="topic_color"] {
    border: 1px solid white;
    height: 60px;
    background-color: #e6e6e6;
    padding: 0 0 0 5px;
    margin-left: 0 !important;
    width: 100%;
}

.pf_subject_desc input.post {
    height: 40px;
    font-size: 11px;
}

.pf_subject_desc input.post::placeholder {
    color: ##979797;
}

.pf_subject_titleinput {
    width: 100%;
}

.pf_subject_titleinput, .pf_subject_desc {
    position: relative;
}

.pf_subject_titleinput::before {
    content: "\f2b6";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    top: 35%;
    font-weight: 600;
    left: 30px;
    position: absolute;
    font-size: 13pt;
    opacity: .3;
}

.pf_subject_colors {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    height: 60px;
    position: relative;
    top: -1px;
}

.pf_subject_desc {
    width: 85%;
    box-sizing: border-box;
    text-align: left;
    display: inline-block;
}

.pf_subject_desc::before {
    content: "\f5b7";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    top: 25%;
    font-weight: 600;
    left: 28px;
    position: absolute;
    font-size: 13pt;
    opacity: .3;
}

/* - - */
/* - - - ICÔNES ET TYPE DE SUJET - - - */
.pf_posticons {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 10px;
    margin-bottom: 15px;
}

.pf_posticons_title {
    display: inline-block;
    position: relative;
    padding: 5px 10px 5px 55px;
    color: #6f6f6f;
    font-family: "Krub";
    font-weight: 700;
    font-size: 13px;
    top: -2px;
}

.pf_posticons_title::before {
    content: "\f86d";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    top: 4px;
    font-weight: 600;
    left: 25px;
    position: absolute;
    font-size: 13pt;
    opacity: .5;
}

label.post-icons-radio {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    transition: all .25s ease;
    margin: 0 .5%;
    font-size: 0;
}

label.post-icons-radio[id="0"] {
    width: 21px;
    font-size: 0;
    height: 23px;
    padding-bottom: 25px !important;
}

label.post-icons-radio input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer;
    z-index: 3;
}

.post-icons-radio span {
    width: 100%;
    height: 100%;
    display: inline-block;
}

label.post-icons-radio input[id="post_icon_0"] + span {
    font-size: 0;
    position: relative;
}

label.post-icons-radio input[id="post_icon_0"] + span::before {
    position: absolute;
    content: "\f410";
    font-family: "Font Awesome 5 Free";
    font-size: 23px;
    color: #6a6a6a;
    left: 0;
    top: -2px;
    width: 100%;
    height: auto;
}

label.post-icons-radio.s-ico span img {
    opacity: 1;
}

label.post-icons-radio span img {
    opacity: .6;
}

label.post-icons-radio.s-ico input[id="post_icon_0"] + span::before {
    font-weight: 600;
}

label.post-icons-radio input[id="post_icon_0"] + span {
    font-size: 0;
    position: relative;
}

label.post-icons-radio.s-ico {
    border-bottom: 1px solid #3e5560;
    padding-bottom: 3px;
    border-radius: 2px;
}

.post-icons-radio input[checked="checked"] + span {
    opacity: 1;
}

/* - - */
/* - - - FIL D'ARIANNE (Forum > Catégorie > Sous-forum > (... > ) Sujet - - - */
.pf_nav {
    font-size: 0;
    margin: 30px .75% 0 .75%;
}

.pf_nav * {
    vertical-align: middle;
}

.pf_nav h1 {
    display: inline-block;
}

.pf_nav h1 a {
    margin: 0 10px 0 8px;
    font-size: 12px;
    vertical-align: top;
    font-family: "Krub";
    font-weight: 600;
}

.pf_nav h1:not(:last-of-type)::after {
    content: "\f0da";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 11pt;
    color: #324148;
    opacity: .4;
}

/* - - */
/* - - - PRÉVISUALISATION DU MESSAGE, LES ERREURS & LIMITE DE NIVEAUX DE CITATIONS - - - */
.pf_prvcont {
    box-shadow: 0 0 10px 1px #0F0F0F07;
}

.pf_previewbox {
    background-color: white;
    box-sizing: border-box;
    padding: 1.5% 2% 1.5% 2%;
    min-height: 100px;
    position: relative;
    margin: 2.5% 0;
}

.pf_preview_grp {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #666f742e;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.pf_preview_title {
    font-family: "Krub", Roboto;
    font-size: 15px;
    text-transform: uppercase;
    color: #666f74;
    font-weight: 600;
    box-sizing: border-box;
    display: inline-block;
}

.pf_preview_details {
    font-family: Roboto;
    text-transform: uppercase;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #666f74;
    font-size: 10px;
    font-weight: 500;
}

.pf_preview_details i {
    font-size: 11px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.pf_preview_postbody {
    margin-top: 6px;
    font-size: 13px;
    color: #232323;
    font-family: Roboto;
}

.pf_errorbox {
    position: relative;
}

.pf_errorbox:empty {
    display: none;
}

.pf_errorbox::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 14pt;
    margin-left: 15px;
    margin-bottom: 15px;
    margin-top: 5px;
    color: #cc4d4d;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 10px;
}

.pf_errorbox::after {
    content: "Erreur";
    font-size: 13pt;
    font-family: "Krub";
    margin-left: 15px;
    margin-bottom: 15px;
    font-weight: 600;
    margin-top: 5px;
    color: #394247;
    top: 9px;
    left: 47px;
    position: absolute;
}

.pf_errorbox * {
    all: unset;
}

/* on remet tous les enfants de .pf_errorbox à zéro niveau css */
.pf_errorbox td {
    background-color: transparent;
}

.pf_errorbox table.forumline {
    display: block;
    width: 100%;
    height: 150px;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 75px;
    text-align: center;
    position: relative;
}

.pf_errorbox span.gen {
    color: #353535;
    font-size: 15px;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
}

.pf_lquotelimite {
    display: block;
    width: 100%;
    background-color: #f1eade;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    color: #353535;
    font-size: 15px;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    background-image: linear-gradient(0deg, #B5AB9915, transparent);
    padding: 3% 0;
}

.pf_lquotelimite::before {
    content: "\f10e";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    color: #b5ab99;
    font-size: 12pt;
    right: 1.5%;
    bottom: 10%;
}

/* - - */
/* - - - ÉDITEUR DE MESSAGE (SCEDITOR) - - - */
.pf_msg .sceditor-button div, div.sceditor-grip {
    background-image: url(https://i.imgur.com/AgNRpOH.png) !important;
}

.pf_msg .sceditor-container {
    background-color: white !important;
}

.pf_msg div.sceditor-toolbar {
    text-align: center;
    background: #ececec !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 1px;
    box-sizing: border-box;
}

.pf_msg div.sceditor-group {
    background-color: transparent !important;
    border: none;
}

.pf_msg .sceditor-button.active, .pf_msg .sceditor-button:active {
    background-color: #FFFFFF75;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    transition: all .25s ease;
}

.pf_msg .sceditor-button.active::before, .sceditor-button:active::before {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #172830;
}

.pf_msg a.sceditor-button {
    position: relative;
    opacity: .8;
    transition: all .25s ease;
}

.pf_msg .sceditor-container > iframe, .pf_msg .sceditor-container > textarea {
    padding: 1%;
    margin-bottom: 30px;
}

.pf_msg .sceditor-container > textarea {
    box-shadow: none;
}

.pf_msg .sceditor-button-giphy div {
    background-image: url(https://2img.net/i//fa/icon_gif.png) !important;
}

/* - - */
/* - - - BOUTONS ENVOYER, PRÉVISUALISER, LANCER DE DÉS & BROUILLON - - - */
.pf_postbuttons {
    box-sizing: border-box;
    padding: 2% 0;
    text-align: left;
}

.pf_postbuttons > div {
    font-size: 15px;
    font-family: "Krub";
    font-weight: 500;
    box-sizing: border-box;
    padding: .5% 1%;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    opacity: .75;
    margin: 0 .7%;
    transition: all .25s ease;
    color: #303030;
    display: inline-block !important;
}

.pf_postbuttons > div::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
}

.pf_postbuttons .pf_pb_submit {
    float: right;
    background-color: #0d202b;
    font-size: 15px !important;
    color: white !important;
}

.pf_postbuttons .pf_pb_draft {
    background-color: #c3c9cc;
}

.pf_postbuttons .pf_pb_preview {
    background-color: #7897a7;
    color: #ededed;
}

.pf_postbuttons .pf_pb_dices {
    background-color: #8a7190;
    color: white;
}

.pf_postbuttons > div:hover {
    opacity: 1 !important;
    transition: all .25s ease;
}

.pf_postbuttons > div input {
    font-size: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.pf_pb_draft::before {
    content: "\f0c7";
}

.pf_pb_preview::before {
    content: "\f06e";
}

.pf_pb_submit::before {
    content: "\f1d8";
}

.pf_pb_dices::before {
    content: "\f522";
}

/* - - */
/* - - - SMILEYS - - - */
/* WARNING-2 */
.pf_smilies_bo {
    position: fixed;
    left: 0;
    top: 0;
    opacity: .25;
    background-color: black;
    width: 100%;
    height: 100%;
    z-index: 999;
}

div#smileyContainer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    max-height: 40vh;
    background-color: #eaeaea;
    box-sizing: border-box;
    width: 100%;
}

div#smileyContainer, .pf_smilies_bo {
    display: none;
}

#pf_smilies iframe[name="smilies"] {
    max-height: 30vh;
    width: 100%;
    border-spacing: 0 !important;
}

body#sce_smilies_body tr td.row1 {
    padding: 1% 1.5%;
}

#sceditor_smilies body#sce_smilies_body {
    width: 100%;
    height: 100%;
}

html#sceditor_smilies {
    height: 100%;
}

body #sceditor_smilies #smilies_header {
    background-image: none;
    background-color: red;
}

#sceditor_smilies #smilies_header {
    background-color: #dadada;
    background-image: none;
    height: auto;
    padding: 1% 1%;
    text-align: right;
}

#smilies_header select {
    padding: 3px 5px;
    font-family: "Krub";
    font-weight: 600;
    border: 1px solid #DADADA;
    font-size: 9pt;
}

#sceditor_smilies table td.row1 > img {
    opacity: .7;
    transition: all .4s ease;
}

#sceditor_smilies table td.row1 > img:hover {
    opacity: 1;
    transition: all .4s ease;
    cursor: pointer;
}

span.pf_showsmilies {
    margin: 1% 1% 1% 1.5%;
    display: block;
    background-color: #bdbdbd;
    width: fit-content;
    box-sizing: border-box;
    padding: 5px 8px 5px 8px;
    font-family: "Krub";
    cursor: pointer;
    opacity: .75;
    transition: all .25s ease;
}

span.pf_showsmilies:hover {
    opacity: 1;
    transition: all .25s ease;
}

span.pf_showsmilies {
    margin: 1% 1% 1% 1.5%;
    display: block;
    background-color: #bdbdbd;
    width: fit-content;
    box-sizing: border-box;
    padding: 6px 8px 5px 8px;
    font-family: "Krub";
    cursor: pointer;
    opacity: .75;
    transition: all .25s ease;
    color: #292929;
}

span.pf_showsmilies::before {
    content: "";
    display: inline-block;
    margin-right: 6px;
    width: 16px;
    height: 16px;
    background-image: url(https://i.imgur.com/la89Cx6.png);
    background-size: 100% auto;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

span.pf_showsmilies:hover::before {
    background-image: url(https://i.imgur.com/AVfTfVJ.png);
}

/* - - */
/* - - - RAISON DE L'EDIT DU MESSAGE - - - */
.pf_editreason {
    background-color: #d9d9d9;
    box-sizing: border-box;
    padding: 1% 2%;
}

.pf_editreason_title {
    display: inline-block;
    margin-right: 10px;
    font-family: "Krub", Roboto;
    font-size: 11pt;
    font-weight: 600;
}

.pf_editreason_input {
    display: inline-block;
}

.pf_editreason_input input {
    font-size: 12px;
    padding: 1px 3px;
    min-width: 250px;
}

/* - - */
/* - - - LANCERS DE DÉS - - - */
.pf_bot_bo {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .25;
}

.pf_rolldice {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: auto;
    background-color: #e4e4e4;
    z-index: 10000;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 17px 0px #30303050;
}

.pf_rolldice_title {
    margin: 3% 5% 2% 5%;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #3c535e;
    padding: 0 0 3% 0;
    cursor: default;
    border-bottom: 1px solid #30303026;
}

.pf_rolldice_content {
    padding: 7.5%;
}

.pf_rolldice_title::before {
    content: "\f522";
    font-family: "Font Awesome 5 Free";
    color: #556167;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .45;
}

dice {
    display: block;
    box-sizing: border-box;
    margin: 15px 0;
}

.pf_dice_id {
    float: left;
    font-size: 22pt;
    font-family: sans-serif;
    margin-right: 8%;
}

.pf_dice_name {
    font-size: 13px;
    font-family: sans-serif;
    display: inline-block;
    margin-right: 3%;
}

span.pf_dice_nbr {
    font-size: 13px;
    font-family: sans-serif;
    display: inline-block;
    margin-right: 3%;
}

span#dice_to_del {
    display: block;
    margin-top: 10px;
    background-color: #1f5f7d;
    border-radius: 3px;
    text-align: center;
    padding: 5px 0;
    opacity: .75;
    transition: all .25s ease;
}

span#dice_to_del:hover {
    opacity: 1;
    transition: all .25s ease;
}

span#dice_to_del i {
    color: white;
    font-size: 13pt;
}

span#dice_to_del i::after {
    content: "Ajouter un lancer";
    font-size: 12px;
    position: relative;
    top: -2px;
    margin-left: 7px;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
}

/* - - - PIÈCES JOINTES - - - */
.pf_attchfj {
    display: block;
    background-color: #eaeaea;
    box-sizing: border-box;
    padding: 2% 3%;
    border-radius: 6px;
    position: relative;
    background-image: linear-gradient(45deg, #98989836, transparent);
    text-align: justify;
}

.pf_attchfj_title {
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
    cursor: default;
    margin-bottom: 2%;
}

.pf_attchfj_title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
    content: "\f0c6";
}

.pf_attchfjE {
    background-color: #B4B4B4;
    box-sizing: border-box;
    width: 27%;
    display: inline-block;
    vertical-align: top;
    margin: 0 2% 1% 2%;
    padding: 1%;
    position: relative;
    box-shadow: 0px 0px 7px 1px #77777733;
}

input.pf_attchfjE_delete {
    all: initial;
    font-size: 0;
    display: block;
    width: 13px;
    height: 13px;
    background-image: url('https://i.imgur.com/0escbfQ.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
}

.pf_attchfjE_name {
    font-family: "Krub", Roboto, sans-serif;
    font-size: 11pt;
    font-weight: 500;
    color: #343434;
    max-width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    transition: all .25s ease;
}

.pf_attchfjE_name:hover {
    max-width: unset !important;
    white-space: nowrap;
    background-color: #B4B4B4;
    overflow: visible !important;
    text-overflow: initial;
    width: fit-content;
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 5px 1px #30303040;
    padding: 0 5px;
    color: #212121;
    transition: all .25s ease;
}

.pf_attchfjE_comment_lang {
    font-size: 9pt;
    text-align: left;
    margin: 10px 0 5px 2px;
}

.pf_attchfjE_comment input.post {
    all: initial;
    background-color: #FFFFFF60;
    width: 100% !important;
    box-sizing: border-box;
    padding: 1px 5px;
    font-size: 14px;
    font-family: "Krub";
}

.pf_attchfjE_comment input.post::placeholder {
    font-size: 13px;
    color: #00000078;
}

.pf_attchBlock {
    display: inline-block;
    background-color: #dedede;
    box-sizing: border-box;
    padding: 2% 3%;
    border-radius: 4px;
    position: relative;
    background-image: linear-gradient(45deg, #98989836, transparent);
    text-align: justify;
    width: 50%;
    vertical-align: top;
    min-height: 355px;
}

.pf_attchBlock_title {
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
    cursor: default;
    margin-bottom: 15px;
}

.pf_attchBlock_title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
    content: "\f0fe";
}

.pf_attchBlock_help_content {
    font-family: "Krub", Robot, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1e1e1e;
}

.pf_attchBlock_help_extlist {
    font-size: 12px;
    padding: 1%;
    background-color: #e4e4e4;
    margin: 1% 0;
}

.pf_attchBlock_upload {
    font-size: 14px;
    padding: 50px 2% 2% 2%;
    background-color: #cdcdcd;
    margin: 1% 0;
    position: relative;
}

.pf_attchBlock_upload input[type="submit"] {
    margin-left: 1.5%;
}

.pf_attchBlock_filename {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
}

.pf_attchBlock_comment {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    margin-top: 5px;
}

.pf_attchBlock_upload input#filecomment {
    display: inline-block;
    width: auto !important;
    min-width: 150px;
}

.pf_attchBlock_help {
    padding-left: 85px;
    position: relative;
}

.pf_attchBlock_help::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    left: 10px;
    top: 22%;
    font-size: 50px;
    color: #1f5f7d;
}

.pf_attchBlock_maxsize {
    font-size: 12px;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 600;
    position: absolute;
    left: 2%;
    top: 12px;
    color: #fafafa;
    background-color: #1f5f7d;
    padding: 5px 10px;
    border-radius: 6px;
}

/* - - - OPTIONS MESSAGE - - - */
.pf_options_ss {
    background-color: #efefef;
    box-sizing: border-box;
    padding: 2% 2% 2% 3%;
    display: inline-block;
    width: 100%;
    min-height: 325px;
}

.pf_options_ss_title {
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
    cursor: default;
    margin-bottom: 15px;
}

.pf_options_ss_title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
    content: "\f013";
}

.pf_options_status {
    margin-bottom: 2%;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 10pt;
    display: inline-block;
    vertical-align: top;
}

.pf_options_settings {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 2%;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 9pt;
    margin-right: 10%;
}

.pf_options_settings input {
    margin-left: 0;
    margin-right: 8px;
    position: relative;
    top: 1px;
}

.pf_options_status_title, .pf_options_settings_title {
    display: block;
    font-size: 12pt;
    font-weight: 600;
    color: #3e4b54;
    position: relative;
    left: -8px;
}

.pf_options_sett span {
    color: #242424;
}

/* - - - TYPE/IMPORTANCE DE SUJET - - - */

.pf_options_stype {
    font-size: 0;
    padding: 0 0 0 10px;
}

.pf_options_stype:empty {
    display: none;
}

.pf_options_stype::before {
    content: "Type de sujet: ";
    background-image: url(https://i.imgur.com/KlXIjuF.png);
    background-repeat: no-repeat;
    background-size: 18px auto;
    margin: 3px 5px 18px 24px;
    display: inline-block;
    position: relative;
    padding: 5px 10px 5px 31px;
    color: #6f6f6f;
    font-family: "Krub";
    font-weight: 700;
    font-size: 13px;
    top: -2px;
}

.pf_options_stype label {
    font-size: 12px;
    position: relative;
    top: -2px;
    margin: 0 10px 0 0;
    opacity: .6;
    padding: 3px 10px 3px 6px;
    border-radius: 4px;
}

.pf_options_stype label input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer;
    z-index: 3;
}

label.stype_chosen {
    opacity: 1;
    font-weight: 600;
}

label.stype_chosen[data-label=" Note"] {
    background-color: grey;
    color: white;
}

label.stype_chosen[data-label=" Annonce"] {
    background-color: #1f5f7d;
    color: white;
}

label.stype_chosen[data-label=" Annonce globale"] {
    background-color: #0d202b;
    color: white;
}

/* - - - RÉCAP DES ANCIENS MESSAGES (PREVIEWBOX) - - - */
.pf_tprevbox {
    position: relative;
    padding: 2%;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #00000015;
    margin-bottom: 5vh;
    margin-top: 2%;
}

.pf_tprevbox_title {
    display: block;
    font-size: 16pt;
    font-family: "Krub";
    margin-left: 15px;
    margin-bottom: 15px;
    font-weight: 600;
    margin-top: 5px;
    color: #394247;
}

.pf_tprevbox_title::before {
    content: "\f00b";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #C5C7C8;
    margin-right: 10px;
}

.pf_tprevbox_row {
    margin: 1% 0;
    border-bottom: 1px solid #e0e0e0;
    padding: 1% 2%;
    font-family: "Krub", Roboto, sans-serif;
}

.pf_tprevbox_user {
    display: inline-block;
    vertical-align: middle;
}

.pf_tprevbox_date {
    display: inline-block;
    color: #272727;
    margin-left: 10px;
    font-size: 14px;
    vertical-align: middle;
}

.pf_tprevbox_post {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
}

/* - - - PRÉVISUALISATION DU MESSAGE - - - */
.pf_previewbox_title::before {
    content: "\f06e";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #C5C7C8;
    margin-right: 10px;
}

.pf_previewbox_title {
    display: block;
    font-size: 16pt;
    font-family: "Krub";
    margin-left: 15px;
    margin-bottom: 15px;
    font-weight: 600;
    margin-top: 5px;
    color: #394247;
}

.pf_previewbox .pf_postbody .postbody {
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.pf_previewbox:empty {
    display: none !important;
}

/* - - - RÈGLES DE SOUS-FORUM - - - */
.pf_rules {
    top: 70vh;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 20vh;
    z-index: 50;
    background-color: #2975ff;
    width: 3%;
    overflow: hidden;
    height: 10%;
    padding: 1%;
    opacity: .62;
    transition: width .4s ease, height .4s ease, box-shadow .4s ease;
}

.pf_rules::before {
    content: "\f129";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #e6e6e6;
    font-size: 16pt;
    text-align: center;
    display: block;
    cursor: pointer;
    transform: translateY(75%);
}

.pf_rules_text {
    display: none;
    margin-bottom: 2%;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 600;
    font-size: 10pt;
    color: #333;
    box-sizing: border-box;
    padding: 2%;
}

.pf_rules_title {
    display: none;
    background-color: whitesmoke;
    padding: 1% 3%;
    margin-bottom: 1.5%;
    box-sizing: border-box;
    font-size: 13pt;
    text-transform: uppercase;
    letter-spacing: .5pt;
    font-weight: 500;
    font-family: "Krub", Roboto, sans-serif;
}

.pf_rules_title::before {
    content: "\f129";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 2%;
    color: #e9541d;
    font-size: 16pt;
}

.pf_rules:hover {
    width: 60vw;
    height: 26vh;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0px 0px 8px 6px #30303010;
    animation: lSoverflow .5s linear 1;
    animation-fill-mode: forwards;
}

.pf_rules:hover::before {
    display: none;
}

.pf_rules:hover .pf_rules_title, .pf_rules:hover .pf_rules_text {
    display: block;
}

@lSoverflow {
    /* - keyframes d'ouverture des règles au passage de la souris - */
    0% {
        /* */
    }

    99% {
        /* */
    }

    100% {
        overflow: auto !important;
    }
}

/* ^^^ on ajoute un scroll horizontal si nécessaire à la fin de l'animation */
/* - - */
/* - - - CALENDRIER - - - */
.pf_calendar {
    background-color: #e3e3e4;
    box-sizing: border-box;
    padding: 2% 2% 2% 3%;
    display: inline-block;
    width: 100%;
    margin-top: 1%;
}

.pf_calendar_title {
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
    cursor: default;
    margin-bottom: 15px;
}

.pf_calendar_title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
    content: "\f073";
}

.pf_calendar_date, .pf_calendar_time, .pf_calendar_duration {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 2%;
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 9pt;
    margin-right: 2%;
    width: 30%;
}

.pf_calendar_date_title, .pf_calendar_time_title, .pf_calendar_duration_title {
    display: block;
    font-size: 12pt;
    font-weight: 600;
    color: #3e4b54;
    position: relative;
    left: -8px;
    margin-bottom: 8px;
}

.pf_calendar_date_pick, .pf_calendar_time_pick, .pf_calendar_duration_pick {
    font-size: 13px;
}

.pf_calendar_time_pick input, .pf_calendar_duration_pick input {
    margin-right: 3px;
}

.pf_calendar_date_pick select {
    border: 1px solid #aeaeae;
}

.pf_calendar_date > a {
    color: #40689a !important;
    display: block;
    margin-top: 5px;
    font-weight: 600 !important;
    font-size: 13px;
}

.pf_calendar_date > a::before {
    content: "\f0a4";
    font-family: "Font Awesome 5 Free";
    margin-right: 5px;
    opacity: .85;
}

/* - - - SONDAGE - - - */
.pf_poll {
    background-color: #f4f4f4;
    box-sizing: border-box;
    padding: 2% 2% 2% 3%;
    display: inline-block;
    width: 100%;
    margin: 1% 0 2% 0;
}

.pf_poll_title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    opacity: .35;
    content: "\f681";
}

.pf_poll_title {
    font-family: "Krub", Roboto, sans-serif;
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
    cursor: default;
    margin-bottom: 15px;
}

.pf_poll_question {
    display: block;
    margin: 1% 0;
}

.pf_poll_question input {
    padding: 1%;
    font-size: 12pt;
    font-family: "Krub", sans-serif;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-weight: 600;
    color: #373737;
    box-shadow: 0px 0px 8px 2px #dedede;
}

.pf_poll_question input::placeholder {
    color: #555;
    font-weight: 400;
}

.pf_poll_content {
    text-align: center;
}

.pf_poll_options {
    text-align: left;
}

.pf_poll_options_title {
    display: block;
    font-size: 12pt;
    font-weight: 600;
    color: #3e4b54;
    text-align: left;
    position: relative;
    left: -8px;
    margin-bottom: 8px;
    margin-top: 2%;
}

.pf_poll_options_pick {
    display: inline-block;
    width: 65%;
}

.pf_poll_options_pick textarea {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #aeaeae;
    min-height: 100px;
    margin-bottom: 2%;
    padding: 1%;
    color: #141414;
    font-size: 12px;
    outline: none;
}

.pf_poll_options_explain {
    display: inline-block;
    width: 33%;
    font-family: "Krub", sans-serif;
    font-size: 15px;
    font-weight: 500;
    vertical-align: top;
    padding: 1% 0 0 2%;
    box-sizing: border-box;
}

.pf_poll_options_explain::before {
    content: "\f059";
    font-family: "Font Awesome 5 Free";
    margin-right: 2%;
    font-size: 16px;
    color: #2563ae;
}

.pf_poll_options_explain br {
    display: none;
}

.pf_poll_duration, .pf_poll_multiple, .pf_poll_cancel {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

.pf_poll_duration_title, .pf_poll_multiple_title, .pf_poll_cancel_title {
    display: block;
    font-size: 10pt;
    font-weight: 600;
    color: #3e4b54;
    position: relative;
    left: -8px;
    margin-bottom: 8px;
}

.pf_poll_duration_pick, .pf_poll_multiple_pick, .pf_poll_cancel_pick {
    font-size: 9pt;
    color: #161616;
}

.pf_poll_duration_pick input {
    border: 1px solid #858585;
}

.pf_poll_duration_explain {
    color: #434343;
    padding-top: 5px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 12px;
}

/* - - */
/* - - - MESSAGES PRIVÉS - - - */
.pf_msg_privmp_un_title {
    font-family: "Krub", Robot, sans-serif;
    font-size: 12pt;
    font-weight: 600;
    margin-bottom: 5px;
}

.pf_msg_privmp_un_title::before {
    content: "\f007";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    font-weight: 600;
    font-size: 13pt;
    opacity: .5;
    margin-right: 10px;
}

.pf_msg_privmp_un_title::after {
    content: ": ";
}

.pf_msg_privmp_selectD {
    text-align: center;
    margin-top: 10px;
    background-color: #ffffff95;
    padding: 2% 0;
}

.pf_msg_privmp_sgrp_title {
    font-family: "Krub", Roboto, sans-serif;
    font-size: 12pt;
    font-weight: 600;
    margin-bottom: 5px;
}

.pf_msg_privmp_sgrp_title::before {
    content: "\f0c0";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    font-weight: 600;
    font-size: 13pt;
    opacity: .5;
    margin-right: 10px;
}

.pf_msg_privmp_sgrp_title::after {
    content: ": ";
}

.pf_msg_privmp_un div#add_username {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.pf_msg_privmp_un input#find_user {
    margin-top: 7px;
    cursor: pointer;
}

.pf_msg_privmp_un input {
    border: 1px solid #e4e4e4;
    padding: 1%;
}

.pf_msg_privmp_sgrp_switch select {
    font-size: 10pt;
    padding: 5px;
    border: 1px solid #e4e4e4;
    margin-right: 5px;
}

.pf_msg_privmp_sgrp {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.pf_msg_privmp_un {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

/* - - - DESTINATAIRE/NOM D'UTILISATEUR (MP/INVITÉS) - - - */
.pf_msg_destin span {
    font-family: "Krub", Roboto, sans-serif;
    vertical-align: middle;
    font-size: 12pt;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    display: block;
}

.pf_msg_destin input {
    background-color: #d9d9d9;
    color: #303030;
    padding: 5px 5px;
    vertical-align: middle;
    font-size: 13px;
}

.pf_msg_destin {
    padding: 2% 10px;
    box-sizing: border-box;
    text-align: center;
}

.pf_msg_destin span::before {
    content: "\f007";
    font-family: 'Font Awesome 5 Free';
    color: #3c4246;
    font-weight: 600;
    font-size: 13pt;
    opacity: .5;
    margin-right: 10px;
}

.pf_msg_destin span::after {
    content: "* : ";
    margin-right: 5px;
    margin-left: 5px;
}

/* - - */

/* - - - MODAL DE RECHERCHE D'UTILISATEUR (MESSAGES PRIVÉS) - - - */
div#find_username {
    background-color: transparent;
    border: none;
    opacity: 1 !important;
}

div#find_username table.forumline {
    border: none;
}

div#find_username th.thHead {
    background-color: #6a6a6a;
    background-image: none;
    color: white;
}

div#find_username td.row1 {
    text-align: center;
}

div#find_username input#search_username {
    border: 1px solid #f4f4f4;
    box-shadow: 3px 3px 3px 0px #f0f0f040;
    outline: none !important;
    padding: 4px;
}

div#find_username input#search {
    background-color: #7897a7;
    color: white;
    border: none;
    padding: 4px;
}

div#find_username input#jqmHide {
    background-color: #0d202b;
    color: white;
    border: none;
    padding: 4px;
}

/* - - */

/* - - - LES CODES CONDITIONNELS
--- il est conseillé de ne pas y toucher pour avoir un affichage correct du template - - - */
/* - css permettant de modifier la mise en page du titre du sujet/desc./couleur
--- si la fonction de description est activée ou non - */
.pf_desc_allowed + .pf_subject {
    display: block;
    width: 100%;
}

.pf_subject_desc + .pf_subject_colors {
    position: unset;
    width: 15%;
}

.pf_subject_desc + .pf_subject_colors select[name="topic_color"] {
    height: 40px;
}

.pf_subject + .pf_posticons {
    margin-top: 15px;
}

/* - - */
/* - si l'utilisateur est sur la page d'envoi d'un MP: allonger le champ de saisie du titre - */
.pf_msg_privmp_fw + .pf_subject {
    width: 100%;
}

/* - - */
/* - change l'intitulé "Paramètres du forum" en "Paramètres des messages privés" en mode message privé - */
.pf_options_status_fw + .pf_options_status_title {
    font-size: 0;
}

.pf_options_status_fw + .pf_options_status_title::before {
    content: "Paramètres des messages privés";
    font-size: 12pt;
}

/* - - */
/* - on retire le champ de saisie du titre du message, le choix de la couleur
--- du titre du message et les icônes si on est en train de poster une réponse - */
.pf_msg[post_type="Titre du message"] .pf_subject, .pf_msg[post_type="Titre du message"] .pf_subject_colors, .pf_msg[post_type="Titre du message"] .pf_posticons {
    display: none !important;
}

/* - - */
/* - on compacte les options si l'utilisateur peut
--- ajouter des fichiers joints - */
.pf_attchY_fw + .pf_options_ss {
    width: 48%;
    margin-right: 2%;
    min-height: 355px;
}

.pf_attchY_fw2 + .pf_options_status {
    display: block;
    margin-top: 20px;
}

/* - - */

/* - on ajoute un margin au tout dernier block du code pour espacer - */
.pf_msg > div:last-of-type {
    margin-bottom: 30px;
}

/* - - */
/* - - - - - - - - - - - - */