@widgetPanelBg: #272828;
@widgetIconColor: #0BD3FE;

@popupPanelBg: #272828;
@popupIconColor: #0BD3FE;

@pageIconBg: #272828;
@pageIconColor: #0BD3FE;
#ve-panel {
  position: fixed;
  padding-left: 0;
  width: 160px;
  height: 100%;
  border: none;
  background: @pageIconBg;
  color: @pageIconColor;
  top: 60px;
  z-index: 10;


  &.Popup {
    background: @popupPanelBg;
    .element-list .element-list-item div {
      color: @popupIconColor;
    }
  }

  &.Widget {
    background: @widgetPanelBg;
    .element-list .element-list-item div {
      color: @widgetIconColor;
    }
  }

  .panel-items {
    ul, li {
      margin: 0;
      padding: 0;
    }

    .panel-item {
      height: 100%;
      position: absolute;
      width: 100%;
      top: 0;
      ul {
        height: 100%;

      }

    }

  }

  .ve_message {
    display: none;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 20px 20px 60px;
    text-align: center;
    top: 100px;
    left: 50%;
    width: 200px;
    z-index: 1300;
    margin-left: -100px;
    background: #91c46b;
    color: #ffffff;
    border-radius: 35px;
    i {
      position: absolute;
      left: 2px;
      font-size: 63px;
      top: -2px;
    }
    &.error {
      background: #EBE4C7;
      border-bottom: 1px solid #DDD2B3;
      color: #938D7C;
    }
  }

  .element-list {

    #hide-panel {
      font-size: 15px;
      cursor: pointer;
      color: #fff;
      padding: 5px;
    }

    height: 100%;
    margin: 5px 0;
    padding-left: 10px;
    .element-list-item div {
      cursor: pointer;
      //color: #fff;
      font-size: 15px;
      line-height: 50px;
      text-align: left;
      &:hover {
        color: #228deb;
      }

      span {
        display: block;
        text-align: left;
        font-size: 1em;
        &.icon {
          font-size: 1em;
        }
      }

    }
  }
  .ve-form-wrapper {
    height: auto;
    width: auto;
    min-width: 730px;
    min-height: 250px;
    padding: 0;
    background: #ffffff;
    z-index: 1002;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    display: none;
    border-radius: 4px;
    .form-header {
      padding: 15px;
      background: #91c46b;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      .form-title {
        margin: 0 0 0 10px;
        color: #ffffff;

      }
      .form-close-icon {
        color: #fff;
        height: 29px;
        line-height: 29px;
        position: absolute;
        right: 10px;
        text-align: center;
        top: 10px;
        width: 29px;
        &:before {
          content: "\f057";
          font: 20px/29px "FontAwesome";
        }
      }
    }
    &.show {
      display: block;
      height: auto !important;
    }
    .loading-indicator {
      height: 100%;
      width: 100%;
      background: #000000;
      opacity: 0.3;
      position: absolute;
      display: none;
      .loading-inner {
        background: none repeat scroll 0 0 #fff;
        margin: -90px auto auto;
        top: 50%;
        width: 200px;
        position: relative;
        .spinner {
          background-image: url("img/ajax-loader-1.gif");
          background-size: cover;
          height: 90px;
          width: auto;
          margin: 0;
        }
      }
    }
    &.loading-content {
      .loading-indicator {
        display: block;
      }
      #ve-element-form {
        opacity: 0.2;
      }
    }

    #ve-element-form {
      .form-content {
        &.ve_row {
          margin: 0;
        }
        overflow: hidden;
        height: auto;
        max-height: 450px;
        input:focus {
          outline: none;
          box-shadow: none;
        }
        input[type=radio], input[type=checkbox]
        {
          border: 1px solid #91c46b;
        }

        input[type=checkbox] {
          border-radius: 4px;

        }
        input[type=text],input[type=number], textarea, select {

          border-radius: 4px;
          border: 1px solid #91c46b;
          color: #877;
          &.small {
            height: 30px;
            width: 40px;
          }
          &.medium {
            height: 35px;
            width: 120px;
          }
          &.long {
            height: 35px;
            width: 200px;
          }
          &.xlong {
            height: 40px;
            width: 300px;
          }

        }
        .ve_input_block {
          margin: 1em 0;
          @import "form-inputs.less";
        }
        .element-form-tabs {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          padding: 0;
          background: #fff;
          .ui-tabs-nav {
            width: 100px;
            padding: 10px;
            float: left;
            height: 100%;
            display: block;
            position: absolute;
            background: #e6e6e5;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            li {
              float: none;
              display: block;
            }
          }
          .ui-tabs-panel {
            margin-left: 120px;
            max-height: 420px;
            overflow-y: auto;
            min-height: 200px;
            label {
              min-width: 140px;
              display: inline-block;
              font-style: italic;
            }
            input[type=text].medium,input[type=number].medium, select.medium, .select2-selection--single {
              border-radius: 2px;
              //border: 2px solid #91c46b;
            }
            input[type=text].medium,input[type=number].medium  {
              min-width: 200px;
            }
            select.medium {
              min-width: 200px;
            }
          }
        }
      }
      .form-control {
        display: none;
        margin-top: 15px;
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 120px;
        input {
          background: #91c46b;
          color: #fff;
          border: none;
          min-width: 80px;
          padding: 5px 10px;
          cursor: pointer;
          &:hover {
            background: #91c46b - #111;
          }
        }

      }
    }
    #ve-element-form.content-loaded {
      .form-control {
        display: block;
      }
    }
  }
}