/*******************************************/
/*                  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 */
}

/*******************************************/
/*         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;*/
}

#main-composition .downloads .media {
    display: flex;
    align-items: center;
}

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

#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%;
    /*font-family: 'Rubik', sans-serif;*/
}

#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 {
    float: left;
    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 {
    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.has_download .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: -6px;
    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;
}

/*******************************************/
/*           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 .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 .contact_form .form-group textarea,
#main-composition .contact_form .form-group textarea:focus,
#main-composition .comments #addReponseForm textarea,
#main-composition .comments #addReponseForm textarea:focus {
    height: unset !important;
}

/*#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 .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 .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 .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;
}

/* 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 {
    float: left;
    margin-right: 15px;
}

#main-composition div.checker span {
    border: 1px solid #D2D3E0;
    height: 20px;
    width: 20px;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
    margin-top: -1px;
    background: #FFF;
}

#main-composition div.checker span.checked {
    border-radius: 2px;
}

/* Default checked, can be overloaded with theme */
.maincontainer div.checker span.checked:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    position: absolute;
    top: 4px;
    left: 4px;
    color: #333;
    font-size: 12px;
    z-index: 0;
}

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

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;
}


/* 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;
}


/* This can not be contained to the form as it is out of the .*_form DOM */
.select2-container--open .select2-dropdown--below {
    border: 1px solid #DDDDE1;
    border-radius: 6px;
    min-width: 200px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #DDDDE1 none;
    color: #000;
}

/* 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;
}

/*******************************************/
/*           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 #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: 4px;
    border: none;
}

#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;
}

/*******************************************/
/*             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;
}

/*******************************************/
/*             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: 20px;
    color: #34364B;
}

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

/*******************************************/
/*             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;
}

/*******************************************/
/*                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 .col-md-3 {
    width: 25% !important;
    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;
}

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