/**
 * WP Satchel HTML helper styles
 * (Philipp Stracker for WP Satchel)
 *
 * This file is included by the WDev()->html->element() function.
 *
 * @since 1.1.0
 */
/***
 * GENERAL INPUT FIELDS *
 ***/
#wpwrap,
body {
  /* Styles used to display input elements inside Widget Admin */
  /* horizontal separator */
  /* vertical separator */
}
#wpwrap .memberdash-input-wrapper.memberdash-loading > *,
body .memberdash-input-wrapper.memberdash-loading > * {
  opacity: 0.25;
  cursor: default;
}
#wpwrap .memberdash-input-wrapper.memberdash-loading .memberdash-field-input,
body .memberdash-input-wrapper.memberdash-loading .memberdash-field-input {
  background-color: #E5E5E5;
}
#wpwrap .memberdash-input-wrapper.memberdash-loading:after,
body .memberdash-input-wrapper.memberdash-loading:after {
  top: 5px;
  /* compensate for the field margin */
  bottom: 5px;
  /* compensate for the field margin */
  background-color: transparent;
}
#wpwrap .memberdash-field-description,
body .memberdash-field-description {
  display: block;
  color: rgb(107, 114, 128);
  font-weight: 300;
  font-size: .875rem;
  margin: .5rem 0;
}
#wpwrap .memberdash-field-input.memberdash-text,
body .memberdash-field-input.memberdash-text,
#wpwrap .memberdash-field-input.memberdash-number,
body .memberdash-field-input.memberdash-number,
#wpwrap .memberdash-field-input.memberdash-password,
body .memberdash-field-input.memberdash-password,
#wpwrap .memberdash-field-input.memberdash-email,
body .memberdash-field-input.memberdash-email {
  font-size: .875rem;
  line-height: 1.25rem;
  padding: .25rem .75rem .25rem .75rem;
  border-radius: .375rem;
  border: 1px solid rgb(209, 213, 219);
  height: 38px;
  margin: 0;
}
#wpwrap .memberdash-field-input.memberdash-field-select,
body .memberdash-field-input.memberdash-field-select {
  font-size: .875rem;
  line-height: 1.25rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: .375rem;
  border: 1px solid rgb(209, 213, 219);
  height: auto;
  min-width: 275px;
}
#wpwrap .memberdash-field-input.memberdash-field-select.ms-w-full + .select2,
body .memberdash-field-input.memberdash-field-select.ms-w-full + .select2 {
  min-width: 100%;
}
#wpwrap .memberdash-field-input.memberdash-field-select,
body .memberdash-field-input.memberdash-field-select {

}
#wpwrap .select2-container--default .select2-selection--single .select2-selection__arrow,
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 6px;
  right: 5px;
}
#wpwrap .memberdash-field-input.memberdash-field-select:focus,
body .memberdash-field-input.memberdash-field-select:focus {
  outline: none;
}
#wpwrap .memberdash-field-input input,
body .memberdash-field-input input {
  font-size: .875rem;
  line-height: 1.25rem;
  padding: .5rem .75rem;
  border-radius: .375rem;
  border: 1px solid rgb(209, 213, 219);
}
#wpwrap .memberdash-field-input input:focus,
body .memberdash-field-input input:focus {
  border-color: rgb(17, 24, 39);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(17, 24, 39) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
#wpwrap .memberdash-field-input,
#wpwrap .memberdash-field-button,
body .memberdash-field-input,
body .memberdash-field-button {
  vertical-align: top;
  display: inline-block;
  position: relative;
}
#wpwrap .memberdash-field-input.memberdash-hidden,
body .memberdash-field-input.memberdash-hidden {
  display: none !important;
}
#wpwrap .memberdash-field-input.memberdash-file.memberdash-input-upload,
body .memberdash-field-input.memberdash-file.memberdash-input-upload {
  margin-left: -1px;
}
#wpwrap .memberdash-field-label a,
body .memberdash-field-label a {
  color: #4F46E4;
  display: block;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 400;
}
#wpwrap .memberdash-field-input.button,
#wpwrap .memberdash-field-input.button-primary,
#wpwrap .memberdash-field-button,
body .memberdash-field-input.button,
body .memberdash-field-input.button-primary,
body .memberdash-field-button {
  margin-right: 8px;
}
#wpwrap .memberdash-field-label,
body .memberdash-field-label {
  display: block;
  clear: both;
  margin: 2px 0 5px 0;
  font-style: normal;
  color: rgb(55, 65, 81);
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.25rem;
}
#wpwrap .memberdash-field-label.inline-label,
body .memberdash-field-label.inline-label {
  display: inline-block;
  margin: 6px 10px 6px 0;
}
#wpwrap h3.memberdash-field-label,
body h3.memberdash-field-label {
  margin-bottom: 10px;
}
#wpwrap .memberdash-label-before,
#wpwrap .memberdash-label-after,
body .memberdash-label-before,
body .memberdash-label-after {
  display: inline-block;
  margin: 6px 10px;
  line-height: 26px;
  vertical-align: top;
}
#wpwrap .memberdash-label-before .memberdash-field-input,
#wpwrap .memberdash-label-before .memberdash-field-button,
#wpwrap .memberdash-label-after .memberdash-field-input,
#wpwrap .memberdash-label-after .memberdash-field-button,
body .memberdash-label-before .memberdash-field-input,
body .memberdash-label-before .memberdash-field-button,
body .memberdash-label-after .memberdash-field-input,
body .memberdash-label-after .memberdash-field-button {
  margin-top: 0;
  margin-bottom: 0;
}
#wpwrap .memberdash-label-before,
body .memberdash-label-before {
  margin-left: 0;
}
#wpwrap .widget-content .memberdash-wrapper,
body .widget-content .memberdash-wrapper {
  display: block;
  margin: 1em 0;
}
#wpwrap .widget-content .memberdash-wrapper .memberdash-field-label,
body .widget-content .memberdash-wrapper .memberdash-field-label {
  margin: 0;
}
#wpwrap .widget-content .memberdash-wrapper .memberdash-field-input,
#wpwrap .widget-content .memberdash-wrapper .memberdash-field-button,
body .widget-content .memberdash-wrapper .memberdash-field-input,
body .widget-content .memberdash-wrapper .memberdash-field-button {
  margin-top: 4px;
  margin-bottom: 0;
}
#wpwrap .memberdash-separator,
body .memberdash-separator {
  border-bottom: 1px solid #E5E5E5;
  margin: 15px 0;
}
#wpwrap .memberdash-divider,
body .memberdash-divider {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  border-right: 1px solid #E5E5E5;
}
#wpwrap .memberdash-fa,
body .memberdash-fa {
  font-family: Fontawesome440 !important;
}
#wpwrap .no-click,
body .no-click {
  cursor: default;
}

/***
 * HTML BLOCK (read only) *
 ***/
#wpwrap .memberdash-html-text-wrapper label,
body .memberdash-html-text-wrapper label {
  cursor: default;
}

/***
 * CHECKBOX *
 ***/
#wpwrap .memberdash-field-checkbox,
body .memberdash-field-checkbox {
  margin: 6px 4px 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
#wpwrap .memberdash-checkbox-wrapper,
body .memberdash-checkbox-wrapper {
  margin: 6px auto;
  position: relative;
  display: inline-block;
  line-height: 28px;
}
#wpwrap .memberdash-checkbox-wrapper .memberdash-checkbox-caption,
body .memberdash-checkbox-wrapper .memberdash-checkbox-caption {
  padding-left: 24px;
  font-weight: 500;
}
#wpwrap .memberdash-checkbox-list,
body .memberdash-checkbox-list {
  border: 1px solid #e5e5e5;
  padding: 0 5px;
  background: #FFFFFF;
  max-height: 320px;
  overflow: auto;
}
#wpwrap .memberdash-checkbox-list .memberdash-checkbox-wrapper,
body .memberdash-checkbox-list .memberdash-checkbox-wrapper {
  margin: 0;
}
#wpwrap .memberdash-checkbox-list .memberdash-no-checkbox .memberdash-checkbox-caption,
body .memberdash-checkbox-list .memberdash-no-checkbox .memberdash-checkbox-caption {
  padding: 0;
}
#wpwrap .memberdash-checkbox-list .memberdash-group,
body .memberdash-checkbox-list .memberdash-group {
  margin-bottom: 10px;
}
#wpwrap .memberdash-checkbox-list .memberdash-group .memberdash-parent .memberdash-checkbox-caption,
body .memberdash-checkbox-list .memberdash-group .memberdash-parent .memberdash-checkbox-caption {
  font-weight: 600;
}
#wpwrap .memberdash-checkbox-list .memberdash-group .memberdash-child,
body .memberdash-checkbox-list .memberdash-group .memberdash-child {
  margin-left: 24px;
}

/***
 * RADIO SLIDER *
 ***/
#wpwrap .memberdash-radio-slider-wrapper,
body .memberdash-radio-slider-wrapper {
  clear: both;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-field-label,
body .memberdash-radio-slider-wrapper .memberdash-field-label {
  cursor: default;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-label-before,
#wpwrap .memberdash-radio-slider-wrapper .memberdash-label-after,
body .memberdash-radio-slider-wrapper .memberdash-label-before,
body .memberdash-radio-slider-wrapper .memberdash-label-after {
  margin-top: 3px;
  margin-bottom: 3px;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
  margin: 3px 0;
  opacity: .8;
  overflow: visible;
  cursor: pointer;
  border-radius: 1rem;
  background: #E5E7EB;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider:hover,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider:hover {
  opacity: 1;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly], #wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly]:hover,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly],
body .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly]:hover {
  opacity: 0.5;
  cursor: default;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly] .memberdash-toggle, #wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly]:hover .memberdash-toggle,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly] .memberdash-toggle,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider[readonly]:hover .memberdash-toggle {
  opacity: .7;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider.on,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider.on {
    background: #6366F1;
    /*box-shadow: 1px 1px 1px 1px #b3b3b3;*/
  /* rgb( 107, 187, 26 ) */
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider.on .memberdash-toggle,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider.on .memberdash-toggle {
  left: 22px;
}
#wpwrap .memberdash-radio-input-wrapper input[type=checkbox], #wpwrap .memberdash-radio-input-wrapper input[type=radio],
body .memberdash-radio-input-wrapper input[type=checkbox], body .memberdash-radio-input-wrapper input[type=radio] {
  border-width: 3px;
}
#wpwrap .memberdash-radio-input-wrapper input[type=checkbox]:checked,
#wpwrap .memberdash-radio-input-wrapper input[type=radio]:checked,
body .memberdash-radio-input-wrapper input[type=checkbox]:checked,
body .memberdash-radio-input-wrapper input[type=radio]:checked {
  border-color: #808CF8;
  border-width: 5px;
}
#wpwrap .memberdash-radio-input-wrapper input[type=checkbox]:checked:before,
#wpwrap .memberdash-radio-input-wrapper input[type=radio]:checked:before,
body .memberdash-radio-input-wrapper input[type=checkbox]:checked:before,
body .memberdash-radio-input-wrapper input[type=radio]:checked:before {
  display: none;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-radio-slider .memberdash-toggle,
body .memberdash-radio-slider-wrapper .memberdash-radio-slider .memberdash-toggle {
  position: absolute;
  display: inline-block;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 21px;
  background: #fff;
  transition: all .2s ease-in-out;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-label-before,
body .memberdash-radio-slider-wrapper .memberdash-label-before {
  color: #000;
}
#wpwrap .memberdash-radio-slider-wrapper .memberdash-label-after,
body .memberdash-radio-slider-wrapper .memberdash-label-after {
  color: #CCC;
}
#wpwrap .memberdash-radio-slider-wrapper.on .memberdash-label-before,
body .memberdash-radio-slider-wrapper.on .memberdash-label-before {
  color: #CCC;
}
#wpwrap .memberdash-radio-slider-wrapper.on .memberdash-label-after,
body .memberdash-radio-slider-wrapper.on .memberdash-label-after {
  color: #059669;
  /* rgb( 51, 153, 0 ) */
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-radio-slider,
body .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-radio-slider {
  background: #059669;
  /* rgb( 107, 187, 26 ) */
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-label-before,
body .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-label-before {
  color: #059669;
  /* rgb( 51, 153, 0 ) */
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-label-after,
body .memberdash-radio-slider-wrapper.reverse-wrapper .memberdash-label-after {
  color: #CCC;
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-radio-slider,
body .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-radio-slider {
  background: #B0B0B0;
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-label-before,
body .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-label-before {
  color: #CCC;
}
#wpwrap .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-label-after,
body .memberdash-radio-slider-wrapper.reverse-wrapper.on .memberdash-label-after {
  color: #000;
}
#wpwrap .memberdash-radio-slider-wrapper.inp-before-wrapper,
body .memberdash-radio-slider-wrapper.inp-before-wrapper {
  position: relative;
  display: block;
}
#wpwrap .memberdash-radio-slider-wrapper.inp-before-wrapper .memberdash-field-label,
body .memberdash-radio-slider-wrapper.inp-before-wrapper .memberdash-field-label {
  margin-left: 50px;
}
#wpwrap .memberdash-radio-slider-wrapper.inp-before-wrapper .memberdash-radio-slider,
body .memberdash-radio-slider-wrapper.inp-before-wrapper .memberdash-radio-slider {
  position: absolute;
  left: 0;
  top: 0;
}

/***
 * HTML TABLE *
 ***/
.memberdash-html-table {
  width: 100%;
  clear: both;
  margin: 20px 0;
  background: #FFF;
  border: 1px solid #e5e5e5;
  border-spacing: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
}
.memberdash-html-table td,
.memberdash-html-table th {
  line-height: 24px;
  padding: 8px 10px;
  vertical-align: top;
  font-size: 13px;
  overflow: hidden;
  color: #555;
}
.memberdash-html-table thead tr th {
  border-bottom: 1px solid #e1e1e1;
  color: #333;
}

/* Select2 */

#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted,
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted[aria-selected=true],
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted,
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted[aria-selected=true],
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted,
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted[aria-selected=true],
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted,
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option--highlighted[aria-selected=true] {
  background-color: #808CF8;
}
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option[aria-selected=true],
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option[aria-selected=true] {
  color: #808CF8;
}
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option[aria-selected=true]:hover,
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option[aria-selected=true]:hover,
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option.select2-results__option--highlighted,
body .select2-container .select2-dropdown.memberdash-select2 .select2-results .select2-results__option.select2-results__option--highlighted {
  color: #fff;
}
#wpwrap .select2-container .select2-dropdown.memberdash-select2,
body .select2-container .select2-dropdown.memberdash-select2 {
  box-shadow: 0 0 0 1px #808CF8 inset;
}
#wpwrap .select2-container .select2-dropdown.memberdash-select2 .select2-search .select2-search__field,
body .select2-container .select2-dropdown.memberdash-select2 .select2-search .select2-search__field {
  border-color: #808CF8;
}