#drupal-off-canvas {
  color: #ddd;
  background: #f7f8f9;
  max-width: fit-content;
  max-width: -webkit-fill-available;
  font-size: 1.2rem !important;
}
#drupal-off-canvas *,
#drupal-off-canvas *:not(div),
#drupal-off-canvas *:not(.form-submit) {
  color: #314b5a;
  font-size: 14px !important;
}
#drupal-off-canvas details[open]{
	background: rgb(127 125 123 / 10%);
}
#drupal-off-canvas .layout-builder-configure-section details {
	margin-bottom: 1.5rem !important;	
	padding-left: 10px !important;
	padding-right: 10px !important;
}
#drupal-off-canvas .layout-builder-configure-section details summary{
	font-size: 1.7rem !important;	
	font-weight: bold;
	margin-left: -10px !important;
	margin-right: -10px !important;
}

.ui-dialog.ui-dialog-off-canvas, .layout-selection{
	background: rgb(247, 248, 249) !important;	
}



#drupal-off-canvas summary, 
#drupal-off-canvas summary[aria-expanded='true'], 
#drupal-off-canvas summary:hover, 
#drupal-off-canvas summary:focus{
	background: transparent !important;
    /*color: inherit !important;*/
    padding-inline: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 20px !important;
    outline: none !important;
}
#drupal-off-canvas summary:hover,
#drupal-off-canvas summary[aria-pressed='true']{
	font-weight: bold;	
}

#drupal-off-canvas summary:after{
	width: 7px !important;
    height: 7px !important;
    top: 7px !important;
    right: 7px !important;
}

#drupal-off-canvas .description, 
#drupal-off-canvas .form-item .description, 
#drupal-off-canvas .details-description{
	font-size: 12px !important;
	display: block !important;
	font-style: italic !important;
	color:#4e5577 !important;
}

#drupal-off-canvas textarea, 
#drupal-off-canvas select, 
#drupal-off-canvas input,
#drupal-off-canvas .form-control
{
	color:#000 !important;
}
#drupal-off-canvas .form-select, #drupal-off-canvas .form-text, #drupal-off-canvas .form-tel, #drupal-off-canvas .form-email, 
#drupal-off-canvas .form-url, #drupal-off-canvas .form-search, #drupal-off-canvas .form-number, #drupal-off-canvas .form-color, 
#drupal-off-canvas .form-file, #drupal-off-canvas .form-textarea, #drupal-off-canvas .form-date, #drupal-off-canvas .form-time
{
	font-size: 13px;	
}

.form-wrapper.accordion{
	margin-bottom: 1rem !important;
    margin-top: 2rem !important;	
    border-bottom: 1px solid #ccc !important;
}

.layout-selection .list-group-item {
  position: relative !important;
}
.layout-selection .list-group-item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -20px !important;
  bottom: 0 !important;
  right: auto !important;
  width: 0 !important;
  background: #89caeb !important;
  display: block !important;
}
.layout-selection .list-group-item:hover {
  background: rgba(137, 202, 235, 0.14) !important;
}
.layout-selection .list-group-item:hover::before {
  width: 3px !important;
}
.layout-selection .list-group-item a {
  text-decoration: none !important;
}
.layout-selection img {
  max-width: 100% !important;
  max-height: 160px !important;
}

.ui-dialog-content input:not(.form-submit) {
  background: #fff !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 3px !important;
}

.ui-dialog.ui-dialog-position-side {
  left: auto !important;
  right: 0 !important;
  width: 400px !important;
}
.ui-dialog.ui-dialog-position-side .ui-dialog-titlebar .ui-dialog-title {
  color: #587fa1 !important;
  display: flex;
}

.layout-builder-block {
  background-color: #fff !important;
  color: #333 !important;
  padding: 10px !important;
  white-space: nowrap !important;
  overflow: visible;
}
.layout-builder-block *, .layout-builder-block div *, 
.layout-builder-block a, .layout-builder__add-block , 
.layout-builder__add-block *, .layout-builder__add-block a {
	color: #333 !important;
	font-size:16px !important;
	-webkit-text-fill-color: #333 !important;
	-webkit-text-stroke: 0;
	padding: 10px !important;
	 white-space: nowrap !important;
	 overflow: visible;
}
.layout-builder-block .default-content{
	max-width: 800px;
    overflow: hidden;
    max-height: 500px;
    white-space: break-spaces !important;
}
.layout-builder__add-block a{
	padding-left: 20px !important;
	background-size: 12px;
}
.layout-builder-block .contextual{
	z-index: 1002;
}
.layout-builder-block svg{
	overflow: hidden;
}
.layout-builder__layout{
	overflow: visible !important;	
}
.layout-builder__layout .layout__region-info{
	color: #333 !important;
	font-size:16px !important;
	-webkit-text-fill-color: #333 !important;
	-webkit-text-stroke: 0;
}
.layout-builder__link{
	position: relative;
	z-index: 99;
}

.layout-builder__link--add:hover .visually-hidden {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  display: inline-block;
  padding: 0 10px;
  color: #333;
  font-size: 90%;
  font-style: italic;
}
.layout-builder__add-section {
  position: relative;
  z-index: 99;
}
.layout-builder__layout .layout-builder__region-label, .layout-builder__layout .layout-builder__section-label {
    display: none !important;
}
ul.contextual-links  {
	padding: 5px 10px !important;
	z-index: 9999 !important;
    visibility: visible !important;	
}
ul.contextual-links * {
	padding: 0 !important;	
}


ul.contextual-links li a{
	padding: 5px !important;	
}
ul.contextual-links li a:hover{
	background: #8ba6b7 !important;
}

/**
 * formnulaire d'edition
 */
.layout-builder-configure-section .js-form-item {
	display: flex;
    flex-direction: column;	
}

.layout-builder-configure-section .js-form-item .form-control {
	width: auto;
    max-width: 100%;
}

