/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/



/*.outerframe .group-title {
	color: white;
	background-color: #2c7db7;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 64px;
	padding-bottom: 32px;
	padding-left: -32px;
	margin-left: -14px;
	margin-right: -14px;
} */

/*.navbar-brand {
	width: 76px;
	background-image: url("https://www.province-sud.nc/themes/custom/psud/img/logo_psud_multicolor.svg");
	background-color: white;
	height : 75px;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
{
    background-color: white;
} */

/* logo */
.inputsize .form-control{
    max-width: 26%;
}
.dropdown.bootstrap-select {
	min-width: 300px;
}
.dropdown-menu
{
 z-index: 3000;
}
.select2 {
	display: block !important;
}


.survey-contact, .surveys-list-container
{
    text-align :center;
}

.surveys-list .btn-group {
    width: 100%;
  }

.outerframe::before {
	background-image: url('https://www.province-sud.nc/limesurvey/themes/admin/Bay_of_Many/images/logo.png');
	width: 250px;
	height: 250px;
	background-color: white;
	text-align: center;
	background-size: 250px 250px;
	margin: auto;
}

.navbar-default {
	background-color: #003798  !important;
}


.progress-bar {
    background-color: #003798;
}

.top-container .progress {
    height: 28px;

}


.form-inline .form-group {
	display: inline;
}




.progress .progress-bar {
    font-size: 13px;
    padding-top : 5px;
}

/* Aide */
.text-info, .text-info:hover {
	color: #3498db;
} 

.well {
background-color : white;
}
/* Questions */
.bg-primary {
	background-color: white;
	border-width: 0px 0px 0px 0px;
	border-color: #dbdbdb;
	/* color: #2669A5; */
}

/* Bulles message  */
.alert-warning {
	 background-color : #00adef;
}

.bg-warning {
    background-color: white !important;
}
.bg-warning:active, .bg-warning:focus, .bg-warning:hover {
    background-color: #346FEF !important;
}

/* Boutons précedent, suivant, envoyer  */
.btn-primary:hover, .btn-primary:focus, .btn-primary.active  {
	background-color: #346FEF !important;
}

.btn-primary  {
	background-color: #2669A5 ;
}

.btn-default:hover, .btn-default:focus
{
    background-color: #346FEF !important;
}


.btn-default 
{
    background-color: #2669A5;
}

/* Header  */
.navbar a :hover {
	color: #346FEF;
}

a, a:hover, a:focus {
 color:rgb(0,159,227);
}


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: #346FEF;
}

/* Incrémentation des question  */
.question-number {
	position: relative;
	top: 1px;
	left: -5px;
	color: #2669A5;
	font-size : 21px;
}

.question-number::after {
	content: ".";
}

body {
	font-size: 18px ;
}

.question-text 
{
    font-size: 23px;
}

.h3
{
    font-size: 33px;
    color: #2669A5;
}

.form-control
{
    font-size: 15px;

}

/*.question-container {
    color: #2669A5;
}*/


.question-valid-container {
	background-color: white;
	text-align: left;
}
.question-title-container
{
    color: #2669A5;
}

/*
.radio-item input[type="radio"], .checkbox-item input[type="checkbox"] {
	height: 30px !important;
	width: 30px !important;
} */
.alert {
 border-color: #00adef;
}


.answer-item .control-label {
	display: flex;
	text-align : left;
	width : 100%;
}

/* Tableaux */
.ls-answers tbody .answertext {
	text-align: center;
}


.question-item div {
	width: 100%;
}

/* Bootstrap buttons  */
.yesno-button, .gender-button {

	width : 100%; 
}

/* Lignes de séparation */
.answer-container {
  border-width: 0px 0px 0px 0px;
}

/* custom.css | https://qualif.province-sud.nc/limesurvey/tmp/assets/7f8a09bc/css/custom.css */


/* */

/* Alignement des boutons radios et checkboxes */
.radio-item .radio-label::before, .radio-item .radio-label::after {
	margin-top: 4px;
}

.checkbox-item label::before, .checkbox-item label::after {
  margin-top: 4px;
}


/* ==========================================================================
   Custom LimeSurvey : Tableaux multi-flexi
   --------------------------------------------------------------------------
   Couvre tous les types de questions "Tableau" :
     - Cases a cocher   (.checkbox-array)  parent .array-multi-flexi
     - Texte / Nombre   (.text-array, .number-array, .numberonly)
     - Boutons radio    (.radio-array)     parent .array-flexible-row

   Effets : 1ere colonne (espece) sticky a gauche + en-tete sticky en haut,
   scroll horizontal/vertical, degrade blanc aux bords pour indiquer le scroll.

   ========================================================================== */

:root {
    --ls-blue:         rgb(38, 105, 165);
    --ls-blue-soft:    rgba(38, 105, 165, 0.05);
    --ls-blue-thumb:   rgba(38, 105, 165, 0.4);
    --ls-blue-thumb-h: rgba(38, 105, 165, 0.6);
    --ls-border:       #e0e0e0;
    --ls-cell-border:  #e8e8e8;
}

/* ===================== 1) STRUCTURE TABULAIRE =====================
   Annule le `display: block` impose par noTablesOnMobile.css de LimeSurvey
   (le seul endroit ou !important reste indispensable). */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers,
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers :is(thead, tbody, tr, th, td) {
    display: revert !important;
}
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers              { display: table !important; }
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > thead      { display: table-header-group !important; }
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > tbody      { display: table-row-group !important; }
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > tbody > tr { display: table-row !important; }
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers :is(th, td)  { display: table-cell !important; }


/* ===================== 2) CONTENEUR SCROLLABLE ===================== */
:is(.array-flexible-row, .array-multi-flexi) .answer-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    max-width: 100%;
    max-height: 70vh;
    border: 1px solid var(--ls-border);
    border-radius: 4px;
    background: #fff;
    margin: 0;
    padding: 0;
}


/* ===================== 3) TABLEAU : LARGEUR ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    margin: 0;
    padding: 0;
}


/* ===================== 4) CELLULES GENERALES ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers :is(th, td) {
    padding: 10px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    line-height: 1.2;
    border-color: var(--ls-cell-border);
    overflow: hidden;
    text-overflow: clip;
}


/* ===================== 5) 1ERE COLONNE STICKY (NOM ESPECE) ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > thead > tr.ls-heading > :is(th:first-child, td:first-child),
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > tbody > tr > th.answertext {
    position: sticky;
    left: 0;
    z-index: 50;
    background: #fff;
    border-right: 2px solid var(--ls-blue);
    isolation: isolate;
    text-align: left;
    min-width: 170px;
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    font-weight: 400;
    color: var(--ls-blue);
}


/* ===================== 6) EN-TETE DES COLONNES STICKY EN HAUT ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > thead > tr.ls-heading > :is(th, td) {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #f7f9fc;
    color: var(--ls-blue);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 8px;
    text-align: center;
    border-bottom: 2px solid var(--ls-blue);
    border-top: 1px solid var(--ls-border);
    white-space: normal;
    line-height: 1.3;
}


/* ===================== 7) COIN HAUT-GAUCHE (par-dessus tout) ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > thead > tr.ls-heading > :is(th:first-child, td:first-child) {
    z-index: 60;
    background: #fff;
    color: transparent;
    border-right: 2px solid var(--ls-blue);
    border-bottom: 2px solid var(--ls-blue);
    border-top: 1px solid var(--ls-border);
}


/* ===================== FIX SAFARI/iOS (active GPU sur cellules sticky) ===================== */
@supports (-webkit-touch-callout: none) {
    :is(.array-flexible-row, .array-multi-flexi) table.ls-answers > :is(thead, tbody) > tr > :is(th, td) {
        -webkit-transform: translateZ(0);
    }
}


/* ===================== 8) CHECKBOX-ARRAY : case centree =====================
   On n'utilise PAS transform sur ::before / ::after pour ne pas ecraser la
   transformation native scale() utilisee par LimeSurvey pour l'etat coche. */
.array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}
.array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility::before,
.array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility::after {
    position: absolute;
    top: 50%;
    left: 50%;
    text-indent: 0;
    line-height: 1;
}
.array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility::before {
    margin: -8.5px 0 0 -8.5px;
}
.array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility::after {
    margin: 0;
}
.array-multi-flexi table.ls-answers.checkbox-array td.checkbox-item {
    padding: 6px 4px;
    text-align: center;
}
.array-multi-flexi table.ls-answers.checkbox-array td.checkbox-item > label {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}
.array-multi-flexi table.ls-answers.checkbox-array td.checkbox-item input[type="checkbox"] {
    transform: scale(1.15);
    transform-origin: center;
}


/* ===================== 8b) RADIO-ARRAY : bouton radio centre =====================
   MEME PROBLEME : le CSS LimeSurvey utilise transform: scale(0/1) sur
   ::after pour l'etat coche. On utilise donc des margins negatives. */
.array-flexible-row table.ls-answers.radio-array .radio-item label.ls-label-xs-visibility {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}
.array-flexible-row table.ls-answers.radio-array .radio-item label.ls-label-xs-visibility::before,
.array-flexible-row table.ls-answers.radio-array .radio-item label.ls-label-xs-visibility::after {
    position: absolute;
    top: 50%;
    left: 50%;
    text-indent: 0;
    line-height: 1;
}
.array-flexible-row table.ls-answers.radio-array .radio-item label.ls-label-xs-visibility::before {
    margin: -8.5px 0 0 -8.5px;
}
.array-flexible-row table.ls-answers.radio-array .radio-item label.ls-label-xs-visibility::after {
    margin: -5.5px 0 0 -5.5px;
}
.array-flexible-row table.ls-answers.radio-array td.radio-item {
    padding: 6px 4px;
    text-align: center;
}
.array-flexible-row table.ls-answers.radio-array td.radio-item > label {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}
.array-flexible-row table.ls-answers.radio-array td.radio-item input[type="radio"] {
    transform: scale(1.25);
    transform-origin: center;
}


/* ===================== 9) TEXT/NUMBER-ARRAY : input texte equilibre ===================== */
.array-multi-flexi table.ls-answers:is(.text-array, .number-array, .numberonly) :is(.text-item, .numeric-item) input {
    width: 100%;
    min-width: 80px;
    max-width: 140px;
    margin: 0 auto;
    padding: 6px 8px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
}
.array-multi-flexi table.ls-answers:is(.text-array, .number-array, .numberonly) :is(.text-item, .numeric-item) input:focus {
    outline: 2px solid var(--ls-blue);
    outline-offset: 1px;
    border-color: var(--ls-blue);
}
.array-multi-flexi table.ls-answers:is(.text-array, .number-array, .numberonly) .ls-label-xs-visibility {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.array-multi-flexi table.ls-answers:is(.text-array, .number-array, .numberonly) :is(.text-item, .numeric-item) {
    text-align: center;
    vertical-align: middle;
    min-width: 110px;
}


/* ===================== 10) HOVER SUR LES LIGNES ===================== */
:is(.array-flexible-row, .array-multi-flexi) table.ls-answers > tbody > tr:hover {
    background: var(--ls-blue-soft);
}


/* ===================== 11) INDICATEURS DE SCROLL (degrades blancs) ===================== */
:is(.array-flexible-row, .array-multi-flexi) .answer-container :is(.cb-scroll-fade-left, .cb-scroll-fade-right) {
    position: absolute;
    top: 0;
    width: 28px;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.15s ease;
}
:is(.array-flexible-row, .array-multi-flexi) .answer-container .cb-scroll-fade-right {
    right: 0;
    background: linear-gradient(to left,  rgba(255,255,255,0), rgba(255,255,255,0.9));
    opacity: 1;
}
:is(.array-flexible-row, .array-multi-flexi) .answer-container .cb-scroll-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
    opacity: 0;
}
:is(.array-flexible-row, .array-multi-flexi) .answer-container.cb-scrolled-end   .cb-scroll-fade-right { opacity: 0; }
:is(.array-flexible-row, .array-multi-flexi) .answer-container.cb-scrolled-start .cb-scroll-fade-left  { opacity: 1; }


/* ===================== 12) SCROLLBAR PERSONNALISEE ===================== */
:is(.array-flexible-row, .array-multi-flexi) .answer-container::-webkit-scrollbar              { width: 10px; height: 10px; }
:is(.array-flexible-row, .array-multi-flexi) .answer-container::-webkit-scrollbar-track       { background: #f1f1f1; border-radius: 5px; }
:is(.array-flexible-row, .array-multi-flexi) .answer-container::-webkit-scrollbar-thumb       { background: var(--ls-blue-thumb); border-radius: 5px; }
:is(.array-flexible-row, .array-multi-flexi) .answer-container::-webkit-scrollbar-thumb:hover { background: var(--ls-blue-thumb-h); }


/* ===================== SMARTPHONE (<=760px) ===================== */
@media (max-width: 760px) {
    :is(.array-flexible-row, .array-multi-flexi) table.ls-answers :is(th, td) {
        padding: 6px;
    }
    .array-multi-flexi table.ls-answers.checkbox-array .checkbox-item label.ls-label-xs-visibility,
    .array-flexible-row  table.ls-answers.radio-array   .radio-item   label.ls-label-xs-visibility {
        width: 40px;
        height: 40px;
    }
    .array-multi-flexi table.ls-answers.checkbox-array td.checkbox-item input[type="checkbox"] {
        transform: scale(1.3);
    }
    .array-flexible-row  table.ls-answers.radio-array   td.radio-item   input[type="radio"]   {
        transform: scale(1.4);
    }
    .array-multi-flexi table.ls-answers:is(.text-array, .number-array, .numberonly) :is(.text-item, .numeric-item) input {
        padding: 10px 8px;
        font-size: 16px;
    }
    :is(.array-flexible-row, .array-multi-flexi) table.ls-answers > tbody > tr:hover {
        background: transparent;
    }
}


/* ===================== ACCESSIBILITE (focus visible) ===================== */
:is(.array-flexible-row, .array-multi-flexi) .answer-container:focus-within {
    outline: 2px solid #2980b9;
    outline-offset: 2px;
}