@charset "utf-8";


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

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

    --smh-blue: #2a4b7f; /*#506680; *//*#e4e7f3;*/
    --smh-blue-title: #2a4b7f;
    --smh-yellow: #fec700;
    --smh-red: #ff3f12;
    --smh-blueLight: #00a4da;
}


/* 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: #fff; /*#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: relative; /*fixed; top: 0; left:0; right:0;*/
        height:25px; z-index: 1;
        background-color: #fff; /* #e4e7f3;*/
        padding-right: 15px;
    }
    @media (max-width: 665px)
    {
        .nav-lang {
            position: relative;
            margin-bottom: -25px;
        }
    }
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/*
 * Copyright
 */
    .copyright {
        position: relative;
        bottom: 0;
        padding: 10px;
        padding-right: 40px;
        font-style: italic;
        font-size: clamp(10px, 1.3vw, 14px);
        background-color: var(--smh-blue);
        color: #ddd;
        text-align: right;
        z-index: 999;
    }
    .copyright-fixed {
        position: fixed; bottom: 0; left:0; right:0;
    }
    a.copyright-link {
        color: #ddd;
    }
    a.copyright-link:hover {
        color: #f90;
    }
/**********************************************************************************************************************/


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

    .navbar {
        background-color: var(--smh-blue);
        /*border-bottom: solid 1px var(--grey) !important;*/
        font-size: 16px !important;
        z-index: 900;
       /*margin-top: var(--langHeight);*/
        position: sticky;
    }
        .nav-link {
            /*color: #d5d5d5;*/
            color: #fff;
            border-bottom: solid 3px var(--smh-blue) !important;
        }
        .nav-link:hover {
            color: #ffffff;
            /*color: #f90;*/
            text-decoration: none !important;
            border-bottom: solid 3px #FFF !important;
        }
        .navbar-toggler {
            background-color: white !important;
        }
        .dropdown-item:hover {
            background-color: var(--smh-blue);
            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: var(--smh-blue-title);/* #1b4669;*/
        }
        .section-main-title img {
            width: clamp(24px, 5vw, 48px);
            margin-bottom: 10px;
            margin-right: 12px;
        }

        .section-subtitle {
            font-weight: bold;
            font-size: clamp(18px, 5vw, 24px);
            color: var(--smh-blue-title); /* #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 {*/
        .cadre-title {
            color: var(--smh-blue-title); /* #446586;*/
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .cadre-title-font18 {
            font-size: 18px;
        }
        .cadre-sections-title-height {
            height: 60px;
        }

        .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);*/
            transition: all 0.6s ease;
            width: 100%;
        }
        a.imageCard:hover img{
            /*box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);*/
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            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  #1e90be; /*lightblue;*/
            border-right-color: #c2ce7e; /*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.4) !important; }

        .checkboxBig, .radioBig {
            scale: 1.3; margin-right: 13px;
        }
        .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; color: red; margin-right: 3px; }


        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; }
        a.learn-more-link { color: #006193; text-decoration: none; font-size: 16px; }
        a.learn-more-link:hover { color: #000; text-decoration: underline; }

        a.news-link { color: #3a88fc; text-decoration: none; /*font-size: clamp(12px, 1.2vw, 16px); */ }
        a.news-link:hover { text-decoration: underline; }

        a.readMore-link, a.publications-link { color: #3a88fc; text-decoration: none; font-size: clamp(14px, 1vw, 18px);  }
        a.readMore-link:hover, a.publications-link:hover { text-decoration: underline; }

        a.link { text-decoration: none; }
        a.link:hover { text-decoration: underline; }

        .smh-border-radius {
            border-radius: 15px;
        }