/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb(@start,@start,@start)),
                               color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb(@start,@start,@start) 0%,
                                  rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb(@start,@start,@start) 0%,
                                   rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                 rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}
.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -webkit-border-top-left-radius: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
  border-top-left-radius: @topleft;
  .background-clip(padding-box);
}
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}
.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}
.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}
.rotation(@deg:5deg){
  .transform(rotate(@deg));
}
.scale(@ratio:1.5){
  .transform(scale(@ratio));
}
.transition(@duration:0.2s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}
.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}
.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}
.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}
.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}//@bodyBg: #0081c2;

@bodyBg: #aeaeae;
//@bodyBg: #e0ebf1;
@bgImage: url('img/bgimage.png');
@hFont: 'Poppins';
@navFont: 'Quicksand';
@bodyFont: 'Roboto', sans-serif;
@headerTitles: 'Oswald';

@a: #0080c0;
@aHover: darken(@a, 20%);
@titleColor:#427299;
@headerImg: url('/img/headline-image.jpg');

//Navbar
@navBg: #000;
//@navBg: #c6e2ff;
@navItem: #70a9d9;
@navHeight: 76px;
@navDropShadowX: 0px;
@navDropShadowY: 5px;
@navDropShadowBlur: 5px;
@navDropShadowTrans: 0.2;

@topItemColor: #ffffff;
@topItemColorHover: #fff;
@topItemBg: none;
@topItemBgHover: #0081c2;

@subMenuBorderRadius: 0px;
@subMenuBorder: none;
@subMenuTop: 10px;
@subMenuTopMobile: 0px;
@subMenuBg: #ebeced;

@subItemColor: #000;
@subItemColorHover: #fff;
@subItemBg: #fff;
@subItemBgHover: #0081c2;
@subItemDivider: 1px solid lighten(@subItemColor, 50%);

//Footer
@footerLinks: #ebeced;
@footerLinksHover: #79bcff;
@footerBg: #3a3a3a;

//Presets
@duration: .2s;
@distance: 8px;
@easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);

//Custom

@rlgBlue: #4c586f;
@gold: #aaaa00;
@adminHeight: 1vh;  
  .stage-local,
  .stage{
    position: fixed;
    z-index: 99999999;
    top: 00px;
    left: 48%;
    padding: 2px 6px;
    font-size: .8em;    
    color: #fff;   
    font-family:@bodyFont;       
    background: #b90000;
  }
  .stage-local{     
    background: #8000ff;
  }

  input,.custom-select{
    background-color: #f1f5f6 !important;
    border: 1px solid rgb(194, 204, 214) !important;
    border-radius: 0px !important;    
    color:  rgb(70, 110, 146) !important;
    font-weight: 300 !important;            
  }
  input:disabled,.custom-select:disabled{
    background: rgb(182, 182, 182) !important;
    color: #333 !important;
  }
  // .custom-select{
  //   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
  // }

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #777 !important;
    font-weight: 100 !important;
    opacity: 1 !important; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #777 !important;
    font-weight: 100 !important;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #777 !important;
    font-weight: 100 !important;
  }

  h1, h2, h3, h4, h5, h6{
    font-family: @hFont;
    color: @titleColor !important;
  }

  a{
    text-decoration: none;
    color: @a;
    &:hover{
      color: @aHover;
    }
  }

  body {
    margin: 0;
    padding: 0;
    background: @bodyBg !important;
    font-family: @bodyFont;
    font-weight:100;    
    font-size: .9rem;
  }
  .background {
    position:  absolute;
    display:  block;
    top: 50;
    left: 0;
    z-index: 0;          
    background: transparent;
  } 
  .content-main{
 
    padding-top: 76px;
    min-height: calc(100vh - 227px);
    font-size: 20px;
    font-family: @bodyFont;
    @media(max-width: 768px){
      font-size: 16px;
      margin:0;
    }
  }

  .main-block{
    min-height: 40vh;
    
  }
    @media (min-width: 992px) {
    #page-container{
      padding-top: 6rem;
    }
  }

  .custom-select{
    font-family: @bodyFont !important;
  }

  .designed-by{
    cursor:pointer;
    bottom: 5px;
  }
  .designed-by-nopointer{
    cursor:default;
    bottom: 5px;
  }  
  /* 
    Updated for version 3.36 
    CORE Default
  */

  .navbar-collapse{
    @media(max-width:768px){
      padding-top: 30px;
    }    
  }

  .desktop-menu{
    margin-left: auto;
    margin-right: 10px;
    @media(max-width: 768px){
      margin-left: 10px !important;
      margin-right: auto !important;
    }
  }

  .navbar{
    background: @navBg;
    //border-bottom: 1px solid #777;
    min-height: 76px;
    max-width:100vw !important;
    @media(max-width:1024px){
      font-size: .8em;
    }
  }

  .navbar-toggler{
    color: #fff !important;
  }

  .form-control{
    z-index: 1 !important;
  }
  .navbar-nav{
    @media(max-width:768px){    
      //display:none !important;    
    }
  }
  .login-box{
    z-index: 1;
  }
  #mainNav{
    background: @navBg !important;
    top: 0 !important;
    position: fixed !important;
    z-index: 9999999;
    width: 100vw !important;
    height: @navHeight !important;
  }
  #logo-img{
    display: block;
    cursor: pointer;
    max-width: 197px;
    max-height: 70px;
    // min-width: 163px;
    // min-height: 58px;

    @media(max-width:768px){
      height:70%;
      width: 70%;
    }
    @media(max-width:1024px) and (min-width: 1024px){
      width: 60%;
      height: 60%;
    }    
  }
  // #logo-img-top{
  //   cursor: pointer;
  //   margin-left: auto;
  //   margin-right: auto;    
  //   margin-top: 25px;
  //   @media(max-width: 768px){
  //     height: 40px;
  //   }    
  // }
  .nav-item a{
    @media(max-width: 1000px){
      text-align: left !important;
    }
  }
  .dropdown-divider{
    border-top: @subItemDivider !important;
    margin: 2px 4px;
  }

  .dropdown-menu{
    margin-top: @subMenuTop;
    background: @subMenuBg !important;  
    font-size: .7rem;  
    @media(max-width:768px){
      margin-top: @subMenuTopMobile; 
      width: 90vw;
    }
    @media(min-width:1000px){
      border-radius: @subMenuBorderRadius !important;   
      border: @subMenuBorder;
      text-align: left !important;
      .drop-shadow(
        @navDropShadowX,
        @navDropShadowY,
        @navDropShadowBlur,
        @navDropShadowTrans,
      );      
    }

  }

  .dropdown-item{
    color: @subItemColor !important;
    text-transform: uppercase;
    transition: 0.3s;
    margin-bottom: 3px;
    font-family: @navFont;
    font-size: 1.3em;
    font-weight: 400;
    &:hover{
      color: @subItemColorHover !important;
      background: @subItemBgHover !important;      
    }
    @media(max-width:768px){
      margin: 12px 5px;
      font-size: 1em;
    }
  }
  .menu-hr{
    margin: 4px;
  }

  .nav-link{
    font-family: @navFont;
    font-weight: 100;
    font-size: 1.3em;
    text-align: center !important;
    text-transform: uppercase;
    padding: 10px 30px;
    margin: 0 10px;
    color: @topItemColor !important;
    background: @topItemBg !important;
    transition: 0.2s;
    &:hover{
      color: lighten(@topItemColor, 80) !important;
      background: @topItemBgHover !important;      
    }
    @media(max-width:768px){
      text-align: left !important;
    }
    @media(max-width:1024px){
      padding: 2px;
      margin: 2px;
    }    
  }

  .nav-right{
    position: fixed;
    right: 20px;
  }


  .submenu-header a{
    color: @topItemBgHover !important;
    font-weight: bold;
    font-size: .9em;
    font-style: italic;
    padding: 3px;
    margin: 2px 5px;    
    width: 80%;
  }

  //Sidebar stuff
  .sidebar-container{
    width: 340px !important;
    position: absolute;
    left:-300px;
    top: 0px;
    height:100vh; 
    z-index: 9999999;
  }

  .sidebar-tag{   
    background: rgb(114, 0, 99);
    color: #fff;
    border-radius: 0 10px 10px 0px;
    position: fixed;
    left: 0px !important;
    padding: 6px 0px;
    text-align: center;
    font-size: .9em;
    margin-top: 80px;
    top: -50px !important;
    height: 60px !important;
    width: 50px;
    padding-top: 15px;
    cursor: pointer;
  }

  .sidebar-body{
    background: #fff;
    //.drop-shadow(5px, 5px, 10px, 0.2);
    width: 300px;
    height: 100%;
    padding: 10px;
    //border: 1px solid rgb(114, 0, 99);
    background: @navBg;
  }
  .sidebar-shadow{
    .drop-shadow(5px, 5px, 10px, 0.3);
  }
  .sidebar-body a{
    text-align: left !important;
  }

  //Admin Bar

  .admin-bar{
    background: #fffcd7;
    min-height: 35px;
    width: 100%;
    font-size: .9rem;
    border-bottom: 1px dashed #aaa;
  }

  .admin-spinner{
    width: 10px !important;
    height: 10px !important;
    vertical-align: -1% !important;
  }
  .admin-menu{
    color: #a11d1d !important;
  }.page-container-full{
  width: 100%;
  background: #fff;
  margin: 0 auto 0 auto;
  padding: 0px;
  position: relative;                    
  //.drop-shadow(5px, 5px, 8px, 0.3); 
  //background: transparent;     
  background-repeat: no-repeat;  
  background-position: left top;  
  min-height: 80vh;
  font-size: .9em;
  @media(max-width: 768px){
    width:100vw;
  }
  
}

.fp-header-col{
  border: 2px solid #fff;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  margin: 10% 0 10% 0;
}

.login-bg{  
  height: 73vh !important;
  background-image: url('/img/login-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;  
  background-position: center;

}

.login-box{
  .drop-shadow(5px, 5px, 8px, 0.3); 
  margin-bottom: 30px;
}

.no-border{
  border: none !important;
}

.small-tabs{
  font-size: .7rem;
}
.small-tabs .nav-link{
  padding: 2px 10px !important;
  margin: 4px 1px !important; 
  color: @navBg !important;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  &:hover{
    color: #fff !important;
  }
}

.small-tabs a.active{
  background: @a !important;
  color: #fff !important;
} 

.small-tabs .tab-content{
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none !important;
  border-radius: 0 0 4px 4px;
  margin-top: 0 !important;
  font-size: .9rem;
}

.ck-editor__editable_inline{
  min-height: 300px !important;
  max-height: 600px;
  overflow-y: scroll;
}

.admin{
  font-size: .9rem;
  input{
    font-size: .8rem;
  }
  .custom-select{
    font-size: .9rem;
  }
}

.div-200{
  min-height: 300px;
}

.file-icon{
  font-size: 3rem;
}
.icon-red{
  color: rgb(155, 6, 6);
}
.icon-blue{
  color: rgb(55, 97, 175);
}
.icon-green{
  color: rgb(73, 124, 73);
}
.icon-gray{
  color: #777;
}
.button-small,
.small-button{
  font-size: .8em !important;
  padding: 3px 5px !important;
}
.url-builder{
  font-size: .8em;
  color: #777;
  font-style: italic;
  min-height: 30px;
}

img{
  max-width: 100%;
}


.insight-list-card{
  border: none !important;
  cursor: pointer !important;
}


.insight-row{    
  cursor:pointer;
  transition: 0.2s;
  &:hover{
    //.scale(1.01);
    background: #ffffe1;
  }
}
.pointer{
  cursor: pointer;
}

.time-invalid{  
  background: #fff2f2 !important;
}

.desktop-only{
  display: block;
  @media(max-width: 768px){
    display: none;
  }
}
.card-header{
  padding: 0 !important;
}
.insight-col{
  width: 200px;
  padding: 10px !important;
  padding-top: 20px !important;
  @media(max-width: 768px){
    display: inline-block;
    text-align: center;
    padding-top: 7px !important;
    width: 100%;
  }
}
.insight-col-alerts{
  background: #de7256 !important;
}
.insight-col-interruptions{
  background: #d9924a !important;
}
.insight-col-notices{
  background: #d8c77c !important;
}
.insight-col-announcements{
  background: #7c87a0 !important;
  
}
.insight-flag{
  color: #fff;
}
.insight-body{  
  
  @media(max-width: 768px){    
    
  }
}
.insight-title{
  font-size: 1.3rem;
  color: @topItemBgHover;
  text-align: left !important;
  @media(max-width:768px){
    text-align: center !important;    
  }
}
.custom-file{
  overflow:hidden;
}
.insight-page-title{
  color: @topItemBgHover;
  text-align: left !important;
  @media(max-width:768px){
    text-align: center !important;    
    font-size: 1.7em;
    margin-top: 20px;
  }
}

.insight-label-mobile{
  display: none;
  color: #fff;
  font-weight: 100;
  font-size: 1.9em;
  @media(max-width: 768px){    
    display: inline-block;
    .scale(.7);    
  }
}
.insight-label-desktop{
  display: none;
  color: #fff;
  font-weight: 100;
  font-size: 1.9em; 
  
  @media(min-width: 769px){    
    display: block;
    .scale(.7);    
  }
}

.insight-icon{
  margin-top: auto !important;
  margin-bottom: auto !important;
  .scale(1.3);
  //.opacity(.5);
  .rotation(20deg);
}
.insight-featured-image{
  max-width: 200px;
  padding-right: 20px;
}
.insight-info{
  font-size: .9em;
  color: #777;
}
.insight-pa{
  font-size: .7em;
  color: #777;
  font-style: italic;
}
.insight-intro{
  font-size: .9em;
}
.insight-page{
  display: inline-block;
  border: 1px solid #0080c0;  
  background: #0080c0;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  margin: 0 5px;
  min-width: 40px;
  cursor: pointer;
}
.insight-page.active{
  color: #000;
  background: #b6b6b6 !important;
  cursor: default;
}
.insight-body img{
  @media(max-width:768px){
    width: 95% !important;
    height: 95% !important;
  }
}
.team-pic-insight{
  .drop-shadow(4px, 4px, 7px, 0.3);  
  max-width: 120px;
  max-height: 120px;
}
.insight-footer{
  font-size: .8em;
  color: #777;
}
.b-calendar-inner{
  width:auto !important;
  margin-top: 0px;
}
.b-calendar-inner .btn-outline-light{
  &:hover{
    background-color: #0080ff !important;
    color: #fff !important;
  }
}
.b-calendar-inner .btn:hover{
  width: 100%;
  height: 100%;
}
.b-calendar-inner .rounded-circle{
  width:90%;
  height:90%;
  margin-top: 5px;
}  

.download-button{
  @media(max-width:768px){
    font-size: .9em;
    padding: 4px 8px;
  }
}

.jumbotron-title{
  color: #000 !important; 
  font-size: 3em;
  @media(max-width:768px){
    font-size: 1.7em;
    line-height: normal;
    text-align: center;
    padding-bottom: 25px !important;
  }
}

.icon-list{
  height: 400px;
  width: 300px;
  overflow-y:scroll;
}

.fa-icon{
  cursor: pointer;
  transition: 0.2s;
  &:hover{
    .scale(1.2);    
  }
}

.tabs-20{
  width: 20% !important;
  @media(max-width:768px){
    width: 100% !important;
  }
}

.tabs-25{
  width: 25% !important;
  @media(max-width:768px){
    width: 100% !important;
  }
}

.side-tabs .nav-link{
  color: rgb(51, 75, 126) !important;
  font-size: .9em;
  padding: 10px 5px;
  margin:4px 8px;
  &:hover{
    background: #0081c2 !important;
    color: #fff !important;
  }
  @media(max-width: 768px){
    padding: 10px 10px;
  }

}
.side-tabs .nav-link.active{
  color: #fff !important;
  background: #0081c2 !important;
}

.text-small{
  font-size: .8em;
  color: #777;
}  .footer{    
    background: @footerBg !important;
    min-height: 100px;
   // margin-top: 40px;
    @media(max-width:768px){
      min-height: 150px !important;
    }
  }
  .footer-links{
    color: @footerLinks;
    margin: 20px 20px;
    text-transform: uppercase;
    font-size: 1.3em;
  }  
  .footer-link{
    color: @footerLinks; 
    font-family: @navFont;
    transition: 0.4s;
    margin: 10px;
    width: 80vw;
    cursor: pointer;
    &:hover{
      color: @footerLinksHover;
      text-decoration: none;
    }        
  }
  footer .copyright{
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
  .copyright{
    margin-bottom: 20px;
  }
  .social-link{
    color: #fff; 
    transition: .5s;
    &:hover{
      color: @footerLinksHover;
    }
    margin: 0 10px;
  }
  .lms-active{
    cursor:pointer;
  }
  .lms-inactive{
    cursor:default;
  }.modal{
  margin-top: 20vh;
}
.modal-backdrop{
  opacity: 0.5 !important;
}
.vue-swatches__check__wrapper{position:absolute;width:100%;height:100%}.vue-swatches__check__circle{width:21px;height:21px;border-radius:50%;background-color:rgba(0,0,0,.15)}.vue-swatches__check__path{fill:#fff}.vue-swatches__swatch{position:relative;display:inline-block;font-size:0}.vue-swatches__swatch:focus,.vue-swatches__swatch:hover{opacity:.9;box-shadow:inset 0 0 2px rgba(0,0,0,.75);outline:none}.vue-swatches__swatch.vue-swatches__swatch--border,.vue-swatches__swatch.vue-swatches__swatch--selected{box-shadow:inset 0 0 2px rgba(0,0,0,.75)}.vue-swatches__swatch__label{position:absolute;left:0;right:0;color:#666;font-size:10px;font-weight:700;text-align:center}.vue-swatches__swatch .vue-swatches__diagonal__wrapper{position:absolute}fieldset[disabled] .vue-swatches{pointer-events:none}.vue-swatches{position:relative;display:inline-block;outline:none}.vue-swatches__trigger__wrapper{display:inline-block;cursor:pointer}.vue-swatches__trigger.vue-swatches--is-empty{border:2px solid #ccc}.vue-swatches__trigger.vue-swatches--is-disabled{cursor:not-allowed}.vue-swatches__container{box-sizing:content-box}.vue-swatches__container.vue-swatches--inline{font-size:0}.vue-swatches__container:not(.vue-swatches--inline){position:absolute;display:block;overflow:auto;border-radius:5px;box-shadow:0 2px 3px rgba(10,10,10,.2),0 0 0 1px rgba(10,10,10,.2);z-index:50}.vue-swatches__wrapper{background-color:inherit;box-sizing:content-box}.vue-swatches__row{font-size:0}.vue-swatches__fallback__wrapper{display:table}.vue-swatches__fallback__input--wrapper{display:table-cell;padding-right:10px;width:100%;font-size:14px}.vue-swatches__fallback__input{width:100%;padding-top:6px;padding-bottom:6px;border-radius:5px;border:1px solid #dcdcdc;color:#35495e;background:#fff}.vue-swatches__fallback__button{display:table-cell;padding:6px 15px;border:0;cursor:pointer;font-weight:700;color:#fff;background-color:#3571c8;border-radius:5px}.vue-swatches-show-hide-enter-active,.vue-swatches-show-hide-leave-active{transition:all .3s ease}.vue-swatches-show-hide-enter,.vue-swatches-show-hide-leave-active{opacity:0}.vue-swatches--has-children-centered{display:flex;align-items:center;justify-content:center}.vue-swatches__diagonal__wrapper{width:100%;height:100%}.vue-swatches__diagonal{width:75%;height:75%;background:linear-gradient(to top right,transparent 0,transparent calc(50% - 2.4px),#de080a 50%,transparent calc(50% + 2.4px),transparent)}