@charset "utf-8";


:root {
    --lightBlue: #D7E3FC;
    --lightPink: #F4EDED;
    --darkGrey: #32373D;
    --lightGreen: #B8D8BA;
    --lightGrey: #EAEAEA;
    --grey: #D9D9D9;

    --sidebarWidth: 300px;
    --langHeight: 25px;
}


/* CSS Document */
    * { margin:0; padding:0; }
    body {
        margin:0; padding:0;
        /*font-family: Verdana, Geneva, sans-serif;*/
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px; color: #000000;
        background-color: #F6F7FB; position: relative;
    }
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/*
 * Preloader
 */
    .preloader {
        position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 10000;
        display: flex; justify-content: center; align-items: center;
        padding: 20px;
        background-color: #000;
        transition: .3s all ease; opacity: 0.80;
    }
    .preloader.loaded {
        opacity: 0;
        visibility: hidden;
    }
    .preloader-body { text-align: center; }
    .preloader-body p { position: relative; right: -8px; }
    .cssload-container{ width: 100%; height: 64px; text-align: center; }
    .cssload-speeding-wheel{
        width: 64px; height: 64px; margin: 0 auto;
        /*border: 6px solid #E89910;*/
        border: 8px dotted  #FFF;
        border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; -webkit-animation: cssload-spin 1.5s infinite linear;
        animation: cssload-spin 1.5s infinite linear
    }
    .cssload-text { margin-top: 10px; font-weight: bold; font-size: 16px; color: #fff; }
    @-webkit-keyframes cssload-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
    @keyframes cssload-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/*
 * Lang
 */
    .nav-lang {
        position: fixed; top: 0; left:0; right:0;
        height:25px; z-index: 900; background-color: #e4e7f3; padding-right: 15px;
    }
    @media (max-width: 665px)
    {
        .nav-lang {
            position: relative;
            margin-bottom: -25px;
        }
    }
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/*
 * Changement de certains parametres pour reconfigurer le navbar de bootstrap
 */

    .navbar {
        background-color: #506680;
        border-bottom: solid 1px var(--grey) !important;
        font-size: 16px !important;
        z-index: 900;
        margin-top: var(--langHeight);
    }
    .nav-link {
        color: #d5d5d5;
        border-bottom: solid 3px #506680 !important;
    }
    .nav-link:hover {
        color: #ffffff;
        text-decoration: none !important;
        border-bottom: solid 3px white !important;
    }
    .navbar-toggler {
        background-color: white !important;
    }
    .dropdown-item:hover {
        background-color: #506680;
        color: white;
    }
    .dropdown-item-client, .dropdown-item-admin {
        padding: 15px !important;
        margin-right: 60px !important;
    }
    .nav-item-logout a:hover {
        background-color: red !important;
        color: white !important;
    }
    .button-dropdown-item:hover {
        color: #000 !important;
        background-color: var(--lightGrey) !important;
    }
    /* Permet aux sous-menus de s'afficher correctement */
    .dropdown-menu .dropdown-submenu {
        position: relative;
    }
    .dropdown-menu .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0;
        display: none;
        position: absolute;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-menu .dropdown-item {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    table.table { font-size: 14px; !important;}
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/*
 * Changement des parametres pour le tab de jquery-ui
 */
    /* Ajout du style pour le survol d’un tab */
    .ui-tabs .ui-tabs-nav li a {
        position: relative;
        display: inline-block;
        padding-bottom: 8px; /* pour laisser de la place au trait */
        text-decoration: none;
    }

    /* Effet au survol */
    .ui-tabs .ui-tabs-nav li a:hover::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-color: #007fff; /* le trait bleu */
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
    }

    /* Pour que le tab actif garde aussi le trait */
    .ui-tabs .ui-tabs-nav li.ui-tabs-active a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-color: #007fff;
        border-radius: 2px;
    }
/**********************************************************************************************************************/



/**********************************************************************************************************************/
/*
 * Changement de certains parametres pour bootstrap 5
 */
    /* Ajouter un effet de flou au fond de la modale */
    .modal-open .modal-backdrop {
        backdrop-filter: blur(5px);
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1 !important;
    }
    body.modal-open {
        overflow: hidden;
    }
    .table-hover > tbody > tr:hover > * {
        --bs-table-bg-state: #D7E3FC;
    }

    /*Change du background pour le jconfirm*/
    .jconfirm.jconfirm-light .jconfirm-bg {
        background-color: #444;
        opacity: .90 !important;
    }
/**********************************************************************************************************************/






/**********************************************************************************************************************/
/*
 * Sections
 */
    .section-main-title {
        font-size: clamp(24px, 5vw, 38px);
        font-family: Arial, Helvetica, sans-serif; font-weight: bold;
        color: #1b4669;
    }
    .section-main-title img {
        width: clamp(24px, 5vw, 48px);
        margin-bottom: 10px;
        margin-right: 12px;
    }

    .section-sub-title1 {
        text-align: center;
        font-weight: bold; font-size: 24px;
        color: #446586;"
    }

    .section-title-logo {
        height: 48px;
        display: inline-block;
        margin-right: 10px;
        margin-top: -6px;
    }

    @media (max-width: 666px)
    {
        #section_home { padding-top: 0px; }
        .section-container { padding: 5px; }
        .section-title-logo { display: none; }

    }






    .section-container {
        /*background-color: #fff;*/
        width: 100%; margin: auto;
        padding: 15px; margin-top: 40px;
        /*border-radius: 6px;
        border: solid 1px #e4e7f3;*/
    }
    .section-container-title {
        color: #446586; /*293043;*/
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .section-container p {
        text-align: justify;
        font-size: 16px;
        color: #696e7b;
    }
    p.style1 {
        text-align: justify;
        font-size: 16px;
        color: #696e7b;
    }
    p.style2 {
        text-align: justify;
        font-size: 16px;
        color: #000000;
    }
/**********************************************************************************************************************/



/**********************************************************************************************************************/
/*
 * Login
 */
    .login-digit-input {
        width: 60px;
        height: 80px;
        text-align: center;
        font-size: 2rem !important;
        margin-right: 5px;
        border: 1px solid #aaa !important;
    }
    .login-email {
        border: 1px solid #aaa !important;
    }
    .login-admin {
        background-color: #dc3545 !important;
        color: #fff !important;
    }
    .login-client {
        background-color: var(--lightBlue) !important;
        color: #000 !important;
    }
    .login-clinician {
        background-color: #FFC107 !important;
        color: #000 !important;
    }

    @media (max-width: 666px)
    {
        #btn_clientLogin, #btn_adminLogin {
            margin-top: 10px;
        }
    }
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/*
 * imageCard for Services and Assessment Instruments
 */
    a.imageCard img{
        box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.70);
        border-radius: 4px;
        transition: all 0.6s ease;
        width: 100%;
    }
    a.imageCard:hover img{
        box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
        margin-top: 10px;  margin-bottom: -10px;
        width: 90%;
    }
    @media (max-width: 767px)
    {
        #div_sections {
            justify-content: center !important;
        }
    }

    img.assessmentInstruments-document {
        max-height: 400px !important;
        border: solid 1px #ccc;
        box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.70);
        border-radius: 4px;
    }
    img.no-border {
        border: none;
        box-shadow: none;
    }
/**********************************************************************************************************************/



/**********************************************************************************************************************/
/*
 * Text Editor - Quill
 */
    #editor {
        font-family: 'Verdana';
        font-size: clamp(14px, 2vw, 18px);
        height: 100%;
    }
    .ql-editor {
        background-color: #fff !important;
        min-height: 350px !important;
        border: solid 1px #ccc !important;
        /*border-radius: 6px !important;*/
        border-radius: var(--bs-border-radius-lg) !important;
    }
    .ql-container.ql-snow { border: none !important; }
/**********************************************************************************************************************/

    .card {
        padding: 30px 40px; margin-top: 60px; margin-bottom: 60px; box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2); background-color: #F6F7FB;
        border-radius: 6px;
        border: solid 1px #e4e7f3 !important;
    }

    .form-control-label {
        margin-bottom: 0
    }


    /* HTML: <div class="loader"></div> */
    .loader {
        width: 60px;
        /* margin-left: 20px;*/
        margin: auto; margin-top: 80px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 8px solid lightblue;
        border-right-color: orange;
        animation: l2 1s infinite linear;
    }
    @keyframes l2 {to{transform: rotate(1turn)}}

    /* HTML: <div class="loader"></div> */
    .loader1 {
        /*display: none;*/
        /*margin-left: 20px;*/
        margin: auto; margin-top: 80px;
        width: 60px;
        padding: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: lightblue; // #25b09b;
        --_m:
                conic-gradient(#0000 10%,#000),
                linear-gradient(#000 0 0) content-box;
        -webkit-mask: var(--_m);
        mask: var(--_m);
        -webkit-mask-composite: source-out;
        mask-composite: subtract;
        animation: l3 1s infinite linear;
    }
    @keyframes l3 {to{transform: rotate(1turn)}}

    #modal_loading {
        position: absolute;
        left: 0; top: 0; bottom: 0; right: 0; z-index: 10000; opacity: 0.8;
        background-color: #000;
        vertical-align: center;

    }


    button:disabled,  a:disabled, .notAllowed, input[type=checkbox]:disabled, .disabled { cursor: not-allowed !important; }


    img.shadow { box-shadow: 0 6px 12px 0 rgba(0,0,0,0.6) !important; }

    .checkboxBig, .radioBig {
        scale: 1.5;
    }
    .checkboxDoubled, .radioDoubled {
        scale: 2;
    }



        form label.form-label { font-size: 18px; color: #555; }

        .font-size-14to19 { font-size: clamp(14px, 2vw, 18px) !important; }

    div.form-answer {
        border: 1px solid #deede6;
        background-color: #e9ecef;
        padding: 5px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 6px;
        padding-left: 10px;
    }

    input::placeholder {
        font-weight: normal;
        font-style: italic;
        color: #aaa !important;
    }



    /******************************************************************************************************************/
    /* Webinars */
        .webinar-info, .webinar-label, .webinar-info label {font-size: 16px;}
        .webinar-info {color: #000;}
        .webinar-info label, .webinar-label {color: #006193; font-weight: bold;}
        .webinar-info p {text-align: justify;}
        .webinar-info ul.learnmore {margin-left: 35px;}
        .webinar-info ul.learnmore li {list-style: square; text-align: justify;}
/******************************************************************************************************************/



    img.button-icon {
        margin-right: 10px;
        width: 32px;
    }
    img.button-icon-24 {
        width: 24px;
    }

    span.asterisk { font-weight: bold; font-size: 20px; }


    fieldset.theme1 {
        background-color: #f8f9fa;
    }
    fieldset.theme1 legend {
        border: solid 1px #ccc;
        background-color: #F2F2F2;
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
        padding: 8px 20px 8px 20px !important;
    }


    .basketButton {
        position: fixed;
        top: 130px;
        right: 30px;
        z-index: 1;
    }
    @media (max-width: 445px)
    {
        .basketButton {
            position: relative;
            display: block;
            top:0; right:0; left: 40%;
        }
    }

    a.language { color: #0000FF; text-decoration: none; }
    a.language:hover { color: #000; text-decoration: underline; }