/*******************************************/
/*                  Global                 */
/*******************************************/
#main-composition .maincontainer {
    overflow: hidden; /* fix to prevent child margin to create padding in parent */
}

#main-composition .maincontainer.image,
#main-composition .maincontainer.formation_menu,
#main-composition .maincontainer.menu,
#main-composition .maincontainer.button_link {
    overflow: initial; /* if hidden, the image crop bar / shadow is hidden behind other elements */
}

#main-composition .builder_admin label:hover {
    cursor: default;
}

/*******************************************/
/*     correction_demander element         */
/*******************************************/
#main-composition .builder_admin.correction_demander .btn,
#main-composition .builder_admin.correction_demander label,
#main-composition .builder_admin.correction_demander label:hover {
    cursor: default
}

.correction-container {
    margin-bottom: 20px;
}

.correction-box {
    border-radius: 8px;
    float: none;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 0px;
    border: 1px solid #dadadb;
}

.correction-box .head {
    background: #f9fafb;
    border-bottom: 1px solid #dadadb;
    padding: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.correction-box .head h4 {
    color: #202d3f;
    font-size: 16px;
    margin: 0;
}

.correction-box .head h4 i {
    padding-right: 10px;
}

.correction-box .correction-box-content {
    background-color: white;
    padding: 25px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.correction-box .correction-box-content h1,
.correction-box .correction-box-content h2 {
    color: #556171;
    font-size: 18px;
    margin: 0;
    line-height: 22px;
    margin-bottom: 20px;
    font-weight: bold;
}

.correction_demander .progress {
    display: none;
}

.correction_demander .btn.fileinput-button {
    margin-bottom: 10px;
}

.correction_demander .fileupload-seperator {
    margin-top: 0;
}

.correction_demander .form .input-xxlarge,
.correction_demander .form textarea.form-control{
    width: 100%;
}

.correction_demander .form-group.form-actions {
    background-color: transparent;
    box-shadow: none;
}

/*******************************************/
/*         Download element                */
/*******************************************/
#main-composition .downloads,
#main-composition .downloads .media,
#main-composition .downloads .media-body a {
    color: #34364B;
}

#main-composition .downloads {
    border-radius: 6px;
    background-color: #fff;
    padding: 11px 10px 14px 20px;
    /*margin: 1rem;*/
}

.builder.mobile #main-composition .downloads {
    padding: 0px;
}

#main-composition .downloads .media {
    display: table;
}

.builder.mobile #main-composition .downloads .media {
    margin-top: 0px;
}

#main-composition .downloads .media .iconeMedia,
#main-composition .downloads .media .media-body {
    display: table-cell;
}

#main-composition .downloads .media .iconeMedia {
    vertical-align: middle;
}

#main-composition .downloads .media .media-body {
    vertical-align: top;
}

#main-composition .downloads .media i {
    font-size: 28px;
    margin-right: 20px;
}

.builder.mobile #main-composition .downloads .media i {
    margin-top: 0px;
}

#main-composition .downloads .media-body .download-link,
#main-composition .downloads .media-body .download-link p {
    color: #34364B;
    font-size: 16px;
    font-weight: normal;
    line-height: 32px;
    width: 100%;
}

#main-composition .downloads .media-body .download-description,
#main-composition .downloads .media-body .download-description p {
    align-items: unset;
    font-size: 11px;
    line-height: 16px;
    color: #90959A;
    width: 100%;
}

/* Rearranging admin section */
#main-composition .downloads .media-body .download-description {
    margin-right: 1rem;
}

#main-composition .downloads .media-body a,
#main-composition .downloads .media-body .download-link {
    display: block;
    font-size: 16px;
    line-height: 32px;
    color: #34364B;
}

#main-composition .downloads a:hover, #main-composition .downloads a:focus {
    text-decoration: none;
}

/* Resetting the number of downloads */
#main-composition .downloads .download-label {
    height: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: #34364B;
    font-size: unset;
    letter-spacing: unset;
    text-align: unset;
    position: absolute;
    top: -2px;
    right: -2px;
    padding: 3px 5px;
}

#main-composition .downloads .download-label span {
    margin: 0;
    color: #FFF;
    font-size: 13px;
    cursor: default;
}

#main-composition .downloads .download-label .tooltip-inner {
    white-space: nowrap;
    max-width: none;
}

/* Only have the tooltip on select or hover */
#main-composition .downloads .download-label {
    display: none;
}

#main-composition .selected[data-element-type="downloads"] .downloads .download-label,
#main-composition .hovered[data-element-type="downloads"] .downloads .download-label {
    display: inline;
}

/* Admin making the alert fo no downloadable file nicer */
#main-composition .downloads .download-alert {
    color: #34364B;
    background: unset;
    border: unset;
}

/* Forcing the builder writing to white */
#main-composition .downloads p {
    color: #34364B;
    margin-bottom: 0;
}

#main-composition .downloads .content {
    padding: 0px;
}

/*******************************************/
/*           Media Player                  */
/*******************************************/

/* resetting default */
#main-composition .mp3player .mejs__container {
    background: none;
    border-radius: 0;
}

#main-composition .mp3player .mejs__audio {
    display: inline-block;
}

#main-composition .mp3-container .mejs__container {
    width: calc(100% - 40px) !important;
}

#main-composition .mp3player .mejs__controls:not([style*="display: none"]) {
    background: #212B36;
    border-radius: 20px;
    box-shadow: none;
}

/* reducing the size fo the play pause / volume buttons */
#main-composition .mp3player .mejs__playpause-button > button,
#main-composition .mp3player .mejs__volume-button > button {
    transform: scale(0.9);

}

#main-composition .mp3player .mejs__playpause-button > button {
    top: 2px;
}

/* Non rounded right if download icon */
#main-composition .mp3player .has_download .mejs__controls:not([style*="display: none"]) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* overloading the download button */
#main-composition .mp3player .has_download .btn {
    border-radius: 0 20px 20px 0 !important;
    padding: 8px 20px 8px 11px !important;
    display: inline-block;
    margin-left: -12px;
    background: #212B36 !important;
    height: 40px;
    box-sizing: border-box;
    color: #FFF !important;
    font-size: 16px;
    position: absolute;
}

#main-composition .mp3player .mejs__controls {
    height: 40px;
}

#main-composition .mp3player .mejs__time {
    padding-top: 16px;
}

#main-composition .mp3player .mejs__button > button {
    margin-top: 10px;
}

/* Progressbar slider colors */
#main-composition .mp3player .mejs__controls .mejs__currenttime,
#main-composition .mp3player .mejs__controls .mejs__time {
    color: #FFF;
}

#main-composition .mp3player .mejs__controls .mejs__time-total {
    background-color: #424B54;
    overflow: hidden; /* Force rounded edged on the loading and playing bars */
    border-radius: 20px;
    border: none;
    height: 4px !important; /* exists also in t2/style.css and is used by video player and mp3 playlist */
    margin-top: 9px;
}

#main-composition .mp3player .mejs__controls .mejs__time-loaded {
    background-color: #727880;
}

#main-composition .mp3player .mejs__controls .mejs__time-current {
    background-color: #F9FAFB;
    z-index: 4; /* Forcing the z-index to hide the hoverbar when traveling back in time */
}

#main-composition .mp3player .mejs__controls .mejs__time-hovered {
    background-color: #9ea6b396;
    z-index: 3;
}

/* Hide the old time handler */
#main-composition .mp3player .mejs__time-handle {
    display: none;
}

/*other progressbars not rounded*/
#main-composition .mp3player .mejs__time-buffering,
#main-composition .mp3player .mejs__time-current,
#main-composition .mp3player .mejs__time-float,
#main-composition .mp3player .mejs__time-float-corner,
#main-composition .mp3player .mejs__time-float-current,
#main-composition .mp3player .mejs__time-hovered,
#main-composition .mp3player .mejs__time-loaded,
#main-composition .mp3player .mejs__time-marker {
    border-radius: 0;
}

/* Volume control */
#main-composition .mp3player .mejs__horizontal-volume-current,
#main-composition .mp3player .mejs__horizontal-volume-total {
    border-radius: 20px;
    height: 4px;
}

#main-composition .mp3player .mejs__horizontal-volume-total {
    margin-top: 4px;
}

#main-composition .mp3player .mejs__horizontal-volume-current {
    background-color: #F9FAFB;
}

#main-composition .mp3player .mejs__horizontal-volume-total {
    background-color: #424B54;
}
.builder #main-composition .mp3player .mejs__controls .mejs__currenttime,
.builder #main-composition .mp3player .mejs__controls .mejs__duration {
    font-size: 14px;
}
.builder.mobile #main-composition .mp3player > .content {
    display: flex;
    padding: 0px;
}
.builder.mobile #main-composition .mp3player .mejs__controls > .mejs__time-rail {
    display: none;
}

/*******************************************/
/*           Progress Bar                  */
/*******************************************/

#main-composition .progress {
    height: 28px;
    box-shadow: none;
    border: 1px solid #DDDDE1;
}


/*******************************************/
/*           General Forms                 */
/*******************************************/

/* The forms are set to disabled in the builder, keep the white background and cursor rather than bootstraps implementation */
.builder #main-composition .form-control[disabled],
.builder #main-composition .form-control[disabled]:hover {
    background-color: #fff;
    cursor: default;
}

/* Specific buttons that dont have size option */
#main-composition .contact_form btn {
    width: 100%;
}

#main-composition .btn-h-vs {
    padding: 2px 10px;
}

#main-composition .btn-h-s {
    padding: 5px 12px;
}

#main-composition .btn-h-n {
    padding: 6px 12px;
}

#main-composition .btn-h-b {
    padding: 11px 12px;
}

#main-composition .btn-h-vb {
    padding: 15px 20px;
}

#main-composition .maincontainer.button_link {
    padding-top: 4px;
    padding-bottom: 4px; /*Needed to avoid being cut off on upgrade*/
}

/* Input group border (no label) */
#main-composition .formation_form .form-group input,
#main-composition .conference_optin .form-group input,
#main-composition .affiliation_optin .form-group input,
#main-composition .everwebinar_optin .form-group input,
#main-composition .everwebinar_optin .form-group select,
#main-composition .contact_form .form-group .input-group > input, #main-composition .contact_form .form-group .input-group > input:focus,
#main-composition .contact_form .form-group textarea, #main-composition .contact_form .form-group textarea:focus,
#main-composition .contact_form .select2-selection,
#main-composition .lbar_optin .optin_field .optin input,
#main-composition .lbar_optin .optin_field .optin textarea,
#main-composition .lbar_optin .optin_field .optin select,
#main-composition .lbar_optin .optin_custom_field .optin input,
#main-composition .lbar_optin .optin_custom_field .optin textarea,
#main-composition .lbar_optin .optin_custom_field .optin select,
#main-composition .connexion_form #password .username input, #main-composition .connexion_form #password .password input,
#main-composition .comments .form-group input:not([type='checkbox']),
#main-composition .comments #addReponseForm textarea, #main-composition .comments #addReponseForm textarea:focus {
    border: 1px solid #DDDDE1;
    border-radius: 6px;
    text-align: left;
    vertical-align: middle;
    float: none;
    padding: 16px;
    height: 52px;
}

#main-composition .conference_optin .form-group input {
    margin: 0 auto;
}
#main-composition .conference_optin .form-group input[type='radio'],
#main-composition .conference_optin .form-group input[type='checkbox'],
#main-composition .everwebinar_optin .form-group input[type='radio'],
#main-composition .everwebinar_optin .form-group input[type='checkbox'] {
    height: auto;
}

#main-composition .contact_form .form-group textarea,
#main-composition .contact_form .form-group textarea:focus,
#main-composition .comments #addReponseForm textarea,
#main-composition .comments #addReponseForm textarea:focus {
    min-height: 100px;
}

/*#main-composition .contact_form .form-group label,*/
#main-composition .formation_form .form-group label,
#main-composition .comments .form-group label {
    font-weight: lighter;
    font-size: 14px;
    line-height: 20px;
}

#main-composition .contact_form .form-group:not(.security-code) .input-group,
#main-composition .formation_form .form-group .input-group,
#main-composition .affiliation_optin .form-group .input-group,
#main-composition .comments .form-group .input-group {
    width: 100%;
    display: table;
}

/* Removing icons */
#main-composition .contact_form .form-group .input-group > .input-group-addon,
#main-composition .formation_form .form-group .input-group > .input-group-addon,
#main-composition .formulaire_paiement .form-group .input-group > .input-group-addon,
#main-composition .affiliation_optin .form-group .input-group > .input-group-addon,
#main-composition .conference_optin .form-group .input-group > .input-group-addon,
#main-composition .webinar_optin .form-group .input-group-addon,
#main-composition .comments .form-group .input-group > .input-group-addon {
    display: none;
}

/* removing the shadow */
#main-composition .contact_form .form-group .input-group > input:not([type="checkbox"]), #main-composition .contact_form .form-group .input-group > input:not([type="checkbox"]):focus,
#main-composition .contact_form .form-group textarea, #main-composition .contact_form .form-group textarea:focus,
#main-composition .formation_form .form-group .input-group > input:not([type="checkbox"]), #main-composition .formation_form .form-group .input-group > input:not([type="checkbox"]):focus,
#main-composition .affiliation_optin .form-group input:not([type="checkbox"]), #main-composition .affiliation_optin .form-group input:not([type="checkbox"]):focus,
#main-composition .everwebinar_optin .form-group input:not([type="checkbox"]), #main-composition .everwebinar_optin .form-group input:not([type="checkbox"]):focus,
#main-composition .everwebinar_optin .form-group select, #main-composition .everwebinar_optin .form-group select:focus,
#main-composition .connexion_form #password input:not([type="checkbox"]), #main-composition .connexion_form #password input:not([type="checkbox"]):focus,
#main-composition .lbar_optin .optin_field .optin input:not([type="checkbox"]):focus, #main-composition .lbar_optin .optin_field .optin input:not([type="checkbox"]),
#main-composition .lbar_optin .optin_field .optin textarea:focus, #main-composition .lbar_optin .optin_field .optin textarea,
#main-composition .lbar_optin .optin_field .optin select:focus, #main-composition .lbar_optin .optin_field .optin select,
#main-composition .lbar_optin .optin_custom_field .optin input:not([type="checkbox"]), #main-composition .lbar_optin .optin_custom_field .optin input:not([type="checkbox"]):focus,
#main-composition .lbar_optin .optin_custom_field .optin textarea:focus, #main-composition .lbar_optin .optin_custom_field .optin textarea,
#main-composition .lbar_optin .optin_custom_field .optin select:focus, #main-composition .lbar_optin .optin_custom_field .optin select,
#main-composition .comments .form-group input:not([type="checkbox"]), #main-composition .comments .form-group input:not([type="checkbox"]):focus {
    box-shadow: none;
    width: 100% !important; /*TODO: check if we can remove the input-xlarge from /site/style.css that forces the width with an important*/
}

#main-composition .conference_optin .form-group input:not([type="checkbox"]):focus {
    box-shadow: none;
}

#main-composition .optin_field .optin input::Placeholder,
#main-composition .optin_custom_field .optin input::Placeholder,
#main-composition .formation_form .form-group .input-group > input::Placeholder,
#main-composition .conference_optin .form-group input::Placeholder,
#main-composition .connexion_form input::Placeholder,
#main-composition .affiliation_optin input::Placeholder,
#main-composition .everwebinar_optin input::Placeholder,
#main-composition .contact_form input::Placeholder,
#main-composition .contact_form textarea::Placeholder,
#main-composition .comments input::Placeholder,
#main-composition .comments textarea::Placeholder,
#main-composition #password input::Placeholder {
    vertical-align: middle;
    text-align: left;
    color: #999;
}
#main-composition .conference_optin .form-group input,
#main-composition .everwebinar_optin input {
    width: 100%;
}
#main-composition .conference_optin #webinar-pays + span.select2,
#main-composition .conference_optin .region-select .select2,
#main-composition .everwebinar_optin #webinar-pays + span.select2,
#main-composition .everwebinar_optin .region-select .select2 {
    width: 100% !important;
}
#main-composition .conference_optin #select2-webinar-pays-container,
#main-composition .conference_optin .region-select .select2,
#main-composition .everwebinar_optin #select2-webinar-pays-container,
#main-composition .everwebinar_optin .region-select .select2 {
    text-align: left;
}

#main-composition .affiliation_optin .form-group,
#main-composition .contact_form .form-group {
    margin-top: 0;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #D2D3E0;
    padding: 15px;
    background-color: #ffffff;
}

#main-composition .affiliation_optin .form-group.form-group-no-border,
#main-composition .contact_form .form-group.form-group-no-border {
    padding: 0;
    border: none;
    background: none;
}

#main-composition .affiliation_optin .form-group label,
#main-composition .contact_form .form-group label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.6px;
    color: #212B36;
    opacity: .7;
    margin-bottom: 0;
    font-weight: normal;
}

#main-composition .affiliation_optin .form-group input,
#main-composition .contact_form .form-group .input-group > input,
#main-composition .contact_form .form-group .input-group > input:focus,
#main-composition .contact_form .form-group textarea,
#main-composition .contact_form .form-group textarea:focus {
    letter-spacing: 0.4px;
    color: #212B36;
    border: none;
    box-shadow: none;
    padding: 0;
    height: 20px;
    font-size: 14px;
}

#main-composition .affiliation_optin .button_link {
    padding: 0;
    background-color: initial;
    width: 100%;
}

/* Set the captcha input */
#main-composition .contact_form #verify {
    height: 38px;
    margin-top: 4px;
}

#main-composition .affiliation_optin .form-group .checkbox div.checker {
    background-image: none;
    background: white;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: -30px;
}

#main-composition .affiliation_optin div.checker span {
    margin-top: -2px;
}

.builder #main-composition .affiliation_optin div.checker span {
    margin-top: 2px;
}

#main-composition div.checker,
#main-composition div.radio
{
    margin-right: 10px;
    margin-top: 4px;
}
#main-composition .conference_optin div.checker,
#main-composition .conference_optin div.radio,
#main-composition .everwebinar_optin div.checker,
#main-composition .everwebinar_optin div.radio {
    padding-top: 2px;
}

/* TODO: see why the uniform is not working */
#main-composition div.checker span,
#main-composition div.radio span
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#main-composition div.checker span {
    height: 20px;
    width: 20px;
}

#main-composition div.radio span {
    width: 18px;
    height: 18px;
}

#main-composition div.checker span.checked:before{
    color: #333;
}

#main-composition .form-group .checkbox label {
    text-transform: none;
    opacity: 1;
    font-size: 13px;
    color: #34364B;
    padding-left: 30px;
    letter-spacing: 0px;
}
#main-composition .everwebinar_optin .form-group .checkbox label,
#main-composition .conference_optin .form-group .checkbox label {
    padding-left: 0;
}

div.checker input {
    opacity: 0;
    filter: alpha(opacity:0);
    display: inline-block;
    background: none;
}


#main-composition .affiliation_optin .form-group .select2-container--default .select2-selection--single,
#main-composition .affiliation_optin .form-group select,
#main-composition .contact_form .form-group .select2-container--default .select2-selection--single,
#main-composition .contact_form .form-group select {
    border: none !important;
}

#main-composition .affiliation_optin .form-group .select2-container,
#main-composition .affiliation_optin .form-group select,
#main-composition .contact_form .form-group .select2-container,
#main-composition .contact_form .form-group select {
    width: 100% !important;
}

.builder.mobile #main-composition .affiliation_optin .form-group select,
.builder.mobile #main-composition .contact_form .form-group select,
.builder.mobile #main-composition .affiliation_optin .form-group .select2-container,
.builder.mobile #main-composition .contact_form .form-group .select2-container{
    min-width: auto;
}

/* General select2 reformatting  */
#main-composition .everwebinar_optin .select2-selection,
#main-composition .affiliation_optin .select2-selection {
    background: #FFF;
    border: 1px solid #DDDDE1;
    border-radius: 6px;
    text-align: left;
    height: 52px;
}

#main-composition .everwebinar_optin .select2-container--default .select2-selection--single .select2-selection__rendered,
#main-composition .affiliation_optin .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212B36;
    line-height: 52px;
}

#main-composition .affiliation_optin .select2-selection {
    height: initial;
}

.builder.mobile #main-composition .affiliation_optin select {
    min-width: auto;
}

/* general select 2 */
#main-composition .contact_form .select2-selection {
    background: #FFF none;
}

/* Centering the question selectbox */
#main-composition .contact_form .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: -10px;
    padding-left: 0;
}

#main-composition .contact_form .select2-container--default .select2-selection--single .select2-selection__arrow,
#main-composition .everwebinar_optin .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

/*correcting an overflow bug*/
#main-composition .conference_optin .form-group {
    margin-left: 0;
    margin-right: 0;
}

#main-composition .conference_optin .form_action,
#main-composition .webinar_optin .form_action,
#main-composition .contact_form .form_action {
    margin-bottom: 15px;
}

#main-composition .conference_optin .form_action .btn {
    max-width: 100%;
}

.builder.mobile #main-composition .conference_optin .form-group > .checkbox > label {
    font-weight: 400;
}
.builder.mobile #main-composition .conference_optin .form-group input[type='checkbox'] {
    height: auto;
    position: relative;
    margin: 0px;
    margin-right: 5px;
    width: auto;
}

/*******************************************/
/*           Contact Form                  */
/*******************************************/

#main-composition .contact_form .security-code-box, .contact_form .security-code-image {
    float: left;
}

#main-composition .contact_form .security-code-box {
    width: 100%;
}

#main-composition .contact_form .security-code-box .input-group {
    width: 25%;
}

#main-composition .contact_form .security-code-image {
    margin-left: 1rem;
    margin-top: 0.5rem; /* Align with the security code input */
}

#main-composition .contact_form #subject { /* Forcing the width of the select2 */
    width: 100%;
}

/*******************************************/
/*           Login Form                    */
/*******************************************/
#main-composition .connexion_form .content > div {
    max-width: 100%;
}

#main-composition .connexion_form #password {
    height: unset; /* This was set to 166px in login.css and made a mess in the builder admin and site pages */
}

#main-composition .connexion_form #password .username, #main-composition .connexion_form #password .password {
    border-radius: 6px;
    border: none;
    background: #FFFFFF;
}

#main-composition .connexion_form #password .password {
    margin-top: 8px;
}

#main-composition .connexion_form #password .btn-xlarge {
    width: 100%;
}

#main-composition .connexion_form #password .btn-large {
    width: initial;
}

.builder.mobile #main-composition .connexion_form .content .forgot_password > a {
    cursor: default;
}
.builder.mobile #main-composition .connexion_form .content .forgot_password > a:hover {
    text-decoration: auto;
}


/*******************************************/
/*             Tips                        */
/*******************************************/
#main-composition .tipblock {
    height: auto;
    position: relative;
    color: #34364B;
    font-size: 14px;
    line-height: 22px;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    padding: 20px 30px;
    margin: 0 auto;
    left: 0;
}

#main-composition .tipblock p {
    margin: 0;
}

#main-composition .tipblock .content {
    padding: 5px;
}

#main-composition .tipblock.ergo {
    background: #bfe6ff;
    border: 2px solid #0099ff;
}

#main-composition .tipblock.pedago {
    background: #ffebdd;
    border: 2px solid #ff6600;
}

#main-composition .tipblock .tip-avatar {
    display: block;
    position: absolute;
    right: -33px;
    bottom: -33px;
    z-index: 0;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    overflow: hidden;
    background-color: #DDDDE1;
}

#main-composition .tipblock .tip-avatar img {
    object-fit: cover;
    max-width: initial;
    max-height: initial;
    display: inline;
    height: 100%;
    width: 100%;
}

#main-composition .tipblock .tip-arrow {
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    z-index: 1;
}

#main-composition .tipblock .fl1 {
    background-image: url("../../../images/app/v4/tips/arrow-right.png");
    right: -17px;
    top: 50%;
    margin-top: -13px;
}

#main-composition .tipblock .fl2 {
    background-image: url("../../../images/app/v4/tips/arrow-down.png");
    left: 50%;
    margin-left: -13px;
    bottom: -17px;
}

#main-composition .tipblock .fl3 {
    background-image: url("../../../images/app/v4/tips/arrow-left.png");
    left: -17px;
    top: 50%;
    margin-top: -13px;
}

#main-composition .tipblock .fl4 {
    background-image: url("../../../images/app/v4/tips/arrow-up.png");
    left: 50%;
    margin-left: -13px;
    top: -17px;
}


/*******************************************/
/*             Comments                    */
/*******************************************/

#main-composition .comments p {
    color: #34364B;
}

#main-composition .comments label {
    color: #34364B;
}

#main-composition .comments #addCommentForm a {
    color: #B2CE74;
    text-decoration: underline !important;
}

/* Resetting the border for formation comments */
#main-composition .comments .comment .comment-infos .name,
#main-composition .comments .comment .comment-infos .actions {
    border-right: none;
    padding-right: 0;
}

/*Time since reply*/
#main-composition .comments .comment .name > span {
    font-weight: normal;
}

.comments .comment a.comments-reply-button {
    margin-left: 80px !important;
    text-decoration: underline;
    cursor: pointer;
}

.comments .comment .reply,
.comments .comment a.btn-show-answers {
    font-size: 14px;
    line-height: 20px;
}

.comments .comment a.btn-show-answers {
    text-decoration: underline;
}

#main-composition .comments #addCommentForm .talkbubble::before {
    display: none;
}

#main-composition .comments .comment .comment-show-actions {
    margin-left: 10px;
}

#main-composition .comments .comment .comment-show-actions:hover {
    cursor: pointer;
}

.comments .comment .comment-action-panel {
    width: 264px;
    background-color: #fff;
    margin-left: 140px;
    margin-top: 8px;
    border-radius: 4px;
    box-shadow: 0px 0px 16px 4px rgba(20, 27, 58, 0.14);
    position: absolute; /* so we don't move the dom around on show */
}

.comments .comment .comment-action-panel form .btn {
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}

.comments .comment .comment-action-panel form .btn:hover {
    background-color: #F9FAFB !important;
    text-decoration: none;
    color: #34364B;
}

.comments .comment .comment-actions-block .comment-show-actions-dropdown-container,
.comments .comment .comment-actions-block > .actions,
.comments .comment .comment-actions-block > .reply {
    display: inline-block;
}

.comments .comment .comment-show-actions-dropdown-container li:hover {
    background-color: #F9FAFB !important;
}

.comments .comment .comment-show-actions-dropdown-container:hover {
    cursor: pointer;
}

#main-composition .comments .form-actions .btn {
    padding: 8px 16px;
}

#main-composition .comments #addCommentForm .talkbubble {
    position: relative;
    width: 100%;
    padding: 10px 16px;
    border-radius: 4px;
    border: solid #DDDDE1;
    background: white;
    border-width: 1px;
}

#main-composition .comments .comment a.btn-show-answers {
    background: none !important;
    margin-top: 10px;
    margin-left: 60px;
    padding: 4px 14px;
    box-shadow: none !important;
    border: none !important;
    width: unset !important;
}

.comments .comments-content > .comment,
.comments .comments-content .media-body {
    overflow: visible;
}

.comments .comment .comment-dropdown-menu {
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(20, 27, 58, 0.14), 0 2px 16px 0 rgba(0, 0, 0, 0.15);
    border: none;
    min-width: 272px;
    z-index: 990;
}

.comments .comment .comment-dropdown-menu button.btn-link {
    text-align: left;
    /*background: #FFF !important;*/
    background-color: transparent !important;
    color: #212B36 !important;
    opacity: 0.8;
}

.comments .comment .comment-dropdown-menu button.btn-link:hover,
.comments .comment .comment-dropdown-menu button.btn-link:focus {
    background-color: #F9FAFB;
    text-decoration: none;
    color: #34364B;
    opacity: 1;
}

.comments .comment .comment-dropdown-menu button.btn-link i {
    margin-right: 12px;
}

.comments .comment.reply_to {
    margin-top: 10px;
    margin-left: 60px;
    overflow: visible; /* Enable the validation popup to display */
}


/* the show more comments button */
#main-composition #shownextelements a,
#main-composition #shownextelements a:hover,
#main-composition #shownextelements a:focus {
    background: none;
    border-radius: 0px;
    box-shadow: none;
    font-size: 16px;
    line-height: 22px;
    text-decoration: underline;
    padding: 0px;
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

#main-composition .maincontainer .content #addReponseForm .btn-link:hover {
    text-decoration: none;
}

#main-composition .maincontainer .content #addReponseForm .btn {
    color: #FFF !important;
    width: 25%;
}

#main-composition .maincontainer .content #ContentReponse {
    background: transparent;
}

#main-composition .maincontainer .content #addReponseForm .btn i {
    display: none;
}

#main-composition .comments .form-group textarea, #main-composition .comments .form-group textarea:focus {
    box-shadow: none;
}

#main-composition .comments #alert-nocomment {
    text-align: center;
    color: #34364B;
    opacity: 0.5;
    background-color: #F3F6F9;
    border: none;
    border-radius: 4px;
}

#main-composition .comments .form-group input[type='checkbox'] {
    margin-left: 0;
    left: 10px;
}

/*******************************************/
/*             accordion                   */
/*******************************************/

#main-composition #faq .faq .question {
    border-radius: 6px;
    padding: 10px 16px;
    margin-top: 3px;
    cursor: pointer;
}

#main-composition #faq .faq .question .editable {
    display: inline-block;
}

#main-composition #faq .faq .question:hover {
    opacity: 1;
}

#main-composition #faq .faq .reponse {
    padding: 10px 16px;
}

#main-composition #faq .faq .question h4 {
    font-size: 13px;
    line-height: 36px;
    color: #34364B;
}

#main-composition #faq .faq .question h4 > i,
#main-composition #faq .faq .question > i {
    margin-right: 8px;
}

.builder.mobile #main-composition #faq .faq .question {
    display: block;
}
.builder.mobile #main-composition #faq .faq .question > i {
    display: inline;
    margin-top: 3px;
}
.builder.mobile #main-composition #faq .faq .question > div {
    display: inline;
}
.builder.mobile #main-composition #faq .faq .question h4 {
    display: inherit;
    margin-top: 0px;
    font-weight: 500;
}

/*******************************************/
/*             button_link                   */
/*******************************************/

#main-composition .button_link .btn-h-vs {
    padding: 2px 10px;
}

#main-composition .button_link .btn-h-s {
    padding: 6px 12px;
}

#main-composition .button_link .btn-h-n {
    padding: 10px 18px;
}

#main-composition .button_link .btn-h-b {
    padding: 14px 20px;
}

#main-composition .button_link .btn-h-vb {
    padding: 20px 30px;
}

#main-composition .button_link .btn i:first-child {
    padding-right: 7px;
}

#main-composition .button_link .btn {
    max-width: 100%;
    white-space: normal;
    height: auto;
    line-height: normal;
}


/*******************************************/
/*                module                   */
/*******************************************/

#main-composition .module {
    position: relative;
    width: 100%;
}

#main-composition .module iframe {
    width: 100%;
    border: none;
}

/*******************************************/
/*                Widgets                   */
/*******************************************/

#main-composition .sidebar .sidebar-last_comments .recent_posts {
    list-style: none;
}

#main-composition .sidebar .sidebar-last_comments .recent_posts .link {
    clear: both;
    display: block;
    font-size: 13px;
}

#main-composition .sidebar .sidebar-last_comments .recent_posts .link .thumb {
    float: left;
    height: auto;
    width: 64px;
}

#main-composition .sidebar .sidebar-last_comments .recent_posts .link h6 {
    float: left;
    font-family: inherit;
    width: calc(100% - 64px - 10px);
}

/*******************************************/
/*             VideoPlayer                 */
/*******************************************/

.videoplayer.affix .video-block-center {
    min-height: 0 !important;
}


#main-composition .videoplayer .mejs__overlay-button:focus {
    outline: none;
}

#main-composition .mejs__video {
    min-width: inherit !important; /* get rid if the min width so the button is centered */
    border-radius: 0;
}

#main-composition .mejs__video .mejs__overlay-button {
    background: url(../../../images/app/v4/videoplayer/player80px.svg) no-repeat;
    width: 80px;
    height: 80px;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

@media (max-width: 767px) {
    .video-block-center {
        position: relative;
        padding-bottom: 56.25%;
        height: 0 !important;
    }
}

.mobile .video-block-center {
    position: relative;
    padding-bottom: 56.25%;
    height: 0 !important;
}


/*******************************************/
/*             FormationsUser              */
/*******************************************/
#main-composition .formationsuser.template2 .formation {
    padding: 0 10px 10px 10px;
    margin: 0;
}
#main-composition .formationsuser.template2 .row {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    #main-composition .formationsuser.template2 .row .col-md-3 {
        width: 25% !important;
    }
}
#main-composition .formationsuser.template2 .row .col-md-3 {
    padding: 0;
}

#main-composition .formationsuser.template2 {
    margin: 0;
}

#main-composition .formationsuser.template1 .media-body,
#main-composition .formationsuser.template1 td {
    vertical-align: middle;
    font-weight: normal;
}
.builder.mobile .formationsuser.template2 .row {
    display: flex;
    flex-direction: column;
}
.builder.mobile #main-composition .formationsuser.template2 .row .col-md-3 {
    width: 100% !important;
}

.formationsuser.template3 .formation-user-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.formationsuser.template3 .formation-user-title {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 24px;
}
.builder.mobile #main-composition .formationsuser.template3 .formation-user-title {
    font-size: 18px;
}

.formationsuser.template3 .formation-user-title i {
    color: var(--primary-color);
}

.formationsuser.template3 .formation-user-title-label {
    font-weight: 600;
}

.formationsuser.template3 .formation-user-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.formationsuser.template3 .formation-user-card-container {
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
}

.builder .formationsuser.template3 .formation-user-card-container {
    max-width: 500px;
    width: 100%;
}

.formationsuser.template3 .formation-user-card-header {
    height: 209px;
    border-top-left-radius: var(--app-card-radius);
    border-top-right-radius: var(--app-card-radius);
}

.builder.mobile #main-composition .formationsuser.template3 .formation-user-card-header img,
.formationsuser.template3 .formation-user-card-header img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: var(--app-card-radius);
    border-top-right-radius: var(--app-card-radius);
}

.formationsuser.template3 .formation-user-card-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #FFFFFF;
    padding: 16px 24px;
    border-bottom-left-radius: var(--app-card-radius);
    border-bottom-right-radius: var(--app-card-radius);
}
.formationsuser.template3 a {
    color: inherit;
}

.builder.mobile #main-composition .formationsuser.template3 .formation-user-card-body {
    gap: 16px;
    padding: 16px;
}

.formationsuser.template3 .formation-user-card-data {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.formationsuser.template3 .formation-user-card-datum {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.formationsuser.template3 .formation-user-card-datum-label {
    display: flex;
    align-items: center;
    gap: 15px;
}

.formationsuser.template3 .formation-user-card-datum-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

#main-composition .formationsuser.template3 .formation-user-card-datum-value .progress {
    background: #F1F1F1;
    width: 90px;
    height: 4px;
    border: none;
    border-radius: 6px;
    margin: 0;
}

.builder.mobile #main-composition .formationsuser.template3 .formation-user-card-datum-value .progress {
    width: 60px;
}

/*******************************************/
/*             emptyBlock              */
/*******************************************/
#main-composition .emptyblock .box-masonry[data-element-type="emptyblock"],
#main-composition .emptyblock .content {
    height: 100%;
}

/*******************************************/
/*               Sommaire                  */
/*******************************************/
#main-composition .sommaire .btn-container {
    height: 100%;
}

#main-composition .sommaire .btn-container > a.btn {
    display: flex;
    align-items: center;
}

.actions-container .info-mobile-content.badge {
    background-color: #1E2C37;
}

/*******************************************/
/*       Formulaire de capture LB          */
/*******************************************/
.lbar_form {
    max-width: 100%;
}
.builder.mobile .lbar_form > #main-composition {
    width: 100%;
}

/*******************************************/
/*            optin autowebinar            */
/*******************************************/
.webinar_optin .btn.disabled, .webinar_optin .btn[disabled], .webinar_optin fieldset[disabled] .btn {
    opacity: 1;
}

.webinar_optin a:hover {
    cursor: pointer;
}

.webinar_optin .checkbox input[type=checkbox] {
    position: initial;
}

.builder.mobile .webinar_optin div.form-group > div.checkbox > label {
    font-weight: 400;
}
.builder.mobile .webinar_optin #select_horaire_webinaire + small > a:hover {
    text-decoration: none;
    cursor: default;
}

/*******************************************/
/*              Progress bar               */
/*******************************************/
.builder #main-composition .maincontainer.progress_bar .bar_texte {
    top: initial;
    transform: initial;
}

/*******************************************/
/*            Social share link            */
/*******************************************/
.builder.mobile #main-composition .maincontainer.social_share_link .socialsharelink {
    height: auto;
    min-height: 42px;
}

/*******************************************/
/*             Formation form              */
/*******************************************/
.builder #main-composition .formation_form .form-group.cgv label > input[type='checkbox'] {
    height: auto;
}

/*******************************************/
/*                Notepad                  */
/*******************************************/
.builder #main-composition .notepad {
    box-shadow: none;
}
.builder #main-composition .notepad > .content {
    border-width: 0px;
}
.builder #main-composition .notepad > .content > .notepad {
    box-shadow: none;
}

/*******************************************/
/*           Affiliation form              */
/*******************************************/
.builder.mobile #main-composition .affiliation_optin form > .row > .col-md-6 {
    width: 100%;
}

/*******************************************/
/*                Rappel                   */
/*******************************************/
.rappels .rappel {
    background: none;
    display: inline-block;
    width: 30%;
    max-width: 200px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    margin-right: 10px;
}
.rappels .rappel img {
    max-height: 70px;
}
.rappels .rappel a.btn.btn-small {
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.5;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
@media (max-width: 767px) {
    .conference_calendar .rappels .rappel {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .formationsuser.template3 .formation-user-title {
        font-size: 18px;
    }
}

/*******************************************/
/*                Progression              */
/*******************************************/
.maincontainer.progression {
    background: white;
}