
/* ---------------------------------------------
 Icon Picker
------------------------------------------------ */

.icon-picker-container {
  position: absolute;
  width: 375px;
  height: 306px;
  font-size: 14px;
  background-color: #fff;
  overflow: hidden;
  padding: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 99;

  ul {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;

    li {
      display: inline-block;
      margin: 5px;
      float: left;

      a {
        display: block;
        text-decoration: none;
        color: #373737;
        padding: 6px 10px;
        border: 1px solid #eee;

        span {
          width: 20px;
          height: 20px;
          font-size: 20px;
          display: block;
          text-align: center;
        }

        &:hover {
          border-color: #999;
          background: #efefef;
        }
      }
    }
  }
}

.icon-picker-control {
  height: 32px;

  a {
    padding: 5px;
    text-decoration: none;
    line-height: 32px;
    width: 25px;

    span {
      display: inline;
      vertical-align: middle;
    }
  }

  input {
    width: 295px;
  }

  p {
    text-align: center;
    margin: 0;
    padding: 2px;
  }

  select {
    margin: 0 auto;
    display: inline-block;
    width: auto;
  }
}

div.button.icon-picker {
  font-size: 24px;
  height: 45px;
  width: 45px;
  margin: 0;
  padding: 0;
  line-height: 45px;
  text-align: center;
  display: block;
  clear: both;
}

/* Custom Select */
.tie-custom-select {
  position: relative;
  display: inline-block;
  border: 1px solid #bbb;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #ffffff;
  border-radius: 3px;
  width: calc(100% - 230px);
  max-width: 300px;

  @include breakpoint_max(670px){
    width: 100%;
  }

  &:after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid #666;
    margin-top: -3px;
    content: " ";
    position: absolute;
    top: 50%;
    right: 1em;
    z-index: 2;
    pointer-events: none;
    display: none;
  }

  &:hover {
    border-color: #888;
  }

  option {
    font-weight:normal;
  }

  select {
    width: 100%;
    max-width: 100%;
    margin: 0;
    outline: none;
    // padding: .6em .8em .5em .8em;
    padding: 0 .8em 0 .8em;
    box-sizing: border-box;
    height: auto;
    line-height: 33px;
    background: transparent;

    &:focus {
      outline: none;
      box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
      color: #222; /* Match-02 focus color */
    }
  }
}

@supports ( -webkit-appearance: none ) or ( appearance: none )
  or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) {

  .tie-custom-select{
    &:after {
      display: block;
    }

    select {
      padding-right: 2em;
      border: 1px solid transparent;
      appearance: none;

      &:focus {
        border-color: #aaa;
      }
    }
  }
}

@-moz-document url-prefix() {
  .tie-custom-select {
    overflow: hidden;

    &:after {
      display: block;
    }

    select {
      overflow: -moz-hidden-unscrollable;
      padding-right: .4em;
      background: none;
      border: 1px solid transparent;
      min-width: 6em;
      width: 130%;
      min-width: calc(0em);
      width: calc(100% + 2.4em);
    }
  }

  @supports ( mask-type: alpha ) {
    .tie-custom-select {
      overflow: visible;

      select {
        -moz-appearance: none;
        width: 100%;
        padding-right: 2em;
      }
    }
  }
}

.tie-custom-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .tie-custom-select {
    select {
      &::-ms-expand {
        display: none;
      }

      &:focus {
        border-color: #aaa;

        &::-ms-value {
          background: transparent;
          color: #222;
        }
      }

      padding-right: 2em;
      background: none;
      border: 1px solid transparent;
    }

    &:after {
      display: block;
    }
  }
}


/* ---------------------------------------------
 Color Picker
------------------------------------------------ */
.tie-alpha-container {
  box-sizing: padding-box;
  display:none;
  border:1px solid #dfdfdf;
  border-top:none;
  background: #ffffff;
  padding:0 11px 6px;
  width: 233px;
  bottom: -266px;
  position: absolute;
  z-index: 15;

  .rtl &{
    right: 0;
  }

  .transparency {
    height: 24px;
    width: 100%;
    background-color: #ffffff;
    background-image: url(images/transparency-grid.png);
    box-shadow: 0 0 5px rgba(0,0,0,0.4) inset;
    border-radius: 3px;
    padding: 0;
  }

  .ui-slider-handle {
    color: #777;
    background-color: #ffffff;
    text-shadow: 0 1px 0 #FFF;
    text-decoration: none;
    position: absolute;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid #aaa;
    border-radius: 4px;
    opacity: 0.9;
    margin-top: -2px;
    height: 20px;
    cursor: ew-resize;
    font-size: 12px;
    padding: 3px;
  }

  .ui-slider {
    position: relative !important;
    text-align: center !important;
    width: 88% !important;
    border: 0 none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
}

.wp-picker-container .wp-picker-open ~ div.tie-alpha-container {
  display:block;
}

.tie-custom-color-picker{
  position: relative;
  float: left;

  .widget-content &{
    float: none !important;
  }
}

.tie-panel .option-item .wp-picker-container .iris-picker,
.weather-color .wp-picker-container .iris-picker {
  border-bottom: none;
  margin-top: 6px;
}

/* ---------------------------------------------
 malihu jquery custom scrollbar plugin
 * Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
------------------------------------------------ */

/*
1. BASIC STYLE
*/

.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    /* direct pointer events to js */
}

.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
    -ms-touch-action: auto;
    touch-action: auto;
}

.mCustomScrollBox{ /* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr;
}

.mCSB_container{ /* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto;
}

/*
2. VERTICAL SCROLLBAR | y-axis
*/


/* RTL direction/left-side scrollbar */

.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  right: auto;
  top: 0;
  left: 0;
  bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools {
  left: -26px;
}

/* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: auto;
  right: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
    right: -26px;
}


/* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer {
  /* contains the draggable element and dragger rail markup */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
}

.mCSB_scrollTools .mCSB_dragger {
  /* the draggable element */
  cursor: pointer;
  width: 100%;
  height: 30px;
  /* minimum dragger height */
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  /* the dragger element */
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}


/*
3. HORIZONTAL SCROLLBAR | x-axis
*/

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}


/* non-visible scrollbar */

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
}


/* scrollbar position: outside */

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  /* minimum dragger width */
  height: 100%;
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  /* auto-expanded scrollbar */
  margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  /* auto-expanded scrollbar */
  margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}


/*
4. VERTICAL AND HORIZONTAL SCROLLBARS | yx-axis
*/

.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}


/* non-visible horizontal scrollbar */

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}


/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}


/* RTL direction/left-side scrollbar */

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}


/* non-visible scrollbar/RTL direction/left-side scrollbar */

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  /* non-visible scrollbar */
  margin-left: 0;
}


/* non-visible horizontal scrollbar */

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}


/*
5. TRANSITIONS
*/

.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  transition: opacity .2s, background-color .2s;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,

/* auto-expanded scrollbar */

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail {
  transition: .2s ease-out;
}


/*
6.1 THEMES
*/


/* default theme ("light") */

.mCSB_scrollTools {
  opacity: 0.75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)";
}

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background: rgba(0, 0, 0, 0.3);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background: rgba(0, 0, 0, 0.3);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)";
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}


/*scroll bar in dark skin*/
.dark-skin,
.dark-skin .mag-box,
.box-dark-skin {
  .mCSB_scrollTools {
    .mCSB_dragger .mCSB_dragger_bar {
      background: rgba(255, 255, 255, 0.35);
    }
    .mCSB_dragger:hover .mCSB_dragger_bar {
      background: rgba(255, 255, 255, 0.45);
    }
    .mCSB_dragger:active .mCSB_dragger_bar,
    .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
      background: rgba(255, 255, 255, 0.55);
    }
  }
}
