/*
 * Feuille de style générale de l'Extranet
 * Company: MYDRAL
 * Author:  Olivier CEROU
 */


/************************************************/
/* VARIABLES CSS                                */
/************************************************/

:root {
    /* COLORS */
    --body-bg-color: #eeeeee;
    --page-bg-color: white;
    --separator-color: darkgrey;
}

/************************************************/
/* ELEMENTS HTML                                */
/************************************************/

html, body {
    width: 100%;
}

html {
    position: relative;
}

body {
    background-color: var(--body-bg-color);
}

a {
    cursor: pointer;
}


/************************************************/
/* LAYOUT                                       */
/************************************************/

#page-container {
    background-color: var(--page-bg-color);
}

#page-content {
    min-height: 100vh;
    margin: 0 0 0 0;
    padding: 60px 0px 60px 0px;
}
    
#footer-container {
    position: absolute;
    bottom: 0;
    height: 60px;
    width:100%;
}

#footer-content {
    border-top: 1px solid var(--separator-color);
    display: flex;
}

.footer-image {
    padding: 5px 0px 0px 0px;
}

.footer-image > img {
    width: 50px;
    height: 50px;
}

.footer-info {
    padding: 10px 0px 0px 0px;
    width: 100%;
    text-align: center;
}

/************************************************/
/* CONTAINER                                    */
/************************************************/

.main-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/*

@media (min-width: 768px) {
    .main-container {
        width: 750px;
    }
}

@media (min-width: 950px) {
    .main-container {
        width: 920px;
    }
}
*/
@media (min-width: 1350px) {
    .main-container {
        width: 1300px;
    }
}

.main-container:before,
.main-container:after {
    display: table;
    content: " ";
}

.main-container:after {
    clear: both;
}

/*
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 949px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1349px) {
    .hidden-md {
        display: none !important;
    }
}
*/
@media (min-width: 1349px) {
    .hidden-lg {
        display: none !important;
    }
}


.wide-container {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

/************************************************/
/* MENU                                         */
/************************************************/

.navbar {
    background-color: #363636;
    /* background-color: #FF5135; */
    /* background-color: #012498; */
}

.navbar-inverse .navbar-nav > li > a {
    /*color: white;*/
    color: #D2AF70;
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover {
    color: #D2AF70;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
    color: #D2AF70;
    background-color: #080808;
}


/************************************************/
/* SOUS-MENU                                    */
/************************************************/

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .caret {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
    }

    .dropdown-submenu > a:focus {
        outline: none;
    }

    .dropdown-submenu.open > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu .dropdown-menu {
        margin-bottom: 8px;
    }

.dropdown-submenu-toggle .caret {
    float: right;
    margin-top: 8px;
    margin-right: -20px;
}

.dropdown-submenu-toggle span {
    padding-right: 10px;
}

.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul {
    background-color: #f6f6f6;
}

.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul {
    background-color: #333;
}

.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a {
    padding-left: 30px;
}

@media screen and (min-width:768px) {
    .dropdown-submenu .dropdown-menu {
        margin-bottom: 2px;
    }

    .navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a {
        padding-left: 25px;
    }

    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul {
        background-color: #fff;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul {
        background-color: #fff;
    }
}

.menu-icon {
    margin-left: -10px;
    margin-right: 5px;
    width: 20px;
}

/************************************************/
/* BARRE DE TITRE DE PAGE                       */
/************************************************/

.pagebar {
    position: fixed;
    top: 52px;
    right: 0;
    left: 0;
    z-index: 800;
    /*border-width: 0 0 1px 0;*/
}

@media (min-width: 768px) {
    .pagebar {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-device-width: 480px) and (orientation: landscape) {
    .pagebar {
        /*max-height: 200px;*/
    }
}

@media (min-width: 768px) {
    .pagebar {
        border-radius: 0;
    }
}

.pagebar-container {
    min-height: 45px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid darkgrey;
    background-color: var(--page-bg-color);
}

/*
@media (min-width: 768px) {
    .pagebar-container {
        width: 750px;
    }
}

@media (min-width: 950px) {
    .pagebar-container {
        width: 920px;
    }
}
*/
@media (min-width: 1350px) {
    .pagebar-container {
        width: 1300px;
    }
}

.pagebar-title {
    font-size: 28px;
    font-style: italic;
    font-weight: bold;
    padding-top: 3px;
    float: left;
}

.pagebar-icon {
    margin-left: 5px;
    margin-right: 10px;
}

.pagebar-buttons {
    float: right;
    padding-top: 5px;
}

.pagebar-filters {
    float: right;
    padding-top: 5px;
    display: flex;
}

    .pagebar-filters > * {
        margin-left: 5px;
        width: auto;
        max-width: 250px;
        vertical-align: central;
    }

.pagebar-filters-largeitem {
    width:225px;
}

.pagebar-multiline > * {
    margin-top: 3px;
    margin-bottom: 3px;
}


/************************************************/
/* TITRES                                       */
/************************************************/

.titre-section {
    font-size: 28px;
    font-style: italic;
    font-weight: bold;
}

.titre-sous-section {
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
}

.titre-sous-section-item {
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

.titre-intercalaire {
    height: 2em;
    margin-top: 30px;
    font-size: 16px;
    background-color: #363636;
    color: #D2AF70;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 15px 5px 15px;
    font-style: italic;
    border-radius: 0px;
}

.titre-intercalaire .icone-action-left {
    margin-left: 10px;
    cursor: pointer;
}

/************************************************/
/* ZONES AUDIT                                  */
/************************************************/

.audit {
    display: flex;
    width: 100%;
    font-size: 10px;
    font-style: italic;
    padding: 15px 10px 10px 10px;
}

.audit-left {
    width: 50%;
    text-align: left;
}

.audit-right {
    width: 50%;
    text-align: right;
}

.audit-modal-footer {
    float: left;
    font-size: 10px;
    font-style: italic;
    text-align: left;
    width: 50%;
}


/************************************************/
/* COULEURS                                     */
/************************************************/

.color-transparent {
    color: rgba(255, 255, 255, 0);
}

.color-black {
    color: black;
}

.color-white {
    color: white;
}

.color-lightgray {
    color: #BDC1CC;
}

.color-green {
    color: #0FA688;
}

.color-gold {
    color: #D2AF70;
}

.color-red {
    color: #FF5135;
}

.color-primary {
    color: #3276b1;
}

.color-info {
    color: #17a2b8;
}

.color-error {
    color: #dc3545;
}

.color-warning {
    color: #f0ad4e;
}

.color-success {
    color: #5cb85c;
}

/************************************************/
/* LIGNE DE TABLEAU PRIMARY                     */
/************************************************/

.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
    background-color: #3276b1;
    color: white;
}

.table-hover > tbody > tr > td.primary:hover,
.table-hover > tbody > tr > th.primary:hover,
.table-hover > tbody > tr.primary:hover > td,
.table-hover > tbody > tr:hover > .primary,
.table-hover > tbody > tr.primary:hover > th {
    background-color: #286090;
    color: white;
}

/************************************************/
/* INDICATEUR DE CHARGEMENT                     */
/************************************************/

.loading {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.loading-title {
    position: fixed;
    top: 50vh;
    z-index: 1001;
    margin-top: 80px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: white;
}

.loading-spinner {
    position: fixed;
    left: 50%;
    top: 50vh;
    z-index: 1001;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border: 16px solid #f3f3f3; /* Light grey */
    border-radius: 50%;
    border-top: 16px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/************************************************/
/* POPUP D'ACTION EN COURS                      */
/************************************************/

.waiting-action-popup {
    position: fixed;
    z-index: 100;
    background: WhiteSmoke;
    width: auto;
    max-width: 400px;
    height: 35px;
    bottom: 10px;
    left: 10px;
    border-radius: 10px;
    border: 2px solid black;
    display: table;
    padding: 0px 20px 0px 10px;
}

    .waiting-action-popup > .content {
        display: table-cell;
        font-size: 14px;
        text-align: left;
        vertical-align: middle;
        padding-left: 10px;
        font-weight: bold;
    }

    .waiting-action-popup > .spinner-container {
        display: table-cell;
        padding: 5px 5px 5px 5px;
    }

        .waiting-action-popup > .spinner-container > .spinner {
            width: 25px;
            height: 25px;
            z-index: 200;
            border: 5px solid gainsboro; /* Light grey */
            border-radius: 50%;
            border-top: 5px solid #3498db; /* Blue */
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

.simple-spinner {
    display: inline;
    padding: 5px 5px 5px 5px;
}

    .simple-spinner > .spinner {
        display: table-cell;
        width: 25px;
        height: 25px;
        z-index: 200;
        border: 5px solid gainsboro; /* Light grey */
        border-radius: 50%;
        border-top: 5px solid #3498db; /* Blue */
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

/************************************************/
/* FORMULAIRES                                  */
/************************************************/

@media (prefers-color-scheme: dark) {
    /*
    html {
		filter: invert(100%);
	}
    body {
        background-color: black;
        color: #fefefe;
    }

    .pagebar-container {
        background-color: dimgrey;
    }

    #page-container {
        background-color: dimgrey;
    }

    a {
        color: #5fa9ee;
    }

    img {
        filter: grayscale(20%);
    }
    .form-control {
        background-color: lightgray;
    }
    */
}


.multiselect .caret {
    margin-top: 8px;
    float: right;
}

.chosen-container-single .chosen-single abbr {
    top: 10px;
}

.form-label {
    font-style: italic;
    padding-top: 6px;
    text-align: left;
}

.form-label-sm {
    font-style: italic;
    padding-top: 6px;
    text-align: left;
    font-size: 12px;
}

@media (min-width: 768px) {
    .form-label, .form-label-sm {
        text-align: right;
    }
}

.form-label-left {
    font-style: italic;
    padding-top: 6px;
    text-align: left;
}

.form-required {
    color: red;
}

.form-recommanded {
    color: blue;
}

.form-value {
    min-height: 32px;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 15px;
}

.form-value-table {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.form-check {
    font-style: italic;
    padding-top: 2px;
    text-align: left;
}

@media (min-width: 768px) {
    .form-check {
        text-align: center;
    }
}

.form-radio {
    font-style: italic;
    padding-left: 20px;
    padding-top: 6px;
    text-align: left;
}

.form-textarea {
    resize: vertical;
}

.field-with-error {
    border-color: rgb(159, 70, 67);
}

.form-slider-label {
    font-style: italic;
    text-align: left;
    padding-top: 35px;
}

@media (min-width: 768px) {
    .form-slider-label {
        text-align: right;
    }
}
.form-slider {
    font-style: italic;
    padding: 10px 20px 10px 20px;
    text-align: left;
}

.form-filters-zone {
    background-color: gainsboro;
    margin: 0px 0px 15px 0px;
    padding: 10px;
    border: 0px solid lightgrey;
    border-radius: 5px;
}

.form-filters-row {
    display: flex;
    margin: 0px;
    align-items: center;
}

.form-filters-label {
    font-style: italic;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 0px 15px;
    text-align: left;
}

@media (min-width: 768px) {

    .form-filters-label {
        padding: 6px 0px 0px 0px;
        text-align: right;
    }
}

@media (max-width: 768px) {

    .form-filters-row {
        margin: 0px 0px 0px 0px;
        padding: 0px;
    }

    .form-filters-zone {
        padding: 0px;
    }
}

.form-list-buttons {
    margin-bottom: 15px;
}

.form-list-buttons-title {
    margin-bottom: 5px;
    font-style: italic;
}

.form-list-buttons-content {
}

.form-group-padding {
    padding: 0px 15px 0px 15px;
}

/************************************************/
/* INPUT RATING (ETOILES)                       */
/************************************************/

.rating {
    --dir: right;
    --fill: gold;
    --fillbg: rgba(100, 100, 100, 0.15);
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --fill-star: gold;
    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
    --fill-heart: red;
    --like: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 712 712"><path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2l144 0c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48l-97.5 0c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3l0-38.3 0-48 0-24.9c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192l64 0c17.7 0 32 14.3 32 32l0 224c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32L0 224c0-17.7 14.3-32 32-32z"/></svg>');
    --fill-like: green;
    --smiley: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 178 178"> <path d="M64 128A64 64 0 1 0 64 0a64 64 0 1 0 0 128zM41 81.4C45.5 86.6 53.2 92 64 92s18.5-5.4 23-10.6c1.5-1.7 4-1.9 5.6-0.4s1.9 4 0.4 5.6C87.5 93 77.8 100 64 100s-23.5-7-29.9-14.4c-1.7-1.5-1.5-4 0.4-5.6s4-1.5 5.6 0.4zM36.1 52a8 8 0 1 1 16 0 8 8 0 1 1 -16 0zm48-8a8 8 0 1 1 0 16 8 8 0 1 1 0-16z"/> </svg>'); 
    --fill-smiley: gold; 
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    width: var(--w) !important;
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
}

.rating-active-input:hover {
    cursor: pointer;
}

.rating-heart {
    --symbol: var(--heart);
    --fill: red;
}

.rating-like {
    --symbol: var(--like);
    --fill: green;
}


[dir="rtl"] .rating {
    --dir: left;
}

.rating::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
}

.rating::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
}

.rating {
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.fa-icon-item {
    margin-right: 15px;
    width: 15px;
    text-align: center;
}


/************************************************/
/* ENTRETIEN MODELE                             */
/************************************************/

.entretien-modele-element-titre {
    /*text-transform: uppercase;*/
    font-size: 20px;
    font-weight: bold;
}

.entretien-modele-add-element-button {
    margin-bottom: 20px;
}

/************************************************/
/* TABLES                                       */
/************************************************/
.table-actions {
    white-space: nowrap;
    text-align: right;
}

.table-actions > div {
    cursor: pointer;
    margin: 0px 7px 0px 7px;
}

.table-actions > span {
    cursor: pointer;
    margin: 0px 7px 0px 7px;
}

/************************************************/
/* TABLES FORMATION                             */
/************************************************/
.table-formation {
    width: 100%;
}

.table-formation th {
    padding: 7px;
    background-color: black;
    text-align: center;
    font-style: italic;
    font-weight: normal;
    color: white;
}

.table-formation td {
    padding: 7px;
}

.table-formation td.td-action {
    text-align: center;
    justify-content: space-around;
}

.context-btn {
    cursor: pointer;
}


.qcm-liste {
    background-color: #eeeeee;
}

.qcm-liste:nth-child(2n) {
    background-color: white;
}

/************************************************/
/* MODALE ENTRETIEN                             */
/************************************************/

#modal-entretien {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-entretien-window {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0 0 0 0;
    padding: 20px 20px 20px 20px;
}

.modal-entretien-header {
    height: 60px;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 20px 15px 20px;
    background-color: #3276b1;
    color: white;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
}

.modal-entretien-content {
    padding: 0px 20px 0px 20px;
    max-height: 80vh;
    overflow: auto;
    background-color: white;
}

.modal-entretien-footer {
    background-color: whitesmoke;
    height: 60px;
    border-top: 1px solid lightgray;
    padding: 12px 40px 12px 40px;
    border-radius: 0px 0px 5px 5px;
}


/************************************************/
/* ENTRETIEN                                    */
/************************************************/

.entretien-photo-user {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.entretien-titre-principal {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 32px;
    color: #012498;
    margin: 15px 0px 15px 0px;
    text-transform: uppercase;
}

.entretien-titre-secondaire {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 22px;
    color: #FF5135;
    margin: 20px 0px 5px 0px;
    text-transform: uppercase;
}

.entretien-element-titre {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
}

.entretien-element-instructions {
    font-size:12px;
    font-style: italic;
    margin-bottom: 10px;
}

.entretien-table-reponse {
    width: 100%;
    --entretien-border-table: gainsboro;
}

    .entretien-table-reponse > thead > tr {
        padding: 10px 10px 10px 10px;
        background-color: whitesmoke;
    }

    .entretien-table-reponse > thead > tr > th {
        border-top: 1px var(--entretien-border-table) solid;
        border-left: 1px var(--entretien-border-table) solid;
        border-right: 1px var(--entretien-border-table) solid;
        padding: 10px 10px 10px 10px;
    }

        .entretien-table-reponse > thead > tr > th > .qualification {
            font-style: italic;
            font-weight: normal;
        }

        .entretien-table-reponse > thead > tr > th.sans-reponse {
            color: lightgrey;
        }

        .entretien-table-reponse > thead > tr > th.sans-reponse > img {
            filter: grayscale(1);
            opacity: 0.2;
        }

    .entretien-table-reponse > tbody > tr > td {
        border-left: 1px var(--entretien-border-table) solid;
        border-right: 1px var(--entretien-border-table) solid;
        padding: 3px 10px 3px 10px;
    }

        .entretien-table-reponse > tbody > tr > td.with-border {
            border-bottom: 1px var(--entretien-border-table) solid;
        }

        .entretien-table-reponse > tbody > tr > td.with-separator {
            border-bottom: 1px var(--entretien-border-table) solid;
            padding-bottom: 10px !important;
        }

    .entretien-table-reponse > tfoot > tr > td {
        border-bottom: 1px var(--entretien-border-table) solid;
        border-left: 1px var(--entretien-border-table) solid;
        border-right: 1px var(--entretien-border-table) solid;
        padding: 10px 10px 10px 10px;
    }

.entretien-table-label {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    font-size: 12px;
    font-style: italic;
    text-decoration: underline;
}

.entretien-sans-note {
    border: 0 !important;
    background-color: white !important;
}

.entretien-sortable-item {
    height: 2em;
    border: 1px solid gainsboro;
    cursor: grab;
    border-radius: 5px;
    background-color: whitesmoke;
    margin: 5px 0px 5px 0px;
    padding-top: 3px;
    padding-left: 10px;
    vertical-align: middle;
}

    .entretien-sortable-item:hover {
        background-color: gainsboro;
    }

    .entretien-sortable-item:active {
        cursor: grabbing;
    }

.entretien-indicateur-deplacement {
    float: right;
    padding: 4px 15px 0px 0px;
}

.entretien-grille-header {
    padding-top: 6px;
}

.entretien-grille-header > span {
    padding-top: 6px;
}

.entretien-reponse-non-selectionnee {
    text-decoration: line-through;
    font-weight: normal;
    color: lightgray;
}

/************************************************/
/* IMAGE VIEWER                                 */
/************************************************/
#image-viewer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#image-viewer-controls {
    display: block;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid lightgrey;
    background-color: #eeeeee; /*rgba(255, 255, 255, 1);*/
    height: 40px;
    padding-top: 3px;
    margin-top: 20px;
    vertical-align: central;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

#image-viewer-controls-row {
    padding: 0px 10px 0px 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

#image-viewer-controls-row .image-viewer-controls-col {
    max-height: 34px;
    overflow: hidden;
}

#image-viewer-img {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

#image-viewer-direct-access-box {
    background-color: white;
    border: 1px solid lightgrey;
    background-color: #eeeeee; /*rgba(255, 255, 255, 1);*/
    position: absolute;
    top: 60px;
    z-index: 3000;
    height: 70px;
    width: 160px;
    padding: 0 10px 0 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.image-viewer-tooltip {
    cursor: pointer;
}

/************************************************/
/* ONGLETS                                      */
/************************************************/

.tab-content {
    border: 1px solid lightgrey;
    border-top: 0px;
    padding: 20px 20px 20px 20px;
}

.tab-pane-border {
    border: 1px solid #dddddd;
    border-radius: 0px 0px 4px 4px;
    border-top-style: none;
}

/************************************************/
/* SORTABLE LIST                                */
/************************************************/

.card-item {
    margin: 10px 0px 10px 0px;
    padding: 10px 0px 10px 0px;
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.card-item-icon {
    text-align: center;
    font-size: 16px;
}

.sortable-list {
    margin: 0px;
}

.sortable-item {
    cursor: grab;
}

.sortable-item:active {
    cursor: grabbing;
}



/************************************************/
/* BORDURES                                     */
/************************************************/
.bdr-bottom {
    border-bottom: 1px solid darkgrey;
}

.bdr-all {
    border: 1px solid darkgrey;
}

/************************************************/
/* ALIGNEMENTS                                  */
/************************************************/

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-vh-center {
    vertical-align: middle !important;
    text-align: center;
}

.align-v-middle {
    vertical-align: middle !important;
}

.table-valign-middle > thead > tr > td {
    vertical-align: middle;
}

.table-valign-middle > thead > tr > th {
    vertical-align: middle;
}

.table-valign-middle > tbody > tr > td {
    vertical-align: middle;
}

.table-valign-middle > tbody > tr > th {
    vertical-align: middle;
}

/************************************************/
/* GESTION DE LA POLICE                         */
/************************************************/

.red {
    color: red;
}

.blue {
    color: blue;
}

.navy {
    color: navy;
}

.italic {
    font-style: italic;
}

/************************************************/
/* OBJETS FLOTTANTS                             */
/************************************************/

.float-right {
    float: right;
}

.float-left {
    float: left;
}

/************************************************/
/* CURSEURS                                     */
/************************************************/

.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}

.cursor-help {
    cursor: help;
}

.tooltip-inner {
    max-width: 350px;
}

/************************************************/
/* GRILLE DE SAISIE                             */
/************************************************/

.grid-status, .grid-action, .grid-order {
    text-align: center;
    font-size: 16px;
    width: 40px;
}

.grid-icon {
    margin-top: 5px;
}

.grid-action > div {
    cursor: pointer;
}

.grid-order > div {
    cursor: grab;
}

.grid-loading {
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 3px 0px 0px 3px;
    /*background-color: rgba(0, 0, 0, 0.5);*/
}

.grid-loading-spinner {
    width: 25px;
    height: 25px;
    z-index: 2;
    border: 5px solid gainsboro; /* Light grey */
    border-radius: 50%;
    border-top: 5px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.grid-total {
    font-weight: bold;
    font-size: 14px;
}

.grid-value {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 6px;
    max-height: 16px;
}

.tablesorter-default {
    margin: 0 0 0 0;
}

.tablesorter-default td {
    font-size: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,Sans-serif;
}

.tablesorter-header-inner {
    font-size: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,Sans-serif;
}


/************************************************/
/* FICHE INTERVENTION                           */
/************************************************/

.detail-activite-description-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 400px;
    background-color: white;
    margin: 0px;
    padding: 5px;
    border: 2px solid black;
}

/************************************************/
/* TOOLTIPS                                     */
/************************************************/

.red-tooltip + .tooltip > .tooltip-inner {
    background-color: #f00;
}

.red-tooltip + .tooltip > .tooltip-arrow {
    border-top-color: #f00;
}

/************************************************/
/* TOOLTIPS ANOMALIES                           */
/************************************************/

.anomalie-sign {
    cursor: help;
    font-size: 20px;
}

.anomalie-anomalie-color {
    color: #FF5135;
}

.anomalie-alerte-color {
    color: #D2AF70;
}

.anomalie-title {
    font-size: 12px;
    font-style: italic;
}

.anomalie-detail {
    font-size: 16px;
    font-weight: bold;
}

.anomalie-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 400px;
    background-color: white;
    margin: 0px;
    padding: 5px;
    border: 2px solid black;
}



/************************************************/
/* TOOLTIPS COMMANDES                           */
/************************************************/

.commande-warning {
    cursor: help;
    font-size: 20px;
    color: #FF5135;
}

.commande-warning-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 180px;
    background-color: white;
    margin: 0px;
    padding: 5px;
    border: 2px solid #FF5135;
    color: #FF5135;
    font-weight: bold;
}

.commande-name {
    cursor: help;
}

.commande-name-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 400px;
    background-color: white;
    margin: 0px;
    padding: 5px;
    border: 2px solid black;
}

/************************************************/
/* PLANNING                                     */
/************************************************/

@media (max-width: 992px) {
    .planning-mensuel {
        font-size: 12px;
    }
}

.planning-mensuel {
    width: 100%;
}

    .planning-mensuel > thead > tr > th {
        text-align: center;
        font-weight: normal;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .planning-mensuel > tbody > tr > th {
        font-weight: normal;
        width: 9%;
    }

    .planning-mensuel > tbody > tr > td {
        vertical-align: top;
        width: 13%;
    }

.planning-hebdo {
    width: 100%;
}

    .planning-hebdo > tbody > tr {
        border-bottom: 1px solid lightgrey;
        border-top: 1px solid lightgrey;
    }

        .planning-hebdo > tbody > tr > th {
            font-weight: normal;
            text-align: left;
            width: 15%;
        }

        .planning-hebdo > tbody > tr > td {
            width: 85%;
        }


.planning-equipe {
    width: 100%;
}

    .planning-equipe > thead > tr > th {
        background: white;
        text-align: center;
        font-weight: normal;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .planning-equipe > tbody > tr {
        border-bottom: 1px solid lightgrey;
        border-top: 1px solid lightgrey;
    }

        .planning-equipe > tbody > tr > th {
            font-weight: normal;
            width: 16%;
        }

        .planning-equipe > tbody > tr > td {
            vertical-align: top;
            width: 12%;
        }


.jour-courant {
    border-collapse: collapse;
    border-width: 2px;
    border-color: black;
    border-style: solid;
}

.case {
    padding: 2px;
    margin: 2px;
    overflow: hidden;
    cursor: pointer;
    position:relative;
}

@media (min-width: 992px) {
    .case {
        font-size: 12px;
    }
}

.case:hover {
    cursor: pointer;
}

.case-complete {
    height: 80px;
}

.case-incomplete {
    height: 38px;
}

.case-icon-time {
    position: absolute;
    bottom: 1px;
    right: 5px;
}

.case-tooltip-header {
    color:lightblue;
}

.case-tooltip-error {
    color: IndianRed;
}

.inter-ferme {
    background-color: #caf5b8;
}

.inter-valide {
    border-collapse: collapse;
    border-left-width: 5px;
    border-left-color: green;
    border-left-style: solid;
}

.inter-ouvert-passe {
    background-color: #d9534f /*#f0ad4e*/;
    color: white;
}

.inter-ouvert-futur {
    background-color: lightblue;
}

.sans-inter-passe {
    border-color: #d9534f;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}

.sans-inter-futur {
    border-color: #428bca;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}

.sans-inter-non-travaille {
    border-color: #cccccc;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}


/************************************************/
/* LISTE INTERVENTIONS                          */
/************************************************/

.ligne-non-travaille {
    background-color: lightblue;
}

.ligne-aujourdhui {
    font-weight: bold;
}



/************************************************/
/* FICHE INTERVENTION                           */
/************************************************/

.message-serie-input {
    padding-left: 10px;
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .message-serie-input {
        display: block;
        white-space: nowrap;
    }
}

/************************************************/
/* FICHE JUSTFIFICATIF                          */
/************************************************/

.sauvegarder-document-input {
    padding-top: 3px;
    padding-left: 10px;
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .sauvegarder-document-input {
        display: block;
        white-space: nowrap;
    }
}

/************************************************/
/* FICHE DETAIL ACTIVITE                        */
/************************************************/

.detail-activite-ligne-jour {
    background-color: lightblue;
}

.detail-activite-ligne-intervention {
    background-color: antiquewhite;
    font-style: italic;
    font-weight: bold;
}


/************************************************/
/* RESSOURCE COURS                              */
/************************************************/
.ressource-libelle-nom {
    font-size: 24px;
    font-weight: bold;
}

.ressource-label {
    font-style: italic;
    text-align: right;
}

.ressource-value {
    font-weight: bold;
}

.support-thumbnail {
    display: block;
    border: 1px solid black;
    width: 192px;
}

.support-thumbnail:hover {
    cursor: pointer;
    -webkit-filter: brightness(50%);
}

.support-thumbnail-spinner-container {
    background-color: lightgrey;
    width: 192px;
    height: 108px;
    border: 1px solid black;
}

.support-thumbnail-spinner {
    z-index: 2;
    width: 50px;
    height: 50px;
    margin: 20px 0 0 71px;
    border: 8px solid #f3f3f3; /* Light grey */
    border-radius: 50%;
    border-top: 8px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.support-thumbnail-spinner-title {
    font-size: 10px;
    color: black;
    margin-top: 5px;
    text-align: center;
}

.support-thumbnail {
    display: block;
    border: 1px solid black;
    width: 192px;
}

.support-thumbnail:hover {
    cursor: pointer;
    -webkit-filter: brightness(50%);
}

.support-thumbnail-spinner-container {
    background-color: lightgrey;
    width: 192px;
    height: 108px;
    border: 1px solid black;
}

.support-thumbnail-spinner {
    z-index: 2;
    width: 50px;
    height: 50px;
    margin: 20px 0 0 71px;
    border: 8px solid #f3f3f3; /* Light grey */
    border-radius: 50%;
    border-top: 8px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.support-thumbnail-spinner-title {
    font-size: 10px;
    color: black;
    margin-top: 5px;
    text-align: center;
}

.fichier-thumbnail {
    display: block;
    border: 1px solid black;
    width: 192px;
}

.fichier-thumbnail-spinner-container {
    background-color: lightgrey;
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.fichier-thumbnail-spinner {
    z-index: 2;
    width: 50px;
    height: 50px;
    margin: 0 0 0 0;
    border: 8px solid #f3f3f3; /* Light grey */
    border-radius: 50%;
    border-top: 8px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.fichier-thumbnail-spinner-title {
    font-size: 10px;
    color: black;
    margin-top: 5px;
    text-align: center;
}


.errors-messages {
    color: red;
}

/************************************************/
/* SPECIFIQUE FICHE INTERVENTION                */
/************************************************/
.modal-serie-jours-semaine {
    line-height: 10px;
    padding-top: 10px;
    padding-left: 40px;
}


/************************************************/
/* SPECIFIQUE LISTE REFERENTIELS                */
/************************************************/
.extra-data {
    font-size: 9pt;
    color: grey;
}

/************************************************/
/* OLD                                          */
/************************************************/



/*
    Bleu bouton : #4688cb
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

    
.menu-subtitle {
    font-weight:bold;
    font-style:italic;
    padding: 6px 15px;
}
*/



/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 700px;
}*/

/* AJOUTS PAR OCE */




.titre-page {
    float: left;
    font-size: 28px;
    font-style: italic;
    font-weight: bold;
}

.soustitre-page {
    float: left;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
}

.info-complementaire {
    font-size: 10px;
    font-style: italic;
    padding-left: 10px;
    text-align: left;
}

.btn-std {
    width: 100px;
}

.btn-std-xs {
    width: 70px;
}

.btn-icon {
    width: 40px;
}

.btn-xxs {
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-xl {
    width: 200px;
}

.btn-title-with-icon {
    padding-left: 5px;
}

.btn-space {
    margin-right: 5px;
}

    .btn-space:last-of-type {
        margin-right: 0;
    }

.has-error > .btn {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442;
}


.btn-grey {
    color: black;
    background-color: #eeeeee;
    border-color: #ccc;
}

    .btn-grey:hover {
        color: #fff;
        background-color: dimgrey;
        border-color: #adadad;
    }

.btn-square {
    width: 128px;
    height: 128px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

.btn-square-icon {
    margin-top: 20px;
    font-size: 64px;
}

.btn-square-text {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
}

.btn-loading {
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
}

.btn-loading-spinner {
    width: 20px;
    height: 20px;
    z-index: 2;
    border: 5px solid gainsboro; /* Light grey */
    border-radius: 50%;
    border-top: 5px solid #3498db; /* Blue */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}



.input-group-addon-btn-grey:hover {
    cursor: pointer;
    color: #fff;
    background-color: dimgrey;
    border-color: #adadad;
}


.ouvrir-item {
    cursor: pointer;
}

.titre-documentation-div {
    height: 50px;
    vertical-align: middle;
    font-size: 26px;
    font-weight: bold;
    color: #0b8ac9;
}

.td-input-label {
    text-align: right;
    font-size: 14px;
    font-style: italic;
    padding: 5px;
}

.td-value-label {
    text-align: left;
    line-height: 1.428571429;
    font-weight: bold;
    font-size: 14px;
    padding: 5px;
}

.cal-inter {
    font-size: 12px;
    padding: 2px;
    margin: 2px;
    overflow: auto;
}

    .cal-inter:hover {
        /*cursor:pointer;*/
    }

.ferme {
    background-color: #caf5b8;
}

.valide {
    border-collapse: collapse;
    border-left-width: 5px;
    border-left-color: green;
    border-left-style: solid;
}

.courant {
    border-collapse: collapse;
    border-width: 2px;
    border-color: black;
    border-style: solid;
}

.non-ferme {
    background-color: #d9534f /*#f0ad4e*/;
    color: white;
}

.booke {
    background-color: lightblue;
}

.off {
    background-color: lightgray;
}

.retard {
    border-color: #d9534f;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}

.sans {
    border-color: #428bca;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}

.we {
    border-color: #cccccc;
    border-width: 1px;
    border-style: dashed;
    border-collapse: collapse;
}

.jour {
    height: 80px;
}

.demi-jour {
    height: 38px;
}

.quart-jour {
    height: 18px;
}


/* Carousel */
.carousel-caption {
    z-index: 10 !important;
}

    .carousel-caption p {
        font-size: 20px;
        line-height: 1.4;
    }

@media (min-width: 768px) {
    .carousel-caption {
        z-index: 10 !important;
    }
}


/* AJOUTS PAR NDE */

li.dropdown:hover {
    background: rgba(255, 255, 255, 0.1);
}

li.dropdown {
    transition: background .2s;
}

ul.mobile-nav li:hover {
    background: rgba(255, 255, 255, 0.1);
}

ul.mobile-nav li {
    transition: background .2s;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

.dropdown-menu > li > a {
    padding: 6px 30px;
}


.table {
    display: table !important;
}

.navbar-toggle {
    border: 0px solid transparent;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: rgba(0, 0, 0, 0.25) !important;
    outline: 0;
}


.material-icons {
    font-family: 'Material Icons' !important;
}

label {
    margin-bottom: 5px;
    margin-top: 5px;
}

.user-list-check {
    list-style: none;
}

    .user-list-check label {
        margin-bottom: 1px;
        margin-top: 1px;
    }

ul.user-list-check {
    padding-left: 0;
}

.user-list-check li {
    display: flex;
}

.blog-choose {
    transition: .2s;
}

    .blog-choose h3,
    .blog-choose p {
        color: #fff;
    }

    .blog-choose:hover {
        filter: opacity(0.8);
    }

.blog-article {
    transition: .2s;
}

    .blog-article:hover {
        background: rgba(144, 144, 144, 0.09);
        cursor: pointer;
    }

.form-group {
    margin-bottom: 2px;
}

.col-form-label span {
    float: right;
}

label {
    font-weight: initial;
    font-style: italic;
}

.card .blog-article {
    box-shadow: #cccccc 0px 0px 15px;
}

    .card .blog-article .col-12 {
        margin-right: 10px;
        margin-left: 10px;
    }

.table-comment table {
    width: 100%;
}

.table-comment thead, .table-comment tbody, .table-comment tr, .table-comment td, .table-comment th {
    display: block;
}

    .table-comment tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    .table-comment thead th {
        height: 30px;
        /*text-align: left;*/
    }

.table-comment tbody {
    max-height: 300px;
    overflow-y: auto;
}

.table-comment thead {
    /* fallback */
}


.table-comment tbody td, .table-comment thead th {
    width: 20%;
    float: left;
}

.blog-menu {
    width: 100%;
    background: #c4c4c4;
    position: fixed;
    left: 0;
    top: 50px;
    text-align:center;
    z-index:999;
}

.blog-menu .container {
    height: 100%;
}

.blog-menu a {
    font-weight:bold !important;
    color:#535353;
    height: 100%;
    float: left;
    transition:.2s;
    text-decoration:none;
    padding-top: 3px;
    padding-bottom: 3px;
}

.blog-menu a:hover {
    background:rgba(255, 255, 255, 0.30);
    color:#222222;
}

.blog-header {
    width:100%;
    height: 250px;
    position: absolute;
    left:0;
    background-image:url(../images/blog-market.jpg);
    background-size:cover;
    z-index:49;
    box-shadow: 0px 0px 10px 5px #c5c5c5;
}

.blog-header .container {
    margin-top: 60px;
}

.blog-header .blog-title {
    padding:5px;
    font-weight:bold;
    font-size: 50px;
    cursor:default;
}

.blog-header p {
    font-size: 25px;
    font-weight:bold;
    margin-top:15px;
    cursor:default;
}

.blog-header a {
    font-weight:bold;
    color:#000;
    transition:.3s;
    padding: 3px 5px 26px;
    text-decoration: none;
    border-bottom: solid 2px transparent;
}

.blog-header a:hover {
    background:rgba(255, 255, 255, 0.25);
    border-color:white;
    color:#515151;
}

.blog-header .blog-breadcrumb {
    margin-top:23px;
    user-select:none;
}

.blog-header .blog-breadcrumb a {
    margin-top:23px;
    user-select:none;
    color:#848484;
}

.blog-header .blog-breadcrumb span {
    font-weight:bold;
    cursor:default;
    color:#848484;
}

@media screen and (max-width:748px) {
    .blog-header .blog-title {
        padding:5px;
        font-weight:bold;
        font-size: 30px;
    }

    .blog-header p {
        font-size: 15px;
        font-weight:bold;
        margin-top:15px;
    }

    .blog-header .blog-breadcrumb {
        margin-top:66px;
        user-select:none;
    }
}

.article-list .col-xs-1, .article-list .col-xs-2, .article-list .col-xs-3, .article-list .col-xs-4, 
.article-list .col-xs-5, .article-list .col-xs-6, .article-list .col-xs-7, .article-list .col-xs-8, 
.article-list .col-xs-9, .article-list .col-xs-10, .article-list .col-xs-11, .article-list .col-xs-12, 
.article-list .col-sm-1, .article-list .col-sm-2, .article-list .col-sm-3, .article-list .col-sm-4, 
.article-list .col-sm-5, .article-list .col-sm-6, .article-list .col-sm-7, .article-list .col-sm-8, 
.article-list .col-sm-9, .article-list .col-sm-10, .article-list .col-sm-11, .article-list .col-sm-12, 
.article-list .col-md-1, .article-list .col-md-2, .article-list .col-md-3, .article-list .col-md-4, 
.article-list .col-md-5, .article-list .col-md-6, .article-list .col-md-7, .article-list .col-md-8, 
.article-list .col-md-9, .article-list .col-md-10, .article-list .col-md-11, .article-list .col-md-12, 
.article-list .col-lg-1, .article-list .col-lg-2, .article-list .col-lg-3, .article-list .col-lg-4, 
.article-list .col-lg-5, .article-list .col-lg-6, .article-list .col-lg-7, .article-list .col-lg-8, 
.article-list .col-lg-9, .article-list .col-lg-10, .article-list .col-lg-11, .article-list .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right:0px;
    padding-left:0px;
}

.panel-body * {
    max-width: 100% !important;
    white-space: inherit !important;
}

@media screen and (max-width:992px) {
    .doc-desktop {
        display:none;
    }
}

@media screen and (min-width:992px) {
    .doc-mobile {
        display:none;
    }
}

.panel-body {
    overflow-y: auto;
    width: 100%;
    word-wrap: break-word;
}

img.bandereaunew {
    position: absolute;
    height: 60px;
    margin-top: -4px;
    margin-left: -5px;
}

@media screen and (max-width:992px) {
    .blog-btn-modify, .blog-btn-modify button, .blog-btn-modify-div {
        width: 100%;
    }
}

.layout-notifications-number {
    position: absolute;
    margin-top: -13px;
    margin-left: 10px;
    background: darkorange;
    padding: 2px;
    height: 24px;
    width: 24px;
    text-align: center;
    border-radius: 100%;
    color: black;
}

.untouchable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

.blog-droits li {
    margin-right:5px;
}

@media screen and (max-width:992px) {
    .blog-droits {
        display:initial !important;
    }
}

.comments-container {
    background: #efefef;
    border-radius: 4px;
    padding: 7px;
    box-shadow: 4px 3px 9px -4px;
}

.comments-container * {
    margin: 0;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }

.comments-container a {
 	color: #03658c;
 	text-decoration: none;
 }

.comments-container ul {
	list-style-type: none;
}

.comments-container h1 {
	font-size: 36px;
	color: #283035;
	font-weight: 400;
}

.comments-container h1 a {
	font-size: 18px;
	font-weight: 700;
}

.comments-list {
	position: relative;
}

.comments-list:before {
	content: '';
	width: 2px;
	height: 100%;
	background: #c7cacb;
	position: absolute;
	left: 32px;
	top: 0;
}

.comments-list:after {
	content: '';
	position: absolute;
	background: #c7cacb;
	bottom: 0;
    left: 29px;
	width: 7px;
	height: 7px;
	border: 3px solid #dee1e3;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
	content: '';
	width: 60px;
	height: 2px;
	background: #c7cacb;
	position: absolute;
	top: 25px;
	left: -55px;
}


.comments-list li {
	margin-bottom: 15px;
	display: block;
	position: relative;
}

.comments-list li:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	width: 0;
}

.reply-list {
	padding-left: 88px;
	clear: both;
	margin-top: 15px;
}

.comments-list .comment-avatar {
	width: 65px;
	height: 65px;
	position: relative;
	z-index: 99;
	float: left;
	border: 3px solid #FFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	overflow: hidden;
}

.comments-list .comment-avatar img {
	width: 100%;
	height: 100%;
}

.reply-list .comment-avatar {
	width: 50px;
	height: 50px;
}

.comment-main-level:after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	clear: both;
}

.comments-list .comment-box {
    width: 92%;
	float: right;
	position: relative;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	display: block;
	border-width: 10px 12px 10px 0;
	border-style: solid;
	border-color: transparent #FCFCFC;
	top: 8px;
	left: -11px;
}

.comments-list .comment-box:before {
	border-width: 11px 13px 11px 0;
	border-color: transparent rgba(0,0,0,0.05);
	left: -12px;
}

.reply-list .comment-box {
	width: 610px;
}
.comment-box .comment-head {
	background: #FCFCFC;
	padding: 10px 12px;
	border-bottom: 1px solid #E5E5E5;
	overflow: hidden;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
	float: right;
	margin-left: 14px;
	position: relative;
	top: 2px;
	color: #A6A6A6;
	cursor: pointer;
	-webkit-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
	color: #03658c;
}

.comment-box .comment-name {
	color: #283035;
	font-size: 14px;
	font-weight: 700;
	float: left;
	margin-right: 10px;
}

.comment-box .comment-name a {
	color: #283035;
}

.comment-box .comment-head span {
	float: left;
	color: #999;
	font-size: 13px;
	position: relative;
	top: 1px;
}

.comment-box .comment-content {
	background: #FFF;
	padding: 12px;
	font-size: 15px;
	color: #595959;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.est-auteur, .comment-box .comment-name.est-auteur a {color: #03658c;}
.comment-box .comment-name.est-auteur:after {
	content: 'Auteur';
	background: #03658c;
	color: #FFF;
	font-size: 12px;
	padding: 3px 5px;
	font-weight: 700;
	margin-left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

@media only screen and (max-width: 992px) {
	.comments-container {
		width: 100%;
	}

	.comments-list .comment-box {
		width: 100%;
	}

	.reply-list .comment-box {
		width: 100%;
	}
}

.post-content * {
    max-width:100%;
    white-space: inherit !important;
}

.post-content {
    word-wrap: break-word;
}

.list-group.condensed .list-group-item {
    padding:0;
}

.tokenfield {
    height:auto;
}

.m-0-l { margin-left: 0; }
.m-0-r { margin-right: 0; }
.emoji-dialog {
    width: 300px;
    padding: 10px;
}
.emoji-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 24px;
}
.emoji-icon-inline {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.emoji-list {
    height: 200px;
    overflow-y: scroll;
}

.extra-card {
    padding: 15px;
    margin-top: 24px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 5px #ababab;
    margin-bottom: 24px;
}

.formation-block {
    border: solid 1px rgba(0, 0, 0, 0.3);
    padding: 15px;
}

.tab-content.formation-tab {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 0;
}

.bdr-black-03 {
    border-color: rgba(0, 0, 0, 0.3);
}

.nav-tabs > li.active > a.bdr-black-03,
.nav-tabs > li.active > a.bdr-black-03:hover,
.nav-tabs > li.active > a.bdr-black-03:focus {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-color: transparent;
}

.nav-tabs > li > a.bdr-black-03:hover {
    border-color: #eeeeee #eeeeee rgba(0, 0, 0, 0.3);
}

.nav-tabs li a {
    transition: all .3s;
    outline: none;
}

@media (max-width: 544px) {
    .hidden-mobile {
        display:none;
    }
}
@media (min-width: 545px) {
    .show-mobile {
        display:none;
    }
}

@media (min-width: 768px) {
    .pull-right-sm {
        float: right !important;
    }
}

.evalqcm > div:nth-child(2n) {
    background-color: #e9e9e9;
}

.full-disabled {
    display:none;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.formation-header {
    width:100%;
    height: 44px;
    box-shadow: 0px 0px 5px #ababab;
    background-color: #ffffff;
}

.formation-header-logo {
    height:100%;
    display: inline-block;
}

.formation-header-logo img {
    height:100%;
}

ul.formation-header-menu {
    padding: 0;
    float: right;
}

.formation-header-menu li {
    padding: 0;
    margin: 0;
    list-style: none;
    transition: all .2s;
}

.formation-header-menu li a {
    padding: 12px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    display:block;
}

.formation-header-logout {
    background-color: #c33939;
}