/*
WHEN STARTING SITE: add more colors here, eg color-red, color-green, color-pink, color-darker, color-mediumlight
- Remember ***-text versions
- remember to clone into the $colors object below
- update admin previews: blocks-admin-preview.css
- update PHP: website_colors()
*/
/*----------------------------------------------------------------------
Let's make complex repeater fields a little bit easier to comprehend
----------------------------------------------------------------------*/
.acf-field-repeater .acf-repeater.-block table.acf-table {
  border-spacing: 0px 6px;
  background: transparent;
  border: none;
}

.acf-field-repeater .acf-repeater.-block table.acf-table td.acf-row-handle.order {
  border: 1px solid #888;
  border-right: none;
}

.acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields {
  border: 1px solid #888;
}

.acf-field-repeater .acf-repeater.-block table.acf-table td.acf-row-handle.remove {
  border: 1px solid #888;
  border-left: none;
}

.acf-field-repeater .acf-repeater.-block table.acf-table .acf-icon.-collapse.small {
  top: 14px;
}

/*----------------------------------------------------------------------
Make field labels smaller, so we get a cleaner look
----------------------------------------------------------------------*/
.acf-field .acf-label {
  margin-bottom: 5px !important;
}

.acf-field .acf-label label {
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-weight: 500 !important;
}

/*----------------------------------------------------------------------
Compress the fields a little, so as to make room for more
----------------------------------------------------------------------*/
.acf-block-body .acf-fields > .acf-field {
  padding: 12px 14px;
  min-height: 0 !important;
}

/*----------------------------------------------------------------------
Empty file/image upload fields have this weird space - let's fix that
----------------------------------------------------------------------*/
.acf-image-uploader .hide-if-value p,
.acf-file-uploader .hide-if-value p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0 !important;
  /* remove the unneeded text outside the button */
}

/*--------------------------------------------------------------------*/
/*--------------------------------------------------------*/
.acf-block-preview {
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
}

.admin-block {
  _background-color: orange;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  font-size: 13px;
  padding-top: 40px;
}

/*--------------------------------------------------------*/
/*----------------------------------------------------------
GENERICS
----------------------------------------------------------*/
.admin-block .block-title {
  position: absolute;
  z-index: 1;
  top: 0px;
  background: rgba(0, 0, 0, 0.7);
  display: inline-block;
  left: 0px;
  color: white;
  padding: 4px 10px;
  padding-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 100;
}

.admin-block .cols-auto {
  position: relative;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.admin-block .cols-auto.layout-flipped {
  grid-auto-flow: dense;
}
.admin-block .cols-auto.layout-flipped .col:nth-child(2) {
  grid-column: 1;
}
.admin-block .cols-auto.layout-flipped .col:nth-child(1) {
  grid-column: 2;
}

.admin-block .align-c {
  text-align: center;
}

.admin-block .imgholder {
  position: relative;
  overflow: hidden;
}

.admin-block img {
  display: block;
  width: 100%;
  height: auto;
}

.admin-block .wysiwyg {
  font-size: 10px;
}

.admin-block .wysiwyg h1 {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .wysiwyg h2 {
  font-size: 1.15em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .wysiwyg h3 {
  font-size: 1.1em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .wysiwyg h4 {
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .wysiwyg h5 {
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .wysiwyg p {
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0;
}

.admin-block .bgimg {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*--------------------------------------------------------*/
.admin-block .table1 {
  width: 100%;
  border-collapse: collapse;
}
.admin-block .table1 td {
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 8px 8px;
}

/*--------------------------------------------------------*/
.admin-block .gblock-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/*--------------------------------------------------------*/
.admin-block .videopreview {
  width: 100%;
  padding: 3em 1em;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  color: black;
}

/*--------------------------------------------------------*/
__.admin-block.colorscheme-light {
  background-color: #fff;
  color: #333;
}

__.admin-block.colorscheme-medium {
  background-color: #999;
  color: #333;
}

__.admin-block.colorscheme-dark {
  background-color: #333;
  color: #fff;
}

.admin-block.colorscheme-dark {
  background-color: #000;
  color: #fff;
}

.admin-block.colorscheme-medium {
  background-color: #5A5A5A;
  color: #000;
}

.admin-block.colorscheme-light {
  background-color: #fff;
  color: #000;
}

.admin-block.colorscheme-success {
  background-color: #a8c1ae;
  color: #fff;
}

.admin-block.colorscheme-warning {
  background-color: #EEA730;
  color: #000;
}

.admin-block.colorscheme-danger {
  background-color: #A44;
  color: #fff;
}

/*--------------------------------------------------------*/
__.admin-block .is-color-light {
  color: #fff;
}

__.admin-block .is-color-medium {
  color: #999;
}

__.admin-block .is-color-dark {
  color: #333;
}

__.admin-block .is-color-dark {
  color: #333;
}

.admin-block .is-color-dark {
  color: #000;
}

.admin-block .textcolor-dark {
  color: #000;
}

.is-color-dark {
  color: #000;
}

.admin-block .is-color-medium {
  color: #5A5A5A;
}

.admin-block .textcolor-medium {
  color: #5A5A5A;
}

.is-color-medium {
  color: #5A5A5A;
}

.admin-block .is-color-light {
  color: #fff;
}

.admin-block .textcolor-light {
  color: #fff;
}

.is-color-light {
  color: #fff;
}

.admin-block .is-color-success {
  color: #a8c1ae;
}

.admin-block .textcolor-success {
  color: #a8c1ae;
}

.is-color-success {
  color: #a8c1ae;
}

.admin-block .is-color-warning {
  color: #EEA730;
}

.admin-block .textcolor-warning {
  color: #EEA730;
}

.is-color-warning {
  color: #EEA730;
}

.admin-block .is-color-danger {
  color: #A44;
}

.admin-block .textcolor-danger {
  color: #A44;
}

.is-color-danger {
  color: #A44;
}

/*----------------------------------------------------------
HERO
----------------------------------------------------------*/
.admin-block.type-hero .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-style: 0.3rem;
  padding: 0.5em 1em;
  width: 70%;
  background-color: rgba(0, 0, 0, 0.4);
}

/*----------------------------------------------------------
FALLBACKER
----------------------------------------------------------*/
/*--------------------------------------------------------*/
/* align left/right/center  */
p.align-left {
  text-align: left;
}

p.align-center {
  text-align: center;
}

p.align-right {
  text-align: right;
}

h1.align-left {
  text-align: left;
}

h1.align-center {
  text-align: center;
}

h1.align-right {
  text-align: right;
}

h2.align-left {
  text-align: left;
}

h2.align-center {
  text-align: center;
}

h2.align-right {
  text-align: right;
}

h3.align-left {
  text-align: left;
}

h3.align-center {
  text-align: center;
}

h3.align-right {
  text-align: right;
}

h4.align-left {
  text-align: left;
}

h4.align-center {
  text-align: center;
}

h4.align-right {
  text-align: right;
}

h5.align-left {
  text-align: left;
}

h5.align-center {
  text-align: center;
}

h5.align-right {
  text-align: right;
}

h6.align-left {
  text-align: left;
}

h6.align-center {
  text-align: center;
}

h6.align-right {
  text-align: right;
}

td.align-left {
  text-align: left;
}

td.align-center {
  text-align: center;
}

td.align-right {
  text-align: right;
}

ul.align-left {
  text-align: left;
}

ul.align-center {
  text-align: center;
}

ul.align-right {
  text-align: right;
}

ol.align-left {
  text-align: left;
}

ol.align-center {
  text-align: center;
}

ol.align-right {
  text-align: right;
}

li.align-left {
  text-align: left;
}

li.align-center {
  text-align: center;
}

li.align-right {
  text-align: right;
}

table.align-left {
  text-align: left;
}

table.align-center {
  text-align: center;
}

table.align-right {
  text-align: right;
}

img.align-left {
  text-align: left;
}

img.align-center {
  text-align: center;
}

img.align-right {
  text-align: right;
}