@dropdownHeight : 35px;
@dropdownRadius : 5px;
@myFontAwesome :"FontAwesome", "Roboto" , "Helvetica" , sans-serif;

.apos-ui .flex-editor{
  display :flex;
}

.editor-container{
  width : 100%;
  background-color: #fff;
  height : 300px;
  max-width : 100%;
  position : relative;

  [data-editor]{
    height : inherit;
    position : relative;
    border-radius : 2px;
  }

  /* For Options styling */
  .options{
    display: flex;
    position: absolute;
    z-index: 100;
    right: 0;
    height: 100%;
    top: 0;

    .search-area{
      display : flex;
    }

    // Searchbar for options
    .my-options{
      border: 20px;
      padding: 15px;
      background-color: #F0F0F0;
      font-size: 14px;
      width: 170px;
      border-radius: 5px;
      height: 49px;
    }

    .lists-inputs{
      margin-bottom : 20px;
      margin-left: 19px;
    }

    .collapse:before{
      content: @fa-var-chevron-right;
      font-family: @myFontAwesome;
      font-size: 10px;
      vertical-align: middle;
      color: #707070;
    }

    .uncollapse:before{
      content:@fa-var-chevron-down;
      font-family: @myFontAwesome;
      font-size: 10px;
      vertical-align: middle;
      color: #707070;
    }

    .press-more-options{
      margin: 5px 0 0 14px;
      border-radius: 5px;
      background-color: #F8F8F8;
      height: 40px;
      text-align: center;
      width: 40px;
      padding-top: 12px;
      cursor: pointer;

      &:hover{
        background-color : rgb(216, 216, 216);
      }

      &:active{
        background-color :rgb(179, 179, 179);
      }

      &::before{
        content: @fa-var-ellipsis-v;
        font-family: @myFontAwesome; 
        font-size: 15px;
      }
    }

    .more-options{
      width : 129px;
      height : auto;
      display : none;
      position : absolute;
      top: 57px;
      right: 38px;
      background-color :white;
      z-index: 101;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.16);
    }


    .copy-options{
      cursor: pointer;
      background-color: #B1D0FF;
      border: none;
      border-radius: 2px;
      margin-top: 12px;
      flex: 1;
      color: #4a4a4a;
      height: 30px;
      width: 30px;

      &:hover{
        background-color: rgb(129, 179, 253);
      }

      &:before{
        content:@fa-var-clipboard;
        font-family: @myFontAwesome;
      }
    }

    .undo-options{
      cursor: pointer;
      background-color: #E9E9E9;
      border: none;
      border-radius: 2px;
      margin-top: 12px;
      flex: 1;
      color: #4a4a4a;
      height: 30px;
      width: 30px;

      &:hover{
        background-color: rgb(187, 187, 187);
      }

      &:before{
        content: @fa-var-undo;
        font-family: @myFontAwesome;
      }
    }

    .delete-options {
      color : #5E5E5E;
      border: none;
      height : 46px;
      font-size : 14px;
      width : 100%;
      background-color : white;
      cursor : pointer;

      &:hover{
        background-color : rgb(233, 233, 233);
      }

      &:before {
        content: @fa-var-remove;
        font-family: @myFontAwesome;
        margin-right: 20px;
        margin-left: -20px;
      }
    }

    .save-options{
      border: none;
      height : 46px;
      color: #5E5E5E;
      font-size : 14px;
      width : 100%;
      background-color : white;
      cursor : pointer;

      &:hover{
        background-color : rgb(233, 233, 233);
      }

      &:before{
        content: @fa-var-save;
        font-family: @myFontAwesome;
        margin-right: 20px;
        margin-left: -25px;
      }
    }

    & input,
    label {
      padding-bottom:10px;
      display: block;
      line-height: 18.66px;
      font-size: 14px;
    }

    & select{
      padding: 5px 20px;
      width: 80%;
      font-size: 12px;
      border-radius: 5px;
      background: #f8f8f8;
      border: none;
      font-size: 15px;
    }

    li{
      padding: 5px;
    }

    .category{
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 19px;
      margin-top: 10px;
      text-transform: capitalize;
      color : #484848;
    }

    .line-category{
      border-top: 1px solid #ECECEC;
      margin-top: 16.5px;
      margin-right: 25px;
      margin-bottom: 13.5px;
    }

    input[type='checkbox'] {
      display: block;
      -webkit-appearance: button;
      border: none;
      background: url(http://www.pixelslip.be/img/check.png) no-repeat 0 0 transparent;
      background-color: #ccc;
      width: 62px;
      height: 27px;
      border-radius: 3px;
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
      cursor: pointer;
      position: relative;
      transition: background-color 1s;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    input[type='checkbox'].error {
      background-color: #FF4C1F;
    }

    input[type='checkbox']:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 45%;
      height: 80%;
      background-color: #fdfdfd;
      margin: 4%;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

      background: rgb(255, 255, 255);
      background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(243, 243, 243, 1)));
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 100%);
      background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 100%);
      background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 100%);
      background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(243, 243, 243, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);

      transition: .5s all;
    }

    input[type='checkbox']:checked {
      background-color: #89F869;
    }

    input[type='checkbox']:checked:after {
      left: 45%;
    }

    /* Range Slider */
    .range-slider__range {
      -webkit-appearance: none;
      width: calc(100% - (73px));
      height: 19px;
      border-radius: 5px;
      border:1px solid #E1E1E1;
      background: #F0F0F0;
      outline: none;
      padding: 0;
      display: inline-block;
      margin: 0;
    }

    .range-slider__range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 23px;
      height: 23px;
      border-radius: 5px;
      background: #484848;
      cursor: pointer;
      transition: background .15s ease-in-out;
    }

    .range-slider__range::-webkit-slider-thumb:hover {
      background: #3a3a3a;
    }

    .range-slider__range:active::-webkit-slider-thumb {
      background: #2e2b2b;
    }

    .range-slider__range::-moz-range-thumb {
      width: 23px;
      height: 23px;
      border: 0;
      border-radius: 5px;
      background: #484848;
      cursor: pointer;
      transition: background .15s ease-in-out;
    }

    .range-slider__range::-moz-range-thumb:hover {
      background: #3a3a3a;
    }

    .range-slider__range:active::-moz-range-thumb {
      background: #2e2b2b;
    }

    .range-slider__range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2e2b2b;
    }

    .range-slider__value {
      display: inline-block;
      position: relative;
      width: 60px;
      color: #fff;
      line-height: 20px;
      text-align: center;
      border-radius: 3px;
      background: #484848;
      padding: 5px 10px;
      margin-left: 8px;
    }

    .range-slider__value:after {
      position: absolute;
      top: 8px;
      left: -7px;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-right: 7px solid #2c3e50;
      border-bottom: 7px solid transparent;
      content: '';
    }

    ::-moz-range-track {
      background: #d7dcdf;
      border: 0;
    }

    input::-moz-focus-inner,
    input::-moz-focus-outer {
      border: 0;
    }
  }

  .button-options{
    background-color: #f8f8f8;
    height: 20px;
    position: relative;
    top: 5px;
    right: 5px;
    font-family: "FontAwesome";
    border-radius: 20px;
    border: none;
    box-shadow: 0 5px 6px 1px #414141;
    &:before{
      content: @fa-var-gear;
    }
  }

  .options-container{
    background-color: white;
    flex: 1;
    overflow: auto;
    display: none;
    padding : 33px 21px 10px 21px;
    max-width: 282px;
  }

  .dropdown{
    width : auto;
    height : @dropdownHeight;
    background-color: white;
    position : absolute;
    z-index : 99;
    box-shadow : 5px 5px 30px #242424;
    display : inline-block;
    text-align : center;
    line-height : @dropdownHeight;
    border-radius : @dropdownRadius;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
  }

  .dropdown:after{
    content: "\f0d7";
    position: absolute;
    right: 6px;
    font-family: "FontAwesome";
    pointer-events: none;
    color: black;
    top: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height :300px;
    border-radius: 5px;
    left: 0;
  }

  .my-input{
    margin: 20px;
    border: 20px;
    padding: 15px;
    background-color: #F0F0F0;
    font-size: 14px;
    width: 170px;
    border-radius: 5px;
    height: 49px;
    font-family: inherit;
  }

  .dropdown-content li {
    color: black;
    padding: 12px 0 12px 22px;
    text-decoration: none;
    display: block;
    text-align: left;
    cursor: pointer;
  }

  .dropdown li:hover {background-color: #ddd;}

  .button-dropdown{
    height : inherit;
    background-color : transparent;
    border : none;
    width : 100%;
    color : black;
    padding : inherit;
  }
}

.show {display: block !important;}

// Override due to APOSCMS problem
.ace_cursor{
  box-sizing: border-box !important;
  border-left: 2px solid !important;
}

.ace_editor {
  position: relative;
  overflow: hidden;
  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
}

.ace_search{
  border : 1px solid #cbcbcb !important;
  margin: 0 !important;
  padding: 4px 6px 0 4px !important;
}

.ace_searchbtn{
  border: 1px solid #cbcbcb !important;
  line-height: inherit !important;
  padding: 0 6px !important;
  margin: 0 !important;
}

.ace_searchbtn.prev, .ace_searchbtn.next {
  padding: 0px 0.7em !important;
  border-radius: 0px;
}

.ace_searchbtn.next:after{
  border-width:0 2px 2px 0 !important;
}

.ace_search_form, .ace_replace_form{
  margin : 0 20px 4px 0 !important;
  line-height: 1.9 !important;
}

.ace_tooltip{
  border : 1px solid gray !important;
  padding : 3px 4px !important;
  box-sizing: border-box !important;
  line-height: normal !important;
  font-style: normal !important;
  font-weight: normal !important;
}

.ace_gutter-cell {
    padding-left: 19px !important;
    padding-right: 6px;
}

.ace_content{
  box-sizing: border-box !important; 
}

.ace_folding-enabled > .ace_gutter-cell{
  padding-right: 13px !important;
}

.ace_fold-widget{
    box-sizing: border-box !important;
    margin: 0 -12px 0 1px !important;
    vertical-align: top !important;
    border: 1px solid transparent !important;
}