/* GRID LAYOUTS
 * ------------ */

.hbrew-2grid {
  display: grid;
  grid-template-columns: auto auto;
}

.hbrew-3grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

.hbrew-4grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.hbrew-5grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.hbrew-2grid,
.hbrew-3grid,
.hbrew-4grid,
.hbrew-5grid {
  grid-row-gap: 5pt;
  padding-left: 10pt;
  padding-right: 10pt;
}

.hbrew-2colspan {
  grid-column: auto / span 2;
}

.hbrew-3colspan {
  grid-column: auto / span 3;
}

.hbrew-4colspan {
  grid-column: auto / span 4;
}

.hbrew-5colspan {
  grid-column: auto / span 5;
}

.hbrew-heading {
  padding-left: 10pt;
  margin-left: -10pt;
  margin-right: -10pt;
  line-height: 2em;
  border-radius: 10pt;
  font-size: 120%;
  font-weight: bold;
  margin-top: 24pt;
  margin-bottom: .5em;
  box-shadow: 0px 0px 10px 0px #ccc;
}

.hbrew-heading div {
  float:right;
  padding-left: 10pt;
  padding-right: 10pt;
  border-left: 1pt solid #ccc;
  border-bottom-right-radius: 10pt;
  border-top-right-radius: 10pt;
  cursor: pointer;
}

.hbrew-heading div:hover {
  color: black;
  background-color: #cce5ff;
}


.hbrew-hsep {
  margin-bottom: .5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


.mbrew-footerinfo {
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;

  font-size: small;
  line-height:1.1em;
}

.mbrew-footerinfo div {
  padding-left: 0;
  padding-right: .5em;
}


.mbrew-footerinfo i.fas,
.mbrew-footerinfo span.fas {
  color: #6b6b6b;
  font-size: large;
}


/* INPUT ELEMENTS
 * -------------- */

 .hbrew-action-bar {
   width: 100%;
   text-align: right;
   margin-top: -5.8em;
   margin-bottom: 3em;
   padding-right: 5pt;
 }

 .hbrew-action-bar a,
 .hbrew-action-bar button {
   margin-left: 8pt;
 }

 input.hbrew-name {
   display: block;
   margin-bottom: 1em;
   width: 60%;
   font-size: 1.2em;
   font-weight: bold;
   padding: 10pt;
 }

textarea[readonly] {
  resize: none;
}

/* BUTTONS
 * ------- */

button,
select {
  cursor: pointer;
}

button span {
  margin: 0 1pt;
}

button.dt-button:not(.disabled),
button.hbrew-btn,
a.dashicons, a.fas, a.far {
  vertical-align: middle;
  text-decoration: none;
  color: #6b6b6b;
  background-color: #fff;
  padding: 8pt;
  border-radius: 3pt;
  border: 1px solid #979797;
  box-shadow: none;
  background-image: none;
  cursor: pointer;
  box-sizing: content-box;
}

button.hbrew-btn {
  width: 39px;
  height: 39px;
  padding: 0;
}

.hbrew-btn i {
  margin: 0;
  padding: 0;
}



.hbrew-btn:hover,
.mbrew-edit:hover,
a.dashicons-edit:hover,
a.fas:hover,
a.far:hover  {
  background-color: #cce5ff;
  color: black;
}

.hbrew-new:hover,
.hbrew-save:hover,
button.dt-button:hover:not(.disabled) {
  color: black;
  box-shadow: none;
  background-image: none;
  background-color: #f2ffcc;
  border: 1pt solid #979797;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-image: none;
  border-radius: 3pt;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 3pt;
}

.hbrew-del:hover,
a.fa-trash-alt:hover,
a.fa-times-circle:hover {
  background-color: #ffb3b3;
  color: black;
}

/* STATUS NOTIFICATIONS
 * -------------------- */

.hbrew-info {
  border: 1pt solid #ccc;
  border-left: 5pt solid #66ccff;
  border-radius: 2pt;
  /*background-color: #eee;*/
  color: #444;
  padding: 5pt;
  margin-bottom: 1.5em;
  box-shadow: 1px 2px 1px 1px #ccc;
}

.hbrew-warn {
  border: 1pt solid #ccc;
  border-left: 5pt solid orange;
  border-radius: 2pt;
  /*background-color: #ffeecc;*/
  color: #444;
  padding: 5pt;
  margin-bottom: 1.5em;
  box-shadow: 1px 2px 1px 1px #ccc;
}

.hbrew-success {
  opacity: 0;
  animation: fade 3s linear;
  position: absolute;
  max-width: 50%;
  left: 50%;
}

.hbrew-success div {
  border: 1pt solid #ccc;
  border-left: 5pt solid #090;
  border-radius: 2pt;
  background-color: white;
  color: #444;
  padding: 5pt;
  margin-bottom: 1.5em;
  box-shadow: 1px 2px 1px 1px #ccc;

  position: relative;
  top: -5.5em;
  left: -50%;
}

@keyframes fade {
  0%,85% { opacity: 1 }
  100% { opacity: 0 }
}


.hbrew-error {
  border: 1pt solid #999;
  border-left: 5pt solid #900;
  border-radius: 2pt;
  background-color: #ddd;
  color: #333;
  padding: 5pt;
  margin-bottom: 1.5em;
}

.hbrew-datatable {
  padding: 10pt;
}

/* MODALS
 * ------ */
.mbrew-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.mbrew-modal-content {
  margin: 15% auto; /* 15% from the top and centered */
  /*padding: 20px;*/

  width: 50%; /* Could be more or less, depending on screen size */
}

.mbrew-modal-header {
  padding-left: 15pt;
  margin-left: -10pt;
  margin-right: -10pt;
  line-height: 2em;
  border-radius: 10pt;
  font-size: 120%;
  font-weight: bold;
  box-shadow: 0px 0px 10px 0px #ccc;
  position: relative;
  background-color: white;
}

.mbrew-modal-header div {
  float:right;
  padding-left: 10pt;
  padding-right: 10pt;
  border-left: 1pt solid #ccc;
  border-bottom-right-radius: 10pt;
  border-top-right-radius: 10pt;
  cursor: pointer;
}

.mbrew-modal-header div:hover {
  background-color: #ffb3b3;
  color: black;
}

.mbrew-modal-body {
  z-index: 1;
  background-color: white;
  padding: 10pt;
  /*border: 1pt solid #ccc;*/
}

.mbrew-modal-footer {
  box-shadow: 0 0 15px 0 #333;
}