:root {
  --vs-blue: #94c3e7;
    --vs-blue-hover: #004DA5;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-font: #41538A;
    --vs-blue-bar-font:#757575;
    --vs-blue-bar-font-hover: #222;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar-hover:#CFE9F7;
    --vs-blue-bg-hover:#d6edff;
    --vs-brand:#DB0025;
    --vs-brand-hover:#EF1A3E;
    --vs-brand-press:#A6011D;
    --vs-white-bg-hover:#F7F7F7;
    --vs-white-bg-press:#F2f2f2;
    --vs-body-font: #404041;
    --vs-body-font-hover:#005a9e;
    --vs-sky-500:#147AC8;
    --vs-sky-400:#5EA4DA;
    --vs-sky-100:#D6EDff;
    --vs-sky-50:#E8F7FF;
    --vs-blue-50:#f2f7fc;
    --vs-red-300:#FFBDC8;
    --vs-lighter-blue:#E8F2F9;
    --vs-subtle-blue:#F2F7FC;
    --vs-p-xs-size:12px;
    --vs-p-sm-size:14px;
    --vs-p-xs-lineheight: 18px;
    --vs-p-md-size:16px;
    --vs-p-md-lineheight: 22px;
}
h1{line-height: 52px;}
.h5{font-size: 14px; font-weight: 700; color: #2a2a2a;}
.rounded-border{border-radius: 16px;}

/* kv slide */
.mySwiper .mySwiperKV{
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: auto;
    overflow: hidden;
}
.mySwiperKV .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 840px;
    height: 450px;opacity: 1;
}
.mySwiperKV .swiper-slide img {
    display: block;
    width: 100%;
    border-radius: 16px;
    filter:drop-shadow(0px 0px 10px #00000060);
    
}    
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right{background-image: none}
.mySwiperKV .swiper-slide-visible.swiper-slide-next{clip-path: inset(0 68% 0% 0% round 16px);}
.mySwiperKV .swiper-slide-visible.swiper-slide-prev{clip-path: inset(0 0% 0% 68% round 16px);}
.swiper-button-prev, .swiper-rtl .swiper-button-next{left: 14%;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 14%;}
.mySwiperKV .swiper-slide-visible.swiper-slide-next img { transform: translateX(-50%);}
.mySwiperKV .swiper-slide-visible.swiper-slide-prev img.img-translate {transform: translateX(20%);}
.mySwiperKV .swiper-slide p {
   margin-bottom: 0;
    color: #FFF;
    font-size: 18px;
    z-index: 2;
    font-weight: 700;
}
.mySwiperKV .swiper-slide-visible.swiper-slide-prev p, .mySwiperKV .swiper-slide-visible.swiper-slide-next p{display: none;}
/* img compared */
.twentytwenty-after-label {background: #afd8f3;}
.twentytwenty-before-label > span, .twentytwenty-after-label > span{font-weight: 700;}
.twentytwenty-horizontal .twentytwenty-before-label > span{left:1em}
.twentytwenty-horizontal .twentytwenty-after-label > span{color:#2A2A2A; right:1em}
.twentytwenty-handle{background: #afd8f3;}

.rc-compare-img-container .twentytwenty-after-label.animate {
    animation: clip-move 3s forwards;
    -webkit-animation: clip-move 3s forwards;
}
.twentytwenty-right-arrow::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    background:url('/vsAssetFile/global/img/business/presentation-display/angles-right-left.svg') no-repeat center center;
    top: -19px;
    right:-9px;
    z-index: 55;
}
.twentytwenty-right-arrow::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    background: var(--vs-blue-light-hover);
    top: -16px;
    left: -28px;
    z-index: 50;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, .5);
        box-shadow: 0px 0px 12px rgba(51, 51, 51, .5);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-radius: 6px;
}
.twentytwenty-handle{background: none;
-webkit-box-shadow: 0;
    box-shadow:0;
  
   }
/* rc section */
.rc-container{max-width: 1400px}
.rc-solutions .row .col-lg-6:nth-of-type(1):not(.order-lg-2) {padding-right: 65px;}
.rc-solutions .row .col-lg-6:nth-of-type(1).order-lg-2 {padding-left: 65px;}
.rc-solutions .row h2{padding-bottom: 1rem;}
/* solution section */
.solutions .uk-card-default{padding: 16px;}
/* compare spec*/
#compare .uk-card-title {color:#404041;font-size: 18px;;margin: 0;font-weight: 700; text-align: center;}
#compare .uk-card-body p{font-size: var(--vs-p-sm-size);}
#compare h4 {color:#404041;font-size: 16px;background-color: #EBF6FF;padding: 1.4rem 2rem;;margin: 0;position:relative}
#compare h5 {color:#404041;font-size: 16px;background-color: #D1E5F4; padding:0.5rem 2rem;padding-right: 0;margin-bottom:0; border-bottom: 1px solid #B2B2B2}
.spec-table p, .spec-more-table p{font-size: var(--vs-p-md-size);padding:0.7rem 2rem; padding-right: 1rem;background-color: #EBF6FF;font-weight:400; margin:0; color:#2A2A2A; text-align: center; display: flex; align-items: center; justify-content: center; }
#compare .uk-sticky-fixed .uk-card-body{padding-bottom: 20px;}
#compare .uk-sticky-fixed .uk-card-body p{display: none}
#compare .mySwiper .swiper-wrapper a:hover,.key3 a:hover{text-decoration: none; }
#compare .mySwiper .swiper-wrapper a:hover .btn-more{color: var(--vs-body-font-hover);}
#compare .mySwiper .swiper-wrapper a:hover .btn-more::after,.key3 a:hover .btn-more::after {
  padding-left: 10px;
  -webkit-transition: padding 0.5s;
  transition: padding 0.5s;
}
.point{height: 100%; display: flex; flex-direction: column;}
#compare .swiper-slide h5 span{opacity: 0;font-weight: 700; }
#compare .swiper-slide.swiper-slide-active h5 span{opacity: 1 }
#compare .swiper-slide.swiper-slide-next h5 span{opacity: 0 }
#compare .swiper-slide.swiper-slide-prev h5 span{opacity: 0 }
.swiper.mySwiper2{border-radius: 16px 16px 0 0;}

.swiper-button-next::after, .swiper-button-prev::after{font-family: 'Font Awesome 5 Pro'; color:#00000090; font-size: 20px;font-weight: 700;}
.swiper-button-next:hover::after, .swiper-button-prev:hover::after{color:var(--vs-body-font-hover); }
.swiper-button-next, .swiper-button-prev{width: 3rem;height: 3rem;background: #ffffff;border-radius: 50px;box-shadow: 0 2px 5px #00000020;} 
.swiper-button-next::after{ content: "\f105";}
.swiper-button-prev::after{content: "\f104";}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0;}
#compare .swiper-button-prev, #compare .swiper-rtl .swiper-button-next{left: 0px;}
#compare .swiper-button-next, #compare .swiper-rtl .swiper-button-prev {right: 0px;}
.more{background: #d1e5f4; border-radius: 0 0 16px 16px;}
.my-sticky.uk-sticky-fixed{z-index: 10;}

/* button */
 .btn-collapse::before{content: "";}
.btn-collapse, .btn-collapse:hover{ position: relative;  padding: 10px 32px;color:#404041;
font-weight: 700;  font-size: 16px; border: 0;background: transparent;}

.btn-collapse:after {
    font-family: "Font Awesome 5 Pro";
    content: '\f078';
    font-size: .8em;
    margin-left: .7em;
    display: block;
    position: absolute;
    transition: all .5s;
    -webkit-transition: all .5s;
    transform: translateY(-50%);
    top: 50%;
    right: 1rem;
}
.btn-collapse:not(.collapsed):after{
   transform: rotate(180deg) translateY(-50%);
  top: 0;
  bottom: 50%;
}
/* product filter   */

#product-filter .uk-card, .info-card .uk-card{display: flex; flex-direction: column; padding-top: 0.8em; width: 100%;}
#product-filter .uk-card-default, .uk-card-default{ border-radius: 16px;}
#product-filter .uk-card-hover:hover,  .info-card .uk-card-hover:hover {
    background-color: #fff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 16%);
}
#product-filter .uk-card-hover:hover, .info-card .uk-card-hover:hover{margin-top: -5px;margin-bottom: 5px;}
#product-filter .uk-card-hover, .info-card .uk-card-hover {
    transition: all .3s ease;
}
#product-filter .uk-card-body, .info-card .uk-card-body{padding-bottom: 0;}
#product-filter .uk-card-body a:hover, .info-card .uk-card-body a:hover{ text-decoration: none; color: initial;}
#product-filter .uk-card-default .uk-card-footer, .info-card .uk-card-default .uk-card-footer{border-top: 0;margin-top: auto; margin-right: auto;margin-left: auto;padding-top: 0; padding-bottom: 30px;padding-right: 15px;padding-left: 15px;}
#product-filter .uk-card-footer a, .info-card .uk-card-footer a{display: block;}
#product-filter h6, .info-card h6{color:#222; font-weight: 700; text-align: center; text-transform: uppercase;}
#product-filter a:hover, .info-card  a:hover{text-decoration: none;}
#product-filter .uk-grid-column-small>* ,#product-filter .uk-grid-small>*, .info-card .uk-grid-column-small>* ,.info-card .uk-grid-small>*, .uk-grid-column-small>*{
    padding-left: 24px;}
#product-filter .uk-grid-column-small,#product-filter .uk-grid-small,.info-card .uk-grid-small, .info-card .uk-grid-column-small{
    margin-left: -24px;
}
.uk-slider-container-offset {
    margin: -11px -5px -39px -5px;
    padding: 11px 5px 39px 5px;
}

.mdc-tab-bar button:focus{outline:0; border:0}
.mdc-tab-bar button:focus-visible {
  outline: 2px dotted #333;outline-offset: -2px;
}
.mdc-tab-scroller__scroll-content::after {background: #CFE9F7;}
.mdc-tab--active.mdc-tab:before {border: 0;}
/* background  */
.bg-blue-gradient {
    background: linear-gradient(to bottom, #FFF, var(--vs-sky-50) 50%);
}
.bg-border-radius{
    border-radius: 48px;
}
.bg-border-radius-top{
    border-radius: 48px 48px 0 0;
}
.bg-border-radius-bottom{
    border-radius: 0 0 48px 48px;
}
.bg-blue{background: var(--vs-sky-50);}
.bg-no-radius{border-radius: 0 !important;}
.bg-fixed-desktop {background-attachment: fixed;}
/* faq */

#faq p a{color:var(--vs-body-font-hover);text-decoration: underline;}
#fag .uk-card-default{box-shadow: 0 0px 8px rgba(0, 0, 0, .1);}
#fag .uk-card-default:hover{box-shadow: 0 2px 16px rgba(0, 0, 0, .1);}
#faq .accordion-faq .uk-open {
    border: 5px solid var(--vs-sky-400);
    background: #fff;
}
#faq ul.uk-accordion li {
    background: var(--vs-blue-bg-hover)

}
#faq li:not(.uk-open) .uk-accordion-title:hover {
    background: var(--vs-sky-50);
    color: #222;
    border-radius: 16px;
}
#faq .uk-accordion-title {
    cursor: pointer;
    color:#222;
    font-weight: 700;
}
#faq .uk-accordion-title:hover{color:#222}
#faq li.uk-open .uk-accordion-title{color:var(--vs-body-font-hover)}
#faq .uk-accordion-content{padding: ; color:var(--vs-body-font)}
.uk-open>.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Minus.svg);
}
.uk-accordion-title:before {
    background-image: url(/vsAssetFile/global/img/education/software/Plus.svg);
    background-size: 50%;
}
#faq .uk-border-rounded{border-radius: 16px;}

@media (max-width: 1441px) {
  .rc-container{max-width: 1250px;}

}
@media (min-width: 1441px) and (max-width: 1600px) {
  .rc-container{max-width: 1300px }
}
@media (max-width: 1200px) {
    .my-sticky.uk-sticky-fixed{top:40px !important}
    /* btn */
     .mdc-tab:active, .mdc-tab--active {
    background: var(--vs-sky-500);
    color: #404041;
    border: 1px solid #5EA4DA;
  }
}
@media (max-width:992px) {
    .mySwiperKV .swiper-slide {
        width: 100%; height: auto; padding-left:1.5em;padding-right: 1.5em;
    }
.swiper-button-prev, .swiper-rtl .swiper-button-next{left: 5px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 5px;}
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right{background-image: none;}
.mySwiperKV .swiper-slide::before {
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 36%);
  width: calc(100% - 46px);
  position: absolute;
  height: 100%;
  border-radius: 16px;
  z-index: 1;}
  .mySwiperKV .swiper-slide p{padding-bottom: 1em;}
  .spec-table p, .spec-more-table p{font-size: var(--vs-p-sm-size)}
  .bg-fixed-desktop {background-attachment: initial}
  /* img compare  */
  .twentytwenty-before-label > span, .twentytwenty-after-label > span{font-size: 14px;}
  /* rc section */
.rc-solutions .row .col-lg-6:nth-of-type(1):not(.order-lg-2) {padding-right: 15px;}
.rc-solutions .row .col-lg-6:nth-of-type(1).order-lg-2 {padding-left: 15px;}
}
@media (max-width:768px){
     h1{line-height: 36px;}
     .logo-3party div{margin-top: -10px;margin-bottom: -10px;}
  
}