#dg-win {
    visibility: visible!important;
    color: #000;
    z-index: 2000003;
    border-left: 3px #000 solid;
    width: 380px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    text-align: left;
    background-color: #FFF;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Arial', sans-serif!important;
    line-height: 1.2;
}
#dg-win table {
    border-spacing : 0;
    border-collapse : collapse;
    box-sizing: border-box;
}
#dg-win * {
    line-height: 1.2;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Arial', sans-serif!important;
    margin: 0px;
    border: 0px solid #000;
}
#dg-win tr {
    border: 0px solid #000!important;
}

.dg-div {
  padding-bottom: 20px!important;    
}

#dg-win b {
    font-weight: 600!important;
}

#dg-win td {padding: 0px;border: 0px solid #FFF}

#left-pan-thumb {
    z-index: 2000002;
    position:fixed;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width:50px;
    height:50px;
    right:380px;
    top : 180px;
    background-color: #EEE;
}

#dg_iframe,#dg_iframe {
border:0px solid #EEE;
width:100%;
height:100%;    
}
.shadow {
    box-shadow: -4px 8px 24px 0 rgba(131, 164, 255, 0.5);
}

.svg-icon svg {vertical-align: top;}
.svg-45, .svg-45 svg,svg.svg-45 {width:45px;height: 45px;}
.svg-35, .svg-35 svg,svg.svg-35 {width:35px;height: 35px;}
.svg-30, .svg-30 svg,svg.svg-30 {width:30px;height: 30px;}
.svg-24 svg,svg.svg-24 {width:24px;height: 24px;}
.svg-20, .svg-20 svg, svg.svg-20 {width:20px;height: 20px;}
.svg-16, .svg-16 svg,svg.svg-16 {width:16px;height: 16px;}
.svg-15 svg,svg.svg-15 {width:15px;height: 15px;}
.svg-14, .svg-14 svg,svg.svg-14 {width:14px!important;height: 14px!important;}
.svg-12, .svg-12 svg,svg.svg-12 {width:12px!important;height: 12px!important;}
.icon-36 {width: 36px;height: 36px;border-radius: 50%;}
.icon-20 {width: 20px;height: 20px;border-radius: 50%;}
.icon-24 {width: 24px;height: 24px;border-radius: 50%;}
.svg-white svg {fill: #FFF!important}
.svg-grey svg {fill: #888!important}
.svg-red  svg {fill: #CC0000!important}
.svg-blue  svg {fill: #0975E7!important}
.svg-purple  svg {fill: purple!important}
.svg-ltgrey svg {fill: #CCC!important}

.b-orange {background-color: orange!important;color: #000!important}
.full-div {
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    right: 0px!important;
    bottom: 0px!important;
}

.full-div2 {
    position: fixed!important;
    top: 0px!important;
    left: 0px!important;
    right: 0px!important;
    bottom: 0px!important;
}

.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;
}

.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.hcenter {position:absolute;left:50%;transform:translate(-50%,0)}
.vcenter {position:absolute;top:50%;transform:translate(0,-50%)}

@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}
.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;}

.ellipsis,.dg-field,.dg-field-title {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

.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;}

.b-ltgrey  {background-color: #EEE!important;color: #000!important}
.b-ltyellow  {background-color: #FFC!important;color: #000!important}
.b-green   {background-color: green!important;color: #FFF!important}
.b-ltgrey2 {background-color: #DDD!important;color: #000!important}
.b-ltblue  {background-color: #e5f3ff!important;}
.b-ltblue2 {background-color: #cce8ff!important;}

.dg-button.dg-small {line-height: 1.0;vertical-align:top;height: 20px;font-size: 12px!important;min-height: 15px;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;}

/* COLORS */

.b-blue {background-color: #0975E7!important;color: #FFF!important}
.b-purple {background-color: purple!important;color: #FFF!important}
.b-black {background-color: #000!important;color: #FFF!important}
.b-red  {background-color: #E20613!important;color: #FFF!important;}
.b-grey {background-color: #AAA!important;color: #FFF!important;}
.b-grey2 {background-color: #888!important;color: #FFF!important;}
.b-transparent svg {fill :#AAA!important}
.b-ltgrey svg {fill: #888!important}
.b-green svg,.b-black svg,.b-red svg, .b-grey svg, .b-grey2 svg, .b-purple svg, .b-blue svg {fill: #FFF!important}
/* .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;}

*/

.c-blue {color: #0975E7!important;}
.c-purple {color: purple}
.c-black {color: #000!important}
.c-red {color: #E20613!important;}
.hide {display: none!important}
.c-bold {font-weight: bold;}

.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 : 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;}

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


.rectangle25 {
    height: 0;  
    padding-top: 25%; 
    background-color: lightblue;
    position: relative;
}

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

.cover    {background-size: cover;background-position: 50% 50%;background-repeat: no-repeat; }

.float-right {float: right}
.float-left {float: left}
.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;}
.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 */


 .dg-feed-buttons .form-control,.dialog-open .form-control, .dg-content .form-control, .dg-div .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
    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;
}


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

.dg-feed-buttons .form-control:focus,.dialog-open .form-control:focus, .dg-content .form-control:focus, .dg-div .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;
}

.dg-feed-buttons .form-control:hover,.dialog-open .form-control:hover,.dg-content .form-control:hover, .form-control:hover, .dg-div .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;
}

.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;}

.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}

.c-grey {color: #888!important}

.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}
}

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

.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;}

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

.bold {font-weight: bold;}

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