WordPress

.wrap{
  max-width:1200px;
  margin:auto;
}

.flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}


.full-width{
  @extend .clearfix;
}

.float-left{
  float: left !important;
}

.float-right{
  float: right !important;
}

.hide{
  display: none;
}

.full-bg{
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow:hidden;
  position: relative;
}

@-webkit-keyframes infinite-rotate{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}
@keyframes infinite-rotate{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}

.header{
  height:70px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  z-index:12;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  .wrap{
    @extend .clearfix;
  }
  &.fixed{
    background:#282034;
  }
  &.login_header{
    background:$purple;
  }
  &.inner{
    background:$purple;
  }
  &.static{
    background: #262134;
    position: relative;
  }
}


.sura_logo{
  max-width:150px;
  float: left;
  line-height: 70px;
  img{
    width:100%;
    vertical-align: middle;
  }
}

.main_nav{
  float: left;
  margin-left:$gutter;
}



.menu_nav_items{
  list-style-type: none;
  @extend .inline-block;
  li{
    @extend .inline-block;
    margin:0 12px;
    a{
      display: block;
      font-size:14px;
      line-height:70px;
      font-family:$font-semibold;
      color:$white;
      position: relative;
      &:after {
        content: attr(data-hovermenu);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        color:$orange;
        white-space: nowrap;
        transition: all .53s cubic-bezier(.17,.67,.32,.87);
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        pointer-events: none;
      }
      &:hover{
        &:before {
          width: 100%;
          transition: all 1s cubic-bezier(.04,.71,.19,.94);
        }
        &:after {
          width: 102%;
        }
      }

    }
    &.active{
      a{
        &:before {
          width: 100%;
          transition: all 1s cubic-bezier(.04,.71,.19,.94);
        }
        &:after {
          width: 102%;
        }
      }
    }
  }
}

.utility_items{
  float: right;

}

.btn {
  @extend .inline-block;
  line-height: 1;
  padding: 2px;
  font-size: 13px;
  font-family:$font-heavy;
  font-weight: normal;
  overflow: hidden;
  position: relative;
  color:$black;
  background-color:$orange;
  .btn-inner{
    display:block;
    padding:10px 36px;
    position:relative;
    z-index:2;
    height:100%;
    opacity:1;
    -webkit-animation:animOpacite .6s forwards;
    animation:animOpacite .6s forwards;
  }
}

.btn-box {
  -webkit-transform-origin:right;
  transform-origin:right;
  border-radius:5px;
  min-width:100px;
  min-height:26px;
  text-align:center;
  -webkit-transition:margin .3s;
  transition:margin .3s;
  background-clip:content-box;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  &:after, &:before{
    border-radius:5px;
    height:110%;
    content:"";
    position:absolute;
    top:-5%;
    right:-5%;
    -webkit-transform:translateX(-110%);
    transform:translateX(-110%);
    width:110%;
    z-index:1
  }
}

.btn-box:before{
  background-color:$white;
  -webkit-transition:all .6s;
  transition:all .6s
}
.btn-box:after{
  background-color:$white;
  opacity:.25;
  -webkit-transition:all 1s;
  transition:all 1s
}

.btn-box:focus:not(.no-hover):after,.btn-box:focus:not(.no-hover):before,.btn-box:hover:not(.no-hover):after,.btn-box:hover:not(.no-hover):before{
  -webkit-transform:translateX(0);
  transform:translateX(0);
}

.hero_banner{
  @extend .full-bg;
  height:70vh;
  &:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(35,11,99,0.87);
    opacity: 0.6;
    z-index: -1;
  }
  position: relative;
  .wrap{
    max-width:770px;
    position: relative;
    z-index: 2;
    color:$white;
    h1{
      text-align: center;
      font-family:$font-heavy;
      font-weight: normal;
      font-size:2.2em;
    }
    h5{
      font-family:$font-semibold;
      font-weight: normal;
      font-size:14px;
      text-align: center;
      margin-bottom:30px;
    }
    h2{
      text-align: center;
      font-family: $font-semibold;
      font-weight: normal;
      font-size:1.2em;
      max-width:620px;
      margin: auto;
      margin-bottom:30px;
    }
  }
}

.upload_count{
  position: absolute;
  bottom:40px;
  font-family: $font-bold;
  font-weight: normal;
  text-align: center;
  width: 100%;
  font-size:1.112em;
  left: 0;
  color: #fff;
  z-index:2;
}

.hero_search{
  background: $white;
  height:70px;
  line-height:70px;
  color:$text_color;
  @include border-radius(5px);
  @extend .clearfix;
  overflow: hidden;
  .input_col{
    margin-right:70px;
  }
  .button_col{
    width: 70px;
    background:$orange url("../images/search_icon.svg") no-repeat center center;
    height: 70px;
    float: right;
    text-align: center;
    color: #fff;
    cursor: pointer;
    @include animaxn;
    &:hover{
      background-color: #262134;
    }
  }
}

.hero_video{
  position: relative;
  height:70vh !important;
  &:after{
    content:"";
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity: 0.48;
    background-image: linear-gradient(120deg, #000000 20%, #6954B6 100%);
  }
}

.home_slideshow{
  height: 70vh;
  li{
    height:100%;
    &:after{
      content:"";
      position: absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      //background: red;
      opacity: 0.48;
      background-image: linear-gradient(120deg, #000000 20%, #6954B6 100%);
    }
  }
}

.main_content{
  padding:$gutter/2 0;
}

.section_title{
  text-align: center;
  font-family:$font-semibold;
  font-weight: normal;
  font-size:1.657em;
  margin-bottom: 10px;
}

.footer{
  background:$dark_purple;
  color:#ccc;
  padding:$gutter/2 0;
  font-size: 13px;
  .full-width{
    @extend .clearfix;
    margin:0 -20px;
  }
}


.footer_col{
  float: left;
  width:16%;
  padding:0 20px;
  &.abt_col{
    width:30%;
  }
  &.social_col{
    width:22%;
  }
  h4{
    font-family:$font-bold;
    font-weight: normal;
    font-size:1.154em;
    margin-bottom:15px;
  }
  p{
    a{
      color: #ccc;
      &:hover{
        color:$white;
      }
    }
  }
}


.abt_excerpt{
  p{
    margin-bottom:10px;
  }
  .read_on{
    font-family:$font-bold;
    color:#ccc;
    &:hover{
      text-decoration:underline;
      color:$white;
    }
  }
}

.footer_menu{
  list-style-type: none;
  li{
    display: block;
    margin-bottom:8px;
    a{
      color: #ccc;
      &:hover{
        color:$white;
        text-decoration: underline;
      }
    }
  }
}


.social_links{
  list-style-type: none;
  margin-top:20px;
  li{
    @extend .inline-block;
    margin-right: 12px;
    &:last-of-type{
      margin-right:0;
    }
    a{
      display: block;
      width:40px;
      @include border-radius(50%);
      height:40px;
      position: relative;
      &:after{
        content: "";
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        border:#ccc solid 1px;
        width: 40px;
        height: 40px;
        margin: -20px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
      }
      img{
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      &:hover{
        &:after{
          border:#939393 dashed 1px;
          -webkit-animation: infinite-rotate 15s infinite linear;
          animation: infinite-rotate 15s infinite linear;
        }
      }
    }
  }
}

.footer_copyright{
  text-align: center;
  padding-top: 30px;
  border-top:#342f48 solid 1px;
  margin-top: 30px;
  position: relative;
  &:before{
    content: "";
    position: absolute;
    left:0;
    top:-2px;
    width:100%;
    height:1px;
    background:#131119;
  }

  a{
    color: #ccc;
    @extend .inline-block;
    margin: 0 10px;
    position: relative;
    &:after{
      content: "";
      position: absolute;
      right: -12px;
      top: 2px;
      width: 1px;
      background: #ccc;
      height: 10px;
    }
    &:hover{
      color:$white;
      text-decoration: underline;
    }
    &:last-of-type{
      &:after{
        display: none;
      }
    }
  }
}

.landing_tiles{
  margin-bottom:20px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.view {
  width: 316px;
  height: 216px;
  margin: 20px;
  @extend .inline-block;
  position: relative;
  border: 8px solid #fff;
  box-shadow:0 8px 32px 0 rgba(20, 49, 127, 0.13);
  background:$purple;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -o-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  img{
    width:100%;
  }
}

.view .slice{
  width:60px;
  height: 100%;
  z-index: 100;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 150ms ease-in-out;
  -moz-transition: -moz-transform 150ms ease-in-out;
  -o-transition: -o-transform 150ms ease-in-out;
  -ms-transition: -ms-transform 150ms ease-in-out;
  transition: transform 150ms ease-in-out;
  background-size: cover;

}

.view div.view-back{
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  background:$purple;
  z-index: 0;
}

.view-back span {
  position: absolute;
  right:0;
  top:0;
  text-align: center;
  width:100px;
  height:100%;
  padding: 5px 20px 5px;
  color:$white;
  font-size: 14px;
  display: flex;
  justify-content:center;
  align-content:center;
  flex-direction:column;
  strong{
    font-family:$font-bold;
    font-weight: normal;
  }
}

.cat_title{
  position: absolute;
  z-index: 999;
  left: 0;
  @include animaxn;
  bottom: 0;
  background: #151414cc;
  width: 100%;
  text-align: center;
  font-family:$font-semibold;
  font-weight: normal;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  color:$white;
}

.view .s2,
.view .s3,
.view .s4,
.view .s5 {
  -webkit-transform: translate3d(60px,0,0);
  -moz-transform: translate3d(60px,0,0);
  -o-transform: translate3d(60px,0,0);
  -ms-transform: translate3d(60px,0,0);
  transform: translate3d(60px,0,0);
}
.view .s1 {
  background-position: 0px center;
}
.view .s2 {
  background-position: -60px center;
}
.view .s3 {
  background-position: -120px center;
}
.view .s4 {
  background-position: -180px center;
}
.view .s5 {
  background-position: -240px center;
}

.view .overlay {
  width: 60px;
  height: 100%;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 150ms ease-in-out;
  -moz-transition: opacity 150ms ease-in-out;
  -o-transition: opacity 150ms ease-in-out;
  -ms-transition: opacity 150ms ease-in-out;
  transition: opacity 150ms ease-in-out;
}

.view:hover{
  .overlay {
    opacity: 1;
  }
  .cat_title{
    opacity:0;
  }

}

.view img {
  position: absolute;
  z-index: 0;
  -webkit-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  -moz-transition: left 0.3s ease-in-out;
  -ms-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.view:hover .s1{
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  transition-delay: 200ms;

  -webkit-transform: rotate3d(0,1,0,-3deg);
  -moz-transform: rotate3d(0,1,0,-3deg);
  -o-transform: rotate3d(0,1,0,-3deg);
  -ms-transform: rotate3d(0,1,0,-3deg);
  transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  transition-delay: 150ms;
  -webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
  -moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
  -o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
  -ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
  transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  transition-delay: 100ms;
  -webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
  -moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
  -o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
  -ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
  transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4{
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  transition-delay: 50ms;
  -webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
  -moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
  -o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
  -ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
  transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5{
  -webkit-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
  -moz-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
  -o-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
  -ms-transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
  transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
}

.view .s4 > .overlay {
  background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 > .overlay {
  background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

.view div.view-back{
  background:$purple;
}

.browse_cat_list{
  margin: 0;
  -webkit-column-count:5;
  -moz-column-count: 5;
  column-count: 5;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  list-style-type: none;
  li{
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-left: 25px;
    position: relative;
    margin-bottom:15px;
    &:before{
      content: "";
      position: absolute;
      width:14px;
      height:13px;
      left:0;
      top:3px;
      background: url("../images/list_icon.svg") no-repeat center top;
    }
    a{
      color:$purple;
      font-family:$font-semibold;
      display: block;
      &:hover{
        color:#2AB27B;
      }
    }
  }
}

.browse_cat{
  .section_title{
    margin-bottom: 25px;
  }
}

.search_input{
  float: left;
  width:480/600*100%;
  input{
    border:none;
    padding:20px 30px;
    height:100%;
    width:100%;
  }
}

.selectdiv {
  width:100px;
  height:70px;
  float: right;
  background:$white url(../images/select_bg.svg) no-repeat right center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.selectboxdiv {
  height: 100%;
  min-height: 36px;
  left: 0;
  right: 0;
  margin-top: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  cursor: pointer;
  top: 0;
  bottom: 0;
}

.selectdiv div {
  z-index: -1;
  height:70px;
  overflow: hidden;
  cursor: pointer;
}

.login_screens{
  height:100vh;
  background:$white;
  padding-top: 70px;
}

.login_banner {
  width: 55%;
  height:100vh;
  position: fixed;
  right: 0;
  bottom: 0;
  @extend .full-bg;
}

.login_form {
  float: left;
  width: 100%;
  height: 100%;
  padding:30px 0;
}


.form_group{
  margin-bottom:30px;
  position: relative;
  input[type="text"], input[type="tell"], input[type="password"], input[type="email"], input[type="tel"], input[type="submit"], textarea, input[type="number"] {
    width:100%;
    border: 1px solid #D4D9E2;
    border-radius: 4px;
    height: 50px;
    padding: 14px 20px;
    -webkit-appearance: none;
    &.error{
      border-color: #fa194f;
    }
    &:focus{
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
      border: #d4d7dc solid 1px;
    }
  }
  input[type="submit"]{
    background:$orange;
    color:$black;
    border:none;
    font-family:$font-bold;
    text-align: center;
    cursor: pointer;
    @include animaxn;
    -webkit-appearance: none;
    &:hover{
      background:$black;
      color:$white;
    }
  }
  textarea{
    height:130px;
    resize:none;
  }
  button{
    border: 1px solid #D4D9E2;
    border-radius: 4px;
    height: 45px;
    padding: 10px 47px;
    font-size: 15px;
    -webkit-appearance: none;
    background:$orange;
    color:$black;
    border:none;
    font-family:$font-bold;
    text-align: center;
    cursor: pointer;
    @include animaxn;
    -webkit-appearance: none;
    &:hover{
      background:$black;
      color:$white;
    }
  }
}

.dates_div{
  input[type="date"]{
    border: 1px solid #D4D9E2;
    border-radius: 4px;
    height: 36px;
    padding:10px 12px;
    -webkit-appearance: none;
    &.error{
      border-color: #fa194f;
    }
    &:focus{
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
      border: #d4d7dc solid 1px;
    }
  }
}

label.required{
    margin: 0 8px;
}

.text_align_left{
  text-align: left !important;
}

.text_align_center{
  text-align: center !important;
}

.table_heading{
  margin-bottom:15px;
  font-family:$font-bold;
}

.form_wysiwyg{
  padding:0 15px;
}

.ellipsis{
  width:100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table_link{
  font-family:$font-semibold;
  &:hover{
    color:$purple;
  }
}


.right_managed_form{
  hr {
    border: 0;
    height: 1px;
    background: #d4d9e2;
    margin-bottom: 20px;
  }
}


.date_filter{
  width:250px;
  border: 1px solid #D4D9E2;
  border-radius: 4px;
  height:45px;
  padding: 14px 20px;
  -webkit-appearance: none;
}

.submit_btn{
  background:$orange;
  color:$black;
  font-family:$font-bold;
  text-align: center;
  cursor: pointer;
  border:none;
  width:100%;
  border-radius: 4px;
  height: 40px;
  font-size: 13px;
  padding: 12px 35px;
  @include animaxn;
  -webkit-appearance: none;
  &.width_auto{
    width:auto;
  }
  &:hover{
    background:$black;
    color:$white;
  }
}

.pass_reset_btn{
  background:$orange;
  color:$black;
  font-family:$font-bold;
  text-align: center;
  cursor: pointer;
  border:none;
  width:100%;
  border-radius: 4px;
  height: 40px;
  font-size: 13px;
  padding: 12px 35px;
  @include animaxn;
  -webkit-appearance: none;
  &.width_auto{
    width:auto;
  }
  &:hover{
    background:$black;
    color:$white;
  }
}

.form_label{
  font-family:$font-semibold;
  display: block;
  margin-bottom:5px;
}

.google_login, .facebook_login{
  border: 1px solid #3f7be7;
  border-radius: 4px;
  height: 50px;
  padding: 14px 20px;
  font-family:$font-bold;
  text-align: center;
  color:#3f7be7;
  display: block;
  img{
    max-width: 20px;
    margin-right: 5px;
  }
  &:hover{
    background: #fefefe;
  }
}

.facebook_login{
  color:#4b6092;
  border: 1px solid #4b6092;
}

.inner_box {
  max-width: 400px;
}
.form_excerpt{
  margin-bottom:40px;
  h4{
    font-family:$font-semibold;
    font-weight: normal;
    font-size:1.89em;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom:12px;
  }
  p{
    color: #3D4562;
  }
}

label.placeholder {
  -webkit-transition: 300ms all ease;
  -o-transition: 300ms all ease;
  transition: 300ms all ease;
  position: absolute;
  left: 10px;
  top: 16px;
  padding: 0 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.form-control {
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
}

.noplaceholder label.placeholder {
  top: -12px;
  background: #fff;
}

.forgot_pass{
  margin-bottom:30px;
  font-size:0.929em;
  text-align: right;
  a{
    text-decoration: underline;
    font-family:$font-semibold;
    &:hover{
      color:$black;
    }
  }
}

.left_form{
  float: left;
  width:50%;
  padding-right:15px;
}

.right_form{
  float:right;
  width:50%;
  padding-left:15px;
  &.w-100{
    width:100%;
  }
}

.options_divider{
  text-align: center;
  height:1px;
  margin-bottom:30px;
  background:rgba(56, 59, 66, 0.2);
  span{
    @extend .inline-block;
    background:$white;
    width: 40px;
    margin-top:-25px;
    height:50px;
    color:#99A1A7;
    line-height:50px;
    font-family:$font-semibold;
  }
}


.notification {
  position: relative;
  padding:8px 15px;
  margin-bottom:20px;
  font-family:$font-semibold;
  font-size:0.929em;
  color:$white;
  @include border-radius(3px);
  &:last-of-type{
    margin-bottom:0;
  }
  &.info {
    background-color:$blue;
    .warning-sign{
      color:$blue;
      &:before{
        content: "\f129";
      }
    }
  }
  &.warning {
    background-color:#d3792f;
    .warning-sign{
      color:#d3792f;
      &:before{
        content: "\f129";
      }
    }
  }
  &.error{
    background-color:#fa194f;
    .warning-sign{
      color:#fa194f;
      &:before{
        content: "\f00d";
      }
    }
  }

  &.success{
    background-color:#2AB27B;;
    .warning-sign{
      color:#2AB27B;;
      &:before{
        content: "\f00c";
      }
    }
  }
}

.styled-select {
  width: 100%;
  overflow: hidden;
  height:50px;
  background:$white url(../images/select_bg.svg) no-repeat right center;
  border: 1px solid #d4d9e2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.styled-select select {
  background: 0 0;
  width: 100%;
  padding: 5px 5px 5px 20px;
  border: 0;
  height:50px;
  color:$text_color;
  margin: 0;
  -moz-appearance: window;
  -webkit-appearance: none;
  cursor: pointer;
  outline: 0;
}

.check_icon{
  margin-bottom:10px;
  path{
    fill:#2AB27B;
  }
}

.success_message, .rejected_message, .pending_message{
  text-align: center;
  h4{
    font-family:$font-bold;
    font-weight: normal;
    font-size:18px;
    margin-bottom:6px;
  }
}

.rejected_message{
  .check_icon path {
    fill: #e83a3a;
  }
}

.pending_message{
  .check_icon path {
    fill: #F79820;
  }
}


.sidebar_header {
  text-align: center;
  padding: 11px 20px;
  border-bottom: #1f1a25 solid 1px;
  img {
    max-width: 155px;
  }
}

.app_wrapper {
  //display: -webkit-flex;
  //display: flex;
  //-webkit-flex: 1 1 0%;
  //flex: 1 1 0%;
  //height: 100vh;
  //transition: left 0.2s ease-in-out;
  //position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  height: 100vh;
  transition: left 0.2s ease-in-out;
  position: relative;
  &.search_landing{
    height:auto;
    left: 0;
    overflow: hidden;
  }
}

.app_navigation {
  //display: -webkit-flex;
  //display: flex;
  //-webkit-flex-direction: column;
  //flex-direction: column;
  //-webkit-flex-shrink: 0;
  //flex-shrink: 0;
  //width: 250px;
  //z-index: 9;
  //height:100vh;
  //position: relative;

  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 250px;
  z-index: 12;
  background-color:$purple;
  position: relative;
}

.app_content {
  //display: -webkit-flex;
  //display: flex;
  //-webkit-flex-direction: column;
  //flex-direction: column;
  //-webkit-flex: 2 0 0%;
  //flex: 2 0 0%;
  //position: relative;

  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 2 0 0%;
  flex: 2 0 0%;
  overflow: auto;
  position: relative;
}

.close_profiler{
  width: 24px;
  height: 24px;
  position: absolute;
  right: 20px;
  opacity: 0.5;
  cursor: pointer;
  &:before, &:after{
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    height: 12px;
    width: 2px;
    left: 11px;
    top: 0;
    height: 24px;
    background-color: #868582;
  }
  &:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  &:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  &:hover{
    opacity:1;
  }
}

.app_primary_nav{
  height: 100%;
  overflow-y: auto;
  -webkit-flex-grow: 2;
  flex-grow: 2;
  background: transparent;
  border-top: #352a44 solid 1px;
  border-bottom: #352a44 solid 1px;
  &::-webkit-scrollbar{
    width:5px;
    margin:5px
  }
  &::-webkit-scrollbar-thumb{
    width:6px;
    margin:2px;
    border-radius:10px;
    background-color:#555568;
  }
}

.help_btn{
  background:$orange;
  color:$black;
  font-family:$font-bold;
  padding:5px 45px;
  @include border-radius(25px);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100px;
  margin: auto;
  margin-bottom:20px;
  font-family:$font-semibold;
  @include animaxn;
  img{
    width: 24px;
    margin-right: 10px;
  }
  &:hover{
    background:$white;
  }
}


.app_footer {
  border-top: #1f1a24 solid 1px;
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
  transition: right 0.2s ease-in-out;
  color: #ccc;
}

.powered_by{
  display: block;
  font-size: 13px;
}


.nav_menu{
  list-style: none;
  padding-top: 10px;
  .menu_item{
    color: #e9e7e7;
    font-family:$font-semibold;
    font-weight: normal;
    &.is-current{
      .menu_item_label{
        font-family:$font-bold;
        color:$orange;
      }
      .item_svg_icon{
        color:$orange;
      }
    }
  }
  .menu_item_link{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
    padding: 12px 32px 12px 64px;
    &:hover{
      .item_svg_icon, .menu_item_label{
        color:$orange;
      }
    }
  }
  .menu_item_label {
    font-weight: normal;
    color: inherit;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: #848089;
  }
}

.item_svg_icon{
  position: absolute;
  left: 24px;
  top: calc(50% - 14px);
  display: inline-block;
  color: #848089;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.nav_divider {
  display: block;
  height: 0;
  padding: 0;
  margin: 10px 16px 10px;
  border: none;
  border-bottom: 1px solid #352944;
}

.menu_item_expandable_content{
  overflow: hidden;
}

.menu_item_expandable{
  overflow: hidden;
  &.open{
    .menu_nested{
      margin-top: 0;
      opacity: 1;
      transition-delay: 0.3s;
    }
    .menu_item_caret{
      -webkit-transform: rotateZ(180deg);
      transform: rotateZ(180deg);
      color:$white;
    }
    .item_svg_icon{
      color:$orange;
    }
    .menu_item_label{
      color:$orange;
      font-family:$font-bold;
      font-weight: normal;
    }
  }
}

.menu_nested{
  padding-bottom: 4px;
  margin-top: -125%;
  margin-bottom: 0;
  opacity: 0;
  list-style: none;
  transition: margin-top .5s ease,opacity .5s ease;
  .menu_item{
    margin-top: 0;
    opacity: 1;
    transition-delay: 0.3s;
  }
  .menu_item_link{
    padding: 6px 0 6px 64px;
    color: #848089;
    &:hover{
      color:$white;
    }
  }
}

.menu_item_caret{
  width: 12px;
  height: 12px;
  top: calc(50% - (15px / 2));
  position: absolute;
  right: 16px;
  color: #81879a;
  fill:currentColor;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

.menu_extras{
  list-style-type: none;
  margin: 8px 0;
  li{
    display: block;
    a{
      padding: 5px 20px;
      display: block;
      color: #cccccc;
      &:hover{
        color:$orange;
      }
    }
  }
}

.wv-spinner,.wv-spinner--inverse,.wv-spinner--small{
  border-style:solid;
  border-radius:50%;
  border-color:#ecf0f3;
  border-right-color: #f79820;
  border-top-color: #f79820;
  border-width:2px;
  font-size:22px;
  width:22px;
  height:22px;
  display:inline-block;
  vertical-align:middle;
  box-sizing:border-box;
  -webkit-animation:spin-animation .7s linear infinite;
  animation:spin-animation .7s linear infinite
}
@-webkit-keyframes spin-animation{
  to{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}
@keyframes spin-animation{
  to{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}
.wv-spinner--inverse{
  border-right-color:#fff;
  border-top-color:#fff;
  border-left-color:rgba(0,0,0,0);
  border-bottom-color:rgba(0,0,0,0)
}
.wv-spinner.wv-spinner--large,.wv-spinner--large.wv-spinner--inverse,.wv-spinner--large.wv-spinner--small{
  border-width:5px;
  font-size:60px;
  width:60px;
  height:60px
}
.wv-spinner--centered{
  position:relative;
  width:100%;
  height:100%
}
.wv-spinner--centered [class*="wv-spinner"]{
  position:absolute;
  top:50%;
  left:50%
}
.wv-spinner--centered .wv-spinner,.wv-spinner--centered .wv-spinner--inverse,.wv-spinner--centered .wv-spinner--small{
  margin:-11px 0 0 -11px
}
.wv-spinner--centered .wv-spinner--large{
  margin:-30px 0 0 -30px
}

.svg_hidden{
  display: none;
}

.app_header {
  height: 70px;
  display: flex;
  align-items: center;
  align-content: center;
  z-index: 12;
  position: relative;
  transition: all .2s;
  //position: fixed;
  width: 100%;
  padding:0 40px;
  background: #fafbfc;
  box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
  .menu_toggle{
    border-right: 1px solid #d4dde3;
    padding-right: 14px;
    margin-right: 15px;
    .menu_toggle_icon span{
      background:#3d4562;
    }
    .menu_toggle_label{
      color:#3d4562;
    }
  }
}

.app_header_content{
  width: 100%;
  height: 70px;
  display: flex;
  position: relative;
  align-items: center;
}


.app_header_left{
  position: relative;
  .dropdown-menu{
    left: 0;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
    border:none;
    min-width:100%;
    &:before, &:after{
      display: none;
    }
  }
}

.app_header_right{
  margin-left: auto;
  .dropdown-menu{
    min-width:200px;
  }
}

.sr_heading_title{
  font-size:20px;
  font-family:$font-bold;
  color: #534467;
  font-weight: normal;
}

.user_modal{
  @extend .inline-block;
  margin-left:$gutter;
}

.user_name{
  cursor: pointer;
  font-family:$font-semibold;
}

.dropdown{
  position: relative;
  &.open {
    .dropdown-menu {
      display: block;
    }
  }
}

.dropdown-menu {
  position: absolute;
  top:45px;
  right: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width:100%;
  margin: 2px 0 0;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  li{
    display: block;
    &:last-of-type{
      border:none;
      a{
      }
    }
    a{
      display: block;
      padding:7px 20px;
      @include animaxn;
      color:$text_color;
      &:hover{
        background-color: #f0f4fa;
      }
    }
  }
}

.login_label{
  @extend .inline-block;
  line-height:30px;
  margin-right:10px;
  font-family:$font-semibold;
}

.login_avatar{
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius:50%;
  @extend .inline-block;
  background: #3d4562;
  img{
    width:100%;
  }
}

.quick_upload_btn{
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  background:$orange;
  color:$purple;
  font-family:$font-bold;
  padding:0px 45px 0px 30px;
  border-radius: 34px;
  font-size:14px;
  height: 38px;
  line-height:38px;
  border: none;
  cursor: pointer;
  &:focus{
    outline:none;
  }
  .item_svg_icon{
    left: auto;
    right:12px;
    top: calc(50% - 13px);
    color:$purple;
  }
  &:hover{
    background:$purple;
    color:$white;
    .item_svg_icon{
      color:$white;
    }
  }
}

.app_main_inner{
  padding:30px 40px;
  flex: 1;
}

.page_excerpt{
  margin-bottom:40px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}


.col-xl-2 {
  flex: 0 0 20%;
  max-width: 20%;
}


.col-xl-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-lg-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-lg-7 {
  flex: 0 0 60%;
  max-width: 60%;
}

.col-lg-8 {
  flex: 0 0 75%;
  max-width: 75%;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(26, 54, 126, 0.125);
  border-radius:4px;
  box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
  border-width: 0;
  transition: all .2s;
  &.widget-chart{
    padding:1rem;
    &.text-left {
      flex-direction: row;
      align-items: center;
    }
  }
}


.card-header {
  display: flex;
  align-items: center;
  border-bottom-width: 1px;
  padding: 1rem;
  width:100%;
  height: 3.5rem;
  background-color: #fff;
  border-bottom: 1px solid rgba(26, 54, 126, 0.125);
}

.card-header-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family:$font-semibold;
  color: rgba(13, 27, 62, 0.7);
  font-size: 18px;
}

.btn-actions-pane-right {
  margin-left: auto;
  white-space: nowrap;
}

.widget-chart-content {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex: 1;
  position: relative;
  &.alternate{
    flex-direction: row;
  }
}

.widget-subheading {
  display: block;
  opacity: .6;
  margin-bottom: 10px;
  font-family:$font-semibold;
  font-weight: normal;
  font-size:16px;
}

.widget_count{
  font-family:$font-bold;
  font-weight: normal;
  font-size:24px;
  line-height:26px;
  small{
    opacity: .5 !important;
    margin-right: 5px;
  }
}

.widget-chart-flex {
  display: flex;
  align-items: baseline;
  align-content: center;
  margin-bottom: 0;
  .percentage{
    margin-left: auto !important;
    font-size: 1em;
    font-family:$font-semibold;
  }
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.mb-3 {
  margin-bottom: 30px !important;
}

.text-success{
  color: #3ac47d !important;
}

.text-danger {
  color: #d92550 !important;
}

.text-warning {
  color: #f7b924 !important;
}

.btn{
  background-color: transparent;
  border: 1px solid transparent;
  @extend .inline-block;
  cursor:pointer;
  font-family:$font-bold;
  font-weight: normal;
  &.active{
    color: #fff !important;
    background-color:$purple;
    border-color:$purple;
  }
}

.btn-group{
  position: relative;
  display: inline-flex;
  vertical-align: middle;
   .btn:not(:last-child):not(.dropdown-toggle){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .btn:not(:first-child), &.btn-group:not(:first-child) {
    margin-left:-2px;
  }
}

.btn.btn-sm{
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  color: #444054;
  border-color:$purple;
  border-width: 2px;
  outline: none !important;
  position: relative;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  &:hover{
    color: #fff;
    background-color:$purple;
    border-color:$purple;
  }
}

.registration_body{
  h4{
    font-family:$font-bold;
    font-weight: normal;
    font-size: 16px;
    line-height:20px;
    margin-bottom: 18px;
  }
  p{
    margin-bottom:20px;
  }
  .styled-select{
    height: 45px;
    margin-bottom:25px;
    select{
      height: 45px;
    }
  }
  input[type="submit"]{
    border:none;
    background: #f79821;
    color: #141516;
    border-radius: 4px;
    height:45px;
    cursor: pointer;
    font-family:$font-bold;
    padding: 14px 20px;
    &:hover{
      background:$purple;
      color:$white;
    }
  }
}

.alert {
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  strong{
    font-family:$font-bold;
    font-weight: normal;
  }
  &.alert-success {
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;
  }
  &.alert-info {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
  }
  &.alert-warning {
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;
  }
  &.alert-danger {
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;
  }
}

.datagrid{
  transition: all 0.2s;
  &.no_btn_p{
    table{
      margin-bottom:0;
    }
  }
  table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    margin-bottom:25px;
    td, th {
      padding:14px;
    }
    thead, tfoot{
      th {
        background:#F2F4F6;
        color:#4A4E53;
        font-family:$font-bold;
        font-size:14px;
        font-weight: normal;
        border-bottom:#e2e6ef solid 1px;
      }
    }
    thead{
      th{
        cursor: pointer;
        position: relative;
      }
    }
    tbody{
      td{
        color: #4A4E53;
        font-size:14px;
        border-bottom:#f2f4f6 solid 1px;
        background:$white;
        font-weight: normal;
        position: relative;
        &.dropdown {
          position: relative;
          cursor: pointer;
          &:after {
            content: "";
            position: absolute;
            right: auto;
            top: 12px;
            width: 20px;
            margin-left: 5px;
            background: url(../images/arrow-down.svg) no-repeat center center;
            height: 20px;
            -webkit-transition: all 300ms ease-in 0s;
            -moz-transition: all 300ms ease-in 0s;
            -o-transition: all 300ms ease-in 0s;
            transition: all 300ms ease-in 0s;
          }
        }
      }
      tr.alt{
        td{
          background:#F2F4F6;
        }
      }
    }
  }
}

.datagrid table tbody td{
  .dropdown-menu{
    min-width: 150px;
  }
  &.open{
    .dropdown-menu{
      display: block;
    }
  }
}

.more_actions{
  background:url("../images/more_actions.svg") no-repeat center center;
  cursor: pointer;
  width:6px;
  height:14px;
  @extend .inline-block;
}

.tdm_svg_icon {
  color: #4A4E53;
  margin-left: 0px;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: all 0.2s;
}

.creat_new{
  margin-left: auto;
  background: #3ac47d;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-family:$font-bold;
  padding:8px 15px;
  border-radius: 30px;
  transition: background-color 0.3s ease, color 0.3s ease;
  &:hover{
    background:$black;
  }
  .tdm_svg_icon {
    bottom: 0px;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    color: #fff;
  }
}

.btn_center{
  text-align: center;
  .btn{
    padding: 8px 30px;
  }
}

.app_upload_wrap{
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 250px);
  //@extend .clearfix;
}

.upload_content{
  flex: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  word-wrap: break-word;
  box-shadow: 0 25px 50px 0 rgba(0,0,0,0.04);
  border-radius: 6px;
  //float: left;
  //width:70%;
}

.upload_sidebar {
  width: 360px;
  //float: right;
  //width:30%;
  flex: 0 0 360px;
  margin: 0;
  position: relative;
  list-style: none;
  text-align: left;
  background:$white;
  box-shadow: 0 25px 50px 0 rgba(0,0,0,0.04);
  border-radius:0 6px 6px  0;
  border-left: #e9ecef solid 1px;
  padding:20px 30px;

  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  height:100%;
  top: 10px;
  bottom: auto;
  &::-webkit-scrollbar{
    width: 6px;
    margin:5px
  }
  &::-webkit-scrollbar-thumb{
    width:6px;
    margin:2px;
    border-radius:10px;
    background-color:#c1c1c1
  }
  .form_label{
    display:block;
    font-family:$font-semibold;
    font-size: 13px;
    margin-bottom: 5px;
    position: relative;
  }
  .styled-select{
    height: 36px;
    background: #fff url(../images/select_bg_small.svg) no-repeat right center;
    select{
      padding: 5px 5px 5px 12px;
      height:36px;
    }
  }

  .ms-choice>span{
    font-size: 14px;
    font-family:$font-regular;
  }

  .ms-drop ul>li{
    margin-bottom: 5px;
  }

  .ms-drop input[type=radio], .ms-drop input[type=checkbox]{
    margin: 5px;
    height: 12px;
    margin-top: 0px;
  }

  .multi_select{
     button, .ms-choice{
       height: 36px;
       padding: 10px 12px;
       >div{
         position: absolute;
         top: 0;
         right: 1px;
         width: 29px;
         height: 36px;
         background:url(../images/select_bg_small.svg) no-repeat right center;
       }
    }
    button{
      background: transparent;
      border: 1px solid #D4D9E2;
    }
  }

  .form_group{
    margin-bottom: 20px;
    input[type="text"], input[type="text"], textarea{
      height: 36px;
      line-height: 36px;
      padding: 10px 12px;
      font-size: 13px;
    }
    textarea{
      height:70px;
      line-height:unset;
    }
  }
}

.global_tabs{
  list-style-type: none;
  padding:0 20px;
  width:100%;
  li{
    @extend .inline-block;
    padding:0 8px;
    a{
      padding:15px 10px;
      display: block;
      position: relative;
      font-family:$font-semibold;
      color:$text_color;
      &:after{
        content:"";
        position: absolute;
        width:100%;
        height:3px;
        background:$orange;
        bottom:0;
        right:0;
        display: none;
      }
    }
    &.active{
      a{
        color:$orange;
        &:after{
          display: block;
        }
      }
    }
  }
}


.tooltip {
  width: 20px;
  height: 20px;
  border-radius:50%;
  color:$white;
  line-height:24px;
  font-family:$font-bold;
  text-align: center;
  background:$purple;
  display: block;
  font-size: 12px;
  position: absolute;
  right: 0;
  top: -7px;
  .tooltiptext {
    visibility: hidden;
    background:$purple;
    width:300px;
    color: #fff;
    text-align: left;
    padding: 6px 10px;
    border-radius: 3px;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 30px;
    line-height: 16px;
    &:after{
      top: 100%;
      right: 5px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(0, 0, 0, 0);
      border-top-color:$purple;
      border-width: 4px;
      margin-left: -4px;
    }
  }
  &:hover{
    background:$orange;
    .tooltiptext {
      visibility: visible;
    }
  }
}


.fade {
  opacity: 0;
  transition: opacity .15s linear;
  &.show, &.in {
    opacity: 1;
  }
}

.tab_pane{
  display: none;
  padding:20px 28px;
  &.history_stock{
    padding:20px 0;
  }
}

.tab-content {
  > .tab_pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

.photos_list {
  width: 100%;
  position: relative;
  @extend .clearfix;
}
.photos_column {
  width: 25%;
  padding: 0 10px;
  float: left;
  margin-bottom:20px;
}

.image_items{
  background: #fff;
  padding: 10px;
  padding-bottom:0;
  cursor: pointer;
  border-radius:4px;
  border: #ddd solid 1px;
  position: relative;
  &:after{
    content:"";
    position: absolute;
    width:20px;
    height:20px;
    background:$white url("../images/check_mark.svg") no-repeat center center;
    box-shadow: 0 2px 30px 0 rgba(0,0,0,0.37);
    left:20px;
    top:20px;
    display: none;
    border-radius: 50%;
  }
  img{
    width: 100%;
    z-index: 1;
  }
  &:hover{
    background: #fbfbfd;
  }
  &.selected{
    background: #fbfbfd;
    border-color:$orange;
    &:after{
      display: block;
    }
  }
}

.photos_content{
  display: flex;
  position: relative;
  align-items: center;
  .app_header_left {
    position: relative;
    //display: flex;
    padding:15px 0;
    align-items: center;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app_header_right {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
}

.delete_icon{
  position: relative;
  width: 22px;
  .item_svg_icon{
    width: 20px;
    height: 26px;
    left: auto;
    @extend .inline-block;
    vertical-align: middle;
    position: relative;
  }
  &:hover{
    .item_svg_icon{
      color:$orange;
    }
  }
}

.multi_select{
  select {
    background:none;
    width:100%;
    height:auto;
    padding: 10px 12px;
    margin:0;
    border: 1px solid #D4D9E2;
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
    option{
      padding: 3px 12px;
    }
  }
}

.tab_header{
  width: 100%;
  height:50px;
  border-bottom: #E3E2DF solid 1px;
  display: flex;
  position: relative;
  align-items: center;
}


.tab_header_right {
  margin-left: auto;
  padding-right: 40px;
}

.upload_form{

}

.upload_options{
  display: flex;
  flex-wrap: wrap;
  margin-right: -25px;
  margin-left: -25px;
  margin-bottom:30px;
  .upload_cols{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding:0 25px;
    border-right: 1px solid #ddd;
    &:last-of-type{
      border:none;
    }
    h4{
      font-family:$font-bold;
      font-weight:normal;
      font-size:15px;
      margin-bottom:6px;
    }
    p{
      margin-bottom:10px;
    }
    .learn_more{
      font-family:$font-bold;
      &:hover{
        color:$purple;
      }
    }
  }
}


.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
  background: rgba(0,0,0,0.68);
}

.modal.fade .modal-dialog {
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
}

.modal-dialog {
  position: relative;
  pointer-events: none;
}

.modal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: #FFFFFF;
  box-shadow: 0 2px 44px 0 rgba(0,0,0,0.14);
  max-width:840px;
  right: 0;
  top: 0;
  padding: 70px 30px;
  position: absolute;
  height: 100vh;
  overflow-y: auto;
  -webkit-flex-grow: 2;
  flex-grow: 2;
}

.ftp_procedure{
  ol{
    margin: 0;
    margin-left: 40px;
    a{
      text-decoration:underline;

    }
    li{
      margin:6px 0px;
      ul{
        margin-left: 30px;
        strong{
          font-family:$font-bold;
          font-weight: normal;
        }
      }
    }
  }
}

.form_row {
  margin: 0 -15px;
  @extend .clearfix;
}


.form_col {
  width: 33.33%;
  padding: 0 15px;
  float: left;
}

.payment_edit{
  padding:20px 30px;
  .form_group input[type="text"], .form_group input[type="tell"], .form_group input[type="password"], .form_group input[type="email"], .form_group input[type="tel"], .form_group input[type="submit"], .form_group textarea{
    height: 40px;
    padding: 10px 15px;
  }
  .form_label{
    opacity: 0.7;
  }

  .form_group {
    margin-bottom: 25px;
  }

  .styled-select{
    height: 40px;
    select{
      height: 40px;
      width: 100%;
      padding: 5px 5px 5px 15px;
    }
  }
}

.payment_instruction{
  padding-left: 30px;
  background: url(../images/info_icon.svg) no-repeat left 2px;
  h4 {
    margin-bottom: 10px;
    font-family:$font-bold;
    font-weight: normal;
    font-size: 14px;
    color: #3D4661;
    letter-spacing: 0;
  }
  p{
    color: #646F79;
    letter-spacing: 0;
    margin-bottom: 20px;
  }
  ul{
    margin-left:20px;
    li{
      margin-bottom: 5px;
      a{
        color:$text_color;
        font-family:$font-bold;
        text-decoration: underline;
        &:hover{
          color:$orange;
        }
      }
    }
  }
}

.sub_title{
  font-family:$font-bold;
  font-weight: normal;
  margin-bottom:10px;
}

.container {
  display: block;
  position: relative;
  padding-left: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
}

.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 12px;
  width: 12px;
  border: #c1bebe solid 1px;
  background: #fff;
  border-radius: 3px;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #3ac47d;
  border-color: #3ac47d;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}


.user_avatar{
  max-width: 30px;
  border-radius: 50%;
}

.profile_edit{
  margin-bottom:30px;
  text-align: center;
  .image_box{
    width: 140px;
    height: 140px;
    margin: auto;
    border-radius:50%;
    overflow: hidden;
    margin-bottom: 15px;
    background: #3d4562;
    img{
      width:100%;
    }
  }
  .avatar_change{
    font-family:$font-bold;
    cursor: pointer;
  }
}

.identity_form{
  border: #ddd dashed 1px;
  padding: 20px;
  border-radius: 7px;
  margin:20px 0;
  display: flex;
  align-items: center;
  .submit_btn{
    margin-left: auto;
  }
}

.top_header{
  background: #282034;
  padding:0 20px;
  height: 36px;
  overflow: hidden;
}

.top_menu_items{
  list-style-type: none;
  li{
    @extend .inline-block;
    a{
      padding: 0 15px;
      font-size: 12px;
      font-family:$font-bold;
      line-height: 36px;
      display: block;
      color:$white;
      &:hover{
        background:$purple;
      }
    }
  }
}

.header_inline{
  width: 100%;
  height:70px;
  background: #282034;
  display: flex;
  position: relative;
  align-items: center;
  z-index:22;
  &.fixed{
    position: fixed;
    left: 0;
    top: 0;
  }
  .hero_search{
    height: 45px;
    line-height: 45px;
    .button_col{
      width: 60px;
      height: 45px;
    }
    .selectdiv{
      width: 100px;
      height: 45px;
    }
    .search_input{
      width: 300px;
      input {
        padding: 14px 20px;
      }
    }
  }
}

.inline_search{
  display: flex;
  align-items: center;
}

.logo_col{
  width:220px;
  text-align: center;
  .sura_logo{
    max-width: 150px;
    float: none;
    line-height: 70px;
    @extend .inline-block;
  }
}

.side_bar_nav{
  //display: -webkit-flex;
  //display: flex;
  //-webkit-flex-direction: column;
  //flex-direction: column;
  //-webkit-flex-shrink: 0;
  //flex-shrink: 0;
  //width: 240px;
  //margin-left: -220px;
  //background:#f0f1f3;
  //position: relative;
  //padding-bottom:30px;
  width: 240px;
  left: -220px;
  background: #f0f1f3;
  position: fixed;
  height: 100vh;
  z-index: 2;
  top: 0;
  padding-top: 70px;
  h3{
    font-family:$font-bold;
    font-weight:normal;
    font-size: 15px;
    padding:30px 20px 10px;
  }
}

.shopping_cart{
  background:url("../images/cart_icon.svg") no-repeat center center;
  @extend .inline-block;
  width: 70px;
  height: 70px;
  position: relative;
  .cart_count{
    display: block;
    border-color: #f0f0f0;
    min-width: 10px;
    padding:0px 4px;
    font-size: 11px;
    font-family:$font-semibold;
    color: white;
    background: #d52626;
    border:1px solid white;
    border-radius: 9px;
    position: absolute;
    right: 16px;
    top: 14px;
    height: 17px;
    line-height: 17px;
  }
  &:hover{
    background-color:rgba(32, 25, 41, 0.81);
  }
}

.not-auth-box{
  padding-right:30px;
  .menu_nav_items{
    margin-right: 0;
  }
}


.listing_page{
  padding:30px;
  overflow: visible;
}

.flex-files_wide {
  //margin-right: -40px;
  //--grid-row-height: 200px;
}

.file_container {

}

.container_link {
  display: block;
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  &:before, &:after{
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.2)),color-stop(13%,rgba(0,0,0,.15)),color-stop(36%,transparent),to(transparent));
    background: linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.15) 13%,transparent 36%,transparent);
  }
  &:after{
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0,0,0,.2)),color-stop(13%,rgba(0,0,0,.1)),color-stop(36%,transparent),to(transparent));
    background: linear-gradient(0deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.1) 13%,transparent 36%,transparent);
  }
}

.file_container_title {
  position: absolute;
  left: 0;
  width: 100%;
  padding:16px 20px;
  padding-right:50px;
  font-family:$font-bold;
  font-size: 13px;
  color: white;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

.container_link_image{
  position: absolute;
  height: 100%;
  display: inline-block;
  max-width: 100%;
  min-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.file-container__actions{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  bottom:15px;
  left: 0;
  right: 0;
  max-width: 100%;
  z-index: 10;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

.button-circle {
  position: relative;
  z-index: 10;
  display: inline-block;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 0;
  border: 0;
  margin: 0 7px 4px;
  background-color: rgba(255,255,255,.9);
  vertical-align: top;
  overflow: visible;
  outline: none;
  cursor: pointer;
  border-radius: 49%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 2px 12px 3px rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 3px rgba(0,0,0,.1);
  &:after, &:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: auto;
    content: "";
  }
  &.cart_btn{
    &:after{
      top: 1px;
      background:url("../images/cf9da.svg") 50% no-repeat;
      width: 24px;
      height: 16px;
    }
  }
  &.view_btn{
    &:after {
      background: url("../images/10caa.svg") 50% no-repeat;
      width: 17px;
      height: 14px;
    }
  }
}

.file-container__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  display: block !important;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

.button_zoom{
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,.9);
  -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 6px 0 rgba(0,0,0,.1);
  border-radius: 3px;
  margin-bottom: 4px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 14;
  display: inline-block;
  padding: 0;
  font-size: 0;
  border: 0;
  vertical-align: top;
  overflow: visible;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: button;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  &:after, &:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: auto;
    content: "";
  }

  &:after {
    background: url("../images/5ea62.svg") 50% no-repeat;
    width: 20px;
    height: 20px;
  }

  &:before {
    top: -4px;
    left: -4px;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 49%;
  }
}

.filter_block{
  padding:14px 20px;
  h4{
    font-family:$font-semibold;
    font-size: 13px;
    font-weight: normal;
    margin-bottom:5px;
  }
  .styled-select{
    height: 34px;
    -webkit-border-radius: 0;
    -moz-border-radius:  0;
    -ms-border-radius: 0;
    border-radius: 0;
    background: #fff url(../images/select_bg.svg) no-repeat 105% center;
    select {
      width: 100%;
      padding: 5px 5px 5px 10px;
      height: 34px;
      font-size: 12px;
    }
  }
  &:hover{
    background: rgba(60,60,60,.05);
  }
}

.side_bar_nav_toggle{
  position: absolute;
  top:120px;
  right: -50px;
  z-index: 10;
  background: #f79821;
  width: 90px;
  height:34px;
  cursor: pointer;
  transition: margin-left 0.3s ease;
  -webkit-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
  color: #000;
  font-size: 15px;
  text-align: center;
  font-family:$font-bold;
  line-height: 38px;
  border-radius: 3px;
  text-transform: uppercase;
  padding-right: 8px;
  &:before{
    content: "";
    position: absolute;
    top: 0px;
    right: 11px;
    margin: auto;
    display: block;
    bottom: 0;
    background:$purple;
    width: 2px;
    height: 10px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  &:after{
    content: "";
    position: absolute;
    top: 0;
    right: 7px;
    margin: auto;
    display: block;
    bottom: 0;
    background:$purple;
    width: 10px;
    height: 2px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  &:hover{
    background:$purple;
    color:$white;
    &:before, &:after{
      background:$white;
    }
  }
}

.side_bar_open{
  .side_bar_nav{
    left:0px;
  }
  .listing_page.app_content{
    padding-left: 250px;
    min-height:100vh;
  }
  .side_bar_nav_toggle{
    background:$purple;
    color:$white;
    &:before, &:after{
      background:$white;
    }
    &:before{
      -webkit-transform: rotate(46deg);
      -moz-transform: rotate(46deg);
      -o-transform: rotate(46deg);
      -ms-transform: rotate(46deg);
      transform: rotate(46deg);
    }
    &:after{
      -webkit-transform: rotate(46deg);
      -moz-transform: rotate(46deg);
      -o-transform: rotate(46deg);
      -ms-transform: rotate(46deg);
      transform: rotate(46deg);
    }
  }
}

.close_modal{
  background: #40B4E5 url(../images/close_btn.svg) no-repeat center center;
  border-radius: 5px;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 30px;
  top: 25px;
  &:hover{
    background-color:#463250;
  }
}

.modal_title{
  font-family:$font-bold;
  font-weight: normal;
  margin-bottom:20px;
  span{
    opacity: 0.4;
    font-family:$font-semibold;
  }
}

.cart_thumbnail{
  max-width: 90px;
  vertical-align: middle;
  border-radius: 4px;
}

.cart_thumbnail_small{
  max-width:50px;
  vertical-align: middle;
  border-radius: 2px;
  margin-bottom: 5px;
}

.cart_table{
  table tbody td{
    font-size:13px;
  }
  table td, table th {
    padding: 11px 14px;
  }
  .styled-select{
    height: 30px;
    select{
      height: 30px;
      padding: 5px 5px 5px 10px;
      font-size: 13px;
    }
  }
}

.total_cart{
  text-align: right;
  font-size: 22px !important;
}

.proceed_btn {
  background:$orange;
  color:#282034;
  border-radius: 4px;
  font-family:$font-bold;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  min-width: 111px;
  float: right;
  padding: 2px 18px;
  border: none;
  cursor: pointer;
  line-height: 36px;
  font-size: 14px;
  height: 38px;
  &:hover{
    background: #282034;
    color: #fff;
  }
}

.remove_img_btn{
  font-family:$font-bold;
  color: #f22525;
  position: relative;
  font-size: 10px;
  text-transform: uppercase;
  margin-right: 20px;
  padding-left: 14px;
  margin-top: 10px;
  @extend .inline-block;
  &:before{
    position: absolute;
    left: 0;
    top: 5px;
    background: #f22525;
    width: 10px;
    height: 2px;
    content: "";
  }
  &:hover{
    color:$text_color;
    &:before{
     background:$text_color;
    }
  }
}

.member_page_tabs{
  margin-bottom:30px;
  list-style-type: none;
  border-bottom: #E3E2DF solid 1px;
  li{
    padding:0;
    @extend .inline-block;
    a{
      padding:10px 20px;
      display: block;
      position: relative;
      font-family:$font-semibold;
      color: #606060;
      border-bottom:transparent solid 2px;
    }
    &.current{
      a{
        border-color:$orange;
        color:$orange;
      }
    }
  }
}

.user_container{
  padding:20px;
  border: 1px solid #dfdfdf;
  background-color: #fff;
}

.total_amount{
  font-family:$font-bold;
  font-weight: normal;
}

.checkout_btn{
  background:#04b004;
  color:$white;
  border:none;
  padding:2px 30px;
  text-transform:uppercase;
  font-family:$font-bold;
  text-align: center;
  cursor: pointer;
  @include border-radius(4px);
  @include animaxn;
  -webkit-appearance: none;
  line-height: 36px;
  font-size: 14px;
  &:hover{
    background:$black;
    color:$white;
  }
}

.text_right{
  text-align: right;
}

.table_cta_small {
  padding: 0px 10px;
  height: 24px;
  @extend .inline-block;
  line-height:25px;
  font-family:$font-semibold;
  color: #65686d;
  border-radius: 5px;
  &:hover {
    background:$orange;
    color:$black;
  }
}

.table_cta_btn{
  background: #f79821;
  padding: 10px 15px;
  display: block;
  color: #000;
  border-radius: 30px;
  text-align: center;
  &:hover{
    background:$purple;
    color:$white;
  }
}

.card_header{
  display: flex;
  align-items: center;
  margin-bottom:15px;
  .clear_items{
    margin-left: auto;
  }
}

.clear_items{
  color:$text_color;
  font-family:$font-semibold;
  &:hover{
    color:$orange;
    text-decoration: underline;
  }
}

.card_title{
  font-family:$font-semibold;
  font-weight: normal;
}

.stock_title{
  font-family:$font-semibold;
  font-weight: normal;
  font-size:1.234em;
  margin-bottom: 15px;
}

.stock_wrap{
  @extend .clearfix;
}

.stock_detail_left{
  float: left;
  width:60%;
  padding-right:50px;
  text-align: center;
}

.stock_detail_right{
  float:right;
  width:40%;
  .tab_pane {
    padding:0;
  }
  .tab-content{
    border: #dddddd solid 1px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  #reported_stock_Reason{

  }
}

.report-form{
  input[type="radio"], label{
    margin-right: 10px;
  }
  textarea{
    height:100px;
  }
}


.detail_thumbnail{
  height: 380px;
  width: auto;
  max-width: 670px;
}

.fig_caption{
  font-style: italic;
  margin-bottom:30px;
}

.checkout_main{
  @extend .clearfix;
}

.checkout_left{
  float: left;
  width:70%;
  background:$white;
  padding:25px;
  box-shadow:0 8px 32px 0 rgba(20,49,127,0.08);
}

.checkout_right{
  float:right;
  width:30%;
  padding-left:50px;
}

.summary_card{
  background:$white;
  box-shadow:0 8px 32px 0 rgba(20,49,127,0.08);
  h3{
    font-family:$font-bold;
    font-weight: normal;
    font-size: 1.3em;
    padding:18px 25px;
    border-bottom:#ddd dashed 1px;
  }
}

.summary_row{
  @extend .clearfix;
  .small_col{
    padding:18px 25px;
    float: left;
    font-family:$font-semibold;
  }
  &.total{
    background-color: rgba(255,212,77,0.2);
  }
}

.details_table{
  table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    margin-bottom:25px;
    td, th {
      padding:10px 20px;
    }
    thead, tfoot{
      th {
        background:#F2F4F6;
        color:#4A4E53;
        font-family:$font-bold;
        font-size:14px;
        font-weight: normal;
        border-bottom:#e2e6ef solid 1px;
      }
    }
    thead{
      th{
        cursor: pointer;
        position: relative;
      }
    }
    tbody{
      td{
        color: #4A4E53;
        font-size:14px;
        border-bottom:#f2f4f6 solid 1px;
        background:$white;
        font-weight: normal;
        position: relative;
        a{
          &:hover{
            text-decoration: underline;
          }
        }
      }
      tr.alt{
        td{
          background:#F2F4F6;
        }
      }
    }
  }
}

.thumbnail_int{
  height:50px;
  display: flex;
  align-items: center;
  align-content: center;
  border-top:#ddd solid 1px;
  border-bottom:#ddd solid 1px;
}

.download_preview {  position: relative;  position: relative;
  display: flex;
  align-items: center;
  font-family:$font-semibold;
  padding-left:20px;
  background: url("../images/download_icon.svg") no-repeat left center;
  color:$dark_purple;
  &:hover{
    opacity: 0.6;
  }
}

.share_main {
  margin-left: auto;
  display: flex;
  align-items: center;
  position: relative;
  &.open{
    .dropdown-menu{
      display: block;
    }
  }
  .dropdown-menu{
    width: 150px;
    top:20px;
    li{
      a{
        height:34px;
        padding:8px 10px;
        display: flex;
        align-items: center;
        align-content: center;
        font-family:$font-semibold;
        img{
          max-width:14px;
          margin-right:10px;
        }
      }
    }
  }
}

.share_trigger{
  color:$dark_purple;
  font-family:$font-semibold;
  padding-left:20px;
  padding-right: 15px;
  position: relative;
  background: url("../images/share_icon.svg") no-repeat left center;
  &:after {
    top: 50%;
    right: 0;
    margin-top: -3px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color:#2e293b;
    border-width: 5px;
    margin-left: -5px;
  }
  &:hover{
    opacity: 0.6;
  }
}

.search_key{
  margin-bottom:30px;
  h4{
    font-family:$font-bold;
    font-weight: normal;
    margin-bottom: 10px;
  }
}

.tags_wrap{
  li{
    @extend .inline-block;
    a{
      background: rgb(228, 228, 228);
      border-radius: 12px;
      font-family: "AvenirLTStdMedium",Helvetica,sans-serif;
      font-size: 12px;
      color: #616161;
      text-align: center;
      display:block;
      padding: 4px 14px 2px;
      margin-bottom: 10px;
      margin-right: 5px;
      &:hover{
        opacity:0.7;
      }
    }
  }
}

.similar_menu{
  list-style-type: none;
  margin-bottom: 10px;
  li{
    @extend .inline-block;
    margin-right:30px;
    position: relative;
    &:after{
      content: "";
      position: absolute;
      top: 5px;
      right: -15px;
      width: 1px;
      height: 10px;
      background: #302b3d;
    }
    a{
      color:#3D4562;
      font-family:$font-bold;
      &:hover{
        color: #f3961d;
      }
    }
    &.active{
      a{
        color: #f3961d;
      }
    }
    &:last-of-type{
      margin-right:0;
      &:after{
        display:none;
      }
    }
  }
}

.similar_images{
  .tab_pane {
    padding: 0;
  }
}

.similar_thumb{
  width: auto;
  height: 83px;
  &:hover{
    opacity:0.9;
  }
}

.similar_thum{
  list-style-type: none;
  li{
    @extend .inline-block;
    padding-right:5px;
    margin-bottom: 10px;
    &:last-of-type{
      padding-right:0;
    }
    a{
      display: block;
      max-width: 142px;
      max-height: 83px;
      overflow: hidden;
    }
  }
}

.similar_link{
  width: 160px;
  height: 94px;
  font-family:$font-bold;
  background: #dedbdb;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #463250;
  &:hover{
    background: #463250;
    color:$white;
  }
}

.licence_tabs{
  list-style-type: none;
  border-bottom: #ddd solid 1px;
  margin-bottom: -1px;
  li{
    @extend .inline-block;
    margin-right:3px;
    a{
      color:#3D4562;
      font-family:$font-semibold;
      display: block;
      padding:8px 18px;
      border: #ddd solid 1px;
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      background: #F4F4F4;
      text-align: center;
      min-width: 90px;
      &:hover{
        color: #f3961d;
      }
    }
    &.active{
      a{
        background:$white;
        color: #f3961d;
      }
    }
  }
}

.selectable_type{
  padding:15px 20px;
  display: block;
  @extend .clearfix;
  cursor: pointer;
  .select_left{
    float: left;
    h4{
      font-family:$font-bold;
      font-weight:normal;
      margin-bottom: 3px;
    }
    p{
      font-size: 13px;
    }
  }
  .select_right{
    float: right;
    font-family:$font-bold;
    font-weight:normal;
  }
  &:hover{
    background:#eeeeee;
  }
}

.selected_tag{
  float: left;
  margin-right: 15px;
  margin-top: 15px;
}

.total_image_amount{
  border-top: #ddd solid 1px;
  padding: 20px;
  text-align: right;
  h3{
    font-family:$font-bold;
    margin-bottom:10px;
  }
}

.purchase_btn{
  background:$orange;
  color:#282034;
  border-radius: 4px;
  font-family:$font-bold;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  min-width: 111px;
  padding: 2px 18px;
  border: none;
  cursor: pointer;
  line-height: 36px;
  font-size: 14px;
  height: 38px;
  &:hover{
    background: #282034;
    color: #fff;
  }
}

.licence_excerpt{
  padding: 15px 20px;
  border-bottom: #ddd solid 1px;
  font-size: 13px;
}


.collapse {
  display: none;
  &.in{
    display: block;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height,visibility;
  -o-transition-property: height,visibility;
  transition-property: height,visibility;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}

.accordion_group{
  padding:0 15px;
}

.accordion_header{
  background: #F2F4F6;
  border-bottom: #e2e6ef solid 1px;
  padding: 14px;
  @extend .clearfix;
}

.acc_col{
  float:left;
  width:20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &.title{
    color: #4A4E53;
    font-family:$font-bold;
    font-size: 14px;
    font-weight: normal;
  }
  &.dropdown{
    position: relative;
    &:after {
      content: "";
      position: absolute;
      right:auto;
      top: -1px;
      margin-left: 6px;
      width: 20px;
      background: url(../images/arrow-down.svg) no-repeat center center;
      height: 20px;
      -webkit-transition: all 300ms ease-in 0s;
      -moz-transition: all 300ms ease-in 0s;
      -o-transition: all 300ms ease-in 0s;
      transition: all 300ms ease-in 0s;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
}

.acc_heading{
  @extend .clearfix;
  display: block;
  padding: 12px 0;
  border-bottom: #f2f4f6 solid 1px;
  color: #515872;
  &.collapsed{
    .acc_col.dropdown{
      &:after{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
  }
}

.acc_body{
  background: #F2F4F6;
  margin:0 -15px;
}

.release_acc{
  @extend .clearfix;
  padding:10px 15px;
}

.cta_small{
  font-size:13px;
  font-family:$font-semibold;
  &:hover{
    text-decoration: underline;
  }
}

.actions{
  text-align: center;
  padding: 10px;
  border-top: #ddd solid 1px;
}

.get_a_quote{
  margin-top:30px;
  padding: 20px;
  border: 1px solid #dfdfdf;
  background-color: #fff;
  h4{
    font-family:$font_bold;
    font-weight: normal;
    font-size:1.431em;
    margin-bottom:10px;
  }
  .form_group {
    margin-bottom: 0;
  }
  p{
    margin-bottom:20px;
  }
  form{
    @extend .clearfix;
    max-width:400px;
  }
  .quote_field{
    float: left;
    width:70%;
  }
  .quote_btn{
    width:30%;
    //margin-left:-10px;
  }
}


.small_btn{
  height: 45px !important;
  line-height: 45px !important;
  padding:0px 20px !important;
}


.add_release{
  float: right;
  font-family:$font-bold;
  color:$green;
  &:hover{
    color:$orange;
  }
}

.reg_user_type{
  padding: 10px 20px;
  display: block;
  cursor: pointer;
  border: transparent solid 2px;
  margin-bottom:30px;
  background: #FFFFFF;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  &:hover{
    background: #efefef;
  }
  p{
    margin-bottom: 0;
  }
}

.type_user{
  font-family:$font-semibold;
  font-weight: normal;
  font-size:16px;
}

.user_type_title{
  display: flex;
  align-items: center;
  margin-bottom:10px;
  input[type="radio"]{
    margin-right:6px;
    margin-top: -3px;
  }
}


.reg_center {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.reg_summary {
  width: 480px;
  flex: 0 0 480px;
  margin: 0;
  padding: 40px;
  position: relative;
  list-style: none;
  text-align: left;
  height: 100%;
}

.reg_actions {
  flex: 1;
  position: relative;
  min-width: 0;
  background: #fff;
  word-wrap: break-word;
  box-shadow: 0 2px 44px 0 rgba(0,0,0,0.14);
  padding: 40px;
  justify-content: center;
  display: flex;
  flex-direction: row;
}


.progress_excerpt{
  margin-bottom: 25px;
   p {
    margin-bottom: 20px;
    font-family:$font-semibold;
    font-size: 15px;
    color: #717B84;
    line-height: 24px;
  }
  .sr_heading_title {
    margin-bottom: 25px;
  }
}

.progress_menu{
  list-style-type: none;
  position: relative;
  &:before{
    content:"";
    width:1px;
    height:100%;
    background:#E6E7E9;
    position: absolute;
    left: 9px;
    top: 0;
  }
  li{
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom:30px;
    font-family:$font-semibold;
    color: rgba(113,123,132,0.50);
    &:before{
      width:13px;
      height:13px;
      border:2px solid transparent;
      background: #D9D9D9;
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      border-radius:50%;
    }
    &:after{
      content:"";
      position: absolute;
      left: 6px;
      top: 7px;
      display: none;
      background:url("../images/check.svg") no-repeat center center;
      width:8px;
      height:6px;
    }
    &.filled{
      color: #717B84;
      &:before{
        width:18px;
        height:18px;
        border-color:#40B4E5;
        background:#40B4E5;
        left: 1px;
        top: 1px;
      }
      &:after{
        display: block;
      }
    }
    &.current{
      color: #40B4E5;
      &:before{
        width:18px;
        height:18px;
        border-color:#40B4E5;
        background:$white;
        left: 1px;
        top: 1px;
      }
      &:after{
        display:none;
      }
    }
  }
}


.status {
  padding:5px 12px 3px;
  font-size: 12px;
  background: transparent;
  border-radius: 30px;
  &.rejected {
    background: #ff4512;
    color: #4e1100;
  }
  &.pending {
    background: #ffc112;
    color: #775800;
  }
  &.approved {
    background: #ADF0CC;
    color: #13713F;
  }
}

.clickable_td{
  font-family:$font-semibold;
  color:#066eec;
  text-decoration: underline;
  &:hover{
    color:$orange;
    text-decoration: underline;
  }
}

.contributor_prfl{
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 142px);
  padding:0;
}

.pfl_summary {
  width: 360px;
  flex: 0 0 360px;
  margin: 0;
  position: relative;
  list-style: none;
  text-align: left;
  padding-right: 15px;
  height: 100%;
  padding: 30px;
  .sr_heading_title{
    margin-bottom:20px;
  }
}



.prfl_detail {
  flex: 1;
  position: relative;
  flex-direction: column;
  padding: 30px;
  border-left: #E9EDF0 solid 1px;
}

.profile_avatar_wrap {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  img{
    width: 100%;
  }
}

.primary_info {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: #edf1f2 solid 1px;
  width: 100%;
  position: relative;
}

.profile_user_name {
  font-family:$font-semibold;
  color: #3D4661;
  font-size: 18px;
  margin-bottom:10px;
}

.profile_detail {
  margin-bottom:5px;
  opacity:0.8;
  font-family:$font-semibold;
}

.url_link {
  color: #40B4E5;
  margin:15px 0;
  display: block;
  font-family:$font-semibold;
  &:hover{
    color:#281f34;
    text-decoration: underline;
  }
}

.inline_title{
  color: #281f34;
  font-family:$font-bold;
  font-weight: normal;
  opacity: 0.75;
  font-size: 1.21em;
  margin-bottom: 10px;
}

.approved_contributor{
  color: #666d84;
  margin-bottom:20px;
}

.reason_rejected{
  margin:15px 0;
  strong{
    font-family:$font-semibold;
    font-width: normal;
  }
}

.approve_contributor{
  text-align: center;
  max-width: 800px;
  background: #fff;
  margin: auto;
  padding:20px 30px 30px;
  margin-bottom:30px;
  border-radius: 5px;
  border: #e9edf0 solid 2px;
  h4{
    font-family:$font-semibold;
    font-weight: normal;
    font-size:1.4em;
  }
  .url_link{
      margin:15px 0;
  }
}

.option_btns{
  button{
    border:none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.15em;
    font-family:$font-bold;
    padding:12px 26px;
    background: #2ab27c;
    min-width: 120px;
    margin-right:15px;
    color:$white;
    height: 42px;
    &.approve{
      &:hover{
        background:#1fa771;
      }
    }
    &.reject{
      background:#ce1d2e;
      &:hover{
        background:#c72231;
      }
    }
  }
}

.reject_message{
  @extend .clearfix;
  margin-top:20px;
  textarea{
    border:#d5d7dc solid 1px;
    width:100%;
    border-radius: 5px;
    resize: none;
    padding: 15px 20px;
    height: 90px;
    margin-bottom: 20px;
  }
  input[type="submit"]{
    border:#2ab27c solid 2px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.15em;
    font-family:$font-bold;
    padding:8px 26px;
    float: right;
    color:#2ab27c;
    &:hover{
      background:#2ab27c;
      color:$white;
    }
  }
}

.about_banner, .hero_video{
  width:100%;
  height:50vh;
  display: flex;
  @extend .full-bg;
  video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  &:after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color:rgba(35, 11, 99, 0.87);
    opacity: 0.6;
    z-index: 1;
  }
  .wrap{
    max-width: 630px;
    text-align: center;
    color:$white;
    z-index: 3;
    position: relative;
    h2{
      font-family:$font-bold;
      font-weight: normal;
      font-size: 2.2em;
      margin-bottom: 12px;
    }
    p{
      font-size:1.1em;
      font-family:$font-semibold;
    }
    .read_more{
      background:$orange;
      color:$black;
      margin-top:40px;
      padding: 10px 30px;
      font-size: 18px;
      &:hover{
        background: #FFC107;
      }
    }
  }
}

.section_about{
  @extend .clearfix;
  padding:40px 0;
}

.about_thumbnail{
  width:50%;
  float:right;
  position: relative;
  &:after{
    content: "";
    position: absolute;
    right:-10px;
    bottom:-10px;
    width:100%;
    height:100%;
    background:rosybrown;
  }
  img{
    width:100%;
    position: relative;
    z-index:1;
  }
}

.about_excerpt{
  width:50%;
  float:left;
  padding-right:80px;
}

.text_sheet{
  h2{
    font-family:$font-heavy;
    font-weight: normal;
    font-size:2em;
    margin-bottom:20px;
  }
  h3{
    font-family:$font-bold;
    font-weight: normal;
    font-size:1.8em;
    margin-bottom:15px;
  }
  h4{
    font-family:$font-bold;
    font-weight: normal;
    font-size:1.2em;
    margin-bottom:5px;
  }
  h5{
    font-family:$font-bold;
    font-weight: normal;
    font-size:1.2em;
    margin-bottom:10px;
  }
  strong{
    font-family:$font-bold;
    font-weight: normal;
  }
  p{
    margin-bottom:25px;
    strong{
      font-family:$font-bold;
      font-weight: normal;
    }
    a{
      color:$purple;
      text-decoration: underline;
      font-family:$font-bold;
      &:hover{
        color:$orange;
      }
    }
  }

  a{
    color:$purple;
    text-decoration: underline;
    font-family:$font-bold;
    &:hover{
      color:$orange;
    }
  }

  ol{
    margin-left:25px;
    li{
      margin-bottom:15px;
      ul{
        list-style-type: disc;
        margin-left: 20px;
        margin-top: 10px;
        li{
          margin-bottom:10px;
        }
      }
    }
  }

  ul{
    margin-left:25px;
    li{
      margin-bottom:15px;
      ul{
        list-style-type: disc;
        margin-left: 20px;
        margin-top: 10px;
        li{
          margin-bottom:10px;
        }
      }
    }
  }
}

.faq_page{
  padding:40px 0;
  .wrap{
    max-width:830px;
  }
}

.single_page_title{
  h2{
    font-family:$font-heavy;
    font-weight: normal;
    font-size:2em;
  }
  margin-bottom:20px;
}

.collapse {
  display: none;
  &.in{
    display: block;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height,visibility;
  -o-transition-property: height,visibility;
  transition-property: height,visibility;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}


.faq_heading{
  position: relative;
  padding:18px 30px;
  display: block;
  border-bottom:#E6E9E8 solid 1px;
  font-family:$font-semibold;
  font-size: 18px;
  color:$orange;
  &:before{
    content:"";
    position: absolute;
    left:0;
    top:50%;
    margin-top:-4px;
    background:$orange;
    width:8px;
    height:8px;
    border-radius:50%;
  }
  &:hover{
    color:$orange;
  }
  &.collapsed{
    color:#3d4562;
    &:before{
      background:#3d4562;
    }
    .icon_state{
      &:after{
        background:#3d4562;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
      }
    }
  }
}

.faq_body{
  padding:20px 30px;
  border-bottom:#E6E9E8 solid 1px;
  p{
    margin-bottom:20px;
    font-size:15px;
    &:last-of-type{
      margin-bottom:0;
    }
  }
}

.icon_state{
  position: absolute;
  right: 0;
  top:50%;
  margin-top:-10px;
  width: 20px;
  height: 20px;
  @include animaxn;
  &:before{
    content:'';
    width:18px;
    height:2px;
    position: absolute;
    top: 8px;
    left: 0;
    background:#3d4562;
  }
  &:after{
    content:'';
    width:2px;
    height:18px;
    position: absolute;
    top: 0;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    left: 8px;
    background:$orange;
  }
}


.section.contacts{
  padding:50px 0;
  .wrap{
    max-width: 860px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 24px 0 rgba(0,0,0,0.04);
    -moz-box-shadow: 0 0 24px 0 rgba(0,0,0,0.04);
    box-shadow: 0 0 24px 0 rgba(0,0,0,0.04);
    position: relative;
    z-index: 3;
    background: #fff;
    display: flex;
    align-items: stretch;
    flex-direction: row-reverse;
  }
}

.contact_address {
  float: right;
  width: 40%;
  padding: 40px;
  background-image:linear-gradient(150deg, #f79820 0%, #ed921d 100%);
  color:$purple;
}

.contact_form {
  float: left;
  width: 60%;
  padding: 40px;
  .form_group {
    margin-bottom: 30px;
    input[type="submit"]{
      width: auto;
      height: 45px;
      padding: 14px 30px;
    }
  }
}

.address {
  text-align: center;
  margin-bottom: 45px;
  h4{
    font-family:$font-bold;
    font-weight: normal;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  p{
    a{
      color:$purple;
      &:hover{
        text-decoration:underline;
      }
    }
  }
}

.contact_title {
  font-family:$font-bold;
  font-weight: normal;
  font-size: 1.286em;
  margin-bottom: 15px;
}

.faq_contacts{
  background: #fff;
  border-top: #ebedee solid 1px;
  padding:50px 0;
  .flex_item {
    width: 30.538462%;
  }
}

.flex_container {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 0 -30px;
}

.flex_item {
  margin: 0 30px;
  display: flex;
  width: 20.5384615385%;
}

.contact_card{
  background: #FFFFFF;
  box-shadow: 0 2px 26px 0 #D3E8F0;
  border-radius: 16px;
  text-align: center;
  padding:25px;
  width: 100%;
  font-size: 14px;
  img{
    max-width:34px;
    width:100%;
    margin-bottom:15px;
  }
  h4{
    font-family:$font-semibold;
    font-weight: normal;
    color:#674ab7;
    margin-bottom:6px;
    a{
      color:#674ab7;
      &:hover{
        color:$black;
      }
    }
  }
}

.faq_excerpt{
  max-width: 520px;
  margin: auto;
  margin-bottom:40px;
  text-align: center;
  h3{
    font-family:$font-bold;
    font-weight: normal;
    font-size: 1.6em;
    margin-bottom: 10px;
  }
}

.terms_condition{
  padding:40px 0;
  .wrap{
    max-width:700px;
  }
  &.download_page{
    min-height:70vh;
    .wrap{
      max-width:900px;
    }
  }
}

.single_blog_page{
  padding:40px 0;
  min-height:300px;
  .wrap{
    max-width:700px;
    position: relative;
  }
}

.site_downloads{
  list-style-type: none;
  li{
    display: block;
    a{
      padding: 24px 17px;
      padding-left: 75px;
      -webkit-transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in;
      -o-transition: all 0.3s ease-in;
      -ms-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in;
      background: url(../images/pdf_icon.svg) no-repeat 24px center;
      display: block;
      border-bottom: #EEEEEE solid 1px;
      color:$purple;
      @extend .clearfix;
      &:hover{
        .download_btn{
          background:$orange;
        }
        .download_desc h4, p{
          color:$orange;
        }
      }
      .download_desc {
        float: left;
        width: 82%;
        padding-right: 40px;
        padding-top: 3px;
        h4{
          font-family:$font-bold;
          font-weight: normal;
          font-size:1.12em;
          margin-bottom: 4px;
        }
      }
      .download_btn {
        float: right;
        width:18%;
        background:#9c9c9c;
        text-align: center;
        padding:12px 14px;
        border-radius: 50px;
        color:$white;
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        text-transform: uppercase;
        font-size:11px;
        font-family:$font-bold;
        svg{
          margin-left: 10px;
        }
      }
    }
  }
}

.blog_listing_page{
  padding:50px 0;
}

.blog_articles{
  list-style-type: none;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  li{
    width: 31.5%;
    margin-bottom: 40px;
  }
}
.page_excerpt{
  margin-bottom:30px;
}

.blog_box{
  background: #FFFFFF;
  display: block;
  box-shadow: 0 2px 6px 0 rgba(69,73,91,0.08);
  &:hover{
    .read_more{
      background:$orange;
      color:$black;
    }
    .blog_thumb{
      img{
        opacity:0.9;
      }
    }
  }
}

.blog_thumb{
  img{
    width:100%;
  }
}

.blog_excerpt{
  padding:30px 20px;
  h4{
    font-family:$font-semibold;
    font-size: 16px;
    color: #464855;
    line-height: 20px;
    margin-bottom:20px;
  }
}

.read_more{
  background: #F4F5FA;
  border-radius: 3px;
  color:#898EA2;
  font-family:$font-semibold;
  padding:6px 13px 4px;
  @extend .inline-block;
}

.article_title{
  font-family: $font-bold;
  font-weight: normal;
  font-size:1.8em;
  margin-bottom:15px;
}

.feature_image{
  margin-bottom:20px;
  img{
    width:100%;
  }
}

.social_share{
  position: absolute;
  left: -120px;
  top:0px;
  background: #FFFFFF;
  width:85px;
  text-align: center;
  padding:15px 3px;
  color: #323A43;
  h4{
    font-family:$font_bold;
    font-weight: normal;
    font-size: 1.25em;
    margin-bottom: 10px;
  }

  ul{
    list-style-type: none;
    li{
      display: block;
      width: 40px;
      height: 40px;
      border:#e5e5ec solid 1px;
      text-align: center;
      line-height: 38px;
      margin: auto;
      margin-bottom: 10px;
      border-radius: 3px;
      img{
        vertical-align: middle;
        max-width: 16px;
        max-height: 16px;
      }
      a{
        display: block;
        &:hover{
          background: #e5e5ec;
        }
      }
    }
  }
}


.related_blog_articles{
  h3{
    font-family:$font_bold;
    font-weight: normal;
    font-size: 1.25em;
    margin-bottom: 10px;
  }
  .blog_excerpt {
    padding: 20px;
  }
  h4{
    font-size:1em;
  }
}


.menu_toggle{
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  float: left;
  display: none;
  height: 70px;
  padding-right: 18px;
  margin-right: 18px;
  border-right:1px solid #3c324a;
  .menu_toggle_icon {
    display: inline-block;
    width: 18px;
    height: 14px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    cursor: pointer;
    span{
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      border-radius: 2px;
      left: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: 0.25s ease-in-out;
      background: #ffffff;
      &:nth-child(1) {
        top: 0;
      }

      &:nth-child(2), &:nth-child(3) {
        top: 6px;
      }

      &:nth-child(4) {
        top: 12px;
      }
    }
  }
  .menu_toggle_label {
    margin-left: 8px;
    color:#fff;
    font-family:$font-semibold;
  }
}

.menu_overlay{
  position: fixed;
  height: 0%;
  width: 0%;
  z-index:11;
  background:rgba(43, 46, 56, 0.59);
  display: block;
  content: '';
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s;
}

.nav-open{
  .wv_navigation{
    display: block;
  }
  .vw_content{
    transform: translate3d(250px, 0px, 0px);
    box-shadow: 2px 6px 7px 0 rgba(0,0,0,0.32);
  }
  .menu_overlay{
    visibility: visible;
    opacity: 1;
    height: 100%;
    width: 100%;
  }
  .menu_toggle .menu_toggle_icon{
    span{
      &:nth-child(1){
        top: 6px;
        width: 0;
        left: 50%;
      }
      &:nth-child(2) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      &:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      &:nth-child(4) {
        top: 6px;
        width: 0;
        left: 50%;
      }
    }
  }
}

.wv_frame{
  overflow-x:hidden;
  .wv-frame__navigation {
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 250px;
    background: #ebeff4;
  }
}


.wv-frame {
  transition: left 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  position: relative;
  height: auto;
  min-height: 100%;
  width: 100%;
}

.wv_navigation {
  position: fixed;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 250px;
  display: none;
  background:#F7F7FC;
  .user_modal {
    width: 100%;
    padding: 0 20px;
    border-bottom: #acacb05e solid 1px;
    height: 60px;
  }
}


.vw_content{
  position: relative;
  z-index: 9;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.utility_nav{
  list-style-type: none;
  padding:0 25px;
  margin-top: 25px;
  li{
    display:block;
    margin-bottom:20px;
    a{
      @extend .inline-block;
      color:$purple;
      display: block;
      font-family:$font-semibold;
      &:hover{
        color:$green;
      }
    }
  }
}

.login_mobile_division{
  background:rgba(40, 32, 52, 0.18);
  padding:19px 25px;
  .user_name{
    @extend .clearfix;
    .login_label {
      max-width:160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .login_avatar{
      float: right;
    }
  }
}

.login_dt{
  list-style-type: none;
  li{
    @extend .inline-block;
    margin-right:15px;
    a{
      display: block;
      background: #f79821;
      color: #fff;
      font-family:$font-semibold;
      padding:4px 10px;
      border-radius: 30px;
      width: 90px;
      text-align: center;
      border: #f79821 solid 2px;
    }
    &:first-of-type{
      a{
        background: none;
        color: #282034;
        border-color: #282034;
        &:hover{
          background: #282034;
          color:$white;
        }
      }
    }
    &:last-of-type{
      margin-right:0;
    }
  }
}

.user_mobile_menu{
  list-style-type: none;
  li{
    display: block;
    a{
      color:$purple;
    }
  }
}

.user_dt{
  b{
    font-family:$font-semibold;
    font-weight: normal;
  }
}

.initialize_btn{
  height: 70px;
  display: flex;
  align-items: center;
}

.faq_sub_title{
  font-family:$font-semibold;
  font-weight: normal;
  font-size:1.4em;
  margin-bottom: 25px;
  margin-top:30px;
  padding-bottom: 5px;
  position: relative;
  color:$orange;
  &:before{
    content:"";
    position: absolute;
    left:0;
    bottom:0;
    width:40px;
    height:2px;
    background:$orange;
  }
}

.panel-group{
  .panel{
      &:last-of-type{
        .faq_body{
          border-bottom: none;
        }
      }
  }
}

.contributor_list{
  padding:40px 0;
}

.table_head{
  font-family:$font-bold;
  color: #545f78;
}

.no_cursor{
  cursor: default !important;
}

.filter_module{
  padding: 20px;
  h4{
    font-family:$font-bold;
    margin-bottom:10px;
  }
  .styled-select{
    height: 35px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    select{
      padding: 5px 15px;
      height: 35px;
    }
  }
}

.filter_row{
  position: relative;
  display: flex;
  flex-direction: row;
  &.first_rw{
    margin-bottom:20px;
    .filter_col{
      width:150px;
      flex: 0 0 150px;
    }
  }
  .filter_col{
    width:210px;
    flex: 0 0 210px;
  }
}

.filter_btn{
  background:$orange;
  color:$white;
  border:none;
  height:35px;
  padding:0 25px;
  text-transform: uppercase;
  font-family:$font-semibold;
  cursor: pointer;
  &:hover{
    background:$purple;
  }
}

.admin_form{
  padding:30px;
  .btn{
    background:$orange;
    padding:5px 20px;
    color:$white;
    font-family:$font-semibold;
  }
}

//Added The new grid items

.stock_grid {
  //margin-right: -40px;
  //--grid-row-height: 200px;
}

.stock_item {
  position: relative;
  margin:0 0px 4px 0;
  width: calc(25% - 4px);
  height:280px;
  @extend .inline-block;
}




.container_link_image{
  position: absolute;
  height: 100%;
  display: inline-block;
  max-width: 100%;
  min-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

//Grid ends

.stock_grid{
  //display: grid;
  //grid-gap: 10px;
  //grid-template-columns: repeat(auto-fill, minmax(380px,1fr));
  //grid-auto-rows: 20px;
  //grid-template-columns: 1fr 1fr 1fr;
  //grid-template-rows: minmax(380px, auto) minmax(380px, auto);
  //grid-auto-rows: minmax(380px, auto);
}

.stock_grid {
  //display: grid;
  //grid-template-columns: repeat(4, 1fr);
  //grid-template-rows: 80px repeat(8, minmax(10px, 150px));
  //grid-gap: 3px;
  //transition: all .5s ease-in-out;
  //column-gap:0px;
  //column-count: 5;
  //column-fill: initial;
  .stock_item {
    position: relative;
    border: 1px solid #f0f0f0;
    //border:red solid 1px;
    background: #fdfdfd;

    //width: 100%;
    //width: calc(20% - 30px);
    //float: left;
    //height:340px;
    //overflow: hidden;
    //margin:0 15px 30px 15px;
    //display: -webkit-box;
    //display: flex;
    //vertical-align: middle;
    //-webkit-box-pack: center;
    //justify-content: center;
    //-webkit-box-align: center;
    //align-items: center;

    img{
      max-width: 100%;
      vertical-align: middle;
      transition: all .5s ease-in-out;
      backface-visibility: hidden; /* Remove Image flickering on hover */
    }
    &:hover{
      .button_zoom{
        opacity: 1;
        visibility: visible;
      }
      .container_link{
        &:before, &:after{
          opacity: 1;
        }
        .file-container__actions, .file_container_title, .file-container__btns{
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
  @for $i from 1 through 36 {
    stock_item:nth-child(#{$i}) {
      $h: (random(400) + 100) + px;
      height: $h;
    }
  }
}


.basket_btn {
  background: #f79821;
  color: #282034;
  border-radius: 4px;
  font-family:$font-bold;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  align-self: center;
  padding: 2px 18px;
  border: none;
  cursor: pointer;
  line-height: 36px;
  font-size: 14px;
  height: 40px;
}

.stock_type_menu{
  background: #fff;
  padding:20px 0px;
  text-align: center;
  border-bottom: #efefef solid 1px;
}

.stock_type_nav{
  @extend .inline-block;
  list-style-type: none;
  li{
    @extend .inline-block;
    margin:0 10px;
    &.current{
      a{
        color:$orange;
        &:after{
          display: block;
        }
      }
    }
    a{
      display: block;
      text-transform: uppercase;
      color:$text_color;
      font-family:$font-bold;
      position: relative;
      padding:0 30px;
      &:hover{
        color:$orange;
      }
      &:after{
        content:"";
        bottom: -20px;
        width:100%;
        height:3px;
        left:0;
        display: none;
        position: absolute;
        background:$orange;
      }
    }
  }
}

.fancybox-button--zoom{
  display: none !important;
}

div.tagsinput{
  margin-bottom: 30px;
  border-radius: 4px;
}

.cursor_pointer{
  cursor: pointer;
}

.stock_type{
  position: absolute;
  left: 0;
  width:35px;
  display: block;
  height: 30px;
  bottom: 10px;
  background: #f79821;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-family:$font-bold;
}

.button-circle{
  &.licence_type{
    font-family:$font-bold;
    color:$text_color;
    font-size: 14px;
    line-height: 42px;
  }
}

.stock_grid_full{
  -webkit-column-width: 320px;
  -moz-column-width: 320px;
  column-width: 320px;
  max-width: 1600px;
  margin:auto;
}

.stock_item_one{
  position: relative;
  background: #fefefe;
  //margin-bottom:4px;
  transition: opacity .4s ease-in-out;
  //@extend .inline-block;
  //column-break-inside: avoid;
  //img{
  //  width:100%;
  //}
  &:hover{
    .button_zoom{
      visibility: visible;
      opacity: 1;
    }
    .container_link{
      &:before, &:after{
        opacity:1;
      }
      .file_container_title, .file-container__actions{
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

.hide_for_human{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -99999px;
  top: -99999px;
  font-size: 0;
  line-height: 0;
}

.recently_viewed_stock{
  @extend .inline-block;
  margin: 0 0 1em;
  width: 100%;
  position: relative;
  img{
    width: 100%;
  }
}

.recently_viewed_video{
  @extend .inline-block;
  margin: 0 0 1em;
  width: 100%;
  position: relative;
  height:250px;
  video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
}

.recently_viewed{
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}


.in_photos_grid{
  column-count: 4;
  column-gap:5px;
  list-style-type: none;
  li{
    margin-bottom:5px;
    img{
      width:100%;
    }
  }
}

.report_preview {
  position: relative;
  display:block;
  font-family:$font-semibold;
  background:$white url("../images/megaphone.svg") no-repeat 15px center;
  color: #262134;
  border: #ddd solid 1px;
  height: 45px;
  line-height: 45px;
  padding-left: 40px;
  border-radius: 5px;
  &:hover{
    background-color:$orange;
    border-color:$orange;
  }
}

.header_flex_row{
  width: 100%;
  height: 70px;
  display: flex;
  position: relative;
  align-items: center;
  .header_flex_left {
    position: relative;
  }
  .header_flex_right {
    margin-left: auto;
  }
}

.img_element_wrap{
  //max-height:250px;
  overflow: hidden;
  text-align: center;
  img{
    width:auto;
    height:140px;
  }
}

.ms-parent{
  width:100% !important;
}

.stock_list_wrap{
  padding-left:40px;
  .sr_heading_title{
    margin-bottom:10px;
  }
}

.photo_grid{
  column-count: 4;
  column-gap:5px;
  list-style-type: none;
  li{
    margin-bottom:5px;
    img{
      width:100%;
    }
  }
}

.add_more_item_cart{
  margin-bottom:1rem;
}