:root {
    --color-red-primary: #CF1717;
    --color-red-secondary: #a20000;
    --color-grey-blue: #5c7a96;
    --color-grey-darked: #464b50;
    --color-grey-light: #efeeed;
    --color-white: #ffffff;
    --color-white-text: #ffffff;
    --color-black: #000000;
    --color-black-text: #000000;
    --color-grey-darker: #181818;
    --color-blue-light: #66b6da;
    --color-yellow: #FFC000;
    --color-green: #1e661e;
    --interface: 5rem;
    --mission-menu-main: 4rem;
    --mission-map: 14rem;
    --mission-menu-secondary: 4rem;
    --mission-outil: 3rem;
    --mission-bottombar: 1rem;
    --bottom-topbar: 2rem;
    --sidebar: 5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-red-primary: #CF1717;
        --color-red-secondary: #a20000;
        --color-grey-blue: #5c7a96;
        --color-grey-darked: #282828;
        --color-grey-light: #5b5b5b;
        --color-white: #d7d7d7;
        --color-white-text: #ffffff;
        --color-black: #000000;
        --color-black-text: #000000;
        --color-grey-darker: #181818;
        --color-blue-light: #66b6da;
        --color-yellow: #FFC000;
        --color-green: #1e661e;
        --interface: 5rem;
        --mission-menu-main: 4rem;
        --mission-map: 14rem;
        --mission-menu-secondary: 4rem;
        --mission-outil: 3rem;
        --mission-bottombar: 1rem;
        --bottom-topbar: 2rem;
        --sidebar: 5rem;
    }
}

.dark {
    --color-red-primary: #CF1717;
    --color-red-secondary: #a20000;
    --color-grey-blue: #5c7a96;
    --color-grey-darked: #282828;
    --color-grey-light: #5b5b5b;
    --color-white: #d7d7d7;
    --color-white-text: #ffffff;
    --color-black: #000000;
    --color-black-text: #000000;
    --color-grey-darker: #181818;
    --color-blue-light: #66b6da;
    --color-yellow: #FFC000;
    --color-green: #1e661e;
    --interface: 5rem;
    --mission-menu-main: 4rem;
    --mission-map: 14rem;
    --mission-menu-secondary: 4rem;
    --mission-outil: 3rem;
    --mission-bottombar: 1rem;
    --bottom-topbar: 2rem;
    --sidebar: 5rem;
}

html {
}

body {
    background: var(--color-black) !important;
}

/* Titre */

.Size-1 {
    font-size: 3rem !important;
}

.Size-2 {
    font-size: 2rem !important;
}

.Size-3 {
    font-size: 1.5rem !important;
}

.Size-4 {
    font-size: 1rem !important;
}

.Size-lg-3 {
    font-size: 6rem !important;
}

.Size-lg-5 {
    font-size: 4rem !important;
}

/* Couleur */

.Black {
    color: var(--color-black) !important;
}

.White {
    color: var(--color-white) !important;
}

.Red {
    color: var(--color-red-primary) !important;
}

.GBlue {
    color: var(--color-grey-blue) !important;
}

.Blue {
    color: var(--color-blue-light) !important;
}

.center-vertical {
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    flex-direction: column !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: 100% !important;
}

.center-vertical-no-height {
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    flex-direction: column !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* item colored by statut */


.bg-Encours, .bg-Enattente {
    background: var(--color-yellow) !important;
    color: var(--color-white) !important;
}

.bg-Enretard {
    background: var(--color-red-primary) !important;
    color: var(--color-white) !important;
}

.bg-Completé, .bg-Completée {
    background: var(--color-green) !important;
    color: var(--color-grey-light) !important;
}

.bg-Annulé, .bg-Annulée
{
    background: #FF0A2B !important;
    color: var(--color-white) !important;
}

.bg-Refusé, .bg-Refusée
{
    background: #FF0A2B !important;
    color: var(--color-white) !important;
}

/* text and bg color */

.bg-Enattente {
    background: var(--color-yellow) !important;
    color: var(--color-white) !important;
}

.txt-Enattente, .txt-Enattentedevalidation, .txt-Encours {
    color: var(--color-yellow) !important;
}

.txt-Convertie {
    color: var(--color-blue-light) !important;
}

.bg-Accepté, .bg-Complétée, .bg-Acceptée, .bg-Complété, .bg-Active {
    background: #00CC99 !important;
    color: var(--color-grey-light) !important;
}

.txt-Accepté, .txt-Complétée, .txt-Acceptée, .txt-Complété {
    color: #00CC99;
}

.bg-Annulé, .bg-Annulée, .bg-NotActive {
    background: #FF0A2B !important;
    color: var(--color-white) !important;
}

.txt-Annulé, .txt-Annulée, .txt-Enretard {
    color: #FF0A2B;
}

.txt-Refusé, .txt-Refusée {
    color: #394c62;
}

.dropdown-menu::before {
    display: none !important;
}

.dropdown-item :active {
    background: var(--color-red-primary) !important;
    color: var(--color-white);
}

/* items */

.truncText {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
    text-align: center;
}

label.required:before {
    content:"* ";
    color: red;
}


.Bold {
    font-weight: bold !important;
}

.separator-space-5 {
    height: 5vw;
    width: 100%;
}

@media screen and (max-width: 999px) {
    #bottomBar {
        display: none !important;
    }

    #interface-btn .interface-text {
        display: none;
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    display: none;
    min-height: calc(100vh - var(--interface));
}

#header {
    width: 100%;
}

#content {
    width: 100%;
}

#sidebar {
    width: 100%;
}

#footer {
    width: 100%;
}


@media (max-width: 1200px) {
    #wrapper {
        margin: 0 auto;
    }
}

@media (max-width: 992px) {
    .sideformLogin {
        display: none;
    }

}

@media (max-width: 768px) {

    #wrapper {
        margin: 0 auto;
    }
}

@media screen and (max-width: 576px) {
}


.Page {
    background: var(--color-grey-light) !important;
    width: 99%;
    min-height: calc(100vh - 5rem);
}

@media (max-width: 992px) {

    .Page {
        background: var(--color-grey-light) !important;
        width: 100%;
        min-height: calc(100vh - 5rem);
    }
}


.jumbotron {
    background: transparent !important;
}

/* alert */

.alert {
    animation: hide 1.5s linear 2s 1 forwards;
    position: absolute !important;
    z-index: 10;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* interface */

#interface {
    background: var(--color-black);
    height: var(--interface);
    width: 99%;
}

#interface .nav-link {
    color: white !important;
}

#interface i {
    height: 100%;
    margin: auto;
    vertical-align: middle;
    font-size: 1.2rem;
}

.interface-text {
    height: 100%;
    font-weight: bold;
    vertical-align: middle;
    font-size: 1.2rem;
    margin-left: 0.5rem;
}


.interfaceItem {
}

@media screen and (max-width: 800px) {
    #interface .nav-link span {
        display: none;
    }
}

/* collapse */

#sidebar {
    border: none;
    width: 5rem;
    position: fixed;
    transform: none !important;
}

#sidebar .bx-2x {
    font-size: 2em !important;
}

#sidebar .bx {
    position: relative !important;
    display: table-cell !important;
    width: 5rem !important;
    height: 6rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 2.5rem !important;
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
}

.main-menu:hover, nav.main-menu.expanded {
    width: 250px !important;
    overflow: visible;
    transition: 0.5s;
}

.main-menu {
    background: var(--color-red-secondary);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 5rem;
    -webkit-transition: width .05s linear;
    transition: width .05s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    z-index: 1000;
    border: 5px solid black;
}

.main-menu .title {
    color: var(--color-white) !important;
}

.main-menu > ul {
    margin: 7px 0;
}

.main-menu li {
    position: relative;
    display: block;
    width: 250px;
}


.main-menu li > a {
    position: relative;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--color-white-text);
    font-size: 14px;
    text-decoration: none;
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
    width: 100%;

}

.main-menu .nav-icon {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}

.main-menu .nav-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bolder;
}

.main-menu > ul.logout {
    position: absolute;
    left: 0;
    bottom: 0;
}

.no-touch .scrollable.hover {
    overflow-y: hidden;
}

.no-touch .scrollable.hover:hover {
    overflow-y: auto;
    overflow: visible;
}

a:hover, a:focus {
    text-decoration: none;
}


nav ul, nav li {
    outline: 0;
    margin: 0;
    padding: 0;
}

.main-menu li:hover > a, nav.main-menu li.active > a, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .no-touch .dashboard-page nav.dashboard-menu ul li:hover a, .dashboard-page nav.dashboard-menu ul li.active a,
.main-menu .nav-text:hover > a {
    color: var(--color-red-secondary);
    background-color: var(--color-grey-light);
    transition: 0.5s;
    width: 100%;
}

.area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
}

#sidebar:hover > ul > li > .sm-dropright {
    animation: show 0.3s linear 0.3s forwards;
}

.sm-dropright {
    margin-left: 100% !important;
    width: 100%;
    background: var(--color-red-secondary);
    position: absolute;
    top: 0;
    color: var(--color-grey-light);
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    visibility: hidden;
    opacity: 0;
}

.sm-dropright > li {
    position: relative !important;
    height: 36px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 20px !important;
}

#sidebar .title {
    color: var(--color-grey-light);
}

.close {
    cursor: pointer;
    z-index: 9;
}


@media screen and (max-width: 600px) {
    .main-menu > ul > li {
        width: 5rem !important;
    }

    .main-menu > ul > li > a > div.nav-text {
        width: 5rem !important;
    }

    .main-menu > ul > li > a > div, .main-menu > ul > li > a > div {
        display: none !important;
    }

    .main-menu:hover, nav.main-menu.expanded {
        width: 5rem !important;
    }

    .main-menu .sm-dropright {
        width: 250px !important;
    }
}

/* end sidebar */
/* login */
#Login .container {
    height: 100%;
    align-content: center;
}

#Login .card {
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 500px;
    background: var(--color-grey-light);
}

.inputLogin {
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-grey-darked);
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    box-sizing: border-box;
}

.checkbox label:after {
    border: 1px solid var(--color-grey-darked) !important;
}

.checkbox.checkbox-sm input:checked ~ label:after {
    border-top-style: none !important;
    border-right-style: none !important;
    border-color: #5A8DEE;
    border-width: 2px;
}

.backgroundLogin {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55)),
    url("../../images/login_background.png") !important;
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.logoLogin {
    background-image: url("../../images/login_icon.png") !important;
    height: 10rem;
    width: 10rem;
    background-size: 10rem 10rem;
    border-radius: 50%;
    margin: auto;
    position: relative;
}

.logoLoginCover {
    background-color: var(--color-grey-light) !important;
    height: 11rem;
    width: 11rem;
    background-size: 12rem 12rem;
    border-radius: 50%;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    left: -68px;
}

.backgroundLogin::before {
    filter: contrast(80%) brightness(60%);
}

#contact_LoginPage::before {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

#Login li {
    list-style-type: none;
    color: var(--color-red-primary);
}

#contact_LoginPage {
    background-color: rgba(0, 0, 0, .5);
}

.loginCustomClose {
    float: right;
    font-size: 3rem;
    color: white;
    opacity: 1;
    position: absolute;
    z-index: 1;
    right: 0;
    padding-right: 5px;
    cursor: pointer;
}

/* end login */
/* home */
#Home .card {
    height: 17rem;
    background: var(--color-white) !important;
}

#Home h3, #Home i {
    color: var(--color-grey-light);
}

#Home .bx-task {
    color: green;
}

#Home .bx-transfer {
    color: yellow;
}

#Home .bx-file-blank {
    color: purple;
}

#Home .bxs-pin {
    color: blue;
}

.widget-description {
    font-weight: bold;
    color: var(--color-grey-blue);
}

.widget-result {
    font-weight: bold;
    color: var(--color-grey-darked);
}

/* end home */
/* jquery dialog */
.jquery_dialog {
    display: none;
}

/* end jquery dialog */
/* notification */

.badge-pill {
    border-radius: 50% !important;
    padding: 0.4rem !important;
    width: 20px;
    height: 20px;
}

.badge.badge-up {
    top: -0.5rem !important;
    right: 0rem !important;
}

.item_notif {
    height: auto;
    width: 100%;
    text-transform: none !important;
    font-weight: normal;
}

.item_notif:hover {
    background: #2b2b2b;
}

.item_notif div {
    color: black !important;
    font-size: 1rem !important;
    box-sizing: border-box;
    white-space: pre-line;
    word-wrap: break-word;

}

.top_notif {
    height: 3vw;
}

#teams_filter {
    color: black;
}

#addItem {
    cursor: pointer;
}

#addItem:hover > .bx {
    color: red;
}

/* notif end */

/* submenuinterface */

.subMenuInterface {
    width: fit-content;
    height: fit-content;
    padding: 1rem;
}

.subMenuInterface .col {
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.subMenuInterface ul {
    list-style-type: none;
}

.subMenuInterface li > a, .subMenuInterface li > a:not([href]) {
    color: var(--color-black);
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

.subMenuInterface li > a:hover {
    background: var(--color-red-primary);
    color: var(--color-grey-light) !important;
    width: 100%;
    white-space: normal;
}

.subMenuTitle {
    font-size: 1.5rem;
    color: var(--color-red-secondary) !important;
    white-space: nowrap;
    font-weight: bold;
}

.subMenuInterface a {
    width: 100%;
    white-space: normal;
    font-size: 1.2rem;
}

.subMenuInterface button {
    background: transparent;
    border: none;
    width: 100%;
    white-space: normal;
    font-size: 1.2rem;
    text-align: left;
}

.subMenuInterface .col {
    float: left;
    width: fit-content;
    padding: 1vw;
}

.subMenuInterface ul {
    min-height: 80%;
    padding-left: 0.5vw;
}

/* end submenuinterface */
/* loader */
#loader {
    display: block;
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur();
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
}

.loader {
    display: inline-block;
    width: 80px;
    height: 80px;
    color: var(--color-red-primary);
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    backdrop-filter: blur();
}

.loader div {
    animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.loader div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-red-primary);
    margin: -4px 0 0 -4px;
}

.loader div:nth-child(1) {
    animation-delay: -0.036s;
}

.loader div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.loader div:nth-child(2) {
    animation-delay: -0.072s;
}

.loader div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.loader div:nth-child(3) {
    animation-delay: -0.108s;
}

.loader div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.loader div:nth-child(4) {
    animation-delay: -0.144s;
}

.loader div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.loader div:nth-child(5) {
    animation-delay: -0.18s;
}

.loader div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.loader div:nth-child(6) {
    animation-delay: -0.216s;
}

.loader div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.loader div:nth-child(7) {
    animation-delay: -0.252s;
}

.loader div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.loader div:nth-child(8) {
    animation-delay: -0.288s;
}

.loader div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* loader */
@keyframes show {
    from {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: visible;
        opacity: 100;
    }
}

@keyframes hide {
    to {
        visibility: hidden;
        opacity: 0;
    }
}

/* buttons */

button.btn-primary, span.btn-primary, a.btn-primary, a.btn-primary :not([href]) {
    background: var(--color-blue-light) !important;
    color: var(--color-white) !important;
}

button.btn-primary:hover, button.btn-primary:active, button.btn-primary:visited, button.btn-primary:focus,
a.btn-primary:hover, a.btn-primary:active, a.btn-primary:visited, a.btn-primary:focus,
span.btn-primary:hover, span.btn-primary:active, span.btn-primary:visited, span.btn-primary:focus {

    background: var(--color-blue-light) !important;
    color: var(--color-white);
}

button.btn-danger, span.btn-danger, a.btn-danger {
    background: var(--color-red-primary) !important;
}

button.btn-danger:hover, button.btn-danger:active, button.btn-danger:visited, button.btn-danger:focus,
a.btn-danger:hover, a.btn-danger:active, a.btn-danger:visited, a.btn-danger:focus,
span.btn-danger:hover, span.btn-danger:active, span.btn-danger:visited, span.btn-danger:focus {
    background: var(--color-red-primary) !important;
    color: var(--color-white);
}

/* end button */

/* create mission */
#formCreate {
    color: black;
}

.createMissionSubTitle {
    font-size: 1.5vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
    font-weight: bold;
}

.inlineFormLabel {
    padding: .47rem 0 !important;
    text-transform: none !important;
    font-weight: normal !important;
    color: var(--color-black);
    font-size: 1rem !important;
    white-space: nowrap !important;
}

.inlineFormField {
    margin-left: auto;
    width: 265px !important;
}

.inlineFormFieldDouble {
    width: 100px !important;
}

#mission .form-control {
    display: inline-block;
}

select.form-control:not([multiple=multiple]) {
    /*padding-right: 0.5rem !important;*/
}

#formCreate .form-control:disabled {
    background: none;
    color: #36bf36 !important;
}

#createMission .formCreateMissionItem {
    display: flex;
}

.blockContent .d-inline-flex .right {
    margin-left: auto !important;
    white-space: nowrap;
}

#modalExpert .modal-dialog {
    width: 80% !important;
    max-width: none !important;
}

.formCreateMissionTextArea {
    width: 100%;
    min-height: 100px;
}

/* end create Mission */

/* mission home */

.ldBar-label {
    color: var(--color-black);
}

/* mission */
.formCreateFolderTextArea {
    height: 120px !important;
    width: 100%;
}

.formCreateMissionItem > div {
    width: 100% !important;
}

#mission .nav-link {
    font-size: 1vw;
}



.blockSymaBat {
    border: 1px solid black;
    height: 500px;
    width: 100%;
}

/* top_menu **/

#top_menu {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    background: var(--color-red-secondary);
    height: var(--mission-menu-main);
}

#adminBottomBar {
    height: var(--bottom-topbar);
}

#top_menu .row {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

#top_menu a {
    border-right: 1px solid var(--color-grey-darked);
    border-left: 1px solid var(--color-grey-darked);
    text-align: center;
    line-height: 2vw; /* hauteur de ligne (identue) */
    white-space: nowrap;
    color: var(--color-black);
    padding: 0 !important;
    background: var(--color-grey-light);
    height: var(--mission-menu-main) !important;
}

#top_menu a:first-child {
}

#top_menu a:last-child {
}

#top_menu a div {
    height: auto;
    font-weight: bold;
}

#top_menu a:hover > div, #top_menu a:hover, #top_menu a:hover > div {
    background: var(--color-red-secondary) !important;
    color: var(--color-grey-light) !important;
}

/* details */


#detailsMissionTab2 .nav-tabs, #detailsMissionTab3 .nav-tabs {
    border-bottom: 0;
    height: 100%;
}



#detailsMissionTC2, #detailsMissionTC2 .tab, #detailsMissionTC2 .tab .row,
#detailsMissionTC3, #detailsMissionTC3 .tab, #detailsMissionTC3 .tab .row
{
    height: 100%;
    padding: 0;
    margin: 0;
}

#mission .nav-tabs .nav-link {
    border: 0 !important;
}

#detailsMissionTab2, #detailsMissionTab3 {
    background: var(--color-grey-darker);
    padding: 0 !important;
    margin: 0 !important;
}

#detailsMissionTab2 a, #detailsMissionTab3 a {
    background: var(--color-grey-darker);
    color: var(--color-grey-light);
    text-align: center;
    line-height: 5vw;
    font-weight: bold;
    font-size: 1.5vw !important;
}

#detailsMissionTC3 .card {
    height: 7vw;
}

#detailsMissionTC3 .nav-pills .nav-link.active {
    background-color: var(--color-grey-light) !important;
    color: var(--color-black) !important;
}

#v-pills-tab2 {
    margin-top: 2rem !important;
}

#groupMap {
    position: relative;
    height: 14rem;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

#over_map {
    position: absolute;
    top: 5vw;
    left: 1vw;
    z-index: 99;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.5vw;
    transition: 0.5s;
}

#not_over_map
{
    width: fit-content;
    top: 5vw;
    left: 1vw;
    z-index: 99;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.5vw;
    transition: 0.5s;
}

.carte {
    width: 100%;
    height: 100%;
}

.carte-container {
    position: sticky;
    top: 150px;
}

.marqueur-carte {
    background-color: darkred !important;
    border-color: darkred !important;
    box-shadow: none !important;
}

.marqueur-carte:hover {
    background-color: darkred !important;
    border-color: darkred !important;
    box-shadow: none !important;
}

#carte img {
    background: transparent;
}

/* Details Devis */

#quote .card, #missionQuote .card {
    height: 25rem;
    background-color: var(--color-white) !important;
}

#missionQuote .nav-link, #missionDocument .nav-link, #missionContacts .nav-link
{
    padding: 1rem 1rem !important;
    font-weight: bold;
    color: var(--color-grey-light);
    width: 100%;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 !important;
}

#missionQuote a.active, #missionDocument a.active, #missionContacts a.active {
    color: var(--color-black);
    background: var(--color-grey-light);
}

/* end mission home */

.contentMissionWithoutMap {
    height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--mission-menu-secondary) - var(--mission-outil));
    width: 100%;
    overflow: auto;
}

.contentMissionWithoutMap2 {
    height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--mission-menu-secondary) - var(--mission-outil));
    width: 100%;
    overflow: auto;
}

.contentMissionWithMap {
    height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--mission-map) - var(--mission-menu-secondary) - var(--mission-outil));
    width: 100%;
    overflow: auto;
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-grey-darked);
    border-radius: 10px;
    border: 1px solid #f6f6f6;
}

/* end scrollbar */


/* journal de bord */

.timeline {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}
.timeline__event {
    position: relative;
    display: flex;
    margin-left: 7rem;
}
.timeline__event__title {
    font-size: 1.2rem;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.timeline__event__content {
    padding: 20px;
}
.timeline__event__author {
    color: var(--color-grey-darked);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}
.timeline__event__icon {
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 40%;
    font-size: 2rem;
    color: var(--color-grey-darked);
    padding: 20px;
}
.timeline__event__date{
    position: absolute;
    top: 50%;
    left: -72px;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 1rem;
    color: var(--color-black);
}
.timeline__event__description {
    flex-basis: 60%;
}
.timeline__event:after {
    content: "";
    width: 2px;
    height: 100%;
    background: #dddddd;
    position: absolute;
    top: 52%;
    left: -3.5rem;
    z-index: 0;
    border: 1px solid var(--color-black);
}
.timeline__event:before {
    content: "";
    width: 6rem;
    position: absolute;
    background: #dddddd;
    border-radius: 20px;
    left: -6.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--color-black);
    z-index: 1;
    height: 30px;
}

.timeline__event:last-child:after {
    content: none;
}

@media (max-width: 786px) {
    .timeline__event {
        flex-direction: column;
    }

    .timeline__event__icon {
        border-radius: 4px 4px 0 0;
    }
}

.timeline-date {
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
}

.newEntry_icon {
    width: 50vw;
}

.newEntry_box:before {
    background: var(--color-blue-light);
    border: 1px solid white;
}

.newEntry_icon .timeline__event__date {
    color: white;
}

.newEntry_icon input {
    border: 0;
    border-bottom: 1px solid black !important;
    background: transparent;
    width: 50vw;
}

.newEntry_icon input:focus {
    outline: none;
}

/* end Journal de bord

/* summary */

/* SUMMARY */

#mission-summary, #editSummary {
    padding-left: 5%;
    padding-right: 5%;
}

.bx.editPicker {
    display: none;
}

.title-mission-summary {
    color: var(--color-red-primary);
    font-weight: bold;
    font-size: 2vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
}

.text-mission-summary {
    color: var(--color-grey-darked);
    padding: 0.8rem;
}

.text-mission-summary:first-letter {
    text-transform: uppercase;
}

#information-complementaire .card {
    margin: 1vw;
    width: calc((100% / 4 ) - 2vw) !important;
    min-height: 12rem;
    padding: 1vw;
    background: var(--color-white);
}

#commentary .card {
    margin: 1vw;
    min-height: 12rem;
    padding: 1vw;
    background: var(--color-white);
}

#mission-summary .card textarea {
    border: none;
    resize: none !important; /*remove the resize handle on the bottom right*/
}

#mission-summary .card textarea:focus {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* end summary */

/* Contact */

/* end contact */

/* Intervention */

#following .progress-bar-item .row {
    padding: 1vw;
}

.progress {
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    background: #d3d3d3 !important;
}

.progress, .progress-bar {
    height: 20px !important;
}

.progress-bar {
    width: 20%;
    height: 100%;
    background: var(--color-red-primary) !important;
}

.action-timeline {
    text-align: center;
    margin-left: -100%;
    margin-right: -100%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: nowrap;
}

#intervList .progress-bar {
    background: var(--color-yellow) !important;
}

.progress-bar-time {
    background: lightgrey;
    border-radius: 25px;
    width: 6vw;
    float: left;
    z-index: 2;
    position: relative;
}

.progress-bar-action {
    width: 6vw;
    float: left;
    z-index: 2;
    position: relative;
}

.wrap {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    width: auto;
}

.links {
    position: relative;
}

#following .progress-bar-item hr {
    border: 0;
    background: lightgrey;
    position: absolute;
    width: 100%;
    z-index: 1;
    border-top: 2px solid var(--color-grey-light);
}

#following .subtitle {
    font-weight: bold;
    color: black;
}

#following .title {
    font-weight: bold;
    color: black;
    font-size: 2vw;
}

#following .card {
    border-radius: 20px;
    background: var(--color-white);
}


#following .avatar {
    height: 4rem;
    width: 4rem;
    border: 1px solid var(--color-black);
    background: var(--color-grey-light);
    color: var(--color-black);
}

#following .avatar .avatar-content {
    height: 4rem;
    width: 4rem;
}

/* end suivi mission */

/* messenger */

.box-messenger {
    width: 95%;
}

.messengerSearch {
    height: 4.5rem;
    padding: 1rem 0;
}

.messengerSearch input {
    color: black;
    border-radius: 15px;
    border: none;
    height: 2vw;
    font-size: 0.8rem;
    text-align: center;
    width: 90%;
    margin: auto;
}

.messengerSearch input :focus, .messengerSearch input :hover {
    border-color: black !important;
}

.messengerButton {
}

.messengerUsers {
}

.messengerUserImage {
    width: 4vh;
}

.messengerFriend {
    padding: 6px;
    cursor: pointer;
}

.messengerFriend:hover {
    background: lightgrey;
}

.messengerFriendItem {
    width: fit-content;
}

.messengerTitle {
    height: 3rem;
}

.messengerChat {
    position: relative;
    float: top;
    height: calc(100% - 7rem);
}

.messengerForm {
    float: bottom;
    bottom: 0;
    border-top: 1px solid lightgrey;
    height: 4rem;
}


#messenger .avatar, #insuredContactPage .avatar {
    width: 32px;
    height: 32px;
}

.messengerChatMe {
    float: right;
    width: auto;
    margin-left: auto;
}

.messenger-convblock {
    display: flex;
}

.messengerChatMe .messenger-text {
    float: right;
    width: 100%;
    background: var(--color-red-primary);
    padding: 0.2rem 0.5rem;
    color: var(--color-white);
    border-radius: 50px;
    height: fit-content;
}

.messengerChatMe .messenger-time {
    float: right;
    margin: 5px;
}


.messengerChatHim {
    float: left;
    width: auto;
    margin-left: auto;
}

.messengerChatHim .messenger-text {
    float: right;
    width: 100%;
    background: var(--color-red-secondary);
    padding: 0.2rem 0.5rem;
    color: var(--color-white);
    border-radius: 50px;
    height: fit-content;
}

.messengerChatHim .avatar {
    float: left;
}

.messengerChatHim .messenger-time {
    float: left;
    margin: 5px;
}

.messengerChatCompanyMember {
    float: left;
    width: auto;
    margin-left: auto;
}

.messengerChatCompanyMember .messenger-text {
    float: right;
    width: 100%;
    background: var(--color-grey-blue);
    padding: 0.2rem 0.5rem;
    color: var(--color-white);
    border-radius: 50px;
    height: fit-content;
}

.messengerChatCompanyMember .avatar {
    float: left;
}

.messengerChatCompanyMember .messenger-time {
    float: left;
    margin: 5px;
}

.messengerChatBoxitem {
    width: 100%;
    display: inline-block;
}

#messenger #msg {
}

#messenger #Users {
    border-right: 1px solid black;
    padding-left: 1vw;
    padding-right: 1vw;
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    font-size: 0.7vw;
}

#messenger input:focus, #messenger textarea:focus, #messenger select:focus {
    outline: none;
}

#MsgTitle {
    font-weight: bold;
}

#MsgList, #convsList, #usersList {
    overflow: auto;
    height: calc(100% - 6rem);
}

/* end messenger */

/* mission top layer */

.outil-space {
    background: var(--color-grey-darked);
    height: var(--mission-outil);
    width: 100%;
}

.outil-space button {
    height: 80%;
}

.valid-task {
    background: var(--color-blue-light);
    width: 30px;
    height: 30px;
    border-radius: 20px;
    color: var(--color-white);
    font-size: 2rem !important;
    cursor: pointer;
}

.tableFixHead {
    overflow: auto;
    height: 100%;
}
.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

#ModalAddDocument .modal-dialog {
    max-width: max-content !important;
}

/* detailsTopMenu */

#detailsMissionTC {
    background: var(--color-red-secondary);
    height: 4rem;
    transition: 0.2s linear;

}

#detailsMissionTC a {
    background: var(--color-red-primary);
    height: var(--mission-menu-secondary);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-weight: bold;
    margin-right: 0.2vw !important;
    width: 14vw;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
}



#detailsMissionTC :first-child {
    margin-left: 0 !important;
}

#detailsMissionTab2 .nav-tabs {
    padding: 0;
    margin: 0;
}

#detailsMissionTab1 {
    height: var(--mission-menu-secondary);
}

#detailsMissionTab1 a > .active {
    background: var(--color-grey-darked) !important;
    color: var(--color-grey-light);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


#detailsMissionTC3 .card, #detailsMissionTC3 .card .card-img-overlay {
    height: fit-content !important;
}

#missionDocument embed {
    height: 90% !important;
}

.menuMissionContainer {
    min-height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--mission-bottombar));
}

.missionContainer {
    min-height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--mission-menu-secondary) - var(--mission-outil));
}

/* Management */


.managementContainer {
    min-height: calc(100vh - var(--interface) - var(--mission-menu-main) - var(--bottom-topbar));
}

#company_logo {
    max-height: 10rem !important;
    max-width: 100%;
}

#verticalMenuManagement {
    background: var(--color-grey-darker);
    color: var(--color-grey-light) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0;
}

#management .table-responsive {
    min-height: calc(100vh - 60px - 8rem);
}

#management .table-responsive {
    min-height: 0 !important;
    height: 600px;
    background: var(--color-grey-light) !important;
}

#management .table-responsive input, #management .table-responsive tr  {
    background: var(--color-grey-light) !important;
}


#verticalMenuManagement a {
    text-align: center;
    line-height: 5vw;
    font-weight: bold;
    font-size: 1vw !important;
    color: var(--color-grey-light);
}

#panelMenu_userManagement {
    height: 2rem;
}

#managementTC1 {
    min-height: calc(100vh - 7rem);
    background: var(--color-white);
}

#management .bx-user {
    color: black;
    font-size: 4rem;
    font-weight: bold;
}

#management p {
    display: flex;
}

#management .avatar {
    height: 8rem !important;
    width: 8rem !important;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border: 8px solid black;
}

#management .avatar-content {
    margin: auto !important;
    font-size: 4rem;
    color: var(--color-black);
    font-weight: bold;
}

.avatar-content {
    height: 100% !important;
    width: 100% !important;
}

.Text {
    color: var(--color-black);
    margin: 2% 5% !important;
}




.panel-title {
    position: relative;
}

.panel-title::after {
    content: '\25be';
    color: var(--color-white);
    top: 3rem;
    right: 2rem;
    position: absolute;
    font-size: 2rem;
    background: var(--color-blue-light);
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    text-align: center;
    line-height: 3rem;
}

.panel-title[aria-expanded="true"]::after {
    content: '\25B4';
}

/*
 * Added 12-27-20 to showcase full title clickthrough
 */

.panel-heading-full.panel-heading {
    padding: 0;
}

.panel-heading-full .panel-title {
    padding: 10px 15px;
}

.panel-heading-full .panel-title::after {
    top: 10px;
    right: 15px;
}

#idt-table_filter .form-control{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzQ0ODUiICAgdmlld0JveD0iMCAwIDIxLjk5OTk5OSAyMS45OTk5OTkiICAgaGVpZ2h0PSIyMiIgICB3aWR0aD0iMjIiPiAgPGRlZnMgICAgIGlkPSJkZWZzNDQ4NyIgLz4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhNDQ5MCI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xMDMwLjM2MjIpIiAgICAgaWQ9ImxheWVyMSI+ICAgIDxnICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuNSIgICAgICAgaWQ9ImcxNyIgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAuNCw4NjYuMjQxMzQpIj4gICAgICA8cGF0aCAgICAgICAgIGlkPSJwYXRoMTkiICAgICAgICAgZD0ibSAtNTAuNSwxNzkuMSBjIC0yLjcsMCAtNC45LC0yLjIgLTQuOSwtNC45IDAsLTIuNyAyLjIsLTQuOSA0LjksLTQuOSAyLjcsMCA0LjksMi4yIDQuOSw0LjkgMCwyLjcgLTIuMiw0LjkgLTQuOSw0LjkgeiBtIDAsLTguOCBjIC0yLjIsMCAtMy45LDEuNyAtMy45LDMuOSAwLDIuMiAxLjcsMy45IDMuOSwzLjkgMi4yLDAgMy45LC0xLjcgMy45LC0zLjkgMCwtMi4yIC0xLjcsLTMuOSAtMy45LC0zLjkgeiIgICAgICAgICBjbGFzcz0ic3Q0IiAvPiAgICAgIDxyZWN0ICAgICAgICAgaWQ9InJlY3QyMSIgICAgICAgICBoZWlnaHQ9IjUiICAgICAgICAgd2lkdGg9IjAuODk5OTk5OTgiICAgICAgICAgY2xhc3M9InN0NCIgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjY5NjQsLTAuNzE3NiwwLjcxNzYsMC42OTY0LC0xNDIuMzkzOCwyMS41MDE1KSIgICAgICAgICB5PSIxNzYuNjAwMDEiICAgICAgICAgeD0iLTQ2LjIwMDAwMSIgLz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: 0px 3px !important;
}

#search .dataTables_filter label {
    display: flex;
}

.dataTables_filter input::placeholder {
    color: var(--color-black);
    font-size: 1rem;
}

.table-responsive {
    /*overflow: hidden !important;*/
}

.table-responsive th {
    white-space: nowrap;
    color: var(--color-black);
}

table.dataTable tbody tr {
    background: transparent;
}

.table-responsive input, .table-responsive table.dataTable tbody tr {
    background: none;
    color: black;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}

#management .table-striped > tbody > tr:nth-child(2n+1) > td, #management .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: transparent;
}

#management .table-striped > tbody > tr:nth-child(2n) > td, #management .table-striped > tbody > tr:nth-child(2n) > th {
    background-color: var(--color-grey-light);
}

.dualselect-wrapper-avl-filter input, .dualselect-wrapper-sel-filter input, .dualselect-wrapper-avl-filter input, .dualselect-wrapper-sel-filter input {
    display: none;
}

/* input file */

input[type="file"] {
    display: none;
}
.inputfile {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background: var(--color-red-primary);
    color: var(--color-white);
}

.fa-upload:before {
    padding-right: 0.5rem;
}

.input-icons

#management .BtnLogo {
    font-weight: bold;
    color: black;
    width: 100%;
}

#management .form-control {
    width: 14rem !important;
}

.fit-content {
    height: fit-content;
    width: fit-content;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

#agency-activity_filter input {
    background: var(--color-grey-light);
}

.schedule-rows td {
    width: 80px;
    height: 30px;
    margin: 3px;
    padding: 5px;
    background-color: white !important;
    cursor: pointer;
}

.schedule-rows td:first-child {
    background-color: transparent;
    text-align: right;
    position: relative;
    top: -12px;
}

.schedule-rows td[data-selected] { background-color: var(--color-red-primary) !important; }
.schedule-rows td[data-selecting] { background-color: black !important; }

.schedule-rows td[data-disabled] { opacity: 0.55; }

.dataTables_scroll
{
    position: relative;
    width: 100%;
}
.dataTables_scroll thead{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

.dataTables_scroll tbody{
    overflow: auto;
}

/* modal dialog */

.ui-widget-overlay {
    background: #000 !important;
    opacity: 0.50 !important;
}

/* admin */

/* checkbox */

input[type="checkbox"][readonly] {
    pointer-events: none;
    filter: grayscale(40%);
}

.custom-checkbox-red
{
    -webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: var(--color-grey-light);
    border: 1px solid rgba(220,220,225,1);
}
.custom-checkbox-red:after {
    content: "";
    display: inline-block;
    position: relative;
    top: -3px;
    left: 4px;
    width: 4px;
    height: 7px;
    border-bottom: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked  {
    background: var(--color-red-primary);
    outline: none;
    border: 1px solid var(--color-red-primary);
}
input:focus,input:active {
    outline: none;
}

input:hover {
    /*border: 1px solid var(--color-red-secondary);*/
}

/* insuredPage */

/* insuredDocuments */

#tabContent4 {
}

#insuredPage .nav-link {
    padding: 1rem 3rem !important;
    font-weight: bold;
    color: black;
    width: 100%;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#insuredPage a.active {
    color: var(--color-white) !important;
    background: var(--color-grey-darked) !important;
}

#insuredPage #v-pills-tab2 a:hover {
    background: whitesmoke;
}

/* sectorisation */

#map {
    max-width: 100%;
    max-height: 100%;
}
#map .department {
    transition: fill 0.2s, stroke 0.3s;
}
#map .department:hover {
    fill: var(--color-red-primary) !important;
    stroke: var(--color-red-primary) !important;
}
#map .department:active {
    fill: #0a6aa1 !important;
    stroke: grey !important;
}

/* search */

#searchHome {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55)),
    url("../../images/background_search.jpg") !important;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    width: 100%;
    height: calc(100vh - var(--interface));
}

#searchCdM {
    padding-left: 26% !important;
    padding-top: 5% !important;
}

.selector {
    border-top-left-radius: 100px !important;
    border-bottom-left-radius: 100px !important;
    background: white;
    border: solid 1px lightgrey;
    width: 4rem;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.selection {
    height: 100% !important;
    width: 100% !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: inline-flex !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-top: 0 !important;
    width: auto !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    display: inline-block;
    line-height: 1.5;
    margin: auto !important;
}

.select2-container--classic, .select2-selection--multiple {
    border-radius: 0 !important;
}

.select2-selection__choice__remove {
    background: var(--color-red-secondary) !important;
}

.select2-container {
    line-height: 1 !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    display: inline-flex !important;
    border-left: none !important;
    border-right: 1px solid lightgrey !important;
    border-top: 1px solid lightgrey !important;
    border-bottom: 1px solid lightgrey !important;
    padding: 0 !important;

}

.select2-results__option {
    font-size: 0.8vw !important;
}

.select2-container .select2-search--inline .select2-search__field {
    line-height: 1.7;
    margin: 0 !important;
    height: 100% !important;
    font-size: 1.5rem !important;
}

.select2-container--classic.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: transparent !important;
    border-left: none !important;
    border-right: 1px solid lightgrey !important;
    border-top: 1px solid lightgrey !important;
    border-bottom: 1px solid lightgrey !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border: none !important;
    padding: 0 !important;
    margin: auto;
    height: 100%;
}

.select2-selection__rendered {
    list-style-type: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    margin: 0 !important;
    justify-content: center !important;
    align-content: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

#searchHome .select2-container--default .select2-search--inline .select2-search__field {
    font-size: 1.5rem !important;
    height: 100% !important;
    line-height: 1.7;
}

#searchResult .select2-container--default .select2-search--inline .select2-search__field
.select2-search, .select2-search--inline {
    justify-content: center !important;
    align-content: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: 40% !important;
}

.input-icons i {
    position: absolute;
}

.input-icons {
    width: 100%;
    height: 100%;
}


.SearchInputPostcode {
    width: 100%;
    text-align: left;
    height: 100% !important;
    margin-right: 0.5vw !important;
    border: none;
}

#searchHome .SearchInputPostcode {
    padding-left: 3.5rem !important;
    line-height: 1.7;
    font-size: 1.5rem !important;
}

#searchResult .SearchInputPostcode {
    padding-left: 3.5rem !important;
    line-height: 1.5;
    font-size: 1.5rem !important;
}


tr.hide-table-padding td {
    padding: 0;
}

.expand-button {
    position: relative;
}

.accordion-toggle .expand-button:after
{
    top: 50%;
    transform: translate(0, -50%);
    content: '\25B4';
}
.accordion-toggle.collapsed .expand-button:after
{
    content: '\25be';
}

.collapse {
    height: 2rem;
    margin: auto;
}

.select2-selection__choice {
    font-size: 1rem !important;
    width: auto !important;
    font-weight: 420 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: 3rem !important;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-red-secondary) !important;
    height: 1.5rem !important;
    margin-right: 0.5rem !important;
}

.icon_search {
    position: relative;
    top: 30%;
    font-size: 1vw !important;
    left: 0.5rem;
}

.icon-btn {
    font-size: 2vw;
    top: 0 !important;
}


#searchHome .home-step1-input-field {
    padding-left: 3.5rem !important;
    line-height: 1.7;
    font-size: 1.5rem !important;
}

#searchResult .home-step1-input-field {
    padding-left: 3.5rem !important;
    line-height: 1.5;
    font-size: 1.5rem !important;
}

#searchResult .table td,  #searchResult .table td:after, #searchResult .table thead th {
    text-align: center;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}


#searchHome .icon, #searchResult .icon {
    font-size: 2rem;
}

#searchHome .selector i {
    margin: 0;
    padding: 0;
    text-align: center;
}

#searchResult .selector i {
    margin: 0;
    padding: 0;
    font-size: 2rem !important;
    text-align: center;
}

#searchResult {
    background: var(--color-grey-light);
}

#insuredProgressBar {
    width: 600px;
    overflow-x: auto;
    height: 200px;
}

#insuredPage .progress-bar, #insuredPage .progress {
    border-radius: 0;
}

.insuredProgressBarText {
    font-weight: bold;
}


.notificationMenu {
    max-height: 300px;
}



.insuredTopMission {
    min-height: 200px;
    margin: 0 !important;
    padding: 0 !important;
}

.radiobuttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.radiobuttons input {
    width: 10%;
}

.radiobuttons label {
    width: 40%;
    white-space: pre;
}

input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle;
}

.appointmentText {

}

.notificationDropdown {
    width: 30rem;
}

.interfaceDropdown {
    width: max-content;
    right: 0;
}

.deleteNotifText {
    text-align: right;
}

@media screen and (min-width: 601px) {
    .insuredProgressBarText {
        font-size: 0.8rem;
    }
    .card-size {
        height: 100%;
    }
    .img-size {
        height: auto;
        width: auto;
    }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
    .insuredProgressBarText {
        font-size: 0.5rem;
    }
    .ui-dialog {
        width: fit-content !important;
        height: fit-content !important;
        z-index: 1032 !important;
        max-width: 95vw;
        max-height: 95vh;
        margin-left: auto;
        margin-right: auto;
    }
    #insuredPage .progress, #insuredPage .wrap {
        margin-left: 0;
        margin-right: 0;
    }
    .img-size {
        height: 25rem;
        width: 100%;
    }
    .display-image {
        display: none;
    }
    #v-pills-tab2 {
        margin: 0 !important;
    }
    .messengerSearch input {
        font-size: 1rem;
    }
    .notificationMenu {
        max-width: 200px;
    }
    .notificationDropdown {
        width: 15rem;
        left: 100% !important;
        right: 0 !important;
    }
    .deleteNotifText {
        text-align: left;
    }
    .objectDoc {
        max-height: 100vh;
        max-width: 100vw;
    }
    .interfaceDropdown {
        width: 70vw;
        left: -3rem;
    }
}

.customCloseButton {
    border-radius: 50% !important;
    background: var(--color-blue-light);
    width: 2rem !important;
    height: 2rem !important;
    opacity: 1;
    border: none;
    margin-left: auto;
    margin-right: 1rem;
}

.customCloseIcon {
    margin: auto;
    color: white;
    font-size: 1.5rem !important;
}

.notifList :hover {
    background: var(--color-white);
}

/* statistiques */

#topMenu {
    background: var(--color-red-secondary);
    height: 5rem;
    transition: 0.2s linear;
}

#topMenu a {
    background: var(--color-red-primary);
    height: var(--mission-menu-secondary);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-weight: bold;
    margin-right: 0.2vw !important;
    width: 12vw;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
}


#topMenu :first-child {
    margin-left: 0 !important;
}

#topMenuTab {
    height: var(--mission-menu-secondary);
}

#topMenuTab a > .active {
    background: var(--color-grey-darked) !important;
    color: var(--color-grey-light);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.textInRound {
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-decoration: none
}

.carousel-control-next-icon, .carousel-control-prev-icon
{
    filter: invert(100%);
}

/* wizard */

.step {
    margin-left: auto;
    margin-right: auto;
    left: 0 !important;
    right: 0 !important;
}

.wizard .steps ul li.disabled a .step {
    border: none !important;
}

.hoveringText {
    text-overflow:ellipsis;
    overflow: hidden;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hoveringText:hover{
    text-overflow:clip;
    width:auto;
    white-space: normal;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.table.dataTable {
    height: auto !important;
}


#management img {
    max-width: 100%; /* This rule is very important, please do not ignore this! */
}

#management #canvas {
    background-color: var(--color-white);
    cursor: default;
    border: 1px solid black;
}

#user_picture {
    border-radius: 50%;
    border: 1px solid black;
}

/* datatables */

#resize_wrapper {
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    box-sizing: border-box;
    height: auto;
    z-index: 1;
}

.view-filter {
    height: auto !important;
}

.dataTables_scrollBody {
    height: 500px !important;
}

.dataTables_scroll {
    height: 100% !important;
}

.dataTables_wrapper {
    height: auto !important;
}

.view-pager {
    height: auto !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}

.dataTable{
    width: 100% !important;
}

.table thead,
.table th {
    text-align: center;
}


/* tables */

div:has(div.dataTables_length) {
    display: none;
}

.dataTables_filter {
    float: left !important;
    text-align: left !important;
    color: var(--color-black);
}

.dataTables_filter label {
    width: 100%;
    color: var(--color-black);
}

.dataTables_filter input, .dataTables_filter input:focus {
    border: none;
    border-bottom: 1px solid black;
    outline: none !important;
    border-radius: 0;
    background: transparent;
    width: 100%;
    color: var(--color-black);
    font-size: 1rem;
}

/* end table / Datatables */

/* paginator */

.navigation .pagination .page-item.active .page-link, .navigation .pagination .page-item.active .page-link:hover {
    background-color: var(--color-blue-light) !important;
}

/* paginator end */