:root {
  --dark_tur: #00CED1;
  --black: #141414;
  --white: white;
  --dark_green: #13424c;
  --brown: #AE7C54; 
  --brown2: #d69c6e;
  --gray:#95B0AF;
  --gray2:#c5c5c5;
  --gunmetal :#2C3539;
  --blackcow:#4C4646;
  --gray3:#757575;

  --color_main : #14b09e;
  --color_main2 :#13424c;
  --color_main3 : #218490;
  --color_brown:#AE7C54;
  --color_brown2:#d69c6e;

  --dba:#d3a547;
  --dbb:#ea5615;

} 
.cfactivate{
  min-height: 50vh;
}
.dba{
  color :var(--dba)!important;
}
.border_dba{
  border:1px solid var(--dba)!important;
}
.dbb{
  color :var(--dbb)!important;
}
.border_dbb{
  border:1px solid var(--dbb)!important;
}
.f-white {
  color:var(--white)!important;
}
.bgblack{
  background:var(--black)!important;
}
.black{
  color:var(--black)!important;
}

.dropdown-item.active, .dropdown-item:active {
  background:var(--gray);
}
.btn-rm{

  border-color: var(--dark_tur)!important;
  color:var(--dark_tur)!important;
}
.btn-rm:hover{

  background-color: var(--dark_tur)!important;
  border-color: var(--dark_tur)!important;
  color:black!important;
}


.site-footer .nav-link{
  color:var(--white)!important;
}
.modal-header{
  border: none;
}
.light-mode .box-brand a{
  border: 1px solid var(--gray3);
}

.light-mode .box-brand2 a{
  border: 1px solid var(--gray3);
}

.policy , .terms-and-cons{
  background-color:  white;
  padding:30px;
}
.light-mode .box-feature.light{
  display: block!important;

}

.light-mode .box-feature.dark{
  display:none!important;
}

.box-feature.dark{
  display: block;

}

.box-feature.light{
  display: none;

}
.light-mode body {
  font-family: 'Kanit', sans-serif !important;
  font-size: 14px !important;
  background: var(--white) !important;
  height: 100vh;

}
body {

  font-family: 'Kanit', sans-serif !important;
  font-size: 14px !important;
  background: var(--black) !important;
  height: 100vh;
}




.light-mode .p-news{
  margin-top:40px;
  background:var(--white)!important;
}

.p-news{
  padding-top:30px;
  min-height:70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/content/image/background1.jpg') no-repeat!important;
  background-size:100%!important;
}


.light-mode .p-news2{
  margin-top:40px;
  background:var(--white)!important;
}

.p-news2{
  padding-top:30px;
  min-height:70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/content/image/background2.jpg') no-repeat!important;
  background-size:100%!important;
}


.statisticsdh1{
  padding-top:30px;
  min-height:70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/other_menu/image/background3.png') no-repeat!important;
  background-size:100%!important;
}


.statisticsdh2{
  padding-top:30px;
  min-height:70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/other_menu/image/background4.png') no-repeat!important;
  background-size:100%!important;
}

.light-mode .p-news2 .head-search{
  background: var(--white);
}


.light-mode .p-news .head-search{
  background: var(--white);
}




.light-mode.p-garage{
  
  background:var(--white);
  margin-top:20px;
}

.p-garage{
  background: var(--balck);

  
}

.p-garage .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/other_menu/image/BgGarage.png')!important;
}

.light-mode .p-garage .head-search{
  min-height:70vh;
  background:var(--white)!important;
  
}






.light-mode .p-box{
  background: var(--white);
}

.p-box{
  background:var(--black);
  margin-top:20px;
}

.p-box .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/other_menu/image/BgGarage.png')!important;
}

.light-mode .p-box .head-search{
  min-height:70vh;
   background:var(--white)!important;
  
}




.light-mode .p-history{
  background: var(--white);
}

.p-history{
  background:var(--black);
  margin-top:20px;
}

.p-history .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/home/image/catalog4.png')!important;
}

.light-mode .p-history .head-search{
  min-height:70vh;
   background:var(--white)!important;
  
}
.p-history .dataTables_length{
  display: none;
}



.light-mode .p-search-vehicle{
  
  background: var(--white);
}
.p-search-vehicle{
  background:var(--black);
}

.p-search-vehicle .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat3.png')!important;
}




.p_oem_pricelist{
  background:var(--black);
}

.p_oem_pricelist .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat3.png')!important;
}


.box-pdb-oem{
  cursor:pointer;
}

.box-pdb-oem-list{
  background: #e7e7e7!important;
    border-radius: 0px 0px 10px 10px;

    
}


#table-genuine-parts_length{
  display:none;
}

#table-genuine-parts_wrapper {
  top: -30px !important;
}
.text-oem-name{
  color:black;

}
.text-oem-name:hover{
  color:var(--dark_tur)
}
.text-oem-name.active{
  color:var(--dark_tur)
}
.light-mode .p-search-vehicle .head-search{
  min-height:70vh;
  background: none!important;
  
}

@media print {
  @page {
      size: landscape;
  }
}




.light-mode .p-search-parts{
  
  background: var(--white);
}
.p-search-parts{
  background:var(--black);
}

.p-search-parts .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat2.png')!important;
}

.light-mode .p-search-parts .head-search{
  min-height:70vh;
  background: none!important;
  
}










.light-mode .p-search-vin{

  background: var(--white) !important;
}

.p-search-vin{
  background: var(--black) !important;
}

.p-search-vin .head-search{
  min-height:70vh;
  background:url(https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat1.png)!important;
}

.light-mode .p-search-vin .head-search{
  min-height:70vh;
  background: none!important;
}


.tooltip-inner{
  font-family: 'Kanit', sans-serif !important;
  font-size: 14px !important;
}
.con_red{
  color:#F25353;
  font-size: 12px;;
}
.tb-desktop-news table thead tr th {
  background-color: var(--black) !important;
  color: var(--white) !important;
  vertical-align: top;
}

.light-mode .tb-desktop-news table thead tr th {
  background-color: var(--cow) !important;
  color: var(--white) !important;
  vertical-align: top;
}


.tb-mobile-news table thead tr th {
  background-color: var(--black) !important;
  color: var(--white) !important;
  vertical-align: top;
}
.light-mode .tb-desktop-news table{
  background-color: var(--blackcow) !important;
  color: var(--white) !important;
    box-shadow: none;
}
.tb-desktop-news table{
   
  box-shadow: rgb(136 191 189 / 48%) 6px 2px 16px 0px, rgb(102 218 210 / 15%) -6px -2px 16px 0px;
}
.tb-mobile-news table{
  box-shadow: rgb(136 191 189 / 48%) 6px 2px 16px 0px, rgb(102 218 210 / 15%) -6px -2px 16px 0px;
}

.light-mode .tb-mobile-news table{
  box-shadow: none;
}
.select2 {
  width: 100% !important;
  font-family: 'Kanit', sans-serif !important;
}



.img_news {
  width: 150px !important;
}

.light-mode #shw_tb_model {

  margin-top:20px;
  padding: 10px;
  border-radius: 10px;
  background:var(--white);
  border:1px solid var(--black);
  color: var(--black);
  width: 100%;
}

#shw_tb_model {
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;

}





#select2:focus {
  animation: glow 800ms ease-out infinite alternate !important;
}

table {
  font-size: 13px;
}

.brand-site {
  color: var(--dark_tur);
}

.brandvin {
  color: var(--white);
  font-size: 30px;
}


label[for="user_login"] {
  color: var(--white);
}

label[for="user_pass"] {
  color: var(--white);
}

.element {


  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-in;
}


.show-element {
  visibility: visible;
  opacity: 1;
  transition: all 300ms ease-in;


}

#user_login {
  padding: 5px;
  width: 250px;
  border-radius: 5px;
}

#user_pass {
  padding: 5px;
  width: 250px;
  border-radius: 5px;
}



.nav-link.active {
  color: var(--dark_tur) !important;
}
.title {
  color: var(--white);
  margin: 0;
  font-size: 18px !important
} 

.light-mode .title {
  color: var(--gray3); 
  margin: 0;
  font-size: 18px !important
}
.btn-delete{
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--white)!important;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(black, .1);
  background: #141414;
  border-bottom: 2px solid var(--dark_tur);
  border-color: rgba(black, .15);
  border-radius: 4px;

}

.btn-delete:hover{
  position: relative;

  font-size: 14px;
  font-weight: 500;
  color: var(--dark_tur)!important;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(black, .1);
  background: #141414;
  border-bottom: 2px solid var(--dark_tur);
  border-color: rgba(black, .15);
  border-radius: 4px;

}

.price{
  text-align:right!important;
}

.readmore2 {
  position: relative;
  display: block;

  font-size: 14px;
  font-weight: 500;
  color: white!important;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(black, .1);
  background: #141414;
  border-bottom: 2px solid var(--dark_tur);
  border-color: rgba(black, .15);
  border-radius: 4px;
  width:100px;

  &:active {
      top: 2px;
      margin-bottom: 2px;
      border-bottom: 0;
  }
}

.readmore2:hover {


  background: var(--dark_tur);
  border-color: var(--dark_tur);
  border-color: rgba(black, .15);
}




p {
  color: gray
}

.currect {
  color: #d6ffbe;
}

.box-brand {
  display: flex;
  grid-gap: 20px;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
}
.light-mode .box-brand , .light-mode .box-brand a img ,.light-mode .box-brand a{
  border-radius: 5px!important;
}

.box-brand2 {
  display: flex;
  grid-gap: 20px;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  width: 100%;
}

.box-brand a {
  transition: transform .3s;
}


.box-brand a:hover {
  transition: transform .3s;
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1.2);
}


.dt-button{
  background:var(--white)!important;
}


.navbar-brand:first-letter {
  color: var(--dark_tur);

}

.brandvin:first-letter {
  color: var(--dark_tur)!important;
}
#loginform-custom{
  text-align: left;
}

.btn-register {
  background-color: #00CED196;
  color: var(--black) !important;
  backdrop-filter: blur(4px);
}
.btn-register:hover {
  background-color: #00CED196;
  color: var(--black);
  backdrop-filter: blur(4px);

}

.dropdown-user {
  background-color: #00CED196;
  color: var(--black) !important;
  backdrop-filter: blur(4px);
  padding:0;
  width: auto;
  display: inline-block;

}
.plan-line{
  color:var(--dark_tur)!important;
}

.dropdown-user:hover {
  background-color: #00CED196;
  color: var(--black);
  backdrop-filter: blur(4px);

}
.dropdown-user .nav-link{
  padding:4px!important;
}
.dropdown-user li a{
  color:var(--black)!important;
}
.dropdown-user ul li a{
  color:var(--black)!important;
}
.dropdown-user .dropdown-item{
  margin:0;
  font-size: 14px!important;
}
.dropdown-divider{
  padding:0;
}


.modal-title {
  color: var(--dark_green);
}



.box-banner {
  position: relative;
  top: 0
}

input {
  font-size: 13px !important;
}

select {
  font-size: 13px !important;
}



.navbar-toggler {
  background: var(--dark_tur);
}

div {
  padding-bottom: 10;
}
.p-search-vin div{
  padding-bottom: 0;
}
img {
  width: 100%;
}

 a {
  color: var(--white);
  text-decoration: none;

}

.light-mode a {
  color: var(--black) ;
  text-decoration: none;

}

.readmore {
  text-align: right;
}

.title-content {
  color: var(--brown2) !important;
  /*position: sticky;
  top: 0;
  background: var(--black);*/
}



.site-footer {
  background-color: var(--black);
  padding: 45px 0 0px;
  font-size: 15px;
  line-height: 24px;
  color: gray;
}

.site-footer hr {
  border-top-color: #bbb;
  opacity: 0.5;
  margin: 0;
}

.site-footer hr.small {
  margin: 20px 0
}

.site-footer h6 {
  color: var(--dark_tur);
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 2px
}

.site-footer a {
  color: gray;
}

.site-footer a:hover {
  color: #3366cc;
  text-decoration: none;
}

.footer-links {
  padding-left: 0;
  list-style: none
}

.footer-links li {
  display: block
}

.footer-links a {
  color: #737373
}

.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
  color: var(--dark_tur);
  text-decoration: none;
}

.footer-links.inline li {
  display: inline-block
}

.site-footer .social-icons {
  text-align: right
}



.copyright-text {
  margin: 0;
  text-align: center;
}





/* scroll bar */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--black);
  height: 5px !important;
  width: 5px;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px !important;
  background-color: var(--black);
}

::-webkit-scrollbar-thumb {
  scrollbar-width: thin;
  height: 5px !important;
  width: 5px;
  border-radius: 10px;
  background-color: gray;
}



::-webkit-scrollbar {
  height: 5px !important;
  width: 5px;
  background-color: var(--black);
}



.showimgparts{
  background: #ffffff;
}



.box-content1 {

  overflow-y: scroll;
  overflow-x: hidden;
}

.title-search {
  font-size: 25px;
  text-align: center;
  color: #c5c5c5;
  margin-top: 20px;
}


.light-mode .title-search {
  font-size: 25px;
  text-align: center;
  color: var(--blackcow);
  margin-top: 20px;
}








.box-feature2 {
  position: relative;
  top: 50;
  left: 50;
}


.fa-square-check {
  color: var(--dark_tur);
}















.none {
  cursor: no-drop !important;
}

.box-login {
  text-align: center;
}

.login-submit {
  text-align: right;
}

#wp-submit {
  margin-top: 10px;
  padding: 5 30;
  background-color: var(--dark_tur);
  color: var(--black);
  border-radius: 7px;
  border: none;
}

#wp-submit:hover {
  background-color: var(--dark_tur);
  color: var(--black);
  border-radius: 7px;
  border: none;
}

.example {
  color: var(--white);
}

.light-mode  .example {
  color: var(--black);
}

.box-search-vin {
  background: var(--white);
  background: linear-gradient(var(--white), var(--white));
  border: 1px solid #444;
  border-radius: 5px 0 0 5px !important;

  color: #888;
  font-size: 13px;
}


.box-search-vin:focus {
  animation: glow 800ms ease-out infinite alternate;
  background: #222922;
  background: linear-gradient(#333933, #222922);
  border-color: #393;
  box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
  color: #efe;
  outline: none;
}

.box-search-vin:focus::-webkit-input-placeholder {
  color: #efe;
}

.box-search-vin:focus:-moz-placeholder {
  color: #efe;
}

.btnSearchVehicle {
  background: var(--black) !important;
  position: relative;
  top: -3px;
  color: var(--white) !important;
  border: 1px solid #00ced173 !important;
  width: 100%;
  box-shadow: #00ced16e 0px 2px 8px 0px;

}

.btn-search-vin {
  background: var(--black);
  box-sizing: border-box;
  border: 1px solid #00ced173;
  border-left-color: #000;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 2px 0 #000;
  color: var(--white) !important;
  display: block;
  float: left;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
/*  box-shadow: #00ced16e 0px 2px 8px 0px; */
  width: 80px;
}

.btn-search-vin:hover,
.btn-search-vin:focus {
  background: var(--black);
  color: var(--dark_tur)!important;
  border: 1px solid #00ced173;
  outline: none;
  box-shadow: #00ced16e 0px 2px 8px 0px;
}

.btn-search-vin:active {
  background: var(--black);
  border: 1px solid #00ced173;
  box-shadow: #00ced16e 0px 2px 8px 0px;
  top: 1px;
}

@keyframes glow {
  0% {
    border-color: var(--dark_tur);
    box-shadow: 0 0 5px rgba(33, 243, 243, 0.2), inset 0 0 5px rgba(0, 255, 251, 0.1), 0 2px 0;
  }

  100% {
    border-color: var(--dark_tur);
    box-shadow: 0 0 20px rgba(0, 225, 255, 0.6), inset 0 0 10px rgba(0, 238, 255, 0.4), 0 2px 0 ;
  }
}

span {
  word-wrap: break-word;
  /*white-space: pre-line;*/
}

.row {
  width: 100%;
  margin: 0;
}

.shw_vin {
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
  margin-top:10px;
  margin-bottom: 0;
}

.showdb{
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}

.light-mode .shw_vin {
  padding: 10px;
  border-radius: 10px;
  color: var(--black);
  border: 1px solid black;
  background: var(--white);
  width: 100%;
}

.get_parts_no_psmart{
  display: none;
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}

.light-mode .get_parts_no_psmart{
  display: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--black);
  color: var(--white);
  width: 100%;
}


#showdata_sub_group {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}


.light-mode #showdata_sub_group {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--black);
  color: var(--balck);
  width: 100%;
  background:var(--white);
}


.navbar.bg-dark .dropdown-menu i{
  color:var(--brown);

}
.tb-mobile-news .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: white!important;
}

.tb-desktop-news .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: white!important;
  color:black!important;
}



#showdata_sub_group_model {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}

.light-mode #showdata_sub_group_model {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  color: var(--black);
  background:var(--white);
  border: 1px solid var(--black);
  width: 100%;
}


#show_data_list {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}

.light-mode #show_data_list {
    display: none;
    margin-top: 15px;
    padding: 10px;
    border-radius: 10px;
    color: var(--black);
    border: 1px solid var(--black);
    width: 100%;
    background:var(--white);

}
.box-sub-group{
  height: 65vh; overflow-y: scroll;
  padding: 15px;
  /*box-shadow: #00ced16e 0px 2px 8px 0px;*/
  background:#e7e7e7!important;
  color:black;
  border-radius: 10px;
}

.box-sub-group img{
  mix-blend-mode: multiply;
}

.box-sub-group  a{

  color:black!important;
}

.light-mode .box-sub-group{
  height: 65vh; overflow-y: scroll;
  padding: 15px;
  box-shadow: #535b5c4a 0px 2px 8px 0px;
  border-radius: 10px;
}



 #show_data_list_model {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
 /* background: #00ced117;*/
 background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;

}

.light-mode #show_data_list_model {
  display: none;
  margin-top: 15px;
  padding: 10px;
  background:var(--white);
  border-radius: 10px;
border: 1px solid var(--black);
  color: var(--black);
  width: 100%;

}

#show_car_list tbody tr.active td {
  background: #cccccc;
  color: var(--dark_green);
}

strong {
  color: #d69c6e;
}

.span_vin {
  color: var(--white);
  margin: 0 8px;
  padding: 0;
}


.language {
  width: 65px;
  display: inline;
  background-color: #00CED196;
  color: var(--black);
  backdrop-filter: blur(4px);
  border: none;
  vertical-align: top;
}


.language:hover {
  width: 65px;
  display: inline;
  background-color: #00CED196;
  color: var(--black);
  backdrop-filter: blur(4px);
  border: none;
  cursor:pointer;
}

.tooltip-inner {
  text-align: left;

}

.dataTables_filter {
  color: var(--white) !important;
}


.dataTables_filter input {
  background: var(--white) !important;
}

.dataTables_info {
  color: var(--white) !important;
}

.light-mode .dataTables_info {
  color: var(--black) !important;
}


.dataTables_length {
  color: var(--white) !important;
}

.dataTables_length select {
  background: var(--white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--white) !important;
}

.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--black) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--white) !important;
}

.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .light-mode 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .light-mode 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--black) !important;
}





.dataTables_wrapper .dataTables_length select { 
  color: var(--black) !important;
}

.light-mode .dataTables_wrapper .dataTables_length select {
  color: var(--white) !important;
}

.scroll-top-g {
  font-size: 15px;
  margin: 10px;
  text-decoration: none;
  color: var(--dark_tur) !important;
}


table thead th {
  background: var(--black) !important;
  color: var(--white) !important;
  text-align: center!important;
  vertical-align: top;
}

table.dataTable {
  width: 100% !important;
}

table tbody tr td {
  background: var(--white);
}


.btn_group_name {
  color: var(--white) !important;
}


.light-mode .btn_group_name {
  color: var(--black) !important;
}

.btn_group_name.active {
  color: var(--dark_tur) !important;
}







.btn_subgroup {
  color: var(--white) !important;
}


.light-mode .btn_subgroup{
  color: var(--black) !important;
}


.btn_subgroup.active {
  color: var(--dark_tur) !important;
}



.btn_subgroup_model {
  color: var(--white) !important;
}




.light-mode .btn_subgroup_model {
  color: var(--black) !important;
}


.btn_subgroup_model.active {
  color: var(--dark_tur) !important;
}

.txt-select{
  font-size: 15px;
  color:#95B0AF;
}
.txt-select-num{
  color:#95B0AF;
}
.light-mode .txt-select{
  font-size: 15px;
  color:var(--black);
}
.light-mode .txt-select-num{
  color:var(--black);
}

.gray{
  color:var(--gray);

}

.tag-name{
  color:var(--white);
}
.light-mode .tag-name{
  color:var(--black);
}

#fixed-dttb {
  position: sticky;
  overflow-x: scroll;
  width: 100%;
  max-height: 85vh;
  box-shadow: #00ced16e 0px 2px 8px 0px;
  padding: 0;
}

.light-mode #fixed-dttb {
  position: sticky;
  overflow-x: scroll;
  width: 100%;
  max-height: 85vh;
  padding: 0;
  box-shadow: none;
}


.list-dttb{
  box-shadow: #00ced16e 0px 2px 8px 0px;
  padding: 0;
}
.light-mode .list-dttb{
  box-shadow:none;
  padding: 0;
}

#load-wrapp {
  position: fixed;
  top: 0;
  z-index: 99;
  padding: 0;
}

.load-wrapp {
  position: relative;
  height: 100vh;
  background: #000000c9;
}

.load-1 {
  top: 50%;
  position: absolute;
  left: 50%;
}

.v_noti {
  color: #da8585;
}

.bg-dark a {
  color: var(--white)!important;
}

.darkgreen {
  color: var(--dark_green);
}

.features {
  font-size: 15px;
  color: gray;

}

.box-feat {
  padding-left: 20px;
}

.box-feature {
  display: flex;
  align-items: center;
}


.image-wrapper {
  position: relative;
}




/* LOADER */



.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader5 {
  position: absolute;
  top: 50%;
  left: 50%;
}

/*
 * Default width: 50px */
.svgIcon {
  width: 80px;
}

.svgIcon .body {
  animation: shake 0.2s ease-in-out infinite alternate;
}

.svgIcon .line {
  transform-origin: center right;
  stroke-dasharray: 22;
  animation: line 0.8s ease-in-out infinite;
  animation-fill-mode: both;
}

.svgIcon .line.first {
  animation-delay: 0s;
}

.svgIcon .line.second {
  animation-delay: 0.2s;
}

.svgIcon .line.third {
  animation-delay: 0.4s;
}


@keyframes shake {
  0% {
    transform: translateY(-1%);
  }

  100% {
    transform: translateY(3%);
  }
}

@keyframes line {
  0% {
    stroke-dashoffset: 22;
  }

  25% {
    stroke-dashoffset: 22;
  }

  50% {
    stroke-dashoffset: 0;
  }

  51% {
    stroke-dashoffset: 0;
  }

  80% {
    stroke-dashoffset: -22;
  }

  100% {
    stroke-dashoffset: -22;
  }
}

/* =Elements style
---------------------- */
.load-wrapp {
  text-align: center;
  display: none;

}

.line {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #00ced1;
}


.load-1 .line:nth-last-child(1) {
  animation: loadingA 1.5s 1s infinite;
}

.load-1 .line:nth-last-child(2) {
  animation: loadingA 1.5s 0.5s infinite;
}

.load-1 .line:nth-last-child(3) {
  animation: loadingA 1.5s 0s infinite;
}

@keyframes loadingA {
  0 {
    height: 15px;
  }

  50% {
    height: 35px;
  }

  100% {
    height: 15px;
  }
}




























@-webkit-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }
}

@-moz-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }
}

@-o-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }
}

@keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #d39a6d -14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px -14px 0 7px, #2690a7 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  }
}

/* Styles for old versions of IE */
.dots {
  font-family: sans-serif;
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.dots:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: transparent;
  border-radius: 100%;
  -webkit-box-shadow: #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  -moz-box-shadow: #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  box-shadow: #00ced1 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #d39a6d 14px 14px 0 7px, #2690a7 -14px 14px 0 7px;
  -webkit-animation: dots 5s infinite ease-in-out;
  -moz-animation: dots 5s infinite ease-in-out;
  -ms-animation: dots 5s infinite ease-in-out;
  -o-animation: dots 5s infinite ease-in-out;
  animation: dots 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@-moz-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@-o-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

/* Styles for old versions of IE */
.circles {
  font-family: sans-serif;
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.circles:not(:required) {
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: rgba(255, 204, 51, 0.9);
  border-radius: 100%;
  -webkit-animation: circles 3s infinite ease-in-out;
  -moz-animation: circles 3s infinite ease-in-out;
  -ms-animation: circles 3s infinite ease-in-out;
  -o-animation: circles 3s infinite ease-in-out;
  animation: circles 3s infinite ease-in-out;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.circles:not(:required)::before {
  background: rgba(255, 102, 0, 0.6);
  border-radius: 100%;
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: -10.82532px;
}

.circles:not(:required)::after {
  background: rgba(255, 51, 0, 0.4);
  border-radius: 100%;
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: 10.82532px;
}

@-webkit-keyframes plus-top {
  2.5% {
    background: #00ced1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  27.5% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    background: #d39a6d;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  75% {
    background: #2690a7;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  77.5% {
    background: #2690a7;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    background: #00ced1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}











.menu-item,
.menu-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked+.menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked+.menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked+.menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}


/* .menu-item {
  transition: all 0.1s ease 0s;
} */

.menu-item:hover {
  background: #EEEEEE;
  color: #3290B1;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked+.menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked~.menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked~.menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked~.menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked~.menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked~.menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked~.menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked~.menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked~.menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
  background-color: #669AE1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
  color: #669AE1;
  text-shadow: none;
}

.green {
  background-color: #70CC72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
  color: #70CC72;
  text-shadow: none;
}

.red {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
  color: #FE4365;
  text-shadow: none;
}

.purple {
  background-color: #C49CDE;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
  color: #C49CDE;
  text-shadow: none;
}

.orange {
  background-color: #FC913A;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
  color: #FC913A;
  text-shadow: none;
}

.lightblue {
  background-color: #62C2E4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
  color: #62C2E4;
  text-shadow: none;
}

.credit {
  margin: 24px 20px 120px 0;
  text-align: right;
  color: #EEEEEE;
}

.credit a {
  padding: 8px 0;
  color: #C49CDE;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.credit a:hover {
  text-decoration: underline;
}

#registerLabel {
  color: var(--white);
}

#loginLabel {
  color: var(--white);
  
}



.owl-stage-outer {
  padding: 0;
}

.main-content {
  position: relative;


}

.owl-theme .custom-nav {

  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
}

.owl-carousel.owl-loaded {
  margin: 10px;
}

.owl-prev,.owl-next {
  position: absolute;
  height: 120px;
  background: none;
  border: none;
  z-index: 100;

  background: #141414!important;
  /* height: 100%; */
  top: -19px;


}


.light-mode .owl-prev,.light-mode .owl-next {
  position: absolute;
  height: 120px;
  color: inherit;
  background: none;
  border: none;
  z-index: 100;

  background: var(--white)!important;
  /* height: 100%; */
  top: -19px;


}




.owl-prev,
.owl-next i {
  font-size: 1rem;
  color: #cecece;
}

.owl-prev {
  left: 0;
}

.owl-next {
  right: 0;
}

.owl-stage {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.image-wrapper {
  padding: 0;
}




.b-0 {
  bottom: 0;
}

.bg-shadow {
  background: #000000b3;
}

.top-indicator {
  right: 0;
  top: 1rem;
  bottom: inherit;
  left: inherit;
  margin-right: 1rem;
}

.overflow {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin-bottom: 38px;
}

.overflow-main {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.position-relative {
  padding-bottom: 0 !important;
}

/*
.zoom img {
transition: all 0.2s linear;
}
.zoom:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
*/



.img-thumbnail {
  object-fit: cover;
  border-radius: 50%!important;
  height: 20px;
  width: 20px;
  padding: 0;
}

.btn-addgarage{
  background-color: #00ced1;
    color: #030202 !important;
}

.btn-addgarage:hover{
  background-color: #02a4a6;
    color: #030202 !important;
}






.toastify {
    border-left: 4px solid var(--brown2);
    background-color: var(--white);
    color: black;
    max-width: 100%;
    padding:20px
}
.toastify:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
  border-bottom: 5px solid #85ff75;
animation: border_anim 1s linear forwards;
}

@keyframes border_anim {
0%{
  width: 100%;
}
100%{
  width: 0%;
}
}


.vin_garage{
  color:var(--dark_green)!important;
}





.label {
  background-color: #626262;
  display: inline-flex;
  height: 18px;
  width: 40px;
  border-radius: 30px;
  position: relative;
  align-items: center;
  justify-content: space-between; 
  padding: 5px;
  transform: scale(1.5);
  margin-right: 10px;
  vertical-align: top;
}

.checkbox {
  opacity: 0;
  position: absolute;
}

.ball {
  height: 14px;
  width: 14px;
  background-color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: left .2s linear;
}

.checkbox:checked + .label .ball {
  /*transform: translateX(24px);*/
  left: 24px;
}


.fa-moon {
  color: #f1c40f;
  font-size: 10px!important;
}

.fa-sun {
  color: #f39c12;
  font-size: 10px!important;
}








.light-mode .p-smart-search{
  
  background: var(--white);
}
.p-smart-search{
  background:var(--black);
}

.p-smart-search .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat5.png')!important;
}

.light-mode .p-smart-search .head-search{
  min-height:70vh;
  background: none!important;
  
}

.p-pricing .head-search{
  min-height: 70vh;
  background:url('https://vinlaztic.elazticservice.com/wp-content/themes/onepress/catalog/img/BgCat6.png')!important;
}

.light-mode .p-pricing .head-search{
  min-height:70vh;
  background: none!important;
  
}



.p-smart-search .card-header {
  background-color: var(--black)!important;
  color: var(--white)!important;
  padding: 6px!important;
  text-align: center;

  box-shadow: #00ced16e 0px 6px 24px 0px, #00ced130 0px 0px 0px 1px;
}

.light-mode .p-smart-search .card-header {
  background-color: var(--blackcow)!important;
  color: var(--white)!important;
  padding: 6px!important;
  text-align: center;

  box-shadow: none;
}

.light-mode .p-smart-search .card-header a{
  background-color: var(--blackcow)!important;
  color: var(--white)!important;
  padding: 6px!important;
  text-align: center;

  box-shadow: none;
}
.light-mode .p-smart-search table thead th {
  background-color: var(--blackcow)!important;
  color: var(--white)!important;
  vertical-align: top;
}

.p-smart-search #make, #model, #chassis, #engine, #year, #spec {
  border-radius: 0!important;
  font-size: 13px!important;
 
}


.p-smart-search .selectvehicle {
  background: var(--black);
  text-align: center;
  width: 100%;
  margin: 10px 0;
  box-shadow: #00ced130 0px 6px 24px 0px, #00ced130 0px 0px 0px 1px;
  padding: 10px;
}

.light-mode .p-smart-search .selectvehicle {
  background: var(--blackcow);
  text-align: center;
  width: 100%;
  margin: 10px 0;
  box-shadow: none;
  padding: 10px;
}


#shw_vehicle{
  color:var(--white)!important;
}
.light-mode #shw_vehicle{
  color:var(--balck)!important;
}


.box-smart-search{
  border-radius: 10px;
  /*background: #00ced117;*/
  background : #262731;
  backdrop-filter: blur(4px);
  color: var(--white);
  width: 100%;
}

.light-mode .box-smart-search{
  padding: 10px;
  border-radius: 10px;
  background: var(--white);
  color: var(--white);
  width: 100%;
}

.p-smart-search .type_search{ 
  color:var(--white);
}
.light-mode .p-smart-search  .type_search{
  color:var(--dark_green);
}

.p-smart-search B{
  color:var(--white);
}
.light-mode .p-smart-search B {
  color:var(--black);
}


.p-smart-search .list-group-item.list-group-item-action.active {
  background-color: var(--gray2)!important;
  border: 0.5px solid var(--gray2)!important;
  border-bottom: none!important;
  color: var(--black);
  padding: 6px!important;
  border-radius: 0!important;
}

.p-smart-search .list-group {
  border-radius: 0!important;
}

.p-smart-search .list-group-item {
  padding: 6px!important;
}

.p-smart-search .group td{
  background:var(--gray2);
  color:var(--black);

}
.p-smart-search .group td b{
  color:var(--black)!important;
}

.tableFixHead{
  box-shadow: #00ced16e 0px 6px 24px 0px, #00ced130 0px 0px 0px 1px; 
  background:white;
}

.light-mode #show_product_list_tb , .light-mode .tableFixHead{
  box-shadow: none;
}


.please-select-oem-s {
  background: #262731;
  text-align: left;
  width: 100%;
  margin: 5px 0;
  color: var(--dark_tur);
}

.btn-search {
  background: var(--black);
  box-sizing: border-box;
  border: none;
  border-left-color: #000;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 2px 0 #000;
  color: var(--white) !important;
  display: block;
  float: left;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: #00ced16e 0px 2px 8px 0px;
  width: 80px;

}
.btn-search:hover,
.btn-search:focus {
  background: var(--black);
  color: var(--dark_tur)!important;
  border: 1px solid #00ced173;
  outline: none;
  box-shadow: #00ced16e 0px 2px 8px 0px;
}

.btn-search:active {
  background: var(--black);
  border: 1px solid #00ced173;
  box-shadow: #00ced16e 0px 2px 8px 0px;
  top: 1px;
}

#ShwTbOemList{
  background:#262731;
}

.box-pdb-oem img:hover {
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  transition: transform .5s ease;
}

#box-partsnumber-genuine {
  border-radius: 4px 0px 0px 4px !important;
}

.p-smart-search .btn-search-vin {
    background: var(--black);
    box-sizing: border-box;
    border: none;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: var(--white) !important;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    box-shadow: #00ced16e 0px 2px 8px 0px;
    width: 80px;
  }




  .light-mode .p-smart-search .btn-search-vin {
    background: var(--blackcow);
    box-sizing: border-box;
    border: none;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;

    color: var(--white) !important;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 80px;
}



  .p-smart-search .list-group-item.hidden{
    display: none!important;
  }
  

  .p-smart-search thead{
    position:sticky;
    top:0;
  }

  .light-mode #nav-elaztic{
    padding:0;
  }

  .tdnoti2{
    color:var(--dark_tur);
  }

  .p-smart-search .tableFixHead{
    overflow:auto; width:100%; height:75vh; position:relative; background-color: var(--white);
  }

  .p-smart-search .shw_pd_list_tb{
  height: 75vh;
  background: white;
  top: 7;
  position: relative;
  padding: 0;
  box-shadow: #00ced16e 0px 6px 24px 0px, #00ced130 0px 0px 0px 1px; 
  }

  .light-mode .p-smart-search .shw_pd_list_tb{
    height: 75vh;
    background: white;
    top: 7;
    position: relative;
    padding: 0;
    box-shadow: none;
    }

    .p-smart-search strong{
      color:var(--gray2);
    }

    .light-mode .p-smart-search strong{
      color:var(--dark_green);
    }


    #loading_main_tb{
      display:none; z-index: 999999; position: absolute; top: 50%; left: 45%; height: 100px; margin-top: -50px; width: 35%; margin-left: -125px;
      color:var(--dark_tur)
    }
#h1loader_stepelaz{
  color: #2690a7!important;
}

.jconfirm .jconfirm-box.jconfirm-type-blue {
  border-top: solid 7px #00ced1!important;
}

#show_product_list_filter{
  position:relative;
  z-index:999;
}

.dataTables_filter input{
  color:var(--black)!important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color:var(--black)!important;
}

.p-smart-search .shw_vin {
    padding: 10px;
    border-radius: 10px;
    /*background: #00ced117;*/
    background : #262731;
    backdrop-filter: blur(4px);
    color: var(--white);
    width: 100%;
    height: 75vh;
    top: 43px;
    position: relative;
}

.p-smart-search .shw_vin {
  padding: 10px;
  border-radius: 10px;
  background: var(--white);
  backdrop-filter: blur(4px);
  color: var(--black);
  width: 100%;
  height: 75vh;
  top: 43px;
  position: relative;
}


.light-mode .shw_vin label {
color: var(--black)!important;
}
.light-mode #shw_tb_model label {
  color: var(--black)!important;
  }
  .light-mode .span_vin{
    color: var(--black);
  }


  .light-mode .p-smart-search .title-search {
    color:var(--brown);
  }


  .light-mode .p-smart-search a{
    color:var(--brown);
  }

  #tb_rem_wrapper{
    overflow-y: scroll;
  }


  .dark-mode .plan {
    margin: 20px 20px;
    padding: 15px 25px;
    text-align: center;
    background: white;
    border-radius: 5px;
    box-shadow: 0px -4px 54px #46c1ffab;
}

.plan {
    margin: 10px;
    padding: 10px;
    text-align: center;
    background: white;
    border-radius: 5px;
    box-shadow: #00ced12b 0px 0px 0.25em, #00ced130 0px 0.25em 1em;
}

.light-mode .plan {
    margin: 10px;
    padding: 10px;
    text-align: center;
    background: white;
    border-radius: 5px;
    border: 1px solid black;
    box-shadow: #464c4c2b 0px 0px 0.25em, #00000042 0px 0.25em 1em;
}

.plan-title {
    margin-bottom: 12px;
    font-size: 24px;
    color: #141414;
}

.plan-price {
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    color: var(--blackcow);
}

.plan-unit {

    margin-top: 5px;
    font-size: 13px;
    font-weight: normal;
    color: #aaa;
}


.plan-features {
    width: 120px;
    margin: 20px auto 15px;
    padding: 15px 0 0 15px;
    border-top: 1px solid #e5ded6;
    text-align: left;
}

.plan-feature {
    line-height: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #333;

    &+& {
        margin-top: 5px;
    }
}

.plan-feature-unit {
    margin-left: 2px;
    font-size: 16px;
}

.plan-feature-name {
    font-size: 13px;
    font-weight: normal;
    color: #aaa;
}

.plan-button {
    position: relative;
    display: block;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: white !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px rgba(black, .1);
    background: #141414;
    border-bottom: 2px solid #00ced1;
    border-color: rgba(black, .15);
    border-radius: 4px;

    &:active {
        top: 2px;
        margin-bottom: 2px;
        border-bottom: 0;
    }
}

.plan-highlight {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    width: 170px;
    border: 4px solid #37bbe6;


}

.dark-mode .plan-recommended {
    text-align: center;
    padding-bottom: 2px;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px rgba(black, .05);
    background: white;
    border-radius: 4px;
    box-shadow: 0px -4px 54px #00ced1;
}

.recomended {
    box-shadow: #00ced1 0px 2px 22px;
}

.light-mode .recomended {
    box-shadow: #00ced1 0px 1px 7px;
}

.DivBtnSubGroup.active{
  border: 3px solid var(--brown);
}









.loader_step2 { padding: 40px; display: none ;}
#h1loader_step2{
	font-family: 'Actor', sans-serif;
	color:#0092b0;
	font-size:13px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
    margin:0;

}
.loader_step2 span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader_step2 span:nth-child(2){
	background: #16343e;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader_step2 span:nth-child(3){
	background:var(--color_main2);
	z-index:100;
}
.loader_step2 span:nth-child(4){
	background: #455a64;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}






.loader_step4 { padding: 300px 53px; display: none; }
#h1loader_step4{
	font-family: 'Actor', sans-serif;
	color:#0092b0;
	font-size:13px;
	letter-spacing:1px;
	font-weight:500;
	text-align:center;
    margin:0;

}
.loader_step4 span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block; 
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader_step4 span:nth-child(2){
	background: #16343e;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader_step4 span:nth-child(3){
	background:var(--color_main2);
	z-index:100;
}
.loader_step4 span:nth-child(4){
	background: #455a64;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}









.loader_step3 { padding: 300px; display: none ;}
#h1loader_step3{
	font-family: 'Actor', sans-serif;
	color:#0092b0;
	font-size:13px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
    margin:0;

}
.loader_step3 span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader_step3 span:nth-child(2){
	background: #16343e;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader_step3 span:nth-child(3){
	background:var(--color_main2);
	z-index:100;
}
.loader_step3 span:nth-child(4){
	background: #455a64;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}






.loader_stepp3 { padding: 45vh; display: none ;}
#h1loader_stepp3{
	font-family: 'Actor', sans-serif;
	color:#0092b0;
	font-size:13px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
    margin:0;

}
.loader_stepp3 span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader_stepp3 span:nth-child(2){
	background: #16343e;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader_stepp3 span:nth-child(3){
	background:var(--color_main2);
	z-index:100;
}
.loader_stepp3 span:nth-child(4){
	background: #455a64;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}





@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
	50%{-webkit-transform:translateX(-20px);
	}
	
	100%{-webkit-transform:translateX(20px);
	z-index:200;
	}
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
	50%{-moz-transform:translateX(-20px);
	}
	
	100%{-moz-transform:translateX(20px);
	z-index:200;
	}
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
	50%{-o-transform:translateX(-20px);
	}
	
	100%{-o-transform:translateX(20px);
	z-index:200;
	}
}




@-webkit-keyframes kiri {
    0% {-webkit-transform:translateX(-20px);
   z-index:200;
   }
   50%{-webkit-transform:translateX(20px);
   }
   100%{-webkit-transform:translateX(-20px);
   }
}

@-moz-keyframes kiri {
    0% {-moz-transform:translateX(-20px);
   z-index:200;
   }
   50%{-moz-transform:translateX(20px);
   }
   100%{-moz-transform:translateX(-20px);
   }
}
@-o-keyframes kiri {
    0% {-o-transform:translateX(-20px);
   z-index:200;
   }
   50%{-o-transform:translateX(20px);
   }
   100%{-o-transform:translateX(-20px);
   }
}





.paginate_button{
  cursor:pointer!important;
}

.paginate_button:hover{
  cursor:pointer!important;
  color:white!important;
}
.p_oem_pricelist .paginate_button:active{ 
  cursor:pointer!important;
  color:white!important;
}

.paginate_button.current{
  background:white!important;
}

.dataTables_paginate.paginate_button:hover{
  color:white!important;
}


#ShwFuncGetQuickSearch{
  background: #262730;
  border-radius: 10px;
  padding: 10px;
  display:none;

}


#h1loader {
  font-family: 'Actor', sans-serif;
  color: #0092b0;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 200;
  text-align: center;
  margin: 0;
  text-shadow: none;
}
.loader{
  display: none;
}

.loader span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader span:nth-child(2){
	background: var(--color_main3);
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader span:nth-child(3){
	background:var(--color_main2);
	z-index:100;
}
.loader span:nth-child(4){
	background:var(--color_brown);
	-webkit-animation:kanan 1.2s infinite linear; 
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}




@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

input[type=radio].fav { 
    
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
input[type=radio].fav ~ label:before {
  font-family: FontAwesome;
  display: inline-block;
  letter-spacing: 10px;
  font-size: 1.5em;
  color: #585858;
  position: relative;
  top: -60px;

  cursor: pointer;

}
input[type=radio].fav:checked ~ label:before  {
  font-size: 1.5em;
  position: relative;
  top: -60px;

  cursor: pointer;

}
input[type=radio].fav ~ label:before {        
  content: "\f005";
  color:#585858;
  cursor: pointer;
}
input[type=radio].fav:checked ~ label:before {
  content: "\f005";        
  color: #FFBD59;
  text-shadow: 1px 1px 1px #000;
}

input[type=radio].fav:hover ~ label:before,
input[type=radio].fav:hover ~ label,
 
{                    
content: "\f005"; 
  color: #FFBD59;
}


input[type=radio].fav:focus ~ label:before,
input[type=radio].fav:focus ~ label
{    

  color: #FFBD59;
}
.dbselected#dbselectedag{
  border:4px solid var(--dbb);
  /*box-shadow:  var(--dbb)6px 2px 8px 0px; */
}

.dbselected#dbselectedlx{
  border:4px solid var(--dba);
 /* box-shadow:  var(--dba) 6px 2px 8px 0px;*/
}

.dbnselect{
border:1px solid white;
}

.shwvinlx{
  padding: 10px;
    border-radius: 10px;
    /* background: #00ced117; */
    background: #262731;
    backdrop-filter: blur(4px);
    color: var(--white);
    width: 100%;
    margin-top:20px;

}


.bgg{
  padding: 10px;
    border-radius: 10px;
    /* background: #00ced117; */
    background: #262731;
    backdrop-filter: blur(4px);
    color: var(--white);
    width: 100%;
    margin-top:20px;

}



.ShoSubG {
  height: 600px;
  overflow: scroll;
  position: relative;
  width: 100%;
  /* background: linear-gradient(to right bottom, rgb(0 0 0 / 18%), rgb(0 0 0 / 3%)); */
  background: white;
}
#ShowResultSubGroup {
  margin-bottom: 35px;
}


.lx-vin-supg .list-group-item.active {
  background: /* #ebebeb*/var(--color_brown)!important;
  color: white!important;
  border: 1px solid var(--color_main2)!important;
  padding: 10px!important;
}

.lx-vin-supg {
  height: 600px!important;
  overflow: auto;
  background: #f7f7f7;
  border-radius: 0!important;
}

.shwimgsubgroupvin {
  text-align: center;
  text-align: center;
  background: white;
  padding: 8px;
  margin: 5px;
  border: 1px solid var(--color_main2);
}

.shwimgsubgroupvin.active{
border: 3px solid var(--brown)!important;
}

.namesubgroup.active .shwname{
  color:var(--dark_tur);
}

.breadcrumb {
  color: var(--color_main3)!important;
}

.breadcrumb-item.active {
  /* color: #445c9d!important; */
  color: var(--color_brown);
}

.label-selectcar {
  color: var(--color_brown);
  font-size: 16px;
}

.breadcrumb{
  --bs-breadcrumb-divider-color: white!important; /* เปลี่ยนสีตามที่คุณต้องการ */
}

.showimgparts{
  padding-bottom: 0!important;
}




#table-parts-search-vinlx_filter{
  padding-bottom: 10px;
}

.part_new{
  color:gray;
}