@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

.wocp_wrapper2 {

  *,
  *:after,
  *:before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility
  }

  max-width: 1000px;
  width: 80%;
  margin: 12% auto;
  padding: 0;
  box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
  font-family: 'Open Sans', sans-serif;
  position: relative;

  /* Multi Tab Sidebar */
  .multitab-section {
    display: inline-block;
    /*text-transform: uppercase;*/
    width: 100%;
  }

  .multitab-section {
    background: #fff;
    .multitab-widget-content {
      background-color: #fff;
      > .body {
        padding: 20px;
        padding-bottom: 40px;
        margin: 0;
      }
    }
    p {
      /*display: inline-block;
      background: #fff;
      text-transform: lowercase;
      font-size: 14px;
      padding: 20px;
      margin: 0;*/
    }
  }

  .multitab-widget {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    height: 40px;
  }

  .multitab-widget li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left
  }

  .multitab-widget li a {
    background: #22a1c4;
    color: #fff;
    display: block;
    padding: 15px;
    font-size: 13px;
    text-decoration: none
  }

  .multitab-tab {
    width: 20%;
    text-align: center
  }

  .multitab-section h2,
  .multitab-section h3,
  .multitab-section h4,
  .multitab-section h5,
  .multitab-section h6 {
    display: none;
  }

  .multitab-widget li a.multitab-widget-current {
    padding-bottom: 20px;
    margin-top: -10px;
    background: #fff;
    color: #444;
    text-decoration: none;
    border-top: 5px solid #22a1c4;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: bold;
  }

  .woc-form {
    .field-group {
      text-align: right;
      input {
        display:block;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        border-radius:6px;
        border:0;
        margin-bottom:10px;
        color:#7f8c8d;
        outline:none;
        font-weight:600;
        padding: 7px 10px;
      }

      input:focus {
        background:#fafafa;
      }

      ::-webkit-input-placeholder {
        color: #95a5a6;
        font-weight:300;
      }

      :-moz-placeholder {
        color: #95a5a6;
        font-weight:300;
      }

      ::-moz-placeholder {
        color: #95a5a6;
        font-weight:300;
      }

      :-ms-input-placeholder {
        color: #95a5a6;
        font-weight:300;
      }

      .label {
        display: inline-block;
        font-weight: bold;
        margin-right: 10px;
      }

      .control {
        display: inline-block;
        min-width: 500px;
        max-width: 95vh;
        border: solid 3px #444444;
      }




      select {
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        appearance:none;
        outline:0;
        box-shadow:none;
        border:0!important;
        background: #5c6664;
        background-image: none;
        flex: 1;
        padding: 0 .5em;
        color:#fff;
        cursor:pointer;
        font-size: 1em;
        font-family: 'Open Sans', sans-serif;
        width: 100%;
        max-width: inherit;
      }
      select::-ms-expand {
        display: none;
      }
      .select {
        position: relative;
        /*display: flex;
        width: 20em;
        height: 3em;*/
        line-height: 3;
        background: #5c6664;
        /*overflow: hidden;*/
        border-radius: .25em;
        border: solid 3px;
      }
      .select::after {
        content: '\25BC';
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 1em;
        background: #2b2e2e;
        cursor:pointer;
        pointer-events:none;
        transition:.25s all ease;
      }
      .select:hover::after {
        color: #23b499;
      }
    }
  }


  $blue: #09C8FF;
  $red: #FF4555;
  $green: #39D7B3;
  $yellow: #FFBA4B;

  $text: #677b7a;

  .alert {
    background: white;
    width: 100%;
    display: flex;
    padding: 1rem;
    align-items: center;
    border-radius: .8rem;
    border: 2px solid;
    margin-bottom: 1rem;
    position: relative;
    box-shadow: 0px 5px 12px rgba(black, .04), 0px 12px 25px rgba(black, .07);
    animation: transitionIn 200ms ease forwards;
    transition: all 200ms ease;
    &__message {
      color: $text;
    }
    &__close {
      $size: 1.3rem;
      width: $size;
      height: $size;
      line-height: $size;
      color: $text;
      text-align: center;
      position: absolute;
      top: .5rem;
      right: .5rem;
      cursor: pointer;
      border-radius: .4rem;
      &:hover, &:focus {
        background: rgba($text, .2);
      }
    }
    &__icon {
      margin-right: 1rem;
      $animation-time: 500ms;
      $size: 36px;
      width: $size;
      height: $size;
      animation: fade 500ms linear forwards;
    }
    &__icon-path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      stroke-width: 4px;
      animation: dash 1s ease forwards;
      &--type {
        animation-delay: 300ms;
        animation-duration:5s;
      }
    }
    &--success {
      $color: $green;
      color: $color;
      border-color: $color;
    }
    &--warning {
      $color: $yellow;
      color: $color;
      border-color: $color;
    }
    &--danger {
      $color: $red;
      color: $color;
      border-color: $color;
    }
  }

  @keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }


  .actions {
    /*position: fixed;*/
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    /*display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;*/
    &__title {
      width: 100%;
      text-align: center;
      padding-bottom: .5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: 85%;
    }
    .button {
      /*display: block;*/
      width: 25%;
      min-width: 250px;
    }
    .button {
      font-family: inherit;
      background: transparent;
      color: white;
      background: $text;
      border: 0;
      padding: 1rem;
      cursor: pointer;
      margin: 0;
      &:hover {
        opacity: .8;
      }
      &--success {
        background: $green;
        &:focus, &:active {
          box-shadow: 0px 0px 0px 3px rgba($green, .4);
        }
      }
      &--danger {
        background: $red;
        &:focus, &:active {
          box-shadow: 0px 0px 0px 3px rgba($red, .4);
        }
      }
      &--warning {
        background: $yellow;
        &:focus, &:active {
          box-shadow: 0px 0px 0px 3px rgba($yellow, .4);
        }
      }
      &:focus, &:active {
        outline: 0;
      }
    }
  }

  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}