.flexy {
    display: flex;
}
.nowrap {
  word-wrap: break-word;
}
.flexnowrap {
    display: flex;
    flex-wrap: nowrap;
    white-space:normal;
}
.flexwrap {
    display: flex;
    flex-wrap: wrap;
}
.spacebtw {
    justify-content: space-between;
}
.view .pager__item.is-active {
    background-color: var(--lite);
    color: var(--main);
    font-weight: 600;
}

#toolbar-administration,
#toolbar-administration * {
  z-index: 999999 !important;
}
.w3-input {
    max-width: 100%;
    width: auto;
}
form.user-register-form .form-actions,
form.user-login-form .form-actions,
form.user-pass .form-actions {
    text-align: left;
}

.w3-border {
    background-color: var(--white);
    border: 2px solid var(--main-t3);
    border-radius: 4px;
    box-shadow: none;
}
/* ADMIN MENU OR GIN ADMIN */
.gin-secondary-toolbar--frontend {
  position: sticky;
  z-index: 9999;
}
/* REMOVE Breadcrumb & Shortcut */
.gin-breadcrumb,
.gin-secondary-toolbar .toolbar-tab--toolbar-item-shortcuts {
  display: none !important;
}
/* But SHOW Breadcrumb & Shortcut for Administrotor */
.r_adm .gin-breadcrumb,
.r_adm .gin-secondary-toolbar .toolbar-tab--toolbar-item-shortcuts {
  display: block !important;
}
.gin-breadcrumb .placeholder {
  background-color: transparent;
  cursor: pointer;
}

/* FLEX 1 COL */
.flexy.flex-1col {
    flex-wrap: wrap;
    text-align: center;
}
.flexy.flex-1col .flexy-item {
    width: 100%;
}
/* FLEX 2 COL */
.flexy-2col {
    flex-wrap: wrap;
}
.flexy-2col .item,
.flexy-2col .views-field {
    width: 100%;
}
.flexy-2col.nowrap {
    flex-wrap: nowrap;
}

.iconleft {
    margin: 0 7px 0 0;
}
.item-wrapper {
    margin: 2px 0;
    width: 100%;
}

/* TABLE */
.w3-table,
.w3-table-all {
  background-color: var(--white);
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--dark);
  width: 100%;
  display: table;
}
.w3-table-all,
.w3-table-all,
.w3-table-all tr,
.w3-table-all th,
.w3-table-all tr {
  border: 0 none;
}
.w3-table-all thead tr {
    background-color: var(--main);
    color: var(--white);
}
.w3-bordered tr,
.w3-table-all tr {
}
.w3-striped tbody tr:nth-child(even) {
}
.w3-table-all tr:nth-child(odd) {
}
.w3-table-all tr:nth-child(even) {
  background-color: var(--main-t1);
}
.w3-hoverable tbody tr:hover,
.w3-ul.w3-hoverable li:hover {
}
.w3-centered tr th,
.w3-centered tr td {
  text-align: center;
}
.w3-table td,
.w3-table th,
.w3-table-all td,
.w3-table-all th {
  padding: 8px 8px;
  display: table-cell;
  text-align: left;
  vertical-align: top;
}
.w3-table th:first-child,
.w3-table td:first-child,
.w3-table-all th:first-child,
.w3-table-all td:first-child {
  padding-left: 16px;
}
.w3-table-all p {
    margin: 0;
}

/* DETAILS */
details,
details[open] {
    padding: 0 !important;
}
details[open] {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    margin: 0 0 10px;
}
details > summary {
    cursor: pointer;
    list-style: outside none none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 5px;
}
details > summary::before {
    background-color: var(--main-t1);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: var(--dark);
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: bold;
    margin-right: 7px;
    padding: 5px 7px;
    position: relative;
    bottom: 2px;
}
details summary:hover {
    background-color: transparent;
    color: var(--sec);
}
details summary:hover::before,
details[open] summary:hover::before {
    color: #fff !important;
}
details[open] summary {
    padding: 5px;
}
details[open] > summary::before {
    background-color: transparent;
    color: var(--dark);
    content: "\f107";
}
details[open] summary ~ * {
  animation: sweep .2s ease-in-out;
  margin-top: 0;
}
@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}