/* ****************************************************************************** */
/* ********************** COMMENTAIRES ****************************************** */
/* ****************************************************************************** */
/* Styles principaux */

/* Groupe principal */
.fComments { padding: 20px 0 0; margin: 0; clear: both; }
.fComments > .fCommentGroup, .fComments > .fCommentGroupDiv { padding: 0; }
.fComments.fCommentsNoAvatars .fCommentAvatarWrapper { display: none !important; }
.fCommentsActionsWrapper { border: 1px solid #e7e7e7; border-left: none; border-right: none; padding: 0 10px; margin-bottom: 15px; }
.fCommentsActions { margin: 15px 0; }
.fCommentsActions .nbcoms:not(:empty) { display: inline-block;vertical-align: middle;margin: 0 5px 0 0 ;color: initial; }
.fCommentGroup { clear: both; padding-left: 58px; list-style: none; }
.fComments > .fCommentGroup .fCommentGroup { padding-left: 58px; }
.fComments > .fCommentForms { padding-left: 0; }
.fComments .fCommentGroupDiv > .fCommentGroup { padding: 0; margin: 0; }
.fComments > .fCommentGroupDiv .fCommentGroupDiv { margin-left: 0; }

/* Groupe de commentaires */
.fComment { list-style: none; }
.fCommentBody { padding: 5px; -moz-transition: background 450ms ease; -webkit-transition: background 450ms ease; -o-transition: background 450ms ease; transition: background 450ms ease; }
.fCommentBody.media { display: initial; }
.fComment > .fCommentGroup,.fComment > .fCommentGroupDiv { padding-top: 15px; }
.fCommentActions { font-size: 0.8em; color: #B7B7B7;display: inline-block; }
.fCommentActions > a, .fCommentActions > span, .fCommentActions > span > a, .fCommentActions > span > span { display: inline-block; vertical-align: middle; margin-left: 6px; margin-right: 6px; text-decoration: none; }
.fCommentActions a:hover { text-decoration: none; }
.fCommentActions :first-child { margin-left: 0; }
.fCommentActions :last-child { margin-right: 0; }
.fComments .fCommentsActionsWrapper .fCommentsActions .btn-default.btnsmiley, .fComments .fCommentActions .btn-default.btnsmiley  { background-image: var(--bg-ico) !important;background-position: 0px center !important;background-repeat: no-repeat !important;background-size: 20px; margin-left: 0px; padding: 0.25rem 0.5rem 0.25rem 30px; line-height: 1.5; }
.fComments .more_answer:hover { text-decoration: underline; }
.fComments .flexit_ico_file { color: #000; }
/*.votes_smileys { margin: 15px 0px; }*/
.fComments .fCommentsActionsWrapper[data-votes-element="1"] .votes_smileys { margin-top: 15px; }
.fComments .votes_smileys img { height: 24px;width: 24px;border: 1px solid #fff;border-radius: 20px;background: white;padding: 1px; }
.fComments .votes_smileys img:not(:first-child){ margin-left: -7px; }
.fComments .votes_smileys span { display: inline-block;margin-left: 10px;line-height: 24px;vertical-align: bottom; }
.fCommentUserRating { display: inline-block; padding: 10px; font-size: 14px; font-weight: normal; cursor: default; }

.fCommentActionVoteUp, .fCommentActionVoteDown { width: 16px; height: 16px; background: url('vote-default.png') left top no-repeat; position: relative; }
.fCommentActionVoteUp { top: -2px; }
.fCommentActionVoteDown { top: 2px; background-position: right top; }
.fCommentActionVoteUp:hover { background-position: left -32px; }
.fCommentActionVoteUp.selected { background-position: left -32px; }
.fCommentActionVoteUp.selected:hover { background-position: left -16px; }
.fCommentActionVoteUp.selected:after { width: 16px; height: 16px; left: -10px; position: absolute; top: 0px; content: '+1'; font-size: 10px; font-weight: bold; display: none\9; color: #428bca; }
.fCommentActionVoteDown:hover { background-position: right -32px; }
.fCommentActionVoteDown.selected { background-position: right -32px; }
.fCommentActionVoteDown.selected:hover { background-position: right -16px; }
.fCommentActionVoteDown.selected:after { width: 16px; height: 16px; left: -10px; position: absolute; top: 0px; content: '+1'; font-size: 10px; font-weight: bold; display: none\9; color: #333; }
.fCommentActionVoteUp.selected:after, .fCommentActionVoteDown.selected:after {
    text-align: center;
    -webkit-animation: plus-anim 2s 1 forwards; -moz-animation: plus-anim 2s 1 forwards; -o-animation: plus-anim 2s 1 forwards; animation: plus-anim 2s 1 forwards;
}

.fCommentNumVotes > span { margin: 0; color: #6B6B6B; font-size: 11px; font-weight: bold; }

.fCommentDetails { position: relative; }
.fCommentDetails time, .fCommentDetails strong { display: inline-block; vertical-align: middle; }
.fCommentDetails time { font-size: 0.85em; color: #B7B7B7; }
.fCommentDetails + .fCommentText { margin-top: 5px; }
.fCommentAlert { width: 16px; height: 16px; margin-left: 10px; vertical-align: middle; background: url('alert-default.png') left top no-repeat; display: inline-block; overflow: hidden; text-align: left; text-indent: -1500px; }
.fCommentActive .active { display: none; }
.fCommentActive .inactive { display: block; }
.fCommentInactive .active { display: block; }
.fCommentInactive .inactive { display: none; }

.fCommentAvatar { width: 48px !important; image-rendering: optimizeQuality; background: #EFEFEF; }
.fComments > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 32px !important; }
.fComments > .fCommentGroup .fCommentGroup .fCommentGroup { padding-left: 42px; }

.fCommentTitle > strong { font-style: italic; }
.fCommentText { margin-bottom: 15px; }
.fCommentTextMore { margin-bottom: 15px; }
.fCommentForms { padding-left: 58px; padding-top: 15px; padding-right: 10px; position: relative; }
.fCommentForms > .extranetv2SmallBoxGlobal { min-height: 0; margin-bottom: 5px; }
.fCommentForms.loading:before { display: block; content: ''; position: absolute; width: 58px; height: 58px; left: 50%; top: 50%; margin-left: -29px; margin-top: -29px; background: url('/globalflexit/backoffice/modules/comments/front/templates/css/loader-02.gif') center center no-repeat transparent; z-index: 10;background-size: 80%; }
.fCommentForms.loading:after { display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url('/tr_ffffff_50'); z-index: 9; }
.fComments > .fCommentGroup .fCommentGroup .fCommentForms { padding-left: 42px; padding-top: 15px; }
.fCommentAlertConnect { font-size: 16px; padding-top: 10px; }

/* ****************************************************************************** */
/* *********** HERITAGES MODELE COMS ******************************************** */
/* ****************************************************************************** */

/* **** MODELE 2 **** */
.fComments.tpl2 .fCommentBody > .fCommentAvatarWrapper { width: 15%; padding-top: 18px; padding-bottom: 18px; }
.fComments.tpl2 .fCommentPseudo { font-size: 1.1em; display: block; font-weight: normal; margin-bottom: 6px; }
.fComments.tpl2 .fCommentAvatar { display: inline-block; width: 60px !important; max-width: 90%; }
.fComments.tpl2 .fCommentContent { padding: 18px 18px 28px; border: 1px solid #e7e7e7; -moz-transition: background 450ms ease; -webkit-transition: background 450ms ease; -o-transition: background 450ms ease; transition: background 450ms ease; }
.fComments.tpl2 .fComment:hover > .fCommentBody .fCommentContent { background: none; }
.fComments.tpl2 .fCommentBody { background: none; }
.fComments.tpl2 > .fCommentGroup .fCommentGroup { margin-top: 0; padding-top: 0; padding-left: 10%; }
.fComments.tpl2 > .fCommentGroup > li > .fCommentGroup { padding-left: 20%; }
.fComments.tpl2 > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 40px !important; }
.fComments.tpl2 .fCommentDetails { margin-bottom: 6px; }
.fComments.tpl2 .fCommentDetails time { color: #777; }
.fComments.tpl2 .fCommentUserRating { display: inline-block; vertical-align: middle; }
.fComments.tpl2 .fCommentUserRating + .fCommentTitle { margin-left: 8px; }
.fComments.tpl2 .fCommentTitle { display: inline-block; font-size: 16px; vertical-align: middle; }
.fComments.tpl2 .fComment.fCommentLvl1 .fCommentPseudo { display: inline-block; vertical-align: middle; margin: 0; font-size: 12px; }
.fComments.tpl2 .fComment.fCommentLvl1 .fCommentUserRating { border: 1px solid #777777; background: #fff; color: #777777; padding: 3px; margin: 0 4px; }
.fComments.tpl2 .fComment.fCommentLvl1 .fCommentContent { border: none; border-left: 3px solid #D3D3D3; padding: 5px 10px; }
.fComments.tpl2 .fComment.fCommentLvl1 .fCommentTitle { font-size: 12px; margin-right: 4px; }
.fComments.tpl2 .fCommentForms { padding-left: 0; }
.fComments.tpl2 .fComment.fCommentLvl0 .fCommentForms { padding-left: 15%; }
.fComments.tpl2 > .fCommentGroup .fCommentGroup .fCommentForms { padding-left: 0; }
.fComments.tpl2 > .fCommentsActionsWrapper + .fCommentForms { padding-bottom: 15px; }


/* **** MODELE 3 **** */
/* Boutons */
.fComments.tpl3 .btn { border-color: transparent; background: transparent; color: #212529; box-shadow: none; }
.fComments.tpl3 .btn-paginate, .fComments.tpl3 .fNoteAddNote { border-color: #6c757d; background-color: #6c757d; color: #fff; }
.fComments.tpl3 .btn-paginate:hover, .fComments.tpl3 .btn-paginate:focus, .fComments.tpl3 .fNoteAddNote:hover, .fComments.tpl3 .fNoteAddNote:focus { border-color: #545b62; background-color: #5a6268; color: #fff; }
.fComments.tpl3 .fNoteCancelBtn, .fComments.tpl3 .fCommentCancelBtn { border-color: #dc3545; background-color: #dc3545; color: #fff; }
.fComments.tpl3 .fNoteCancelBtn:hover, .fComments.tpl3 .fNoteCancelBtn:focus, .fComments.tpl3 .fCommentCancelBtn:hover, .fComments.tpl3 .fCommentCancelBtn:focus { border-color: #bd2130; background-color: #c82333; color: #fff; }
.fComments.tpl3 .fNoteAddBtn, .fComments.tpl3 .fCommentAddBtn { border-color: #28a745; background-color: #28a745; color: #fff; }
.fComments.tpl3 .fNoteAddBtn:hover, .fComments.tpl3 .fNoteAddBtn:focus, .fComments.tpl3 .fCommentAddBtn:hover, .fComments.tpl3 .fCommentAddBtn:focus { border-color: #1e7e34; background-color: #218838; color: #fff; }

.fComments.tpl3 > .fCommentGroupDiv > .fCommentGroup > .fComment { margin: 0 0 30px; }
.fComments.tpl3 .fCommentBody { padding: 0; }
.fComments.tpl3 .fCommentBody > .fCommentIdentify { display: flex; align-items: center; justify-content: left; font-size: 1.25rem;}
.fComments.tpl3 .fCommentGroupDiv .fCommentGroupDiv .fCommentBody > .fCommentIdentify { margin-top: 15px; }
.fComments.tpl3 .fCommentBody > .fCommentIdentify .fCommentAvatarWrapper { border-radius: 50%; overflow: hidden; margin-right: 12px; }
.fComments.tpl3 .fCommentBody .media-body { padding: 10px; border-radius: 15px; margin: 15px 0 0; background: #fff; position: relative; }
.fComments.tpl3 .fCommentBody .media-body:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 10px 12px 10px; border-color: transparent transparent #FFFFFF transparent; transform: rotate(0deg); position: absolute; top: -12px; left: 70px; }
/*.fComments.tpl3 .fCommentGroupDiv .fCommentGroupDiv .fCommentBody .media-body:after { content: ''; width: 15px; height: 2px; background-color: rgba(29,59,104,0.3); position: absolute; top: 50%; right: 100%; transform: translateY(-50%); }*/
.fComments.tpl3 .fCommentBody .media-body .time { font-size: 1rem; }
.fComments.tpl3 .fCommentBody .media-body .fCommentDetails + .fCommentText { margin: 10px 0; }

/* premier li du template */
.fComments.tpl3 > .fCommentGroupDiv > .fCommentGroup > .fComment { background: rgba(0,0,0,0.05); padding: 15px; }
/* tout les groupdiv suivant */
.fComments.tpl3 .fCommentGroupDiv .fCommentGroupDiv { padding: 10px 0 0 15px; }
.fComments.tpl3 .fCommentGroupDiv .fCommentGroupDiv .fCommentGroupDiv { background: none; padding: 15px 0 15px 15px; }

.fComments.tpl3 > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 48px !important; }
.fComments.tpl3 .fCommentGroupDiv .fCommentGroupDiv ul { border-left: 2px solid rgba(29,59,104,0.3); padding-left: 15px; }
.fComments.tpl3 .fCommentGroupDiv.empty { padding: 15px 0 10px !important; background: none !important; border-left: none; }
.fComments.tpl3 .fCommentActions,.fComments.tpl3 .fCommentsActions { font-size: 0.875rem; }
.fComments.tpl3 .fCommentActions .btn { font-size: 0.875rem; }
.fComments.tpl3 [data-action="add"],.fComments.tpl3 .btnsmiley {  filter: grayscale(1);color: #8c8c8c; }
.fComments.tpl3 [data-action="add"].active,.fComments.tpl3 [data-action="add"]:hover { color: #000;filter: grayscale(0); }
.fComments.tpl3 .btnsmiley.active,.fComments.tpl3 .btnsmiley:hover { color: var(--color-ico);filter: grayscale(0); }
.fComments.tpl3 .fComment .fCommentNbcom { padding: 0; margin: 10px 0 15px -5px; line-height: 1; font-weight: 500; }
.fComments.tpl3 .fComment .more_answer { padding: 0; margin: 0px 0 0px 0; line-height: 1; font-weight: 500; }
.fComments.tpl3 .fComment div.loading:not(.fCommentForms) { background: url('/globalflexit/backoffice/modules/comments/front/templates/css/loader-02.gif') center center no-repeat;background-size: 45px;height: 45px;margin-top: 10px; }

.fComments.tpl3 .fComment .fCommentGroup + .more_answer { margin-top: 15px; }
.fComments.tpl3 .fComment + .fComment { margin-top: 10px; }
.fComments.tpl3 .fCommentTextMore { margin-bottom: 0px; }

/* Media queries */
@media (max-width: 767px) {
    .fCommentAvatar { width: 40px !important; }
    .fComments > .fCommentGroup .fCommentGroup { padding-left: 50px; }
    .fComments > .fCommentGroup .fCommentGroup .fCommentGroup { padding-left: 38px; }
    .fComments > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 28px !important; }
    .fComments > .fCommentGroup .fCommentGroup .fCommentForms { padding-left: 42px; }
    
    /* **** MODELE 2 **** */
    .fComments.tpl2 > .fCommentGroup > li > .fCommentGroup { padding-left: 35px; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody > .fCommentAvatarWrapper { width: auto; float: none !important; text-align: left; padding: 8px; background-color: #e7e7e7; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentAvatar { display: none; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentPseudo { margin-bottom: 0; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentTitle { font-size: 14px; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentUserRating { padding: 4px 6px; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentDetails > .row > .col-xs-8 { width: 100%; }
    .fComments.tpl2 .fComment.fCommentLvl0 > .fCommentBody .fCommentDetails > .row > .col-xs-4 { width: 100%; text-align: left !important; }
    
    /* **** MODELE 3 **** */
    .fComments.tpl3 .fCommentBody .media-body { padding-left: 10px; }
    /*.fComments.tpl3 .fCommentGroupDiv { margin: 0; padding: 10px; }*/
    /*.fComments.tpl3 .fCommentGroupDiv .fCommentGroup { border-left: none; padding-left: 0 !important; }*/
    .fComments.tpl3 > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 30px !important; }
    /*.fComments.tpl3 .fComment .more_answer, .fComments.tpl3 .fCommentGroupDiv.empty { margin-left: 0px; }*/
}

@media (max-width: 479px) {
    .fCommentAvatar { width: 32px !important; }
    .fComments > .fCommentGroup .fCommentGroup { padding-left: 42px; }
    .fComments > .fCommentGroup .fCommentGroup .fCommentGroup { padding-left: 26px; }
    .fComments > .fCommentGroup .fCommentGroup .fCommentAvatar { width: 16px !important; }
    
    /* **** MODELE 2 **** */
    .fComments.tpl2 > .fCommentGroup > li > .fCommentGroup { padding-left: 20px; }
}

@-webkit-keyframes plus-anim {
    0%   { opacity: 1.0; }
    100% { opacity: 0.0; top: -16px; }
}
@-moz-keyframes plus-anim {
    0%   { opacity: 1.0; }
    100% { opacity: 0.0; top: -16px; }
}
@-o-keyframes plus-anim {
    0%   { opacity: 1.0; }
    100% { opacity: 0.0; top: -16px; }
}
@keyframes plus-anim {
    0%   { opacity: 1.0; }
    100% { opacity: 0.0; top: -16px; }
}

/* Styles de la version table */
.fComment td { font-size: 12px; }

/* ****************************************************************************** */
/* ********************** FIN COMMENTAIRES ************************************** */
/* ****************************************************************************** */

/* ****************************************************************************** */
/* ********************** NOTES ************************************************* */
/* ****************************************************************************** */
.fNotes { }
.fNotes + .fComments { padding-top: 0; }
.fNoteScoreGlobal { font-size: 3em; display: inline-block; padding: 20px; }
.fNoteAddNote { padding: 20px; width: 130px; text-transform: uppercase; white-space: normal; line-height: 1.1em; background: #494949; color: #fff; border-color: #494949; }
.fNoteAddNote:hover { background: #6B6B6B; border-color: #6B6B6B; }
.fNotesRatingTitle { margin-top: 0; }
.fNotesCommentsTitle { border-top: 1px solid #e7e7e7; padding: 10px; }
.fNotesRatingTitle { border-top: 1px solid #e7e7e7; padding: 10px 10px 0; }
.fNotesRatingSubtitle { padding: 0 10px 10px; font-size: 0.9em; }
.fNoteCritereTitre { margin-bottom: 4px;}
.fNoteCritere .progress, .fNoteRating .progress { border-radius: 20px; height: 10px; box-shadow: none; border: 1px solid #cfcfcf; margin-top: 1px; }
.fNoteCritere .progress .progress-bar, .fNoteRating .progress .progress-bar {  }
.fNoteCritereNote { line-height: 1em; }

.fNoteRating .progress { margin-bottom: 8px; }
.fNoteRatingNote { padding-left: 0; text-align: right; line-height: 0.9em; }
.fNoteRatingNote > div { display: inline-block; vertical-align: top; }
.fNoteRatingNote > img { width: 12px; display: inline-block; vertical-align: top; margin-left: 2px; }
.fNoteRatingGraph { padding-left: 0; padding-right: 0; }
.fNoteRatingTotal { padding-right: 0; text-align: left; line-height: 0.9em; }
.fNoteFormTxtAide { padding: 10px 0; }

/* Héritages pour les templates de commentaires */
.fComments.tpl1 .fCommentUserRating { font-size: 12px; padding: 3px 5px; position: absolute; top: 5px; right: 5px; }
.fComments.tpl1 .fCommentUserRating > span, .fComments.tpl1 .fCommentUserRating > strong { display: inline-block; vertical-align: middle; }

/* Media queries */
@media (max-width: 767px) {
    .fNoteCritere .progress { margin-bottom: 4px; }
    .fNoteCritere:last-child .progress { margin-bottom: 10px; }
    .fNoteRating { margin-bottom: 0; }
    .fNoteRating:last-child { margin-bottom: 10px; }
    .fNoteAddNote { width: 100%; padding: 10px 20px; display: block; }
    .fNoteRatingGraph { padding-right: 10px; }
}


/* ****************************************************************************** */
/* ********************** FIN NOTES ********************************************* */
/* ****************************************************************************** */

.fCommentSmileyVotes .smileys { position: absolute;background: white;border: 1px solid #ccc;border-radius: 31px;padding: 5px; }
.fCommentSmileyVotes .smileys a { margin: 0 5px;display: inline-block; }
.fCommentSmileyVotes .smileys a:hover { transform: scale(1.25); }
.fCommentSmileyVotes .votes_smileys { margin: 0 10px 0 0 !important;display: inline-block;vertical-align: middle;color: initial; }

/* ****************************************************************************** */
/* ********************** MEDIAS ************************************************ */
/* ****************************************************************************** */
table.filesincomment a:not(.flexit_ico_file){ display: none; }
form[name="fCommentForm"]  a.btnupload{ color: #000; }