:root { 
  --light-border: #dededf;
  --border-focus: var(--site-border-focus, rgba(73, 161, 100, 1));
  --border-hover: var(--site-border-hover, rgba(73, 161, 100, .5));
  --input-size: 16px;
  --input-color:var(--darkgray);
  --input-hover:rgba(73, 161, 100, 1);
  --input-background-color: rgba(255,255,255,.8);
  --input-placeholder: rgba(191,191,191,.87);
  --label-size: 15px;
  --radio-label-size: 14px;
  --label-color: var(--darkgray);
  --dropdown-menu-hover: rgba(157, 208, 179, .4);
  --dropdown-background: #ffffff;
  --dropdown-item-color: #000;
  --dropdown-item-hover: #fff;
  --dropdown-item-hover-background:rgba(0,0,0,.1);
  --dropdown-item-selected: rgba(157, 208, 179, .4);
  --dropdown-item-selected-color: #000;
  --error-color: #e7bdbc;
  --error-border: #a5393b;
  --selection-background:var(--border-hover);
  --selection-color:var(--darkgray);
}

.ui.form.dark,
.ui.modal.dark {
  --light-border:#262626;
  --border-focus:rgba(79, 126, 230, 1);
  --border-hover:rgba(79, 126, 230, .6);
  --input-color:var(--white);
  --input-hover:lightgreen;
  --input-background-color:#262626;
  --input-placeholder: #6d6d6d;
  --label-color: #5e5f63;
  --dropdown-menu-hover:lightgreen;
  --dropdown-background:#262626;
  --dropdown-item-color: var(--white);
  --dropdown-item-hover: #262626;
  --dropdown-item-hover-background:#3e3e3e;
  --dropdown-item-selected: #333333;
  --dropdown-item-selected-color: lightgreen;
  --selection-background:rgba(255,255,255,.3);
  --selection-color:white;
  --calendar-hover:#337edd;
}

.ui.form, .ui.modal, .ui.table { font-size:16px; }

.ui.form .ui.input > input::placeholder,
.ui.form ::placeholder { color: var(--input-placeholder); opacity: .87; }


/* ToolTips */
[data-tooltip][data-variation~="small"]::after, [data-tooltip][data-variation~="small"]::before { font-size: 14px; }
.dark [data-inverted][data-position~="bottom"][data-tooltip]::before { box-shadow: -1px -1px 0 0 #4b4b4b; }
.dark [data-tooltip][data-inverted]::before,
.dark [data-inverted][data-position~="bottom"][data-tooltip]::before, 
.dark [data-tooltip][data-inverted]::after { background:#4b4b4b !important; }
.dark .dark[data-tooltip][data-inverted]::after { background:#020202 !important; }
.dark .dark[data-tooltip][data-inverted]::before { background:#020202 !important; }

[data-position="bottom center"][data-tooltip]::after,
[data-position="bottom center"][data-tooltip]::before { top:108%; }

/* Fields */
.core .ui.form .field { position:relative; margin:0 0 14px 0; }
.core .ui.form .field[data-type=textedit] { height:inherit; }
.core .ui.form .fields { margin:0 !important; gap: 14px; }
.core .ui.form .fields.mc { margin:0 auto !important; }
.core .ui.form .fields:last-child .field { margin-bottom: 14px; }
.core .ui.form .field.nomar, 
.core .ui.form .fields .fields, 
.core .ui.form .fields.nomar .field { margin-bottom:0 !important; }
.ui.form .fields .field, .ui.form .fields .wide.field { padding:0; }
body:is(.mobile,.tablet) .ui.form .fields.stack { flex-direction: column; width: 100%; }
body:is(.mobile,.tablet) .ui.form .fields.stack .field { width:100%; }
body:is(.mobile,.tablet) .ui.form .fields.stack .field.mtc { width:max-content; }
.ui.form .eight.wide.field.g14 { width: calc(50% + 14px); }

.core .ui.form:not(.inverted) .field > label:not(.button) {
  font-weight: normal;
  text-transform: uppercase !important;
  font-size: 11px !important;
  margin: 0 8px 5px 10px !important;
  color:var(--label-color);
  /* user-select: none; */
}

.core .ui.form .field input:not([type="checkbox"]):not([type="radio"]),
.core .ui.form .field textarea { 
  border: 2px solid var(--light-border);
  color: var(--input-color);
  width: 100%;
  font-size: var(--input-size);
  border-radius: 5px;
  transition: border-color .15s ease-in-out;
  background-color: var(--input-background-color);
  padding: 0 12px;
}
.core .ui.form .field textarea { padding: 10px 12px; }

.core .ui.form .field .trumbowyg textarea {
  background-color: white !important;
  color:#333 !important;
  border:0 !important;
  border-radius:10px !important;
}

.core .ui.form .field label.error::after {
  position: absolute;
  content: attr(data-error);
  right: 20px;
  display: block;
  bottom: 12px;
  background: #ab383e;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  color: #d0a9a9;
  line-height: 12px;
  height: 16px;
  font-family: roboto;
  transition: all .4s ease-in-out;
}


.core .ui.form .field input::selection, 
.core .ui.form .field textarea::selection {
  background: var(--selection-background);
  color: var(--selection-color);
}

.core .ui.form .field input:not([type="checkbox"]):not([type="radio"]),
.core .ui.form .ui.selection {
  min-height:40px; 
  height:40px; 
  font-size: var(--input-size);
}
.core .ui.form .ui.selection:focus-within,
.core .ui.form .ui.selection:focus-visible {
  border-color: var(--border-focus);
  border-width: 2px;
}


.core .ui.form .field:not(.error) input:not([type="checkbox"]):not([type="radio"]):focus, 
.core .ui.form .field:not(.error) input:not([type="checkbox"]):not([type="radio"]):focus:hover,
.core .ui.form .field:not(.error) textarea:focus,
.core .ui.form .field:not(.error) textarea:focus:hover {
  border: 2px solid var(--border-focus);
  outline: none;
}

@media (hover: hover) { 
  .core .ui.form .field:not(.error) input:not([type="checkbox"]):not([type="radio"]):hover, 
  .core .ui.form .field:not(.error) textarea:hover { border-color: var(--border-hover); }
  .core .ui.form .field:not(.error) .ui.selection.dropdown:hover { border-color: var(--border-focus); }

}

/* --~~ Checkbox/Radio ~~-- */

.core .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { margin-top:0; }

.core .ui.form .field .ui.checkbox label {
  font-size: var(--radio-label-size);
  margin-right: 20px;
}

.core .ui.form .field label.checkbox .chklabel {
  white-space: wrap;
  text-align: left;
}

.ui.form .field.check-middle { height: 40px; margin-top: 20px !important; }
.ui.form .field.check-middle label { line-height: 40px; }

/* --~~ Calendar ~~-- */

.ui.calendar .ui.table { margin:0; }
.ui.calendar .ui.table tr td, .ui.calendar .ui.table tr th { padding: 4px; }
.ui.inverted.bottom.popup::before { background: #2b2b2b; }

@media (hover: hover) { 
  .ui.ui.inverted.table th span:is(.prev,.next):hover {
    color:var(--calendar-hover)
  }
  .ui.ui.inverted.table th span:not(.prev,.next):hover {
    background: var(--calendar-hover);
    padding: 3px 10px;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    transition: background .2s ease-in-out;
  }
}
.ui.ui.inverted.table td.active, .ui.ui.ui.ui.inverted.table tr.active { background:#437ee1; color: white; }
.ui.inverted.calendar:not(.disabled).popup.active .ui.table.inverted tbody tr td:is(.focus,.active) { 
    box-shadow: inset 0 0 0 2px var(--calendar-hover); text-shadow: 1px 1px 1px rgba(0,0,0,.6); }

/* --~~ Dropdown ~~-- */

.core .ui.form .field .ui.dropdown,
.core .ui.form .field .ui.selection,
.core .ui.form .field .ui.dropdown .menu,
.core .ui.form .field .ui.selection .menu {
  background-color: var(--dropdown-background);
}

.core .ui.form .field .ui.selection { border-width: 2px; }
.core .ui.form .field .ui.selection.active.visible { border-color: var(--border-focus); box-shadow:none; }
.core .ui.form .field .ui.dropdown { display:block; }
.core .ui.form .field .dropdown .menu > .item { font-size:var(--input-size); }
.core .ui.form .field .ui.dropdown .menu { left: -1px; }

.core .ui.form .field .ui.dropdown i {
  position: absolute;
  bottom: 0;
  height: 36px;
  color: var(--input-color);
  width: 28px;
  margin-left: 2px;
}
.core .ui.form .field .ui.dropdown i.flag {
  left:0;
}

.core .ui.form .field .ui.dropdown i:before {
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.core .ui.form .field .ui.dropdown i:hover { color:var(--input-hover); }
.core .ui.form .field .ui.dropdown.active.visible i.dropdown:before { content: "\e97a"; }

.core .ui.form i.icon.remove::before {
  font-family: "kui";
  content: "\f00d"; 
}
.core .ui.form i.icon.dropdown::before {
  font-family: "kui";
  content: "\f0d7"; 
}

.core .ui.form .field .ui.search.dropdown input.search {
  padding: 0 12px;
  height: 36px;
  min-height: 36px;
  line-height: 36px;
}

.core .ui.form .ui.dropdown > .text.default { color:var(--input-placeholder); opacity: .87; padding: 0 12px; }

.core .ui.form .ui.dropdown > .text {
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  width: calc(100% - 80px);
  color: var(--input-color);
  margin: 0;
}

.core .ui.form .ui.dropdown .menu .message { color:var(--input-color); }

.core .ui.form .ui.dropdown .menu {
  font-size: var(--input-size);
  box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
  border: 2px solid var(--border-focus);
  border-radius: 5px;
}

.core .ui.form .ui.selection.dropdown .menu {
  min-width: calc(100% + 4px);
  width: calc(100% + 4px);
  padding-bottom: 5px;
}

.core .ui.form .field .ui.selection.dropdown .menu { 
  border-width: 0 2px 2px 2px; 
  border-color:var(--border-focus); 
  scrollbar-color: var(--border-hover) transparent;
  box-shadow: 12px 12px 12px -10px rgba(0,0,0,.4);
  border-radius: 0 0 5px 5px;
}

.core .ui.form .field .ui.ui.upward.selection.dropdown .menu {
  border-top-width: 2px;
  border-radius: 5px 5px 0 0;
  border-color: var(--border-focus);
  border-bottom-width: 0;
  box-shadow: 12px 0px 12px -10px rgba(0,0,0,.4);
}
.core .ui.form .field .ui.upward.selection.dropdown.visible:not(.pointing):not(.floating) {
  border-radius: 0 0 5px 5px;
  border-width: 2px;
}

.core .ui.form .field .ui.dropdown .menu > .header {
  margin: 8px 5px;
  padding: 0;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
  background-color: rgba(0,0,0,.07);
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  text-transform: none;
  font-size: var(--input-size);
  position: relative;
}

.dark .ui.form .field .ui.dropdown .menu > .header {
  color: rgba(255,255,255,.9);
  font-size: 13px !important;
  background-color: #333333;
  margin: 0;
  border-radius: 0;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
  text-align: left;
  padding-left: 34px;
}
.dark .ui.form .field .ui.dropdown .menu > .header:first-child { border-top:0; }
.dark .ui.form .field .ui.dropdown .menu > .header .flag {
  font-size: 16px;
  left: 0;
}

.core .ui.form .field .dropdown .menu > .item {
  font-size: var(--input-size);
  padding: 0 0 0 32px;
  height: 40px;
  line-height: 40px;
  min-height: 40px;
  border-radius: 5px;
  margin: 0 5px;
  cursor: pointer;
  color: var(--dropdown-item-color);
  border-top:0;
}
@media (hover: hover) { 
  .core .ui.form .field .dropdown .menu > .item:hover,
  .core .ui.form .field.error .dropdown .menu > .item:hover {
      background-color:var(--dropdown-item-hover-background);
  }
}

.core .ui.form .field .dropdown .menu > .item.selected { 
  color:var(--dropdown-item-selected-color); 
  background-color: var(--dropdown-item-selected); 
  font-weight: normal;
}

.core .ui.dropdown .item.selected::before {
  font-family: "kui";
  content: "\e90b";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  color: var(--dropdown-item-selected-color);
  font-size: 14px;
  font-weight: normal;
}

/* --~~ Form Validation ~~-- */
.core .ui.error.message li { font-size: var(--input-size); }

.core .ui.form .field.error { color: inherit; }
.core .ui.form .field.error .ui.dropdown > .text,
.core .ui.form .error ::placeholder { color: var(--error-color); }

.core .ui.form .field.error input,
.core .ui.form .field.error textarea { border-color: var(--error-border); color:var(--input-color); background-color: var(--input-background-color); }
.core .ui.form .field.error .ui.selection.dropdown .menu, 
.core .ui.form .field.error .ui.dropdown { border-color: var(--error-border) !important; }

.core .ui.form .field.error .ui.dropdown > .text { background-color: var(--input-background-color); }
.core .ui.form .field.error .ui.dropdown .item { background-color: var(--input-background-color); }
.core .ui.form .field.error .dropdown .menu > .item.selected { background-color:var(--input-background-color); }

.core .ui.form .field.error input:not([type="checkbox"]):not([type="radio"]),
.core .ui.form .field.error textarea,
.core .ui.form .field.error input:not([type="checkbox"]):not([type="radio"]):focus,
.core .ui.form .field.error textarea:focus { 
  border: 2px solid var(--error-border); 
  color:var(--input-color); 
  background-color: var(--input-background-color); 
}

/* --~~ Modal ~~-- */

.ui.modal.max { height: 90%; padding: 0; }
.ui.modal.max.wide { 
  width: calc(80% - 50px); 
  height: calc(90% - 20px);
}

.modals.dimmer .ui.scrolling.modal.max { margin: 30px auto; }

.ui.modal.dark .content { color:var(--white); }

.ui.modal.dark .actions {
  background-color: #2f3036;
  border-top: 1px solid #1f2024;
  padding: 12px;
}

.ui.modal.dark .content {
  background-color: #2f3036;
  border-top: 1px solid rgba(0,0,0,.15);
  font-size: 16px;
}

.ui.modal.dark .content.nop { padding:0; }

.ui.modal .header { height:50px; }
.ui.modal.max .content { max-height:calc(100% - 115px); min-height:calc(100% - 115px); }
.ui.modal.max .content:has(iframe) { height:calc(100% - 115px); padding:0; }

.ui.modal.dark .header {
  background-color: #3a3b40;
  color: rgba(255,255,255,.8);
  border-radius: 5px 5px 0 0;
  font-size: 16px !important;
  padding-inline: 20px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  letter-spacing: 0.5px;
  display: block;
  align-content: center;
  padding-block: 0;
}

.ui.modal { border-radius: 5px; user-select: none; background:none; }
.ui.modal.light .header { background-color:rgba(0,0,0,.07); }

.ui.modal > .close:before { font-size: 16px; }
.ui.modal > .close:hover:before { color:lightgreen; }

.ui.fullscreen.modal { width: calc(100% - 110px); left: 65px; }
.ui.fullscreen.modal > .close, .ui.modal > .close.inside { top:0; right:0; color:white; }
.ui.modal.max > .close { top:0; right:0; }
.ui.modal > .close { top: 0; right: 0; width:50px; height:50px; padding:0; }
.ui.modal > .close:before { padding-bottom: 2px; }

.ui.inverted.dimmer { background-color:rgba(0,0,0,.75); }

.ui.modal.dark .header .header_tr {
  position: absolute;
  right: 40px;
  height: 100%;
  top: 0;
  display: block;
  width: 40px;
  color: rgba(255,255,255,.8);
}
@media (hover: hover) { .ui.modal.dark .header .header_tr:hover { color:lightgreen; } }

/* --~~ HR and Divider ~~-- */

.ui.divider { margin:14px auto; }
.ui.divider.notop { margin:0 auto 14px; }


/* ----~~~~ Trumbowyg Editor ~~~~---- */
.field.h100 .trumbowyg-box { height:100%; }
.trumbowyg-editor-box { background: white; color: #333; border-radius:10px; scrollbar-color: rgba(0,0,0,.2) transparent; }
.h100 .trumbowyg-box { height:100%; }
.trumbowyg-box { border-radius:10px; background:white; min-height: unset !important; height:calc(100% - 44px); overflow: hidden; }
.trumbowyg-button-pane { border-radius:10px 10px 0 0; }
.trumbowyg textarea { scrollbar-color: rgba(0,0,0,.2) transparent; display:none; }
.trumbowyg textarea::selection { background: rgba(37, 114, 218, .25) !important; color: #333 !important; }
#trumbowyg-icons { display:none; }
.trumbowyg-editor-box :is(p, h1, h2, h3, h4, h5, h6) { user-select:text !important; color: #333 !important; }
.trumbowyg-editor-box a { color:var(--blue); }
.field[data-type=textedit] .trumbowyg-editor img, .trumbowyg-editor video { height: revert-layer; }

/*-----------------
   Lightbox 
-------------------*/

#lightbox {
  background-color: rgba(0,0,0,.55);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1002;
  cursor:pointer;
  top: 0;
  left: 0;
  opacity: 1;
  align-content: center;
  display: block;
  transition: opacity .3s ease-in-out, display .3s allow-discrete;
  @starting-style { opacity:0; } 
}
#lightbox.hidden { display:none; opacity: 0; }

#lightbox img { scale:.75; opacity: 0; }
#lightbox.active img { scale:1; opacity: 1; }
#lightbox img { 
  display:block; 
  margin-inline: auto;
  border: 5px solid rgba(255,255,255,.15);
  border-radius: 5px;
  max-height: calc(100% - 20px);
  max-width: calc(100% - 20px);
  transition: all .3s ease-in-out;
}