.tm-pb-option-main-content .tm-pb-option-container {
  float: none;
}

.tm_pb_prompt_modal input,
#tm_pb_select_category,
.tm-pb-custom-color-button {
  margin: 0;
  border: none;
  box-shadow: none;
  background: $form_control_color;
  padding: 10px;
  font-size: 14px;
  color: $form_control_secondary_color;
}

.tm_pb_prompt_modal input:focus,
#tm_pb_select_category:focus,
.tm-pb-custom-color-button:hover {
  box-shadow: none !important;
  outline: none !important;
  background: #E0E5EA;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}


.tm-pb-custom-color-button {
  text-align: center;
  min-width: 279px;
  cursor: pointer;
  padding: 11px;
  display: block;
}

.tm-pb-remove-custom-color-button {
  margin-top: 15px;
}

.tm-pb-choose-custom-color-button {
  span {
    position: relative;
  }

  &:hover span:before {
    opacity: 1;
  }
}

.tm-pb-custom-color-container {
  position: relative;
    .wp-picker-container{
        border: none;
        border-radius: 0;
        background-color: $form_control_color;
        padding: 7px;
            a.wp-color-result{
                height: 34px;
                border-radius: 0;
                box-shadow: none;
                width: 360px;
                    &:after{
                      color: $dark_color;
                      background-color: $form_control_color;
                    }
            }
    }
    .tm-pb-restm-setting {
        display: block !important;
        position: absolute;
        top: 10px;
        right: -35px;
    }
}

.tm-pb-option-container {
  .wp-picker-container{
        border: none;
        border-radius: 0;
        background-color: $form_control_color;
        padding: 7px;
            a.wp-color-result {
              padding: 0 0 0 35px;
              border: none;
              height: 35px;
              margin: 0;
              overflow: hidden;
              border-radius: 0;
              box-shadow: none;
              width: 360px;
              span{
                border-radius: 0 !important;
              }
              &:after {
                color: $dark_color;
                background-color: $form_control_color;
                height: 35px;
                line-height: 35px;
                border: none;
                box-shadow: none;
                font-size: 14px;
                padding: 0 15px;
              }
            }
  }

  .wp-picker-container .iris-picker {
    margin: 15px 0 0;
  }
}

.tm-pb-option-container {
  textarea:focus {
    box-shadow: none !important;
    outline: none !important;
    background: #E0E5EA;
    border: inherit;
    transition: background 0.5s;
  }

  .description {
    max-width: 625px;
    color: $grey_color;
    font-style: normal;
    font-size: 13px;
    line-height: 27px;
    margin-top: 6px;
  }

  select {
    height: 52px;
  }
}

#tm_pb_select_category {
  height: 52px;
}



.tm-pb-options-tab-advanced .tm-pb-option-container input.wp-picker-default {
  display: none;
}

.tm-pb-option-container input {
  &.tm-pb-color-picker-hex {
    height: 34px;
    width: 90px;
    margin-left: 15px !important;
  }

  &[type=range] {
    -webkit-appearance: none;
    background-color: $form_control_color;
    height: 3px;
    width: 280px;
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0 10px 0 0;
    top: -3px;

    &:focus {
      box-shadow: none !important;
      outline: none !important;
    }
  }

  &[type="range"] {
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: $form_button_color;
      width: 30px;
      height: 30px;
      border-radius: 30px;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
    }

    &::-moz-range-track {
      border: inherit;
      background: transparent;
    }

    &::-ms-track {
      border: inherit;
      color: transparent;
      background: transparent;
    }

    &::-ms-fill-lower,
    &::-ms-fill-upper {
      background: transparent;
    }

    &::-ms-tooltip {
      display: none;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 30px;
      background-color: $form_button_color;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
    }

    &::-moz-range-thumb {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 30px;
      background-color: $form_button_color;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
    }

    &::-ms-thumb {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      border: 0;
      background-color: $form_button_color;
      box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
    }


  }
}

.tm_pb_modal_settings_container input[type=checkbox],
.tm_pb_prompt_modal input[type=checkbox] {
  margin-right: 10px;
  float: left;
  margin-top: 0;
  margin-bottom: 2px;
  width: 26px;
  height: 26px;
}

.tm_pb_modal_settings_container input[type=checkbox] {
  float: none;
}

.tm_pb_modal_settings_container input[type=checkbox]:checked:before {
  color: $white_color;
  float: none;
  margin: 2px 0 0 -6px;
}
.tm_pb_modal_settings_container input[type=checkbox]:checked {
  background-color: $form_button_color;
}

.tm_pb_checkboxes_wrapper{
  label{
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    line-height: 20px;
  }
}

.tm-pb-option-container {
  .mce-toolbar .mce-ico {
    color: #8E969E;
  }

  div.mce-toolbar-grp,
  .html-active .switch-html,
  .tmce-active .switch-tmce {
    background: $form_control_color;
    border: none;
  }

  .wp-switch-editor {
    background: #E0E5EA;
    border-radius: 4px 4px 0 0;
    padding: 10px 20px;
    border: none;
  }

  .mce-toolbar .mce-btn-group .mce-btn {
    &:hover {
      box-shadow: none;
      border: none;
      background-color: $form_control_color;
      color: #6D7680;
      outline: none;

      .mce-ico {
        box-shadow: none;
        border: none;
        background-color: $form_control_color;
        color: #6D7680;
        outline: none;
      }
    }
    outline: none;
    border: none;
  }

  div.mce-statusbar {
    height: 0;
    opacity: 0;
  }

  span.wp-media-buttons-icon:before {
    color: $white_color;
  }

  .wp-media-buttons span.wp-media-buttons-icon {
    line-height: 28px;
  }

  .wp-editor-container {
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border-color: #E0E5EA;
  }

  textarea {
    height: 180px;
    width: 574px;
    padding: 30px;
  }

  .wp-editor-wrap textarea:focus {
    background: $form_control_color;
  }

  .wp-media-buttons .button {
    line-height: 40px;
    margin-right: 5px !important;
  }

  .html-active .wp-editor-container {
    border: none;
  }

  .tmce-active .wp-switch-editor {
    border-left: 1px solid #E0E5EA;
    border-right: 1px solid #E0E5EA;
    border-top: 1px solid #E0E5EA;
  }

  .quicktags-toolbar {
    .button {
      &.button-small {
        height: 20px !important;
        padding: 0 5px !important;
        margin: 2px !important;
        line-height: 12px !important;
      }
      background-color: #E0E5EA !important;
      color: $form_control_secondary_color !important;
      font-weight: 400 !important;
    }
    background-color: $form_control_color !important;
  }

  .regular-text {
    width: 628px;
  }
}
/* tinymce */
.tm-pb-options-tab-custom_css .regular-text {
  width: 763px;
}

.tm_pb_custom_css_regular .tm-pb-option-container {

}

.tm-pb-option-container {
  select,
  .tm-pb-font-select {
    width: 350px;
  }
}

#tm_pb_select_category {
  width: 350px;
}

.tm-pb-option-container {
  input.tm-pb-upload-field {
    width: 462px;
    &.tm_pb_video_overlay {
      width: 202px;
    }
  }

  .wp-color-result {
    vertical-align: middle;
  }

  .wp-picker-container input.button.button-small.wp-picker-default {
    display: none;
  }

  .button {
    margin: 0 !important;
  }

  .wp-picker-input-wrap .button {
    margin-left: 15px !important;
  }
}

.tm-pb-option .tm-pb-upload-button.button {
  margin-left: 20px !important;
}

.tm-pb-options-tab-custom_css .tm-pb-option-container textarea::-webkit-scrollbar,
ul.tm_font_icon::-webkit-scrollbar {
  width: 5px !important;
}

.tm-pb-options-tab-custom_css .tm-pb-option-container textarea {
  &::-webkit-scrollbar-thumb {
    background: $primary_color !important;
  }

  &:focus::-webkit-scrollbar-thumb {
    background: #44baff !important;
  }
}

#tm-pb-preview-screen::-webkit-scrollbar-track,
.tm-pb-options-tabs::-webkit-scrollbar-track,
.tm-pb-column-layouts::-webkit-scrollbar-track,
.tm-pb-options-tab-custom_css .tm-pb-option-container textarea::-webkit-scrollbar-track,
.tm_modal_on_top .tm_pb_prompt_modal::-webkit-scrollbar-track,
.tm-pb-main-settings::-webkit-scrollbar-track,
ul.tm_font_icon::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3) !important;
  width: 20px !important;
}

.tm-pb-options-tabs::-webkit-scrollbar-thumb,
.tm-pb-column-layouts::-webkit-scrollbar-thumb,
.tm-pb-options-tab-custom_css .tm-pb-option-container textarea::-webkit-scrollbar-thumb,
.tm_modal_on_top .tm_pb_prompt_modal::-webkit-scrollbar-thumb,
.tm-pb-main-settings::-webkit-scrollbar-thumb,
ul.tm_font_icon::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #cfd8dc;
}

#tm-pb-preview-screen::-webkit-thumb:window-inactive,
.tm-pb-options-tabs::-webkit-thumb:window-inactive,
.tm-pb-column-layouts::-webkit-thumb:window-inactive,
.tm-pb-options-tab-custom_css .tm-pb-option-container textarea::-webkit-thumb:window-inactive,
.tm_modal_on_top .tm_pb_prompt_modal::-webkit-thumb:window-inactive,
.tm-pb-main-settings::-webkit-scrollbar-thumb:window-inactive,
ul.tm_font_icon::-webkit-scrollbar-thumb:window-inactive {
  background: $white_color !important;
}

.tm-pb-option-container {
  input.wp-picker-default,
  .button {
    -webkit-transition-property: background;
    transition-property: background;
    -webkit-transition-duration: 0.05s;
    transition-duration: 0.05s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    font-size: 12px !important;
    margin-left: 20px;
    background: $form_control_secondary_color !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: $white_color !important;
    height: 40px !important;
    padding: 0 20px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
  }
}

.tm_pb_content_option {
  clear: both;
  position: relative;
}

.tm-pb-option {
  padding: 15px 30px;
  margin-bottom: 10px;
  border-bottom: 1px solid $border-color;
  &:first-child {
    padding-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}

.tm-pb-option-container {
  display: block;
  input,
  textarea,
  select {
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 11px 15px;
    font-size: 14px;
    background-color: $form_control_color;
    color: $dark_color;
    border-radius: $border-radius-small;
  }
  input:focus,
  select:focus {
    box-shadow: none !important;
    outline: none !important;
    background: #E0E5EA;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
  }
}

.tm-pb-options-tab .tm-pb-option:last-child,
.tm-pb-main-settings-advanced .tm-pb-option:last-child,
.tm-pb-options-toggle-enabled .tm-pb-option-toggle-content .tm-pb-option:last-child {
  border-bottom: none;
}

.tm-pb-option > label,
.tm_modal_on_top .tm_pb_prompt_modal > label {
  font-size: 16px;
  font-weight: 600;
  display: block;
  color: $dark_color;
  margin-bottom: 15px;
}

.wp-picker-container{
  border-radius: 0;
}

.tm-pb-sortable-options {
  margin: 0;
  padding: 0 35px;
    li {
      border-radius: $border-radius-small;
      padding: 15px;
      background: $white_color;
      color: $dark_color;
      margin-bottom: 20px;
      cursor: move;
      position: relative;
      text-align: center;
      font-size: 14px;
      min-height: 48px;
      box-shadow: 3px 3px 24px rgba(0, 0, 0, 0.1);
         a {
          font-size: 16px;
          text-decoration: none;
          position: absolute;
            &:before{
              color: $grey_color;
              vertical-align: middle;
              text-align: center;
              line-height: 20px;
            }
            &:hover{
                &:before{
                  color: $dark_color;
                }
            }
            &:focus{
              box-shadow: none;
            }
        }
        .tm-sortable-title{
          font-size: 16px;
          font-weight: 600;
        }
        .tm-pb-advanced-setting-remove{
            position: absolute;
            top: 15px;
            left: 18px;
            text-decoration: none;
            font-size: 14px;
            &:before{
              color: $module_bg_color;
            }
        }
        .tm-pb-advanced-setting-options{
            position: absolute;
            top: 15px;
            right: 18px;
            text-decoration: none;
            color: #8E969E;
            font-size: 14px;
        }
        .tm-pb-advanced-setting-clone{
            position: absolute;
            top: 15px;
            right: 50px;
            text-decoration: none;
            color: #8E969E;
            font-size: 14px;
        }
    }
}

ul.tm_font_icon {
  max-width: 635px;
  overflow-y: scroll;
  max-height: 200px;
}

.tm_font_icon {
  li {
    font-size: 14px;
    float: left;
    margin: 1px;
    background: $form_control_color;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    @include transition( all 0.2s ease-in-out );
      &:before{
        width: 15px;
        height: 15px;
        display: block;
        @include fa-icon();
        content: attr( data-show );
      }
  }
  .tm_active {
    color: $white_color;
    background-color: $form_button_color;
  }
}

.tm_builder_font_styles {
  display: inline;
  position: relative;
  margin-left: 15px;
}

.tm_builder_font_style {
  &.tm_builder_bold_font{
    button{
      &:before{
        color: $dark_color;
        font-size: 20px;
        font-weight: 800;
        content: 'B';
      }
    }
  }
  &.tm_builder_italic_font{
    button{
      &:before{
        color: $dark_color;
        font-style: italic;
        font-size: 20px;
        font-weight: 700;
        content: 'I';
      }
    }
  }
  &.tm_builder_uppercase_font{
    button{
      &:before{
        color: $dark_color;
        font-size: 20px;
        font-weight: 700;
        content: 'A';
      }
    }
  }
  &.tm_builder_underline_font{
    button{
      &:before{
        color: $dark_color;
        font-size: 20px;
        font-weight: 700;
        content: 'U';
        text-decoration: underline;
      }
    }
  }
  &.mce-widget {
    cursor: pointer;
    margin-right: 6px;
    display: inline-block;

    &.tm_font_style_active{
      button {
        background-color: $form_button_color;
        color: $white_color;
      }
    }

    button {
      cursor: pointer;
      background-image: none;
      background-color: $form_control_color;
      border: none;
      padding: 12px 16px;
      transition: all 0.3s;
      &:focus {
        box-shadow: none !important;
        outline: none !important;
      }
    }
  }

  .tm_builder_font_style.mce-widget:last-child {
    margin-right: 0;
  }
}