/*add minimal height to rows to show them*/
.row {
  min-height:15px;
}
/* bananas wrapper */
.bananas-field-paragraph-wrapper {
  position: relative;
  clear: both;
}


/*show border around paragraph on hover*/
.bananas-field-paragraph-wrapper.editor-permissions:hover {
  outline: 2px solid rgba(240, 185, 60, 1);
  background-color:rgba(240, 185, 60, 0.1);
  z-index:6000;
  position:relative;
}
.bananas-field-paragraph-wrapper.paragraph-wrapper--widget.editor-permissions:hover,
.bananas-field-paragraph-wrapper.paragraph-wrapper--component.editor-permissions:hover{
  outline: 2px solid rgba(250, 135, 35, 1);
  background-color:rgba(250, 135, 35, 0.1);
  outline-offset: 0px;
  z-index:1000;
  position:relative;
}

.bananas-field-paragraph-wrapper.paragraph-wrapper--column.editor-permissions:hover{
  outline: 2px solid rgba(250, 110, 80, 1);
  background-color:rgba(250, 110, 80, 0.1);
  outline-offset: 23px;
  z-index:4000;
  position:relative;
}
.bananas-field-paragraph-wrapper.paragraph-wrapper--row.editor-permissions:hover {
  outline: 2px solid rgba(0, 180, 190, 1);
  background-color:rgba(0, 180, 190, 0.1);
  outline-offset: 46px;
  z-index:3000;
  position:relative;
}
.bananas-field-paragraph-wrapper.paragraph-wrapper--section.editor-permissions:hover{
  outline: 2px solid rgba(95, 165, 90, 1);
  background-color:rgba(95, 165, 90, 0.1);
  outline-offset: 67px;
  z-index:2000;
  position:relative;
}

.bananas-field-paragraph-wrapper .paragraph-type {
    display: none;
    position: absolute;
    top: -20px;
    left: -20px;
    color: #FFF;
    }

/* show/hide on hovers*/ 
.paragraph-type {display:inline-block;width:100%}
.paragraph-type-title{
    background-color:rgba(240, 185, 60, 1);
    background-position:5px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-image: url(../images/bananas-pencil.svg);
    display:inline-block;
    padding:0 5px 0 25px;
    text-transform: capitalize;  
    color:#000;
    height:22px;
    font-size:14px;
}
.paragraph-actions{display:inline-block;width:100%;}
.bananas-field-paragraph-wrapper .paragraph-bananas-actions .paragraph-type{display:none;}
.bananas-field-paragraph-wrapper:hover > .paragraph-bananas-actions .paragraph-type {display:inline-block;}
.bananas-field-paragraph-wrapper:hover > .paragraph-bananas-actions .paragraph-actions {display:none;}
.bananas-field-paragraph-wrapper:hover > .paragraph-bananas-actions .paragraph-type:hover .paragraph-actions {display:inline-block;}
.paragraph-type-title,.paragraph-actions {float:left;position:relative;}
paragraph-actions li {display:inline;}

/*position of buttons*/
.bananas-field-paragraph-wrapper .paragraph-actions {position:absolute;}
.bananas-field-paragraph-wrapper .paragraph-type {top:0px;left:0px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--section > .paragraph-bananas-actions > .paragraph-type {top:-68px;left:-68px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--row > .paragraph-bananas-actions > .paragraph-type {top:-46px;left:-46px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--column > .paragraph-bananas-actions > .paragraph-type {top:-23px;left:-23px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--component > .paragraph-bananas-actions > .paragraph-type {bottom:-22px;left:-2px;top:auto;}
.bananas-field-paragraph-wrapper.paragraph-wrapper--widget > .paragraph-bananas-actions > .paragraph-type {bottom:-22px;left:-2px;top:auto;}
/*.bananas-field-paragraph-wrapper.paragraph-wrapper--section > .paragraph-bananas-actions {top:-80px;left:-20px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--row > .paragraph-bananas-actions  {top:-150px;left:-15px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--column > .paragraph-bananas-actions {top:-180px;left:-10px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--component > .paragraph-bananas-actions  {top:-5px;left:-5px}
.bananas-field-paragraph-wrapper.paragraph-wrapper--widget > .paragraph-bananas-actions >  {bottom:-5px;left:-5px}*/

/*colors titles*/
.bananas-field-paragraph-wrapper.paragraph-wrapper--section > .paragraph-bananas-actions > .paragraph-type > .paragraph-type-title {background-color:rgba(95, 165, 90, 1);}
.bananas-field-paragraph-wrapper.paragraph-wrapper--row > .paragraph-bananas-actions > .paragraph-type > .paragraph-type-title {background-color:rgba(0, 180, 190, 1);}
.bananas-field-paragraph-wrapper.paragraph-wrapper--column > .paragraph-bananas-actions > .paragraph-type > .paragraph-type-title {background-color:rgba(250, 110, 80, 1);}
.bananas-field-paragraph-wrapper.paragraph-wrapper--component > .paragraph-bananas-actions > .paragraph-type > .paragraph-type-title,
.bananas-field-paragraph-wrapper.paragraph-wrapper--widget > .paragraph-bananas-actions > .paragraph-type > .paragraph-type-title {background-color:rgba(250, 135, 35, 1);}


/*paragraph links styling*/
.bananas-field-paragraph-links a {
  background-color: rgba(240, 185, 60, 1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  /*border: 1px solid #000;*/
  border-radius: 50%;
  color: #558ed5;
  display: block;
  font-weight: bold;
  height: 22px;
  padding: 0;
  text-indent: -9999px;
  width: 22px;
  top:0;
}
.bananas-field-paragraph-links.paragraph--row a { 
  background-color: rgba(0, 180, 190, 1);
}
.bananas-field-paragraph-links.paragraph--section a {
  background-color:rgba(95, 165, 90, 1);
}
.bananas-field-paragraph-links.paragraph--widget a,
.bananas-field-paragraph-links.paragraph--component a{
  background-color: rgba(250, 135, 35, 1);
}
.bananas-field-paragraph-links.paragraph--column a{
  background-color: rgba(250, 110, 80, 1);
}
/*paragraph links hover state styling*/
a.bananas-field-paragraph-add-new:hover,
.bananas-field-paragraph-add-new a:hover,
.bananas-field-paragraph-links a:hover {
  background-color: #FFF;
  color: #fff;
}



.bananas-field-paragraph-wrapper:hover .bananas-field-paragraph-links {
  outline-color: rgba(0, 0, 0, 0.5);
  position:absolute;
  z-index:900;
}

.bananas-field-paragraph-links {
 /* display: none;*/
  margin: 0;
  padding: 0;
  left:2px;
}

.bananas-field-paragraph-wrapper:hover > .bananas-field-paragraph-links {
  display:block;
}

.bananas-field-paragraph-wrapper .bananas-field-paragraph-links li {
  z-index: 951;
}
.bananas-field-paragraph-links.paragraph--component li {
  z-index: 955;
}

.bananas-field-paragraph-wrapper > .bananas-field-paragraph-links li {
  z-index: 950;
}

.bananas-field-paragraph-links li {
  display: block;
  margin: 0;
  padding: 0;

}

/*paragraph buttons*/
.bananas-field-paragraph-links li
{
  display:block;float:left;
}
.paragraph-wrapper--row > .bananas-field-paragraph-links li {
  /*float:none;clear:both;*/
}
.paragraph--row {
  min-height:10px;
}



.bananas-field-paragraph-links .ajax-progress-throbber .throbber {
  display: block;
  height: 13px;
  padding: 0;
  width: 17px;
}


ul.bananas-field-paragraph-add-new {margin:0;padding:0;}
.bananas-field-paragraph-add-new li {list-style: none;}
a.bananas-field-paragraph-add-new,
.bananas-field-paragraph-add-new a {
  background-color: #FFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #558ed5;
  display: block;
  font-weight: bold;
  height: 30px;
  padding: 0;
  text-indent: -9999px;
  width: 30px;
  margin-right:1px;

}





.add-new-column {background-color:#EEE;padding:5px;}

.bananas-field-paragraph-add-new a,
a.bananas-field-paragraph-add-new,
.bananas-field-paragraph-links li.add-after a,
.bananas-field-paragraph-links li.add-before a,
.bananas-field-paragraph-links li.adding-after a,
.bananas-field-paragraph-links li.adding-before a,
.bananas-field-paragraph-links li.library-after a,
.bananas-field-paragraph-links li.library-before a {
  background-image: url(../images/bananas-add.svg);
}

.bananas-field-paragraph-links li.delete a,
.bananas-field-paragraph-links li.deleting a {
  background-image: url(../images/bananas-trash.svg);
}

.bananas-field-paragraph-links li.edit a {
  background-image: url(../images/bananas-pencil.svg);
}
.bananas-field-paragraph-links li.editing a {
  background-image: url(../images/bananas-pencil.svg);
}
.bananas-field-paragraph-links > li.up a {
  background-image: url(../images/up.svg);
}

.bananas-field-paragraph-links > li.down a {
  background-image: url(../images/down.svg);
}
.paragraph--column.bananas-field-paragraph-links li.down a {
  background-image: url(../images/right.svg);
}

.paragraph--column.bananas-field-paragraph-links li.up a {
  background-image: url(../images/left.svg);
}

.paragraph--column.bananas-field-paragraph-links li.bigger a {
  background-image: url(../images/plus_1.svg);
}

.paragraph--column.bananas-field-paragraph-links li.smaller a {
  background-image: url(../images/minus_1.svg);
}

.bananas-field-paragraph-links li.split a {
  background-image: url(../images/split.svg);
}

.bananas-field-paragraph-links li.duplicate a {
  background-image: url(../images/duplicate.svg);
}

.bananas-field-paragraph-links li.copy a {
  background-image: url(../images/copy.svg);
}

.bananas-field-paragraph-links li.paste a {
  background-image: url(../images/paste.svg);
}

.bananas-field-paragraph-links li.mirror a {
  background-image: url(../images/mirror.svg);
}

.bananas-field-paragraph-links li.library a,
.bananas-field-paragraph-links li.library-after a.field_row_columns,
.bananas-field-paragraph-links li.library-before a.field_row_columns {
  background-image: url(../images/library.svg);
}

li.bigger:hover:before {content: "Kolom breder maken";}
li.smaller:hover:before {content: "Kolom smaller maken";}
li.add-after:hover:before {content: "Een item hieronder toevoegen";}
li.add-before:hover:before {content: "Een item hierboven toevoegen";}
li.delete:hover:before {content: "Verwijderen";}
li.edit:hover:before {content: "Bewerken";}
li.duplicate:hover:before {content: "Dupliceren";}
li.copy:hover:before {content: "Copiëren naar klembord";}
li.paste:hover:before {content: "Plakken van klembord";}
li.mirror:hover:before {content: "Spiegel van klembord";}
li.up:hover:before {content: "Naar boven verplaatsen";}
li.down:hover:before {content: "Naar onder verplaatsen";}
.paragraph--column li.up:hover:before {content: "Naar links verplaatsen";}
.paragraph--column li.down:hover:before {content: "Naar rechts verplaatsen";}
.paragraph--column li.add-after:hover:before {content: "Een kolom rechts toevoegen";}
.paragraph--column li.add-before:hover:before {content: "Een kolom links toevoegen";}
.paragraph--row li.add-after:hover:before {content: "Een rij hieronder toevoegen";}
.paragraph--row li.add-before:hover:before {content: "Een rij hierboven toevoegen";}
.paragraph--section li.add-after:hover:before {content: "Een sectie hieronder toevoegen";}
.paragraph--section li.add-before:hover:before {content: "Een sectie hierboven toevoegen";}
.paragraph--column li.library-before:hover:before{content: "Links toevoegen uit bibliotheek";}
.paragraph--column li.library-after:hover:before{content: "Rechts toevoegen uit bibliotheek";}
.paragraph--row li.library-before:hover:before{content: "Een rij hierboven toevoegen";}
.paragraph--row li.library-after:hover:before{content: "Een rij hieronder toevoegen";}

li.bigger:hover:before,
li.smaller:hover:before,
li.add-after:hover:before,
li.add-before:hover:before,
li.delete:hover:before,
li.edit:hover:before,
li.up:hover:before,
li.down:hover:before,
li.duplicate:hover:before,
li.copy:hover:before,
li.paste:hover:before,
li.mirror:hover:before,
li.library-before:hover:before,
li.library-after:hover:before
{
  display:inline-block;
  position:absolute;
  margin-top:25px;
  background-color:#FFF;
  padding:0 5px;
  font-size:10px;
  text-transform: uppercase;
  /*border:1px solid #3a3a3a;*/
  white-space: nowrap;
  z-index:999;
  color:#000;
}


/*min height for column so you can always hover it (for buttons), even if empty*/
.paragraph-wrapper--column {min-height:1px;}

/*bananas-edit (e.g. terms)*/
a.bananas-edit {
  background-image: url(../images/bananas-pencil.svg);
  display:none;
  top:2px;left:2px;
  position:absolute;
  background-color: rgba(255, 221, 153, 1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 50%;
  color: #558ed5;
  font-weight: bold;
  height: 20px;
  padding: 0;
  text-indent: -9999px;
  width: 20px;
}
a.bananas-edit:hover:before {content: "Bewerken";}
a.bananas-blue {
  background-color: rgba(204, 221, 255, 1);
}
.entity-reference {position:relative;}
.entity-reference:hover{
  outline: 2px solid rgba(128, 170, 255, 1);
  background-color:rgba(128, 170, 255, 0.2);
  outline-offset: 0px;
  z-index:960; position:relative;
}
.entity-reference:hover a.bananas-edit {display:block;}
a.bananas-edit:hover{
  background-color: #f78a5f;
  border-color: #FFF;
  color: #fff;
}
.bananas-edit:hover:before {content: "Bewerken";}

/*z-index*/
.paragraph-bananas-actions {
    position:relative;
    z-index:999;
}

/*for jquery some classes to toggle bananas on click on title*/
.paragraph-type.bananas-show { display:inline-block !important; }
.paragraph-actions.bananas-show { display:inline-block !important; z-index:99999 !important;}
.editor-permissions.bananas-show { z-index:1000 !important; }