/*
 *         ::::::: ::::::::: :::::::
 *       :+:         :+:    :+:
 *      +:+         +:+    +:+:+:+
 *     +#+         +#+    +#+  +#+
 *      #######   ###      ######.nc     ct6Style.bpmn-js
 *
 * @author    Miguel CANCELA DA FONSECA <miguel.cancela@icloud.com>
 * @copyright 2019 - 2024 Miguel CANCELA DA FONSECA, CENTAURSYS
 * @version   03.00.00
 * @since     2022-10-04 - Modified: 2025-04-03
 *
 * CHANGELOG:
 * Version   Date       By  Comments
 * --------- ---------- --- ---------------------------------------------------
 * 03.00.00  2025-04-03 MCF New Tabs head handling for clarity
 * 02.01.00  2024-11-25 MCF Fix avatar management
 * 02.00.00  2024-10-27 MCF Change Avatar management
 * 01.01.00  2023-01-22 MCF Avatar Management
 * 01.00.00  2022-10-04 MCF First release
 */

html,html *{box-sizing: border-box !important;}

/* Initialisation générale du body */
body {
    margin: 0;
    color: var(--ct6gry);
    font-family: 'Luciole', sans-serif;
    font-weight: 100; /* fine/thin explicitement activée */
    line-height: 1.5;
    background-color: var(--light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*body*/
/*{*/
/*    margin: 0;*/
/*    color: var(--ct6gry);*/
/*    font-family: 'Luciole', sans-serif;*/
/*    line-height: 1.5;*/
/*    background-color: var(--light);*/
/*}*/

header
{
    top: 0;
    position: sticky;
    text-align: justify;
    background: var(--ct6gry);
}

header p
{
    font-size: 150%;
    padding: 5%;
}

a
{
    color: var(--ct6gry);
}

/* Tables Presentations - Coming form Topcall Stat */

a.menu
{
    text-decoration: none;
}

a.menu:hover
{
    font-size: 110%;
    text-decoration: underline;
}

a,
a:hover,
a:focus
{
    color: inherit;
    transition: all .3s;
    text-decoration: none;
}


/* Used for debugging */

/* div {
  border-style: dashed;
  border-radius: 5px;
  border-width: thin;
  border-color: darkgray;
} */

footer span
{
    color: var(--ct6gry);
}

hr
{
    margin-top: 1rem;
    margin-bottom: 1rem;

    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Tables Presentations - Coming form Topcall Stat */

i,
span
{
    display: inline-block;
}

img.graphe
{
    border: thin solid var(--dark);
}

img.center
{
    display: block;

    width: 50%;
    margin-right: auto;
    margin-left: auto;

    border: 0 !important;
}

input
{
    border-width: 0 0 2px;
    border-color: var(--ct6gry);
    outline: 0;
}

input::placeholder {
    color: #aaa !important;
    opacity: 0.9 !important;
    /* Adjust opacity for lighter effect */
    font-weight: lighter !important;
}

input:focus
{
    border-color: green;
}

input[type='date']:before
{
    margin-right: .5em;
    content: attr(placeholder) !important;
    color: #aaa;
    opacity: 0.5;
}

input[type='date']:focus:before,
input[type='date']:valid:before
{
    content: '';
}

p
{
    font-weight: 300;
    line-height: 1.7em;
}

p span.no_display
{
    display: none;
}

/* Tables Presentations - Coming form Topcall Stat */

p.graphe
{
    text-align: center;
}

span.mirror
{
    unicode-bidi: bidi-override;
    direction: rtl;
}

textarea::placeholder {
    color: #aaa !important;
    opacity: 0.9 !important;
    /* Adjust opacity for lighter effect */
    font-weight: lighter;
}

/* Tables Presentations - Coming form Topcall Stat */
table
{
    border: none;
}

table.result
{
    border: thin solid var(--dark);
}

/* Tables Presentations - Coming form Topcall Stat */

td.search
{
    vertical-align: top;
}

td.titre2
{
    font-size: 150%;

    text-align: center;
    vertical-align: central;
    letter-spacing: .2cm;

    border-width: 1px;
    border-color: red;
    border-top-style: dashed;
    border-bottom-style: dashed;
}

td.titresearch
{
    font-weight: bold;

    text-align: center;

    color: var(--dark);
    border: thin solid blue;
    background-color: white;
}

/* Tables Presentations - Coming form Topcall Stat */
#tablePayment thead th
{
    color: #FFF;
    background-color: #6c757d;
}

tr.row
{
    background-color: #6f6;
}

tr.row:hover
{
    background-color: rgb(3, 98, 14);
}

/* id's definitions */

#boxCentered
{
    width: 80%;
    height: 70%;
    margin: 0 auto;
}

#casesByStatusChart, #casesByTypesChart {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

/* Supprimer complètement le style par défaut du select pour le rendre plat comme un badge */
#categorySelector {
    appearance: none;
    -webkit-appearance: none; /* Support navigateur webkit/safari */
    -moz-appearance: none; /* Firefox support */
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important; /* suppression des ombres éventuelles */
    color: inherit;
    cursor: pointer;
    padding: 0 10px;
    font-weight: inherit;
    border-radius: 0; /* aucune bordure arrondie */

}

#contact
{
    float: right;

    width: 250px;
    height: 20px;

    text-align: right;
}

#container
{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 5px;
}

/* ct6toTop based on https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
#ct6ToTop
{
    font-size: .875rem;  /* Increase font size */
    line-height: 1.5;    /* Line Height */

    position: fixed;    /* Fixed/sticky position */
    z-index: 998;        /* Make sure it does not overlap */
    right: 30px;        /* Place the button 30px from the right */
    bottom: 20px;       /* Place the button at the bottom of the page */

    display: none;      /* Hidden by default */

    padding: .25rem .5rem;   /* Some padding */

    cursor: pointer;     /* Add a mouse pointer on hover */

    color: white;        /* Text color */
    border: none;       /* Remove borders */
    border-radius: 10px; /* Rounded corners */
    outline: none;      /* Remove outline */
    background-color: var(--ct6org-90); /* Set a background color */
}

#ct6ToTop:hover
{
    background-color: var(--ct6gry-90); /* Add a dark-grey background on hover */
}

#ct6Wrapper
{
    position: relative;
    z-index: -1;

    color: #f00;
}

#msgMarketing
{
    position: relative;
    z-index: 2;
}

#msgZone
{
    border-width: thin;
    border-style: none;
    border-radius: 5px;
}

#nav
{
    font-size: 100%;

    position: fixed;
    top: 0;

    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 5px;

    color: var(--ct6gry);
    background-color: #6b6b6b;
}

#nav a
{
    text-decoration: none;

    color: var(--ct6gry);
}

/* Change Color for buttons in btn-group Case Management
 * Validated ! To use if color when p are different
 * depend on options
 *
 * @deprecated moved to ct6Color.bpmn-js
 */



/* Classes Definitions */

/* A */

.article-list
{
    color: #313437;
    background-color: #fff;
}

.avatar-small {
    width: 48px;
    height: 48px;
    display: inline-block;
    /* Ensures it behaves properly as a container */
}

.avatar-small img,
.avatar-small svg {
    width: 100%;
    height: 100%;
}

/* B */

/* Correction spécifique badges anti-flou */
.badge {
    font-weight: 100; /* Variante thin activée explicitement */
    transform: none !important;
    text-shadow: none !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.beta-stick {
    position: absolute;
    background: white;
    color: #9eaad0;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    display: block;
    width: 220px;
    transform: rotate(-45deg);
    top: 40px;
    left: -60px;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}

.btn-visits:hover
{
    color: var(--ct6gry);
    border-color: #494f57;
    background-color: blueviolet;
}

/* C */

/* Center Horizontally the text - Used! */

.center
{
    text-align: center;
}

.circle
{
    -webkit-clip-path: circle(75px at 50% 50%);
            clip-path: circle(75px at 50% 50%);
}

.ct6buttons
{
    font-size: medium;

    position: relative;
    bottom: 0;

    width: 150px;
    min-width: inherit;
    max-width: inherit;
    height: 32px;
    padding: 0;

    background-color: rgb(240,100,0);
}

.ct6product
{
    margin-bottom: 10px;
    padding-top: 0;

    text-align: center;
}

.ct6product div
{
    position: relative;

    padding-top: 100px;
}

.ct6product h1
{
    font-size: 56px;
    font-weight: bold;
}

.ct6product h2
{
    font-size: 27px;
    font-weight: bold;
}

.ct6product h1 h2
{
    padding-top: 00px;
}


/* D */

.divider
{
    display: block;
    overflow: hidden;

    width: 100%;
    height: 1px;
    margin: 9px 0;

    background-color: #e5e5e5;
}

/* E */

.error-msg
{
    padding-top: 10px;

    text-align: center;

    color: #d8000c;
}

/* F */

/* Tables Presentations - Coming form Topcall Stat */

.first
{
    font-size: 150%;
}

.formulaire
{
    display: block;

    width: 90%;
    height: 90%;
    margin: 0 auto;
    padding: 5px;

    background-color: #ddd;
}

/* G */

.gradient
{
    background: radial-gradient(circle at top left, rgba(107, 110, 107, 1), rgba(0, 0, 0, 0));
}

.greybox
{
    padding: 2px;

    background-color: #fafafa;
}

/* H */

.hidden
{
    display: none;
    visibility: hidden;
}

tr> :nth-child(2)
{
    display: none;
    visibility: hidden;
}
/* I */

.img
{
    display: block;

    width: 40%;
    margin-right: auto;
    margin-left: auto;
}

/*
 * CT6 Avatar Container
 * Center the avatar image and text inside this container
 */
.imgcontainer {
    margin: 12px 0 12px 0;


    max-width: 88px;
    /* Définir la largeur maximale */
    max-height: 88px;
    /* Définir la hauteur maximale */
    overflow: hidden;
    /* Masquer le contenu débordant */
}

/* Avatar image for side menu (smaller) */
img.avatar {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    /* Ensures the image fills the container while maintaining aspect ratio */
}

/* Avatar label */
.avatar-label {
    margin-top: 8px;
    /* Adds some space between the avatar and the text */
}

/* Adjust styles for avatar name and initials */
.avatar-label p,
.avatar-label small {
    margin: 0;
    text-align: center;
    font-size: 14px;
    /* Adjust font size as needed */
    color: #333;
    /* You can adjust this color as needed */
}

/* J */

/* L */

/* M */

.map-container
{
    position: relative;

    overflow: hidden;
    overflow-x: auto;

    width: 100%;
    min-width: 40vw;
    max-width: 100vw;
    height: 90vh;
    min-height: 80vh;
    max-height: 100vh;
    padding-bottom: 100%;

    white-space: nowrap;
}

.map-container iframe
{
    position: absolute;
    top: 48px;
    left: 0;

    width: 100%;
    height: 100%;
}

.message
{
    margin: 0;

    text-align: left;

    text-shadow: 1px 1px 1px rgba(255,255,255,.8);
}

.message span
{
    font-size: 75%;
    font-weight: lighter;

    white-space: nowrap;

    color: #6b6b6b;
}

.modal-backdrop {
    z-index: 3;
}

.msgTitle span
{
    position: inline;

    -webkit-animation: titleAnimation 21s linear infinite 0s;
        -ms-animation: titleAnimation 21s linear infinite 0s;
            animation: titleAnimation 21s linear infinite 0s;
}

/* Opacity should be at zero to hide the text during the delay waiting time */

.msgTitle span:nth-child(2)
{
    animation-delay: 6s;
}

.msgTitle span:nth-child(3)
{
    animation-delay: 12s;
}

.msgText span
{
    font-size: 90%;

    padding-bottom: 1%;

    -webkit-animation: textAnimation 21s linear infinite 0s;
        -ms-animation: textAnimation 21s linear infinite 0s;
            animation: textAnimation 21s linear infinite 0s;
}

/* .msgText span:first-child { opacity: 0; animation-delay: 0s;} */

.msgText span:nth-child(2)
{
    animation-delay: 3s;

    opacity: 0;
}

.msgText span:nth-child(3)
{
    animation-delay: 6s;

    opacity: 0;
}

.msgText span:nth-child(4)
{
    animation-delay: 9s;

    opacity: 0;
}

.msgText span:nth-child(5)
{
    animation-delay: 12s;

    opacity: 0;
}

.msgText span:nth-child(6)
{
    animation-delay: 15s;

    opacity: 0;
}

.msgComment span
{
    font-size: 80%;
    font-style: italic;

    padding-top: 2%;

    -webkit-animation: commentAnimation 21s ease-in infinite 0s;
        -ms-animation: commentAnimation 21s ease-in infinite 0s;
            animation: commentAnimation 21s ease-in infinite 0s;

    opacity: 0;
    color: darkred;
}

.msgComment span:nth-child(2)
{
    animation-delay: 3s;
}

.msgComment span:nth-child(3)
{
    animation-delay: 6s;
}

.msgComment span:nth-child(4)
{
    animation-delay: 9s;
}

.msgComment span:nth-child(5)
{
    animation-delay: 12s;
}

.msgComment span:nth-child(6)
{
    animation-delay: 15s;
}

/* N */

.navbar
{
    font-size: 100%;

    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 2px;

    border: none;
    border-radius: 0;
}

.navbar-brand
{
    background: transparent;
    box-shadow: none;
}

.navbar-btn
{
    border: none;
    outline: none !important;
    box-shadow: none;
}

.navbar a,
.nav-link a
{
    padding-left: 3px;
    text-decoration: none;
}

.navbar.transparent.navbar-inverse.navbar-inner.fixed-top
{
    border-width: 0;
    -webkit-box-shadow: 0 0;
            box-shadow: 0 0;
}

.nav-tabs .nav-link {
    border: 1px solid #e5e5e5; /* Add border to all tabs */
    border-bottom: none; /* Remove bottom border to align with content */
    color: #6c757d; /* Inactive tab text color */
    padding-left: 10px;
}

.nav-tabs .nav-link.active {
    border-color: #ddd; /* Active tab border color */
    border-bottom: none; /* Prevent overlap with content */
    background-color: var(--ct6gry-25); /* Active tab background */
    color: #000; /* Active tab text color */
}

.nav-tabs .nav-link:hover {
    background-color:var(--ct6gry-25); /* Optional hover effect for inactive tabs */
}

/* P */

.bi svg.bi
{
    color: #28a745;
    /*text-shadow: #6f6;*/
    filter: drop-shadow(0px 2px 2px rgb(0, 252, 29));
}

.bi svg.bi:hover,
.bi svg.bi:focus
{
    fill: #dc3545;
    color: #dc3545;
    filter: drop-shadow(0px 2px 2px rgb(252, 0, 0));
}


/* R */

/* Div are displayed as inline elements, allow sentence not breaking the flow */

.rw-words
{
    z-index: 10;

    display: inline;

    text-indent: 10px;
}

/* Each span inside of a rw-words div will be positioned absolutely and well
     conceal any overflow */

.rw-words span
{
    position: absolute;

    overflow: hidden;

    width: 75%;
    padding-bottom: 2%;

    opacity: 0;
    color: #6b6b6b;
}

/* S */

.small
{
    font-size: smaller;
    font-weight: normal;
}

.success-msg
{
    padding-top: 10px;

    text-align: center;

    color: #23a600;
}

/* T */

.tab-pane {

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.text-justify
{
    text-align: justify;
    text-justify: inter-word;
}

.text-ct6
{
    color: rgb(240,100,0) !important;
}

/* Reduce toolbar height and padding */
.trumbowyg-box .trumbowyg-button-pane {
    padding: 2px 4px;
    min-height: 26px;
}
/* Reduce button size */
.trumbowyg-box .trumbowyg-button-pane button {
    padding: 2px 3px;
    line-height: 1;
}
/* Shrink SVG icons */
.trumbowyg-button-pane button svg {
    width: 14px;
    height: 14px;
}
.trumbowyg-editor[contenteditable=true]:empty::before {
    content: attr(placeholder);
    color: #999;
    pointer-events: none;
}


/* W */

.wrapper
{
    display: block;
}

/* IE8- CSS hack */

@media \0screen\,screen\9
{
    .gradient
    {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe9e9e9",endColorstr="#ffffffff",GradientType=0);
    }
}


/* For Card as radio button */
.card-input-element + .card:hover
{
    cursor: pointer;
}

.card-input-element + .card::before,
.card-input-element + .card::after
{
    /*checkbox checked*/
    font-family: 'bootstrap-icons';
    font-size: 24px;

    height: calc(16px + 2*.8rem);

    color: var(--primary);
    border: 2px solid transparent;
    border-radius: 2px;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.card-input-element + .card::before
{
    margin-right: 3px;
    content: '\f584'; /*checkbox unchecked */
}

.card-input-element:checked + .card::before
{
    margin-right: 3px;
    content: '\f26d'; /*checkbox checked */
}

.card-input-element:checked + .card
{
    /*checkbox checked - animation draw a blue border*/
    -webkit-transition: border .3s;
       -moz-transition: border .3s;
         -o-transition: border .3s;
            transition: border .3s;

    border: 2px solid var(--primary);
}


#info {
    width: 90%;
    /* height: 85%; */
    border-radius: 5px;
    color: var(--bs-gray-dark);
    background-color: rgba(255, 255, 255, 0.8);
    left: 50%;
    top: 45%;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 12px;
    padding-bottom: 30px;
}

/* Place where we manage the check icons to appear */
#yearlysub
{
    fill: var(--primary);
}



/* Animating the Checkbox Icon */
@-webkit-keyframes fadeInCheckbox
{
    from
    {
        -webkit-transform: rotateZ(-20deg);
        opacity: 0;
    }
    to
    {
        -webkit-transform: rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes fadeInCheckbox
{
    from
    {
        transform: rotateZ(-20deg);
        opacity: 0;
    }
    to
    {
        transform: rotateZ(0deg);
        opacity: 1;
    }
}

/* Conteneur pleine largeur de l'éditeur */
.editor-counter-container {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    padding: 6px 12px;
    width: 100%;
    font-size: 0.75rem;  /* Police plus petite */
    color: #6c757d;
    text-align: right;
    line-height: 1.3;
}

/* États du compteur */
.editor-counter-container .text-success {
    color: #198754;
}

.editor-counter-container .text-danger {
    color: #dc3545;
    font-weight: 600;
    background: rgba(220, 53, 69, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}