/*================
 ## Forms       ##
 ================*/

input[type="text"], input[type="password"] {
   border-radius: 4px;
   border-style: solid;
   border-width: 0px;
   padding: 0px 5px;
   line-height: 18px;
   height: 18px;
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
   text-shadow: inherit;
   width: 100%;
   box-sizing: border-box;
}

input[type="text"]:not(.cke_dialog_ui_input_text), input[type="password"] { color: #FFFFFF; }

input[type="text"].placeholder {
   color: rgba(255,255,255,0.5);
}

.form-input-error {
   box-shadow: 0px 0px 3px 1px #990000, inset 1px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px rgba(255, 255, 255, 0.25) !important;
}

.form-input-error:focus {
   box-shadow: 0px 0px 3px 1px #cc0000, inset 1px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px rgba(255, 255, 255, 0.25) !important;
}

.form-confirm-button, .login-button {
   border-radius: 3px;
   height: 24px;
   font-size: 10px;
   line-height: 24px;
   padding: 0 10px;
   position: relative;
   text-transform: uppercase;
}

.form-confirm-button:disabled, .form-confirm-button[disabled], .form-confirm-button:disabled:hover, .login-button:disabled, .login-button:disabled:hover {
   cursor: default;
   pointer-events: none;
   zoom: 1 !important;
}

.form-delete-icon:after, .form-edit-icon:after, .form-copy-icon:after, .form-next-icon:after, .form-add-icon:after, .form-back-icon:after {
   content: "";
   width: 18px;
   height: 12px;
   margin-left: 4px;
   display: inline-block;
}

.form-confirm-button:after {
   content: "\2713";
   display: inline-block;
   padding-left: 10px;
}

/*
.form-confirm-icon:after {
   background: url('../images/menu_glyphs.png') -126px -127px;
}
.form-delete-icon:after {
   background: url('../images/menu_glyphs.png') -396px -397px;
}
.form-edit-icon:after {
   background: url('../images/menu_glyphs.png') -396px -379px;
}
.form-copy-icon:after {
   background: url('../images/menu_glyphs.png') -396px -361px;
}
.form-next-icon:after {
   background: url('../images/menu_glyphs.png') -396px -343px;
}
.form-add-icon:after {
   background: url('../images/menu_glyphs.png') -396px -325px;
}
.form-back-icon:after {
   background: url('../images/menu_glyphs.png') -396px -307px;
}
*/

.form-header {
   color: #ffffff;
   font-weight: bold;
   text-align: center;
}

.form-field[field-type='radio'] {
   padding-bottom: 1px;
}

.form-field[field-type='radio'] > .form-field-header {
   padding-bottom: 1px;
}

.form-field-header {
   margin-top: 15px;
   margin-bottom: 0px;
   padding: 0px;
   line-height: 20px;
   clear: both;
   width: 100%;
   position: relative;
   display: flex;
}


.form-radio {
   margin-right: 10px;
}

.form-field:first-child > .form-field-header, .search-module .form-field-header {
   margin-top: 0 !important;
}

.form-field-changed-indicator {
   float: left;
   font-weight: bold;
   width: 10px;
   /margin-left: -10px;
}

.form-field-label {
   flex: 1;
   float: left;
   color: #FFFFFF;
}
.form-field.form-field-changed .form-field-label,
.form-field.scoped-field .form-field-label {
   font-weight: bold;
}

.form-field-reset {
   cursor: pointer;
   float: right;
   height: 20px;
   position: relative;
   width: 20px;
   z-index: 0;
}

.form-field-reset:after,
.form-field-reset:before {
   height: 14px;
   position: absolute;
   top: 50%;
}

.form-field-reset:after {
   content: "\21B6";
   line-height: 14px;
   right: 7px;
   transform: translate(50%, -50%);

   z-index: 1;
}

.form-field-reset:before {
   border-radius: 3px;
   background: #303030;
   content: "";
   right: 0;
   transform: translate(0, -50%);
   width: 14px;
   z-index: 1;
}

[field-type="info"] .form-field-reset {
   display: none;
}

.form-value-field {
   clear: both;
   line-height: 16px;
   position: relative;
}

.form-input[type="checkbox"], .form-input[type="radio"] {
   display: none;
}
.form-input-label {
   border-radius: 2px;
   cursor: pointer;
   display: inline-block;
   padding-left: 18px;
   padding-right: 0px;
   position: relative;
   white-space: nowrap;
}

.form-input-label:hover {
   color: #FFFFFF;
}

.form-input:checked + .form-input-label {
   color: #FFFFFF;
}

.form-input[type=checkbox] + .form-input-label:after {
   content: "\2713";
   opacity: 0;
   width: 10px;
}

.form-input[type=radio] + .form-input-label:after {
   content: "\2B24";
   font-size: 7px;
   opacity: .25;
   width: 6px;
}

.form-input[type="checkbox"] + .form-input-label:after,
.form-input[type="radio"] + .form-input-label:after {
   height: 18px;
   left: 6px;
   position: absolute;
   top: 0;

   transition: opacity .15s;
}

.form-input[type=checkbox] + .form-input-label:hover:after { opacity: .5; }
.form-input[type=radio] + .form-input-label:hover:after { opacity: .667; }
.form-input[type]:checked + .form-input-label:after { opacity: 1; }


/* ========================== *
 * ## Color Palette Holder ##
 * ========================== */

.color-palette-holder {
   display: inline-block;
   clear: both;
   margin: 4px 0;
   width: 130px;
   background-color: white;
   background-color: rgba(255,255,255,1);
}

.color-palette-swatch {
   display: inline-block;
   width: 10px;
   height: 10px;
   float: left;
}


/* =================== *
 * ## Form Dropdown ##
 * =================== */

.form-dropdown-button,
.form-dropdownradio-button {
   border-radius: 3px;
   cursor: pointer;
   height: 18px;
   line-height: 18px;
   padding: 0px 10px;
   position: relative;
   width: auto;
}

.form-button-small {
   border-bottom-right-radius: 3px;
}

.form-dropdown-label {
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 20px;
   white-space: nowrap;
}

.form-dropdown-icon {
   width: 18px;
   height: 18px;
   position: absolute;
   right: 0px;
   top: 0px;
}
.form-dropdown-icon:after {
   content: "\25BE";
   font-size: 14px;
   height: 18px;
   left: 50%;
   line-height: 18px;
   position: absolute;
   top: 0;

   transform: translate(-50%, 0)
}
.form-dropdown-button-open .form-dropdown-icon:after { content: "\25B4"; }

.form-dropdown-list,
.form-dropdownradio-list {
   display: none;
   opacity: 1;
   min-width: 100%;
   position: absolute;
}

.form-field[data-list-align] .form-dropdown-list,
.form-field[data-list-align] .form-dropdownradio-list {
   display: flex;
   flex-direction: column;
}

.form-dropdown-list-connector,
.form-dropdownradio-list-connector {
   float: left;
   height: 5px;
   position: relative;
}

.form-dropdown-list-wrapper,
.form-dropdownradio-list-wrapper {
   clear: both;
   float: left;
   position: relative;
   max-width: 230px;
   z-index: 200;
   padding: 10px 10px 5px 10px;
   line-height: 22px;
}

.form-dropdown-list-wrapper .form-input-label,
.form-dropdownradio-list-wrapper .form-input-label {
   padding-right: 10px;
   width: 100%;
}

.form-dropdown-list.right,
.form-dropdownradio-list {
   border-radius: 3px 0px 3px 3px;
}

.form-dropdown-list > .form-list-wrapper,
.form-dropdownradio-list > .form-list-wrapper {
   clear: both;
   float: left;
   position: relative;
   width: auto;
}

.form-dropdown-list > .form-list-wrapper, .form-dropdownradio-list > .form-list-wrapper {
   margin-top: 1px;
}

.form-dropdown-list > .form-value-field,
.form-dropdownradio-list > .form-value-field,
.form-list-wrapper > .form-value-field {
   display: inline-block;
   margin-right: 3px;
   height: 18px;
   line-height: 18px;
   width: auto;
}

.form-dropdown-list > .form-value-field:last-child,
.form-dropdownradio-list > .form-value-field:last-child,
.form-list-wrapper > .form-value-field:last-child {
   margin-right: 0;
}

.form-list-wrapper-small {
   min-width: 0px;
   border-top-right-radius: 0px;
}

.form-list-wrapper > .form-value-field {
   clear: none;
   position: relative;
}

.form-dropdown-action-holder {
   clear: both;
   color: #b0bbb7;
   font-size: 10px;
   min-width: 100px;
}

.form-dropdown-action {
   display: inline-block;
   margin-left: 3px;
   cursor: pointer;
   text-decoration: underline;
}

.form-dropdown-action:first-child {
   margin-left: 0px;
}

.form-dropdown-action:hover {
   text-decoration: none;
}


/* ======================== *
 * ## Form Dropdown Open ##
 * ======================== */

.form-field[data-list-align] .form-dropdown-list,
.form-field[data-list-align] .form-dropdownradio-list {
   display: flex;
   flex-direction: column;
   opacity: 0;
}

.form-field[data-list-align] .form-dropdown-list-connector { order: 0; }
.form-field[data-list-align] .form-dropdown-list-wrapper { order: 1; }

.form-field[data-list-align]:not([data-list-align='']) .form-dropdown-list,
.form-field[data-list-align]:not([data-list-align='']) .form-dropdownradio-list {
   opacity: 1;
}

.form-field[data-list-align] .form-dropdown-button .form-dropdown-icon:after { content: "\25B4"; }

/* order */
.form-field[data-list-align="bottom_left"] .form-dropdown-list-connector,
.form-field[data-list-align="bottom_right"] .form-dropdown-list-connector {
   order: 1;
}

.form-field[data-list-align="bottom_left"] .form-dropdown-list-wrapper,
.form-field[data-list-align="bottom_right"] .form-dropdown-list-wrapper {
   order: 0;
}

/* border radius */
.form-field[data-list-align="bottom_left"] .form-dropdown-button,
.form-field[data-list-align="bottom_right"] .form-dropdown-button {
   border-radius: 0px 0px 3px 3px;
}

.form-field[data-list-align="bottom_left"] .form-dropdown-list-wrapper,
.form-field[data-list-align="bottom_left"] .form-dropdownradio-list-wrapper {
   border-radius: 3px 3px 3px 0px;
}

.form-field[data-list-align="bottom_right"] .form-dropdown-list-wrapper,
.form-field[data-list-align="bottom_right"] .form-dropdownradio-list-wrapper {
   border-radius: 3px 3px 0px 3px;
}

.form-field[data-list-align="top_left"] .form-dropdown-button,
.form-field[data-list-align="top_right"] .form-dropdown-button {
   border-radius: 3px 3px 0px 0px;
}

.form-field[data-list-align="top_left"] .form-dropdown-list-wrapper,
.form-field[data-list-align="top_left"] .form-dropdownradio-list-wrapper {
   border-radius: 0px 3px 3px 3px;
}

.form-field[data-list-align="top_right"] .form-dropdown-list-wrapper,
.form-field[data-list-align="top_right"] .form-dropdownradio-list-wrapper {
   border-radius: 3px 0px 3px 3px;
}

/* vertical position */
.form-field[data-list-align="bottom_left"] .form-dropdown-list,
.form-field[data-list-align="bottom_left"] .form-dropdownradio-list,
.form-field[data-list-align="bottom_right"] .form-dropdown-list,
.form-field[data-list-align="bottom_right"] .form-dropdownradio-list {
   bottom: 100%;
}

.form-field[data-list-align='top_left'] .form-dropdown-list,
.form-field[data-list-align='top_left'] .form-dropdownradio-list,
.form-field[data-list-align='top_right'] .form-dropdown-list,
.form-field[data-list-align='top_right'] .form-dropdownradio-list {
   top: 100%;
}


/* horizontal position */
.form-field[data-list-align='bottom_right'] .form-dropdown-list,
.form-field[data-list-align='bottom_right'] .form-dropdownradio-list,
.form-field[data-list-align='top_right'] .form-dropdown-list,
.form-field[data-list-align='top_right'] .form-dropdownradio-list {
   align-items: end;
   right: 0;
}


/* =============== *
 * ## Form Time ##
 * =============== */

.form-time .form-input {
   width: 52px;
   line-height: 16px;
   height: 16px;
   padding: 0px 2px;
   text-align: center;
   display: inline-block;
   margin: 0px;
   vertical-align: top;
}

.form-range {
   display: flex;
   flex-direction: row;
   gap: 5px;
}

.form-range .form-input {
   flex: 1;
   line-height: 16px;
   height: 18px;
   padding: 0px 2px;
   text-align: center;
   display: inline-block;
   margin: 0px;
   vertical-align: top;
}

.range-slider-container {
   border: 0;
   padding: 1px;
   margin: 0 2px;
   height: 18px;
   /background-color: #28332f;
   width: 80px;
   border-radius: 3px;
   /box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
   display: inline-block;
   vertical-align: top;
}

.range-slider-button {
   width: 10px;
   height: 16px;
   display: inline-block;
   vertical-align: top;
   margin: 0px;
   cursor: pointer;
   position: relative;
}

.range-slider-button:after,
.range-slider-button:before {
   font-size: 8px;
   left: 50%;
   line-height: 10px;
   position: absolute;
   transform: translate(-50%, 0);
}

.range-slider-button:after {
   bottom: 0;
   content: "\25BE";
}

.range-slider-button:before {
   content: "\25B4";
   top: 0;   
}

.range-min-slider-button {
   border-radius: 2px 0px 0px 2px;
}

.range-max-slider-button {
   border-radius: 0px 2px 2px 0px;
}

.password-confirm-label {
   margin: 4px 0px;
}

.range-slider {
   display: inline-block;
   vertical-align: top;
   margin-left: 1px;
   margin-right: 1px;
   position: relative;
   height: 16px;
   cursor: pointer;
   min-width: 5px;
}

.range-slider:after {
   content: ". . .";
   font-weight: bold;
   left: 50%;
   line-height: 12px;
   position: absolute;
   transform: translate(-50%, 0);

   color: #FFF;
}

.search-cancel-holder, .search-save-holder {
   display: inline-block;
   margin-left: 20px;
   margin-top: 5px;
   color: #FFFFFF;
}

.filter-column-break {
   display: none;
   flex-basis: 100%;
   width: 0;
}

select.readonly {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}