/* dashboard*/

.dashboard1 {
    width: 50vw;
    margin: auto;
    margin-top: auto;
    display: block;
    padding: 50px;
    background: #f2f2f2;
    text-align: center;
    margin-top: 15vh;
}

a.dashlink {
    background: #333;
    color: white;
    padding: 20px;
    margin-bottom: 10px;
    display: block;
    width: 50%;
    margin: auto;
}

a.dashlink:hover {
    background: lightblue;
    color: #333;
}

#user-login-form .btn {
    background-color: #54b9cb;
    line-height: 40px;
    padding: 0px 10px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    transition: all .25s ease-in-out;
    font-size: 18px;
    text-align: center;
}
/*
.cke_wysiwyg_frame {
    background-color: #ccc!important;
}
*/

/* ----- ----- ----- ----- ----- ----- */

#edit-field-menu-opacity2 {
    width: 80px;
}


/* omdat admin menu fixed is, duw content omlaag*/

.user-logged-in .col-sm-9 {
    padding-top: 70px;
}

.editor .node-page-layout-builder-form #edit-actions,
.editor .node-overlay-page-layout-builder-form #edit-actions {
    position: fixed;
    bottom: -60px;
    z-index: 100;
    right: 0;
    padding: 0px;
}

.node-overlay-page-layout-builder-form .btn,
.node-page-layout-builder-form .btn,
.node-overlay-page-layout-builder-form a.button,
.node-page-layout-builder-form a.button {
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0.25rem;
    padding: 4px 8px;
}


/*admin dingen*/

.node-form .form-actions {
    padding-bottom: 100px;
}

#overlay1 {
    background: none;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 100ms, 100ms;
    -webkit-transition-timing-function: linear, ease-in;
}

#overlay1.cbp-spmenu-open {
    background: black;
    width: 100%;
    position: fixed;
    height: 100vh;
    z-index: 100000;
    opacity: 0.7;
    top: 0;
}


/* edit form basic page*/

.editform_1 {
    border: solid 1px;
    padding: 40px;
    background: #2b92d4;
    width: 33%;
    position: relative;
    float: right;
    color: white;
}

.editform_1 a {
    color: white;
    text-decoration: underline;
}


/*login/user*/

.path-user .main-container .region-content {
    border: solid 1px #6102FF;
    width: 50%;
    margin: auto;
    margin-top: 100px;
    position: relative;
    padding: 30px;
}

#user-login-form {
    width: 50vw;
    margin: auto;
    margin-top: auto;
    margin-top: 25vw;
}


/*admin beheer kant overwrite door gebruikt bootstrap theme als backend*/

.views-ui-display-tab-actions .dropbutton-wrapper li a,
.views-ui-display-tab-actions .dropbutton-wrapper input {
    margin-bottom: 0;
    padding-left: 12px;
    border: medium;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: black;
}


/* form display edit */

.ui-dialog .alert.alert-success {
    display: none;
}

.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
    background: lightblue !important;
}


/* Manager */

.editor .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
    background: #6300ff !important;
}

.editor #drupal-off-canvas input[type="submit"],
.node-page-layout-builder-form .btn,
.node-page-layout-builder-form a.button,
.node-overlay-page-layout-builder-form .btn,
.node-overlay-page-layout-builder-form a.button,
.ui-dialog .ui-dialog-buttonpane button,
#drupal-off-canvas input[type="submit"].button--primary,
#drupal-off-canvas input[type="submit"].button,
.ui-widget .btn {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 2rem 8px 2rem;
    border-radius: 32px !important;
    border-style: none;
    line-height: 16px;
}

.horizontal-tabs {
    border-style: none;
}

#drupal-off-canvas input[type="submit"].button {	
    width: 25%!important;	
}	
#drupal-off-canvas input[type="submit"].button--primary {	
    width: 50%!important;	
}

.editor #block-mmbootstrap-local-tasks .tabs-primary,
.professional #block-mmbootstrap-local-tasks .tabs-primary,
.super_professional #block-mmbootstrap-local-tasks .tabs-primary {
    display: none;
}

.editor #cke_32,
.editor #cke_33,
.editor #cke_34,
.editor #cke_35,
.editor #cke_37,
.editor #cke_39,
.editor #cke_41 {
    display: none!important;
}


/*
.professional #cke_32,
.professional #cke_33,
.professional #cke_35,
.professional #cke_37,
.professional #cke_38,
.professional #cke_39 {
    display: none!important;
}
*/

.hide {
    background: red;
    display: none;
}

.field--name-field-paddingtop,
.field--name-field-padding-left,
.field--name-field-padding-right,
.field--name-field-padding-bottom {
    width: 50%;
    float: left;
}

.field--name-field-padding-all .form-control,
.field--name-field-paddingtop .form-control,
.field--name-field-padding-left .form-control,
.field--name-field-padding-right .form-control,
.field--name-field-padding-bottom .form-control {
    width: 100px;
}


/*input velden*/

.ui-dialog-off-canvas input {
    width: 8rem;
    border-radius: 2px !important;
}

#drupal-off-canvas input[type="checkbox"] {
    width: auto;
}

.field--name-field-hoogte,
.field--name-field-breedte,
.field--name-field-max-width {
    display: inline-block;
    width: 6rem !important;
}

.field--name-field-kolomhoogte-uitvullen-,
.field--name-field-nt-padding-all {
    display: block;
    float: none;
}

.field--name-field-hoogte input,
.field--name-field-breedte input,
.field--name-field-max-width input {
    width: 8rem !important;
}

.field--name-field-anker-positie input,
.form-item-settings-block-form-field-block-opacity-0-value input,
.form-item-settings-block-form-field-tekst-uitlijnen .form-select {
    width: 8rem !important;
}

.minicolors-theme-default.minicolors input,
.field--name-field-animatie3,
.field--name-field-a {
    width: 8rem !important;
    float: left;
    margin-right: 1rem;
}

.field--name-field-a,
.field--name-field-animatie3,
.field--name-field-animatie-duur,
.field--name-field-animatie-uit,
.field--name-field-animatie-uit-delay,
.field--name-field-animatie-uit-duur,
.field--name-field-parallax-snelheid,
.field--name-field-parallax-richting,
.field--name-field-achtergrond-snelheid,
.field--name-field-achtergrond-richting {
    width: 10rem !important;
    float: left;
    margin-right: 2rem;
}

.field--name-field-animatie3 select,
.field--name-field-a select,
.field--name-field-animatie-duur select,
.field--name-field-animatie-uit select,
.field--name-field-animatie-uit-delay select,
.field--name-field-animatie-uit-duur select {
    width: 10rem !important;
}

.field--name-field-min-width-op-mobile input {
    width: 8rem !important;
    display: inline;
}

.field--name-field-nt-padding-all input {
    width: 6rem !important;
}

.field--name-field-margin-all input {
    width: 6rem !important;
}

.field--name-field-nt-padding-all input,
.field--name-field-margin-all input {
    width: 6rem !important;
}

.field--name-field-hoogte,
.field--name-field-breedte,
.field--name-field-max-width,
.field--name-field-border-dikte,
.field--name-field-border-kleur,
.field--name-field-border-style,
.field--name-field-width-left,
.field--name-field-width-right,
.field--name-field-width-top,
.field--name-field-width-bottom,
.field--name-field-borderradius-linksonder,
.field--name-field-borderradius-rechtsonder,
.field--name-field-borderradius-linksboven,
.field--name-field-borderradius-rechtsboven,
.field--name-field-nt-padding-left,
.field--name-field-nt-padding-right,
.field--name-field-nt-padding-top,
.field--name-field-nt-padding-bottom,
.field--name-field-foldout-padding-left,
.field--name-field-foldout-padding-right,
.field--name-field-foldout-padding-top,
.field--name-field-foldout-padding-bottom,
.field--name-field-margin-links,
.field--name-field-margin-rechts,
.field--name-field-margin-boven,
.field--name-field-margin-onder {
    width: 8rem!important;
    display: block;
    float: left;
    margin-right: 1rem;
}

.field--name-field-hoogte input,
.field--name-field-breedte input,
.field--name-field-max-width input,
.field--name-field-border-dikte select,
.field--name-field-border-kleur input,
.field--name-field-border-style select,
.field--name-field-width-left input,
.field--name-field-width-right input,
.field--name-field-width-top input,
.field--name-field-width-bottom input,
.field--name-field-borderradius-linksonder input,
.field--name-field-borderradius-rechtsonder input,
.field--name-field-borderradius-linksboven input,
.field--name-field-borderradius-rechtsboven input,
.field--name-field-margin-all input,
.field--name-field-margin-links input,
.field--name-field-margin-rechts input,
.field--name-field-margin-boven input,
.field--name-field-margin-onder input {
    height: 2rem;
    width: 8rem !important;
}

.field--name-field-nt-background-image input {
    width: 50% !important;
    border: solid red 2px;
}

.ui-dialog-off-canvas select {
    height: 2rem!important;
    width: 10rem !important;
    padding: 0px !important;
}

.minicolors-theme-default .minicolors-swatch {
    top: 0.7rem;
}

#drupal-off-canvas .js-media-library-widget input {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 6px 1rem 6px 1rem!important;
    width: 12rem!important;
}



.field-prefix {
    padding-bottom: 0.6rem!important;
}

.fieldset-four-input div {
    float: left;
    display: block;
}

.fieldset-four-input div,
.fieldset-four-input input,
.fieldset-four-input label {
    width: 8rem!important;
}


/*layout builder opmaak*/

#drupal-off-canvas .form-item {
    font-family: arial !important;
}

.ui-dialog.ui-dialog-off-canvas {
    background: #fff !important;
    color: black;
    z-index: 505;
}

#layout-builder-update-block {
    margin-bottom: 100px;
}

#drupal-off-canvas .inline-block-create-button,
#drupal-off-canvas .inline-block-list__item {
    margin: 0 -20px;
    background-color: white;
    color: black;
}

#drupal-off-canvas .inline-block-list li {
    background: white !important;
    flex-basis: 25% !important;
    padding: 0 !important;
}

#drupal-off-canvas .inline-block-create-button:hover,
#drupal-off-canvas .inline-block-list__item:hover {
    background-color: #f2f2f2;
}

.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
    max-width: 100% !important;
}

.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar {
    background: #6917EB!important;
    color: #fff;
    font-weight: 400;
    height: 50px;
}

.js-layout-builder-filter {
    display: none !important;
}

#drupal-off-canvas span,
#drupal-off-canvas :not(div) {
    /* background: transparent; */
    font-family: arial !important;
    font-size: 12px;
}

legend {
    color: #0591e8;
    padding-top: 1rem!important;
}

#field_background_media_page-media-library-wrapper legend span,
.form-item-settings-block-form-field-youtube-vimeo-url-0-value label {
    font-size: 14px!important;
    font-weight: 700!important;
    color: #0591e8!important;
}

.backgrounditems,
.responsiveitems,
.bordersitems,
.customcssitems {
    padding-top: 0.5rem!important;
    padding-left: 1rem!important;
}

.fieldset-legend {
    font-weight: 700;
    font-size: 14px !important;
}

#drupal-off-canvas .horizontal-tabs ul {
    background: #eee;
    font-size: 13px;
}

.js-form-item-settings-admin-label,
.form-item-settings-block-form-body-0-value label {
    display: none !important;
}

.field--name-field-foto-titel label {
    display: block;
}

#drupal-off-canvas ul li {
    padding: 5px 10px;
}

#drupal-off-canvas li.selected {
    background: white;
}

#drupal-off-canvas .horizontal-tabs ul li a:hover {
    color: black !important;
    text-decoration: none;
}

.ui-dialog-off-canvas #drupal-off-canvas {
    padding: 10px;
}

#drupal-off-canvas summary:hover,
#drupal-off-canvas summary:focus {
    background-color: transparent !important;
}

#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 {
    color: #595959;
    border-color: #333;
    background-color: transparent;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
}

#drupal-off-canvas .description,
#drupal-off-canvas .form-item .description,
#drupal-off-canvas .details-description {
    margin-top: 5px;
    color: #000;
    font-family: inherit;
    font-size: 12px;
    font-style: normal;
}

#drupal-off-canvas .layout-selection li a {
    padding: 2px 10px;
    width: 260px;
    margin: 1px;
    /*text-align: ;*/
    border-bottom: 1px solid #6917EB;
    text-decoration: none;
}

#drupal-off-canvas .layout-selection li a:hover {
    background: #6917EB;
    text-decoration: none;
}

#drupal-off-canvas .layout-selection li {
    padding-bottom: 2px;
}

.horizontal-tabs-list ul li {
    background: pink;
}

.minicolors-theme-default.minicolors input {
    padding-left: 2rem !important;
}

.minicolors-theme-default.minicolors {
    display: block;
    height: 2rem!important;
}


/* lay out builder styling*/

.ui-dialog {
    /*    border: solid lime;
    width: 47% !important;
    left: 53% !important;*/
    -webkit-box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.7) !important;
    box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.7) !important;
}

.ui-dialog.ui-dialog-off-canvas.ui-dialog-position-side {
    /*border: solid lime;*/
    width: 670px !important;
    left: unset;
    right: 0px !important;
    -webkit-box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.7) !important;
    box-shadow: -10px 5px 10px 10px rgba(0, 0, 0, 0.7) !important;
}


/*.ui-dialog .ui-dialog-titlebar-close*/


/*{*/


/*background-image: url(https://cdnjs.cloudflare.com/ajax/libs/aui/6.0.1/aui/css/icons/aui-icon-close.png);*/


/*z-index:999999;*/


/*}*/


/*

.ui-dialog-buttons button.ui-dialog-titlebar-close::before {
    content: "X";
    position: absolute;
    top: 1px;
    left: 3px;
    line-height: 1rem;
}


*/


/*      .ui-dialog-buttons      */

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: calc(50% - 6px);
    right: 1em;
    width: 30px;
    height: 30px;
    transition: all 0.5s ease;
    border: 3px solid transparent;
    background-color: transparent;
    background-image: url(./icons/bebebe/ex.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    border: 3px solid #fff;
    background-image: url(./icons/ffffff/ex.svg);
}

.editor .horizontal-tabs-list {
    display: none;
}

#drupal-off-canvas .form-submit {
    width: 16rem !important;
    display: block!important;
}

#drupal-off-canvas input[type="submit"].button.form-submit.js-hide {
    display: none!important;
}

.ui-dialog .ui-accordion .ui-accordion-content {
    padding: 0 !important;
}

.layout-builder {
    background: transparent;
    margin-bottom: 200px;
}

.layout-builder__direct-add__list {    
    width: 16rem;
    
}

.layout-builder__direct-add__list li {
    text-align: left;
}

.layout-builder__direct-add__list ul {
    padding: 0px;
}

.layout-builder__direct-add__list a:hover, 
.layout-builder__direct-add__list a:focus {
    background-color: #f2f9fe;
}


.layout-builder__add-section,
.layout-builder__add-block {
    padding: 5px;
    background-color: transparent;
}

.layout-builder__add-block.open .layout-builder__direct-add__list li {
    height: 2rem;
}

.layout-builder__direct-add__list li a {
    padding: 4px 20px;
}

.layout-builder__direct-add__list {
    overflow-y: auto;
}


.layout-builder-block {
    padding: 1.5em;
    cursor: move;
    background-color: transparent;
    border: white 2px dashed;
    padding: 0px;
    border: lime;
}

.layout-builder {
    padding: 0px;
}

.layout-builder__add-block .layout-builder__link--add {
    color: red;
    background: white;
    padding: 5px;
    text-align: right;
    border-radius: 5px;
    opacity: 0.4;
    font-size: 13px;
    text-transform: lowercase;
    /*position: absolute;*/
    z-index: 10000;
    height: 30px;
    margin-top: -30px;
    right: 15px;
}

.layout-builder__link--add:hover {
    background-color: lightgreen;
    opacity: 1;
    text-decoration: none;
}

.layout-builder__link--add {    
    padding: 0.2em 1.2em 0.2em 2.5em;
    color: #333333;
    border-bottom: none;
    background-position: 13px 6px;
    background-color: rgba(256, 256, 256, 0.7);
    border-radius: 5px;
}

/*  .layout-builder__add-block  */
.layout-builder__direct-add__list a {   
    padding: 0em 0.8em 0em 0.5rem;
    color: #333333;
    border-bottom: none;
    background: rgba(256, 256, 256, 0.7);
    border-radius: 5px;
    width: 8.4rem;    
}

.layout-builder__link--import-from-library,
.layout-builder__link--add-section-to-library,
.layout-builder__link--configure {
    padding: 0.2em 1.2em 0.2em 2.5em;
    color: #333333;
    border-bottom: none;
    background-position: 13px 6px;
    background-color: rgba(256, 256, 256, 0.7);
    border-radius: 5px;
}

.layout-builder__link--configure {
    padding-left: 1.2rem
}

.layout-builder__link--remove {    
    margin-left: 1rem;      
    background: url(../img/ex.svg) rgba(256, 256, 256, 0.7) center center / 16px 16px no-repeat;
    
}

/*  weggehaald door diego, gaf buttons te veel hoogte
.layout-builder__section div {
    margin-top: 0.5rem;
}
  */

.layout-builder__link--add-section-to-library {    
    background-position: 13px 3px;
}

.layout-builder__add-block .layout-builder__direct-add__toggle:before {
    color: #787878;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 0.9rem;
    padding-top: 0.2rem;   
}

.layout-builder__direct-add__list li.other {
    display: none;
}


.editor #node-page-layout-builder-form {
    position: absolute;
    bottom: 0px;
}

.form-type-number input {
    max-width: 100px;
}

.padding_lo,
.foldout_lo,
.margin_lo {
    width: 100%;
    display: block;
}

.padding_lo input,
.foldout_lo input,
.margin_lo input {
    width: 8rem!important;
}

.rotate-arrow i,
.rotate-arrow svg,
.rotate-arrow+i,
.rotate-arrow+svg {
    transform: rotate(180deg);
}

.backgroundhead>legend,
.responsivehead>legend,
.bordershead>legend,
.customcsshead>legend {
    padding-top: 1.5rem!important;
    width: 100%!important;
    border-bottom-style: solid!important;
    border-bottom-color: #aaaaaa!important;
    border-bottom-width: 1px!important;
}

.js-filter-wrapper {
    border-style: none;
    padding-left: 0px;
}

.js-filter-wrapper .filter-help {
    display: none;
}

#drupal-off-canvas .backgroundhead>legend span,
#drupal-off-canvas .responsivehead>legend span,
#drupal-off-canvas .bordershead>legend span,
#drupal-off-canvas .customcsshead>legend span {
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    font-size: 1.3rem!important;
    font-weight: 400;
    color: #0591e8!important;
    cursor: pointer;
}

#drupal-off-canvas .backgroundhead span.fieldset-legend i,
#drupal-off-canvas .backgroundhead span.fieldset-legend svg,
#drupal-off-canvas .responsivehead span.fieldset-legend i,
#drupal-off-canvas .responsivehead span.fieldset-legend svg,
#drupal-off-canvas .bordershead span.fieldset-legend i,
#drupal-off-canvas .bordershead span.fieldset-legend svg,
#drupal-off-canvas .customcsshead span.fieldset-legend i,
#drupal-off-canvas .customcsshead span.fieldset-legend svg {
    color: #6300ff!important;
    font-size: 1.5rem!important;
    cursor: pointer;
    width: 100%;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    left: 305px;
}

.backgroundhead i,
.backgroundhead svg {
    margin-left: 0.2rem;
}

.backgrounditems {
    padding: 1rem;
}

.js-media-library-widget {
    width: 100%;
}

.js-media-library-widget .fieldset-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    color: #595959;
    border-color: #aaaaaa;
    border-style: solid;
    border-width: 1px;
    background-color: transparent;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
}

.field-group-details {
    padding: 10px;
    width: 100%;
    margin: auto;
    background: #f2f2f2;
}

.content_lo {
    border-style: none;
}

.padding_lo {
    border: green dashed 1px;
}

.instellingen_lo summary,
.margin_lo summary,
.padding_lo summary,
.foldout_lo summary {
    color: #6917EB !important;
    font-size: 12px !important;
}

.link-icon-wrap {
    cursor: pointer;
    margin-top: 2rem;
    border-radius: 0.1rem;
    float: left;
    height: 2rem;
    width: 2rem;
    padding: 0.4rem;
    background-color: #c7a4ff;
    color: white;
}

.link-icon-active {
    background-color: #6300ff;
}

.link-icon-wrap i,
.link-icon-wrap svg {
    color: white;
    font-size: 1.2rem!important;
}

#padding-link,
#margin-link {
    height: 1.2rem;
    width: 1.2rem;
    background-color: #6300ff;
}

#drupal-off-canvas details[open]>summary {
    background-color: transparent;
    text-decoration: underline;
    display: block;
    width: 100%;
    display: none;
}

.margins,
.paddings {
    padding: 5px !important;
}

.margins .details-wrapper,
.paddings .details-wrapper {
    border: solid 1px !important;
    display: inline-block !important;
    height: auto !important;
    padding: 8px !important;
    margin: auto !important;
}

.instellingen_lo {
    border: lime dashed 0px;
}

.anim_lo {
    border: orange dashed 0px;
}

.overig_lo {
    border: green dashed 0px;
}


/*tooltip*/
.borders_lo .description,
.borders_width .description,
.padding_lo .description,
.foldout_lo .description,
.margin_lo .description {
    position: relative!important;
    display: inline-block!important;    
    bottom: 1.3rem;
}

.borders_width .description {
    right: 32rem;
}

.borders_lo .description {
    right: 32rem;
}

.padding_lo .description,
.margin_lo .description {
    right: 34rem;
}

.foldout_lo .description {
    right: 30rem;
}


.extra-description {
    position: relative !important;
    display: inline-block !important;
}

.collapsible-form div[data-drupal-selector="edit-settings-block-form-field-short-text-0-format"],
.collapsible-form div[data-drupal-selector="edit-settings-block-form-body-0-format"] {
    display: none;
}


div[data-drupal-selector="edit-settings-block-form-field-icon-roll-up-wrapper"],
div[data-drupal-selector="edit-settings-block-form-field-icon-roll-down-wrapper"],
div[data-drupal-selector="edit-settings-block-form-field-icon-roll-up-wrapper"] input,
div[data-drupal-selector="edit-settings-block-form-field-icon-roll-down-wrapper"] input {
    width: 12rem!important;
    margin-right: 2rem;
}

details[data-drupal-selector="edit-settings-block-form-field-icon-roll-up-0-settings"],
details[data-drupal-selector="edit-settings-block-form-field-icon-roll-down-0-settings"],
.form-item-settings-block-form-field-icon-roll-up-0-icon-name details,
.form-item-settings-block-form-field-icon-roll-down-0-icon-name details,
.icon-details details,
.icon-details .description {
    display: none!important;
    height: 0px!important;
    overflow: hidden;
}

.icon-details .description[data-drupal-field-elements="description"] {
    display: block!important;
    height: auto!important;
}






.icon-details .form-item-settings-block-form-field-icon-0-settings-style,
.icon-details .form-item-settings-block-form-field-icon-0-settings-fixed-width,
.icon-details .form-item-settings-block-form-field-icon-0-settings-border,
.icon-details .form-item-settings-block-form-field-icon-0-settings-border,
.icon-details .form-item-settings-block-form-field-icon-0-settings-invert,
.icon-details .form-item-settings-block-form-field-icon-0-settings-pull,
.icon-details .form-item-settings-block-form-field-icon-0-settings-additional-classes,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-style,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-fixed-width,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-border,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-border,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-invert,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-pull,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-additional-classes {
    display: none;
}

.icon-details .form-item-settings-block-form-field-icon-0-settings-size select,
.icon-details .form-item-settings-block-form-field-icon-0-settings-animation select,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-size select,
.icon-details .form-item-settings-block-form-field-icon-right-0-settings-animation select {
    width: 8rem!important;
    display: block!important;
}

.icon-size .fieldset-wrapper div {
    width: 8rem!important;
    float: left;
    margin-right: 2rem;
}

.button-content input {
    width: 100%;
}

.field--name-field-tekst-uitlijnen,
.field--name-field-anker-positie {
    float: none;
}

.field--name-field-slick-slidestoshow-1024,
.field--name-field-slick-slidestoscroll-1024,
.field--name-field-slick-slidestoshow-600,
.field--name-field-slick-slidestoscroll-600,
.field--name-field-slick-slidestoshow-480,
.field--name-field-slick-slidestoscroll-480,
.field--type-fontawesome-icon,
.field--name-field-tekstkleur2,
.field--name-field-tekst-hover-kleur,
.field--name-field-achtergrond-kleur,
.field--name-field-background-hover-kleur {
    width: 9rem!important;
    display: block;    
    margin-right: 1rem;
}

.field--name-field-slick-slidestoshow-1024,
.field--name-field-slick-slidestoscroll-1024,
.field--name-field-slick-slidestoshow-600,
.field--name-field-slick-slidestoscroll-600,
.field--name-field-slick-slidestoshow-480,
.field--name-field-slick-slidestoscroll-480,
.field--type-fontawesome-icon,
.field--name-field-tekstkleur2,
.field--name-field-tekst-hover-kleur,
.field--name-field-background-hover-kleur {
    float: left;
}

.responsiveitems .field--type-boolean .description {
    display: inline-block;
    margin-left: 3px;
}


.borders_width .description b,
.borders_lo .description b,
.responsiveitems .description b,
.extra-description b,
.padding_lo .description b,
.foldout_lo .description b,
.margin_lo .description b {
    color: white !important;
}

.description .help-vraagteken b{
    color: white !important;
}


.borders_width .description span,
.borders_lo .description span,
.responsiveitems .field--type-boolean .description span,
.extra-description span,
.padding_lo .description span,
.foldout_lo .description span,
.margin_lo .description span {
    background: #6917EB !important;
    width: 15px !important;
    border-radius: 100% !important;
    font-size: 8px !important;
    display: block !important;
    height: 15px !important;
    line-height: 15px !important;
    text-align: center !important;
}



.help-vraagteken {
    background: #6917EB !important;
    width: 15px !important;
    border-radius: 100% !important;
    font-size: 8px !important;
    display: block !important;
    height: 15px !important;
    line-height: 15px !important;
    text-align: center !important;
}

.help-vraagteken.white {
    color: white !important;
}


.borders_width .description span {
    position: absolute;
/*    left: -1rem;  */
    bottom: 0.1rem;
}

.borders_lo .description span {
    position: absolute;
    left: 1rem;
    bottom: 0.1rem;
}

.field--name-field-foto-titel .description p,
.responsiveitems .description p,
.customcssitems .description p,
.borders_width .description p,
.borders_lo .description p,
.responsiveitems .description p,
.extra-description p,
.padding_lo .description p,
.foldout_lo .description p,
.margin_lo .description p {
    visibility: hidden !important;
    width: 23rem !important;
    background-color: white !important;
    color: #000 !important;
    text-align: left !important;
    padding: 5px !important;
    border: solid 1px #000 !important;
    /* Position the tooltip */
    position: absolute !important;
    z-index: 1 !important;
    font-size: 12px !important;
    line-height: 16px !important;
}




.description .help-vraagteken p.vraagteken-tekst {
    visibility: hidden !important;
    width: 23rem !important;
    background-color: white !important;
    color: #000 !important;
    text-align: left !important;
    padding: 5px !important;
    border: solid 1px #000 !important;
    /* Position the tooltip */
    position: absolute !important;
    z-index: 1 !important;
    font-size: 12px !important;
    line-height: 16px !important;
}




.field--name-field-foto-titel .description:hover p,
.responsiveitems .description:hover p,
.customcssitems .description:hover p,
.borders_lo .description:hover p,
.borders_width .description:hover p,
.responsiveitems .description:hover p,
.extra-description:hover p,
.padding_lo .description:hover p,
.foldout_lo .description:hover p,
.margin_lo .description:hover p {
    visibility: visible !important;
}

.description:hover .help-vraagteken p.vraagteken-tekst {
    visibility: visible !important;
}

.minicolors-position-left .minicolors-panel {
    left: 9rem;
}

/* font overzicht editie pagina*/

#block-views-block-fonts-lijst-1-block-1 {
    width: 60%;
    margin: auto;
    border: solid 2px #2b92d4;
    padding: 20px;
}

#block-views-block-fonts-lijst-1-block-1 .views-col {
    padding: 1%;
    width: 18% !important;
    max-width: 18%;
    text-align: center;
    background: #f2f2f2;
    margin: 1%;
    font-size: 13px;
}


/* Font awesome in editor */

.fontawesome-icon-dialog .ui-menu .ui-menu-item {
    background: #f2f2f2;
    padding: 2px;
}


/* Multiple image upload widget (masonry) */

#drupal-off-canvas tr td {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    border-bottom-style: dotted;
    border-color: rgba(0, 0, 0, 0.3);
    border-width: 1px;
}

#drupal-off-canvas tr:hover td {
    background: none;
}

.file--image {
    background-image: none;
}

#drupal-off-canvas a,
#drupal-off-canvas .link {
    color: rgba(0, 0, 0, 1) !important;
}
#drupal-off-canvas .icon-details .description[data-drupal-field-elements="description"] a {
    color:#6917EB!important;
    font-weight: 500;
}

.ui-dialog-off-canvas .form-item-settings-block-form-field-link-target select {
    width: 50%!important;
}

/* bij afbeeldingen werd de potlood/edit niet getoond

.contextual .trigger {
    position: relative !important;
}
*/

/* manager */

body.editor .layout-builder__add-block,
body.editor .layout-builder__add-section,
body.editor .layout-builder__link--remove,
body.editor .layout-builder__link--configure {
    display: none;
}

body.editor .form-item-settings-block-form-field-hover-box-effect-,
body.editor .field--name-afbeelding2-hover,
body.editor .field--widget-path,
body.editor .form-item-settings-block-form-field-image-zoom {
    display: none;
}


.manager-layout-padding {
    background-color: white;
    height: 7rem;
}

.manager-layout-top {
    padding-left: 3rem;
    padding-top: 1.5rem;
    width: 100vw;
    height: 53px;
    position: fixed;
    top: 0;
    background-color: #6300ff;
    font-family: Open Sans;
    font-size: 14px;
    z-index: +1;
}

.manager-layout-top a {
    font-family: Open Sans;
    font-size: 14px;
    color: white;
}

.manager-layout-top i,
.manager-layout-top svg {
    margin-right: 0.5rem;
}

.layout-top-logo {
    position: absolute;
    left: 82vw;
    height: 50px;
    top: 0.3rem;
    padding: 0;
    margin: 0;
}

.layout-top-logo img {
    height: 46px;
}

.editor .layout-builder-form #edit-submit,
.editor .layout-builder-form #edit-discard-changes,
.editor .layout-builder-form #edit-preview-toggle,
.editor .layout-builder-form #edit-move-sections,
.editor .layout-builder-form #edit-preview-toggle {
    display: none;
}

.editor .layout-builder-form #edit-layout-builder-save-and-edit-layout {
    display: block;
    position: fixed;
    top: 4.1rem;
    right: 3rem;
}

#block-views-block-terug-naar-editie-block-1 .view-content {
    display: none;
}


/* reorder sections toch niet voor editor role
.editor .layout-builder-form #edit-move-sections {
    display: block;
    position: fixed;
    top: 4.1rem;
    right: 16rem;
    z-index: 500;
}
*/

.editor #block-preview {
    display: block;
    position: fixed !important;
    top: 4.1rem;
    right: 16rem;
    z-index: 527;
}

.professional #block-preview {
    display: block;
    position: fixed !important;
    top: 4.3rem;
    right: 50rem;
    z-index: 527;
}

#previewButton {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 13px;
    padding: 8px 2rem 8px 2rem;
    border-radius: 32px !important;
    border-style: none;
}

.media-library-item__preview img {
    pointer-events: none;
}


/* professional role paarse balk enzo*/

#block-menublockforprousertop {
    /*padding-left: 3rem;
    padding-top: 2px;*/
    width: 100vw;
    height: 50px;
    position: fixed !important;
    top: 0;
    background-color: #6300ff;
    font-family: Open Sans;
    font-size: 14px;
    z-index: 750;
}

#block-menublockforprousertop .navbar li.dropbutton-action {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}

#block-menublockforprousertop .navbar .open li.dropbutton-action {
    color: #555555;
}

#block-menublockforprousertop button {
    font-size: 14px;
}


/*.navbar */

#block-menublockforprousertop li a {
    color: white;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
    text-transform: uppercase;
}

#block-menublockforprousertop li li {
    color: white;
    padding-left: 1rem !important;
    padding-right: 2rem !important;

    font-family: Open Sans;
    font-size: 14px;
    text-transform: uppercase;
}


/*.navbar  */

#block-menublockforprousertop li span.nav-link {
    color: white;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
}


/* .navbar */

#block-menublockforprousertop li li a {
    color: white;
    padding-left: 0rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
    text-transform: none;
}

#block-menublockforprousertop button.manager-button,
#block-menublockforprousertop .dropbutton-widget,
#block-menublockforprousertop .button,
#block-menublockforprousertop .editor-pagina-actie,
#block-menublockforprousertop .editor-editie-actie,
#block-menublockforprousertop .manager-button {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 14px !important;
    padding: 4px 4rem 4px 1rem;
    border-radius: 32px !important;
}




#block-menublockforprousertop .dropbutton-container {
    margin-top: -4px;
}

#block-menublockforprousertop .dropbutton-widget {
    padding-top: 9px;
}

.js .dropbutton-widget .dropbutton {}

.dropbutton-multiple.open {}


/*.editor-pagina-actie a,
.editor-editie-actie a,*/

#block-menublockforprousertop .manager-button a {
    color: white;
}


/*button.manager-button i,
button.manager-button svg,*/

#block-menublockforprousertop .manager-button i,
#block-menublockforprousertop .manager-button svg {
    margin-left: 12px;
    color: white;
}

#block-menublockforprousertop .manager-button {
    text-align: center;
    width: 180px;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget {
    background-color: #efe6ff !important;
    border-color: #6300ff55;
    border-width: 1px;
    border-radius: 32px;
    overflow: hidden;
}

#block-menublockforprousertop .dropbutton-widget {
    width: 14.5rem;
}

#block-menublockforprousertop .dropbutton-widget a {
    color: white;
}

#block-menublockforprousertop .dropbutton-widget li {
    padding-right: 8px;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget a {
    color: #555555;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget a:hover {
    color: #222222;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-arrow {
    color: #222222 !important;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget li {
    border-bottom-style: solid;
    border-top-style: none;
    border-color: #6300ff55;
    border-width: 1px;
    color: #555555;
}

#block-menublockforprousertop .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget li.dropbutton-toggle {
    border-top-style: none;
    border-bottom-style: none;
    border-left-style: solid;
}

.js #block-menublockforprousertop .dropbutton-widget {
    /*border: 0px solid #ccc;*/
}

#block-menublockforprousertop .dropbutton-multiple .dropbutton {
    border: 0px
}





/* Editor role paarse balk enzo */

#block-menublockforeditorusertop {
    /*padding-left: 3rem;
    padding-top: 2px;*/
    width: 100vw;
    height: 50px;
    position: fixed !important;
    top: 0;
    background-color: #6300ff;
    font-family: Open Sans;
    font-size: 14px;
    z-index: 750;
}

#block-menublockforeditorusertop .top-nav{
	padding: 0.4em;
}



#block-menublockforeditorusertop .navbar li.dropbutton-action {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}

#block-menublockforeditorusertop .navbar .open li.dropbutton-action {
    color: #555555;
}

#block-menublockforeditorusertop button {
    font-size: 14px;
}


/*.navbar */

#block-menublockforeditorusertop li a {
    color: white;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
    text-transform: uppercase;
}

#block-menublockforeditorusertop li li {
    color: white;
    padding-left: 1rem !important;
    padding-right: 2rem !important;

    font-family: Open Sans;
    font-size: 14px;
    text-transform: uppercase;
}


/*.navbar  */

#block-menublockforeditorusertop li span.nav-link {
    color: white;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
}


/* .navbar */

#block-menublockforeditorusertop li li a {
    color: white;
    padding-left: 0rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-family: Open Sans;
    font-size: 14px;
    text-transform: none;
}

#block-menublockforeditorusertop button.manager-button,
#block-menublockforeditorusertop .dropbutton-widget,
#block-menublockforeditorusertop .button,
#block-menublockforeditorusertop .editor-pagina-actie,
#block-menublockforeditorusertop .editor-editie-actie,
#block-menublockforeditorusertop .manager-button {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 14px !important;
    padding: 4px 4rem 4px 1rem;
    border-radius: 32px !important;
}




#block-menublockforeditorusertop .dropbutton-container {
    margin-top: -4px;
}

#block-menublockforeditorusertop .dropbutton-widget {
    padding-top: 9px;
}


#block-menublockforeditorusertop .manager-button a {
    color: white;
}


#block-menublockforeditorusertop .manager-button i,
#block-menublockforeditorusertop .manager-button svg {
    margin-left: 12px;
    color: white;
}

#block-menublockforeditorusertop .manager-button {
    text-align: center;
    width: 180px;
}




/* END ?? Editor role paarse balk enzo */








.professional .layout-builder,
.super_professional .layout-builder {
    margin-top: 122px;
}

.professional .layout-builder__message.layout-builder__message--overrides .alert.alert-status.alert-success.alert-dismissible,
.super_professional .layout-builder__message.layout-builder__message--overrides .alert.alert-status.alert-success.alert-dismissible {
    display: none;
}

.professional #edit-preview-toggle,
.super_professional #edit-preview-toggle {
    display: none;
}

.professional .node-page-layout-builder-form,
.super_professional .node-page-layout-builder-form,
.professional .node-overlay-page-layout-builder-form,
.super_professional .node-overlay-page-layout-builder-form {
    position: fixed;
    background-color: #ffffff;
    width: 100%;
    text-align: right;
    top: 50px;
    z-index: 525;
}


/*
.professional .layout-builder-form #edit-discard-changes,
.professional .layout-builder-form #edit-preview-toggle,
.professional .layout-builder-form #edit-move-sections,
.professional .layout-builder-form #edit-preview-toggle,*/

.professional .layout-builder-form #edit-submit,
.professional .layout-builder-form #edit-revert,
.professional .layout-builder-form #edit-submit,
.professional .layout-builder-form #edit-revert,
.super_professional .layout-builder-form #edit-submit,
.super_professional .layout-builder-form #edit-revert,
.super_professional .layout-builder-form #edit-submit,
.super_professional .layout-builder-form #edit-revert {
    display: none;
}

.professional .alert-warning,
.super_professional .alert-warning {
    z-index: 700;
    display: inline-block;
    top: 64px;
    left: 10px;
    position: fixed;
}

.professional #block-mmbootstrap-local-tasks .tabs-primary {
    /* display: none; */
}

.professional .ui-dialog,
.super_professional .ui-dialog {
    z-index: 1000;
}

.authenticated.professional article.contextual-region.page.full.clearfix {
    margin-top: 50px;
}


/* voor thuis omdat er een tweede block inzit */

#block-menublockforprousertop-2 {
    padding-left: 3rem;
    padding-top: 2px;
    width: 100vw;
    height: 53px;
    position: fixed !important;
    top: 0;
    background-color: #6300ff;
    font-family: Open Sans;
    font-size: 14px;
    z-index: 550;
}

#block-menublockforprousertop-2 .navbar li.dropbutton-action {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

#block-menublockforprousertop-2 .navbar .open li.dropbutton-action {
    color: #555555;
}

#block-menublockforprousertop-2 button {
    font-size: 14px;
}

#block-menublockforprousertop-2 .navbar li a {
    color: white;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

#block-menublockforprousertop-2 .navbar li span.nav-link {
    color: white;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-size: 14px;
}

#block-menublockforprousertop-2 .navbar li li a {
    color: white;
    padding-left: 0rem !important;
    padding-right: 2rem !important;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    font-size: 14px;
    text-transform: none;
    font-weight: bold;
}

#block-menublockforprousertop-2 button.manager-button,
#block-menublockforprousertop-2 .dropbutton-widget,
#block-menublockforprousertop-2 .button,
#block-menublockforprousertop-2 .editor-pagina-actie,
#block-menublockforprousertop-2 .editor-editie-actie,
#block-menublockforprousertop-2 .manager-button {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 14px !important;
    padding: 4px 2rem 8px 2rem;
    /*border-radius: 32px !important;*/
}


/*.editor-pagina-actie a,
.editor-editie-actie a,*/

#block-menublockforprousertop-2 .manager-button a {
    color: white;
}


/*button.manager-button i,
button.manager-button svg,*/

#block-menublockforprousertop-2 .manager-button i,
#block-menublockforprousertop-2 .manager-button svg {
    margin-left: 12px;
    color: white;
}

#block-menublockforprousertop-2 .manager-button {
    text-align: center;
    width: 180px;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget {
    background-color: #efe6ff !important;
    border-color: #6300ff55;
    border-width: 1px;
}

#block-menublockforprousertop-2 .dropbutton-widget a {
    color: white;
}

#block-menublockforprousertop-2 .dropbutton-widget li {
    padding-right: 8px;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget a {
    color: #555555;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget a:hover {
    color: #222222;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-arrow {
    color: #222222 !important;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget li {
    border-bottom-style: solid;
    border-top-style: none;
    border-color: #6300ff55;
    border-width: 1px;
}

#block-menublockforprousertop-2 .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-widget li.dropbutton-toggle {
    border-top-style: none;
    border-bottom-style: none;
    border-left-style: solid;
}

.js #block-menublockforprousertop-2 .dropbutton-widget {
    border: 0px solid #ccc;
}

#block-menublockforprousertop-2 .dropbutton-multiple .dropbutton {
    border: 0px
}

.alert-warning {
    color: #856404;
    background-color: #ffdb00;
    border-color: #ffdb00;
}

#media-library-content {
    padding-top: 0px;
}

#edit-layout-builder-message {
    display: none;
}

#media-library-add-form-wrapper .alert {
    display: none;
}

.js-media-library-view .views-display-link {
    display: none;
}

#media-library-wrapper .view-filters .form--inline {
    display: block;
    width: 100%;
}

#media-library-wrapper .view-filters .form--inline div {
    width: 33%;
}

.form-item-settings-block-form-field-foto-titel-0-value input,
.form-item-settings-block-form-field-interne-link-0-uri input {
    width: 100%!important;
}
/*
#drupal-off-canvas .field--widget-media-library-widget input {
    display: none!important;
}


#drupal-off-canvas .field--widget-media-library-widget span input {
    display: block!important;
}
*/

#drupal-off-canvas .js-media-library-widget .description {
    display: none;
}

.subgroup-margin legend  {
    margin-bottom: 0.5rem!important;
}

.no-height {
    margin: 0px!important;
    padding: 0px!important;
}

.no-height legend {
    display: none!important;
}

.form-item-settings-block-form-field-youtube-vimeo-url-0-value input {
    width: 100%!important;
}



/**
 * @file
 * Contains minimal layout styling for the media library.
 */

 .media-library-wrapper {
    display: flex;
}

.media-library-menu {
    flex-basis: 20%;
    flex-shrink: 0;
}

.media-library-content {
    flex-grow: 1;
}

.media-library-views-form {
    display: flex;
    flex-wrap: wrap;
}

.media-library-views-form .media-library-item {
    justify-content: space-between;
    max-width: 23%;
    margin: 1%;
}


/**
 * @file media-library.css

 * Styling for Media Library.
 */

.media-library-wrapper {
    display: flex;
    margin: -1em;
}


/**
   * @todo Reuse or build on vertical tabs styling for the media library menu.
   *   https://www.drupal.org/project/drupal/issues/3023767
   */

.media-library-menu {
    display: block;
    width: 600px;
    max-width: 20%;
    margin: 0;
    /* LTR */
    padding: 0;
    border-bottom: 1px solid #ccc;
    background-color: #e6e5e1;
    line-height: 1;
}

[dir="rtl"] .media-library-menu {
    margin: 0;
}


/**
   * @todo Use a class instead of the li element.
   *   https://www.drupal.org/project/drupal/issues/3029227
   */

.media-library-menu li {
    display: block;
    padding: 0;
    list-style: none;
}

.media-library-menu__link {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 15px;
    text-decoration: none;
    border-bottom: 1px solid #b3b2ad;
    background-color: #f2f2f0;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
}

.media-library-menu__link:active,
.media-library-menu__link:hover,
.media-library-menu__link:focus {
    background: #fcfcfa;
    text-shadow: none;
}

.media-library-menu__link:focus,
.media-library-menu__link:active {
    outline: none;
}

.media-library-menu__link.active {
    z-index: 1;
    margin-right: -1px;
    /* LTR */
    color: #000;
    border-right: 1px solid #fcfcfa;
    /* LTR */
    border-bottom: 1px solid #b3b2ad;
    background-color: #fff;
    box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
}

[dir="rtl"] .media-library-menu__link.active {
    margin-right: 0;
    margin-left: -1px;
    border-right: 0;
    border-left: 1px solid #fcfcfa;
}

.media-library-content {
    width: 100%;
    padding: 1em;
    border-left: 1px solid #b3b2ad;
    /* LTR */
    outline: none;
}

[dir="rtl"] .media-library-content {
    border-right: 1px solid #b3b2ad;
    border-left: 0;
}


/* Generic media add form styles. */

.media-library-add-form--without-input .form-item {
    margin: 0 0 1em;
}


/**
   * Remove outline from added media list.
   *
   * The added media list receives focus after adding new media, but since it is
   * not an interactive element, it does not need an outline.
   */

.media-library-add-form__added-media {
    margin: 0;
    padding: 0;
    outline: none;
}

.media-library-add-form__input-wrapper {
    padding: 16px;
    border: 1px solid #bfbfbf;
    border-radius: 2px;
    background: #fcfcfa;
}


/* Style the media add upload form. */

.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
    margin-bottom: 0;
}

.media-library-add-form .file-upload-help {
    margin: 8px 0 0;
}


/* Style the media add oEmbed form. */

.media-library-add-form--oembed .media-library-add-form__input-wrapper {
    display: flex;
}

@media screen and (max-width: 37.5em) {
    .media-library-add-form--oembed .media-library-add-form__input-wrapper {
        display: block;
    }
}

.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
    margin-bottom: 0;
}

.media-library-add-form-oembed-url {
    width: 100%;
}


/**
   * @todo Remove .button when styles are moved to the seven theme in
   *   https://www.drupal.org/project/drupal/issues/2980769
   */

.button.media-library-add-form-oembed-submit {
    align-self: center;
}


/* Media add form selection styles. */

.media-library-add-form__selected-media {
    margin-top: 1em;
}


/* Change to padding to account for the negative margin for flex grid. */

.media-library-add-form__selected-media .details-wrapper {
    padding: 0 10px 1em 10px;
}

.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
    height: 100px;
}

.media-library-item span {
    display: block;
}


/* Generic media library view styles. */

.media-library-select-all {
    flex-basis: 100%;
    width: 25%;
    margin: 10px 8px;
}

.media-library-select-all input {
    margin-right: 10px;
}

[dir="rtl"] .media-library-select-all input {
    margin-left: 10px;
}

.media-library-views-form,
.media-library-selection,
.media-library-add-form__selected-media .details-wrapper,
.media-library-views-form__bulk_form,
.media-library-view .form--inline {
    display: flex;
    flex-wrap: wrap;
}

.media-library-views-form>.form-actions {
    flex-basis: 100%;
}

.media-library-views-form #edit-header {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.media-library-views-form__header {
    flex-basis: 100%;
}

.media-library-views-form__header .form-item {
    margin-right: 8px;
}

.media-library-views-form__rows {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin: 0 -8px;
}

.media-library-view .form-actions {
    align-self: flex-end;
    margin: 0.75em 0;
}

@media screen and (max-width: 600px) {
    .media-library-view .form-actions {
        flex-basis: 100%;
    }
}

.media-library-view .media-library-view--form-actions {
    clear: left;
    align-self: flex-end;
    margin: 0.75em 0;
}


/**
   * Override the table display of the visually hidden labels.
   *
   * The width, height and overflow properties in the styles for the
   * .visually-hidden class do not work correctly if the element has a table
   * display.
   */

.media-library-item label {
    display: inline-block;
}


/* Media library widget view styles. */

.media-library-wrapper .media-library-view {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.media-library-wrapper .view-header {
    align-self: flex-end;
    margin: 1em 0;
    text-align: right;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .view-header {
    text-align: left;
}

.media-library-wrapper .media-library-view .view-content {
    flex: 0 0 100%;
}

.media-library-wrapper .views-display-link {
    margin: 0;
    padding-left: 22px;
    /* LTR */
    color: #333;
    font-size: 15px;
    line-height: 16px;
}

[dir="rtl"] .media-library-wrapper .views-display-link {
    padding-right: 22px;
    padding-left: 0;
}

.media-library-wrapper .views-display-link.is-active {
    font-weight: bold;
}

.media-library-wrapper .views-display-link-widget {
    margin-right: 15px;
    background: url(../../../../misc/icons/333333/grid.svg) left 0 no-repeat;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .views-display-link-widget {
    background-position: right 0;
}

.media-library-wrapper .views-display-link-widget_table {
    background: url(../../../../misc/icons/333333/table.svg) left 0 no-repeat;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
    background-position: right 0;
}


/**
   * Style the media library grid items.
   */

.media-library-item {
    position: relative;
}


/**
  * The media library item container receives screen reader focus when items are
  * removed. Since it is not an interactive element, it does not need an
  * outline.
  */

.media-library-item--grid {
    justify-content: center;
    box-sizing: border-box;
    width: 50%;
    padding: 14px;
    vertical-align: top;
    outline: none;
    background: #fff;
}

.media-library-item--grid:before {
    position: absolute;
    top: 7px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    content: "";
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    pointer-events: none;
    border: 1px solid #dbdbdb;
}


/* Media library widget weight field styles. */

.media-library-item--grid .form-item {
    margin: 0.75em;
}


/* The selected items in the add form should be shown a bit smaller. */

.media-library-add-form__selected-media .media-library-item--small {
    width: 33.3%;
}

.media-library-widget-modal .ui-dialog-buttonpane {
    align-items: center;
}

.media-library-widget-modal .ui-dialog-buttonpane .form-actions {
    flex: 1;
}


/**
   * By default, the dialog is too narrow to be usable.
   * @see Drupal.ckeditor.openDialog()
   */

.ui-dialog--narrow.media-library-widget-modal {
    max-width: 75%;
}

@media screen and (min-width: 45em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 50%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 25%;
    }
}

@media screen and (min-width: 60em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 33.3%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 16.6%;
    }
}

@media screen and (min-width: 77em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 25%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 16.6%;
    }
}

.media-library-item--grid .field--name-thumbnail {
    overflow: hidden;
    text-align: center;
    background-color: #ebebeb;
}

.media-library-item--grid .field--name-thumbnail img {
    height: 180px;
    object-fit: contain;
    object-position: center center;
}

.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked:before,
.media-library-item--grid.is-focus:before {
    top: 5px;
    border-width: 3px;
    border-color: #40b6ff;
    border-radius: 3px;
}

.media-library-item--grid.checked:before {
    border-color: #0076c0;
}

.media-library-item__click-to-select-checkbox {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    /* LTR */
    display: block;
}

[dir="rtl"] .media-library-item__click-to-select-checkbox {
    right: 16px;
    left: auto;
}

.media-library-item__click-to-select-checkbox input {
    width: 20px;
    height: 20px;
}

.media-library-item__click-to-select-checkbox .form-item {
    margin: 0;
}

.media-library-item__click-to-select-trigger {
    overflow: hidden;
    height: 100%;
    cursor: pointer;
}


/* Media library item table styles. */

.media-library-item--table img {
    max-width: 100px;
    height: auto;
}


/* Media library entity view display styles. */

.media-library-item__preview {
    padding-bottom: 34px;
}

.field--widget-media-library-widget .media-library-item__preview {
    cursor: move;
}

.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
    cursor: inherit;
}

.media-library-item__status {
    position: absolute;
    top: 40px;
    left: 5px;
    /* LTR */
    padding: 5px 10px;
    pointer-events: none;
    color: #e4e4e4;
    background: #666;
    font-size: 12px;
    font-style: italic;
}

[dir="rtl"] .media-library-item__status {
    right: 5px;
    left: auto;
}

.media-library-item__name {
    font-size: 12px;
}

.media-library-item__name {
    display: block;
    overflow: hidden;
    margin: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.media-library-item__attributes:hover .media-library-item__name,
.media-library-item--grid.is-focus .media-library-item__name,
.media-library-item--grid.checked .media-library-item__name {
    white-space: normal;
}

.media-library-item__type {
    color: #696969;
    font-size: 12px;
}

.media-library-item--disabled {
    pointer-events: none;
    opacity: 0.5;
}


/* Media library widget styles. */

.media-library-widget {
    position: relative;
}


/**
   * @todo Change to .media-library-open-button when styles are moved to the
   *   seven theme in https://www.drupal.org/project/drupal/issues/2980769
   */

.button.media-library-open-button {
    margin-bottom: 1em;
    margin-left: 0;
    /* LTR */
}

[dir="rtl"] .button.media-library-open-button {
    margin-right: 0;
    margin-left: 1em;
}

.media-library-widget__toggle-weight {
    position: absolute;
    top: 5px;
    right: 5px;
    /* LTR */
}

[dir="rtl"] .media-library-widget__toggle-weight {
    right: auto;
    left: 5px;
}


/* Add negative margin for flex grid. */

.media-library-selection {
    margin: 1em -8px;
}


/**
   * Media library widget edit and delete button styles.
   *
   * We have to override the .button styles since buttons make heavy use of
   * background and border property changes.
   */

.media-library-item__edit,
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
    position: absolute;
    z-index: 1;
    top: 10px;
    overflow: hidden;
    width: 21px;
    height: 21px;
    margin: 5px;
    padding: 0;
    transition: 0.2s border-color;
    color: transparent;
    border: 2px solid #ccc;
    border-radius: 20px;
    background-size: 13px;
    text-shadow: none;
    font-size: 0;
}

.media-library-item__edit {
    right: 40px;
    /* LTR */
}

[dir="rtl"] .media-library-item__edit {
    right: auto;
    left: 40px;
}

.media-library-item__remove {
    right: 10px;
    /* LTR */
}

[dir="rtl"] .media-library-item__remove {
    right: auto;
    left: 10px;
}

.media-library-item__edit {
    background: url("../../../../misc/icons/787878/pencil.svg") #fff center no-repeat;
    background-size: 13px;
}

.media-library-item__remove,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
    background: url("../../../../misc/icons/787878/ex.svg") #fff center no-repeat;
    background-size: 13px;
}

.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus,
.media-library-item__remove.button:disabled:active {
    border-color: #40b6ff;
}

#field_background_media_page-media-library-wrapper legend span,
.fieldset-legend {
    font-size: 16px;
    font-weight: 600;
    color: #0591e8;
}

.media-library-views-form .views-field-media-library-select-form > span {
    display: block;    
    background-color: #0591e8;
    overflow: hidden;
}

.js-media-library-item.media-library-item.media-library-item--grid {
    width: 100%;
}

.form-item-settings-block-form-field-icon-roll-up-0-icon-name .description,
.form-item-settings-block-form-field-icon-roll-down-0-icon-name .description {
    display: none;
}