@green: #81c868;
@red: #f05050;
@yellow: #ffbd4a;
.m-5 {
  margin: 5px
}

.m-10 {
  margin: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-30 {
  margin: 30px !important;
}

.m-40 {
  margin: 40px !important;
}

.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-40 {
  padding: 40px !important;
}

.m-l-5 {
  margin-left: 5px !important;
}

.m-l-10 {
  margin-left: 10px !important;
}

.m-l-20 {
  margin-left: 20px !important;
}

.m-l-30 {
  margin-left: 30px !important;
}

.m-l-40 {
  margin-left: 40px !important;
}

.m-r-5 {
  margin-right: 5px !important;
}

.m-r-10 {
  margin-right: 10px !important;
}

.m-r-20 {
  margin-right: 20px !important;
}

.m-r-30 {
  margin-right: 30px !important;
}

.m-r-40 {
  margin-right: 40px !important;
}

.m-t-2 {
  margin-top: 2px !important;
}

.m-t-5 {
  margin-top: 5px !important;
}

.m-t-10 {
  margin-top: 10px !important;
}

.m-t-20 {
  margin-top: 20px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.m-t-40 {
  margin-top: 40px !important;
}

.m-b-5 {
  margin-bottom: 5px !important;
}

.m-b-10 {
  margin-bottom: 10px !important;
}

.m-b-20 {
  margin-bottom: 20px !important;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.m-b-40 {
  margin-bottom: 40px !important;
}

.p-l-5 {
  padding-left: 5px !important;
}

.p-l-10 {
  padding-left: 10px !important;
}

.p-l-15 {
  padding-left: 15px !important;
}

.p-l-20 {
  padding-left: 20px !important;
}

.p-l-30 {
  padding-left: 30px !important;
}

.p-l-40 {
  padding-left: 40px !important;
}

.p-r-5 {
  padding-right: 5px !important;
}

.p-r-10 {
  padding-right: 10px !important;
}

.p-r-15 {
  padding-right: 15px !important;
}

.p-r-20 {
  padding-right: 20px !important;
}

.p-r-30 {
  padding-right: 30px !important;
}

.p-r-40 {
  padding-right: 40px !important;
}

.p-t-5 {
  padding-top: 5px !important;
}

.p-t-10 {
  padding-top: 10px !important;
}

.p-t-20 {
  padding-top: 20px !important;
}

.p-t-30 {
  padding-top: 30px !important;
}

.p-t-40 {
  padding-top: 40px !important;
}

.p-b-5 {
  padding-bottom: 5px !important;
}

.p-b-10 {
  padding-bottom: 10px !important;
}

.p-b-20 {
  padding-bottom: 20px !important;
}

.p-b-30 {
  padding-bottom: 30px !important;
}

.p-b-40 {
  padding-bottom: 40px !important;
}

.font-bold {
  font-weight: bold;
}

.inline {
  display: inline-block;
}

.text-left {
  text-align: left
}

.text-right {
  text-align: right
}

.text-center {
  text-align: center
}

.width-0 {
  width: 0px
}

.width-25 {
  width: 25px
}

.width-50 {
  width: 50px
}

.width-100 {
  width: 100px
}

.width-150 {
  width: 150px
}

.no-wrap {
  white-space: nowrap;
}

.modal {
  z-index: 200000;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  .alert-message {
    max-height: 400px;
    overflow: auto;
  }
  .modal-dialog {
    padding: 15px;
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
    border-radius: 0px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    width: 600px;
    margin: 20px auto;
    &.large {
      width: 800px;
    }
    .modal-close {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 30px;
      height: 30px;
      color: #666;
      border-radius: 30px;
      background-color: #fff;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.34);
      cursor: pointer;
      font-family: 'Arial, Helvetica, sans-serif';
      font-size: 20px;
      line-height: 30px;
      font-weight: 700;
      &:before {
        content: "\D7";
      }
    }
    @media only screen and (max-width: @width-md) {
      width: 500px;
      &.large {
        width: 90%;
      }
    }
    @media only screen and (max-width: @width-sm) {
      width: 90%;
      &.large {
        width: 90%;
      }
    }
  }
}

.btn {
  border: 0px;
  padding: 5px 10px;
  background-color: #5fbeaa;
  border-radius: 2px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  outline: none;
  &.disabled,
  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  &:hover {
    text-decoration: none;
    color: #fff;
  }
  &:focus,
  &:active {
    outline: none;
    border: 0px;
  }
  &.large {
    padding: 7px 10px;
    font-size: 110%;
  }
  &.red {
    background-color: @red!important;
  }
  &.yellow {
    background-color: @yellow!important;
  }
  &.green {
    background-color: @green!important;
  }
  i {
    margin-right: 5px;
  }
}

.tab-header {
  div {
    padding: 12px 25px;
    color: #666666;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    &.active {
      color: @accent;
      background-color: #fff;
    }
  }
}

.tab-body {
  background-color: #fff;
  padding: 0px 0px;
}

.panel-body {
  background-color: #fff;
  padding: 0px 10px;
}

table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: separate;
  color: @text-color;
  thead {
    tr {
      background-color: #fff;
      th {
        text-align: left;
        padding: 10px 10px;
        font-weight: bold;
        border-bottom: 1px solid @border-color;
        font-size: 110%;
        color: @text-color;
      }
    }
  }
  tbody {
    tr {
      background-color: #fff;
      td {
        padding: 10px 10px;
        color: @text-color;
        font-size: 120%;
        
        padding: 16px 10px;
        .btn {
          font-size: 80%;
        }
      }
      &.header {
        background-color: #f2f3f7;
        td {
          padding: 12px 10px;
        }
      }
      &.child {
        td {
          padding: 12px 10px;
        }
      }
    }
  }
  &.grid {
    tbody {
      td {
        border-bottom: 1px solid @border-color;
      }
    }
  }
  &.bold {
    thead {
      tr {
        background-color: inherit;
        th {
          font-weight: bold;
          text-transform: uppercase;
          font-size: 11px;
          color: #666;
        }
      }
    }
    tbody {
      td {
        font-size: 115%;
        //font-weight: 600;
        padding: 10px 10px;
        .btn {
          font-size: 80%;
        }
      }
    }
  }
}

.shadow {
  -webkit-box-shadow: 0px 0px 8px 2px #333333;
  -moz-box-shadow: 0px 0px 8px 2px #333333;
  box-shadow: 0px 0px 8px 2px #333333;
}

.height-transition-hidden {
  -webkit-transition: max-height 0s ease-in;
  -moz-transition: max-height 0s ease-in;
  -o-transition: max-height 0s ease-in;
  transition: max-height 0s ease-in;
  overflow: hidden;
  max-height: 0;
  &.visible {
    max-height: 1024px;
  }
}


/* Loading spinner */

.flex-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 20px auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}


/* drop down menu */

.flex-icon-menu {
  position: relative;
  cursor: pointer;
  &>span {}
  &>div {
    position: absolute;
    right: 0px;
    z-index: 100;
    transition: opacity 0.3s, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
    ul {
      text-align: left;
      background-color: white;
      border: 1px solid @accent;
      margin: 0px;
      margin-top: 5px;
      li {
        display: block;
        margin: 0;
        padding: 5px 10px;
        padding-right: 40px;
        cursor: pointer;
        a {
          white-space: nowrap;
          color: #333;
          font-size: 14px;
        }
        i {
          text-align: center;
          margin-right: 5px;
          width: 20px;
        }
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
  &:hover {
    &>div {
      visibility: visible;
      opacity: 1;
    }
  }
}


/* Left border */

.left-border-green {
  border-left: 3px solid @green;
}

.left-border-red {
  border-left: 3px solid @red;
}

@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0.0)
  }
  50% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.cursor-pointer {
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0px;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.relative {
  position: relative;
}

.absolute-top-right {
  position: absolute;
  right: 0px;
  top: 0px;
}

.inline-block {
  display: inline-block;
}

.width-50-percent {
  width: 50%;
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

img.border {
  border: 1px solid #eee;
}

img.max100 {
  max-width: 100%;
}