.banner {
    height: 0;  
    padding-top: 25%; /* 3 / 4 = 0.75 = 75% de la largeur */
    background-color: lightblue;
    position: relative;
}


.float-right {float: right}
.float-left {float: left}

.bold {font-weight: bold}

.opacity-50 {opacity: 0.5;}
.opacity-70 {opacity: 0.7;}
.opacity-5b {opacity: 0.7;background-color: #DDD;}

.on-blue {display: none;}
.b-blue .on-blue,.b-blue.on-blue {display: inline-block;}

.bold {font-weight: bold;}

.C_888 {color: #888;transition: all 0.2s ease-in;}
.C_AAA {color: #AAA;transition: all 0.2s ease-in;}
.C_CC0000 {color: #CC0000;transition: all 0.2s ease-in;}
.b-purple .C_888, .b-blue .C_888 ,.b-grey .C_888 {color: #FFF;}
.b-purple .C_AAA , .b-blue .C_AAA ,.b-grey .C_AAA {color: #FFF;}


.t-200,.t-200 svg,.t-200 .t-div,.t-200 .text  {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}


@media(hover: hover) and (pointer: fine) {
.hover:hover {cursor: pointer;background-color: #DDD!important;color: #000!important;opacity: 1!important}
.hover2:hover {cursor: pointer;background-color: #CCC!important;opacity: 1!important}
.hover:hover svg {fill: #888!important}
.hover:hover .t-200  {color: #000!important}
.hover2:hover svg {fill: #888!important;}

.hover:hover .C_AAA {color: #000!important;  }
.hover:hover .C_888 {color: #000!important;  }

}

.unselectable {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #cc0000;
}

.xframe-padding {padding: 0px 10px}
/* small-scroll  */

.small-scroll {scrollbar-width: thin;overflow-y: auto;}
.small-scroll::-webkit-scrollbar {width: 7px;}
.small-scroll::-webkit-scrollbar-track {background: transparent;}
.small-scroll::-webkit-scrollbar-thumb {background-color: rgba(155, 155, 155, 0.5);border-radius: 20px;border: transparent;}


.dg-button {line-height: 1.0;vertical-align:top;font-size: 16px;display: inline-block;border-radius: 4px;color: #FFF;padding: 8px 8px;position: relative;}
.dg-button.dg-big {min-height: 38px;padding: 11px 9px 7px;font-size: 16px!important;}
.dg-button.dg-big span {font-size: 16px!important;}

.dg-button-pict.dg-big {width:38px;position: relative;}
.dg-button-pict.dg-big .svg-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.dg-button-lpict .svg-icon {width: 24px!important;height: 24px!important;position: absolute;top: 4px;left: 6px!important;padding: 4px;border-radius: 6px}
.dg-button-lpict.dg-big .svg-icon {width: 24px!important;height: 24px!important;position: absolute;top: 8px;left: 4px;padding: 4px;border-radius: 6px}

.dg-button svg {width: 16px!important;height: 16px!important;fill: #000}
.dg-button-lpict {padding-left: 30px;}
.dg-button-lpict.dg-big {padding-left: 33px;}


.dg-button.dg-small {line-height: 1.0;vertical-align:top;height: 20px;font-size: 12px!important;display: inline-block;border-radius: 4px;color: #FFF;padding: 4px 4px 4px;position: relative;}
.dg-button.dg-small .svg-icon {top: 0px!important;left: 0px!important;}
.dg-button.dg-small .svg-icon svg {width: 12px!important;height: 12px!important;}
.dg-button-lpict.dg-small {padding-left: 24px;}


/* .b-red {background-color: red!important;color: #FFF!important}
.dg-field {padding:4px 10px;border-bottom:1px solid #AAA;width: 100%;position: relative;}
.dg-field-title {padding:8px 10px;border-bottom:1px solid #AAA;font-weight: bold;background-color: #EEE;font-size:18px ;width: 100%}
.dg-field-red {color:red;font-weight:bold;background-color:#ffeaef;}
.dg-field-green {color:green;font-weight:bold;background-color:#e6f6ec;}
.dg-field-origin {color:#FFF;font-weight:bold;background-color:green;}
.dg-field-button {font-weight:bold;background-color:#DDD;padding: 10px;font-size: 18px;}
.dg-field-button-left {padding-left: 30px;}
.dg-field-button-left .svg-icon {left: 10px;}

.on-list {display: none}
.mode-list .on-list {display: inline-block!important;}

.on-page {display: none}
.mode-page .on-page {display: inline-block!important;}

*/


.pa-option-list {font-size: 15px;margin: 0px 10px;overflow: hidden;}
/* background-color: #FFF; border: 1px solid #CCC;border-radius: 5px;padding: 6px 0px;*/
.pa-option-list .pa-option {padding:1px 5px;}

.pa-option-list {margin: 0px 0px 10px;border: 1px solid #AAA;border-radius: 5px;overflow: hidden;}
.pa-option {padding : 8px 10px!important; background-color: #FFF;border-bottom: 1px solid #AAA}
.pa-option.dg-button-lpict {padding-left : 32px!important;}
.pa-option.dg-button-lpict .svg-icon {position: absolute;top: 7px;left: 7px;}

.on-edit {display: none!important}
.mode-edit .on-edit {display: block!important;}
.mode-edit .hide-edit {display: none!important}

.on-connected-ib, .on-connected {display: none;}
.mode-connected .on-connected {display: block!important;}
.mode-connected .on-connected-ib {display: inline-block!important;}
.mode-connected .hide-connected {display: none;}

.btn-aspi-on {display: none!important}

.aspi-on .btn-aspi-off {display: none!important; }
.aspi-on .btn-aspi-on  {display: block!important;}

.margin-left5 {margin-left: 5px!important;}
.margin-right5 {margin-right: 5px!important;}

.tag_selected {font-weight: bold;color:#CC0000;background-color: #FFD;}

.form-title3 {font-size: 16px!important;font-weight: bold;padding: 8px 4px 4px;}
.dg-round {border-radius: 50%!important ;}

.empty-hide:empty {display: none!important}

.read-more {
  max-height: 115px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: max-height 0.3s ease;
}

.read-more.has-more {
  max-height: 115px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: max-height 0.3s ease;
  padding-bottom: 20px;
}

.read-more.expanded {
  max-height: 1000px!important; /* hauteur après expansion */
  padding-bottom: 24px;
}

.read-more .voir-plus {
  position: absolute;
  bottom: -0px;
  left: 0px;
  right: 0px;
  background: white;
  padding: 5px 0px;
  font-size: 12px;
  line-height: 1!important;
  color: #0975E7!important;;
  display: none;
}

.read-more.has-more .voir-plus {
  display: block;
}

.note-yellow {background-color: #FFD;color: red}
.note-yellow .tag {color: purple;}


/* DARKMODE */
.b-white {background-color: #FFF!important;color: #000!important}
.darkMode {background-color: #333!important;color: #FFF!important}

.darkMode .b-white {background-color: #666;}

.darkMode .b-ltgrey {background-color: #666!important;color: #FFF!important}
.darkMode .b-ltgrey svg {fill: #FFF!important}

.darkMode .note-yellow {background-color: #666;color:yellow}
.darkMode .c-purple {color: #ffcf00}

.darkMode .hover:hover {background-color: #666!important}
.darkMode .hover:hover .note-yellow {background-color: #888!important;color: #FFF}
.darkMode .hover:hover .note-yellow .c-purple {color: #FFF}

/* INOUT FOCUS */


 .form-control
 {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-weight: 400;
    color: #000;    
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #AAA!important;
    border-radius: 6px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size:16px!important;
    width:100%;
    padding:8px 8px 6px 8px;
 outline: none!important;
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}


textarea.form-control
{
    padding: 6px 6px;
    width: 100%;
    min-height: 60px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    resize: none;
}

.form-control:focus
{
  outline: none; /* enlever le contour bleu par défaut */
  background-color: #f0f8ff;
  transition: all 0.3s ease;
  outline: none; /* désactive l’outline par défaut */
  box-shadow: 0 0 0 2px #0975E7;
}

.form-control:hover
{
  outline: none; /* enlever le contour bleu par défaut */
  background-color: #FFF;
  transition: all 0.3s ease;
  outline: none; /* désactive l’outline par défaut */
  box-shadow: 0 0 0 2px #0975E7;
}


.padding_top_bottom_5 {padding-top: 5px!important;padding-bottom: 3px!important}
.margin_bottom_3px {margin-bottom: 3px!important}
.margin_bottom_5px {margin-bottom: 5px!important}

.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.border_888 {border: 1px solid #888!important}
.border_AAA {border: 1px solid #AAA!important}
.b-grey .border_888 {border: 1px solid #FFF!important}

.dg-button-square {font-size: 14px;font-weight: bord;color: #666!imptant;border-radius:8px;padding:8px 12px;display:inline-block;position:relative;padding-top:38px;}
.dg-button-square .svg-icon {top:10px;position: absolute;left: 50%;transform: translate(-50%,0)}
.dg-button-square .svg-icon svg {width: 24px; height: 24px;}

.no-border-radius-right {border-top-right-radius: 0px!important;border-bottom-right-radius: 0px!important;}
.no-border-radius-left {border-top-left-radius: 0px!important;border-bottom-left-radius: 0px!important;}

.top-right-edit {z-index: 1001;position: absolute;top: 10px;right: 10px}
.bottom-right-edit {z-index: 1000;position: absolute;bottom: 10px;right: 10px}
.center-right-edit {z-index: 1001;position: absolute;top:50%;transform:translate(0,-50%);right: 10px}

.dg-mobile .bottom-right-edit {z-index: 1000;position: absolute;bottom: 5px;right: 5px}
.dg-mobile .top-right-edit {z-index: 1001;position: absolute;top: 5px;right: 5px}
.dg-mobile .center-right-edit {right: 5px}

.btn-round {border-radius:50%;width:35px;height:35px;}

.b-block {display: block;}
.b-border {border: 1px solid #CCC}

.pa-dialog-title .svg-icon svg {fill: #FFF} 

aside.scaffold-layout__aside { display: none!important; }

.dg-title {font-size: 18px!important;font-weight: bold}


.small-note {padding:6px 5px 4px!important;height:24px;font-size:12px!important;margin:5px 0px 0px 0px!important;}
.small-note .dg-button {margin:-4px 3px -4px -3px!important}

.menu2 {padding:10px 20px 10px 20px;font-size: 16px!important;}

@media only screen and (max-width: 600px) {
.bottom-right-edit {z-index: 1000;position: absolute;bottom: 5px;right: 5px}
.top-right-edit {z-index: 1001;position: absolute;top: 5px;right: 5px}
.center-right-edit {right: 5px}
}


.dg-tab {color:#AAA;font-weight:bold;padding:8px 10px;border-bottom:3px solid #EEE;}

.pa-dialog-full .pa-dialog-buttons {position: absolute;bottom: 0px;background-color: #FFF;right: 0px;left: 0px;border-top:1px solid #CCC;background-color:#EEE}
.pa-dialog-full .pa-dialog-content {position: absolute!important;left: 0px!important;right: 0px!important;bottom: 0px!important;padding-bottom:80px;}

.pa-dialog-full {bottom: 0px;top: 0px}
.pa-dialog-full .dialog-border {position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;}


.dg-confirm {z-index: 10000;}