:root {
    --color_main: #005493;
    --color_main2: #1976D2;
    --color_hover: #14b09e;
    --color_hover2: #80DEEA;
    --color_thead: #1976D2;
    --color_font_thead: white;
    --color_font: #1976D2;
  
  }


  
#colophon{
    display: none;
  }

    body{ font-family: 'Kanit', sans-serif!important; font-size:13px!important;  }
    table{font-size:13px!important; }
    input{font-size:13px!important; }
    select{font-size:13px!important; }
    textarea{font-size:13px!important; }
    button{font-size:13px!important; }
    li{font-size:13px!important; }
    .loading-text{
        font-size:10px;
    }
    .wrapper {
        
        min-height :calc(100% - 100px);
        margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
    }
    thead{
        background: var(--color_thead);
        color:var(--color_font_thead)
    }
    thead th{
        text-align: center;
    }
    input{
        font-size:13px!important;
    }
    textarea{
        font-size:13px!important;
    }
    select{
        font-size:13px!important;
    }


.navbar.navbar-expand-lg.bg-light{
    background:var(--color_main2)!important;
}




/* scroll bar */
::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #F5F5F5;
  height: 5px!important;              
  width: 8px;         
}
::-webkit-scrollbar
{
	width: 8px;
  height: 5px!important;   
  background-color: #F5F5F5;
}

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



::-webkit-scrollbar {
  height: 5px!important;            
  width: 8px;        
}


#make:hover , #model:hover , #year:hover , #chassis:hover , #engine:hover, #spec:hover {

  overflow: scroll;
}

#make , #model ,#year ,#chassis, #engine,#spec{
    border-radius: 0;
}
.box-pdb-rem-list:hover{
    overflow-y: scroll;
}

.box-pdb-rem-list{
    overflow-x: hidden;
}


#make , #model ,#year,#chassis,#engine,#spec,.tableFixHead {

  overflow: hidden;
}

.caption {
  margin-top: 0px;
  text-align: center;
}
.caption h2{
  color: var(--color_main);
  margin: 0 0 8px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
} 

.caption ul {
  margin: 0;
  padding: 0;
}

.caption li {
  list-style: none;
  display: inline-block;
  letter-spacing: 3px;
  font-size: 18px;
  color:#f3f3f3;
  margin-right: 5px;
  font-family: Arial Narrow, sans-serif;
  animation: on-run 2.6s ease infinite;
  -webkit-animation: on-run 2.6s ease infinite;
  -moz-animation: on-run 2.6s ease infinite;
  -ms-animation: on-run 2.6s ease infinite;  
  -o-animation: on-run 2.6s ease infinite;
}
.caption li:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}
.caption li:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;
    margin-right: 10px;
}
.caption li:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}
.caption li:nth-child(4){-webkit-animation-delay:.8s;animation-delay:.8s}
.caption li:nth-child(5){-webkit-animation-delay:1s;animation-delay:1s;
    margin-right: 10px;
}
.caption li:nth-child(6){-webkit-animation-delay:1.2s;animation-delay:1.2s}
.caption li:nth-child(7){-webkit-animation-delay:1.4s;animation-delay:1.4s}
.caption li:nth-child(8){-webkit-animation-delay:1.6s;animation-delay:1.6s}



.div_loading{
  position: fixed;
    width: 100%;
    z-index: 999999;
    background: #ffffffcf;
    height: 100%;
}

.div_loading_tb{
     width: 100%;
    z-index: 999999;
    background: #ffffffcf;
    height: 100%;
}


body {
     margin: 0;
 }

 .container {
     margin: auto;
     position: relative;
 }

 .face{
  margin-top: 100px;
  text-align: center;
 }

 .loading {
     width: 200px;
     display: block;
     height: 1px;
     margin: 28px auto; 
     border-radius: 2px;
     background-color: #a6a6a6;
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

  .loading:before {
     content:'';
     height: 3px;
     width: 68px;
     position: absolute;
     -webkit-transform: translate(-34px, 0);
     -ms-transform: translate(-34px, 0);
     transform: translate(-34px, 0);
     background-color: #00CED1 ;
     border-radius: 2px;
     -webkit-animation: initial-loading 1.5s infinite ease;
     animation: animation 1.4s infinite ease;
 }



 .toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}



/* Toastr custom styles*/
#toast-container {
}

#toast-container.toast-bottom-center > div, #toast-container.toast-top-center > div {
    margin: 10px auto 0;
}

#toast-container > .toast-info,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-success{
    background-image: none;
}

#toast-container > div {
    background: #fff;
    padding: 20px;
    color: #6a6c6f;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 1;
}


#toast-container > div:hover {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toast-close-button {
    color: #000;
    opacity: 0.2;
}

.toast-info {
    background: #fff;
    border-left: 6px solid #3498db;
}
.toast-success {
    background: #fff;
    border-left: 6px solid #62cb31;
}
.toast-warning {
    background: #fff;
    border-left: 6px solid #ffb606;
}
.toast-error {
    background: #fff;
    border-left: 6px solid #e74c3c;
}

.toast-progress {
    opacity: 0.6;
}

.toast-info .toast-progress {
    background-color: #3498db;
}
.toast-success .toast-progress {
    background-color: #62cb31;
}
.toast-warning .toast-progress {
    background-color: #ffb606;
}
.toast-error .toast-progress {
    background-color: #e74c3c;
}

/* Nestable list */

.jconfirm .jconfirm-box .jconfirm-buttons .btn-warning{
    background: #3b488d!important;
    color: white!important;
}

.jconfirm .jconfirm-box .jconfirm-buttons .btn-blue{
    background: #3b488d!important;
    color: white!important;
}


#table-fake2 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake2_filter{
    display: none;
}

#table-fake3 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake3_filter{
    display: none;
}

#table-fake1 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake1_filter{
    display: none;
}

#table-fake4 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake4_filter{
    display: none;
}


#table-fake5 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake5_filter{
    display: none;
}


#table-fake6 tfoot {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #39499e;
    color: white;
    z-index: 4;
}

#table-fake6_filter{
    display: none;
}


a{
    cursor:pointer!important;
}

#nav-epc-vin #show_data_list .dataTables_wrapper.no-footer{
    top:0px!important;
}
#nav-epc-vin #show_data_list .dataTables_filter {
    z-index:99;

}

#nav-epc-model #show_data_list_model .dataTables_wrapper.no-footer{
    top:0px!important;
}
#nav-epc-model #show_data_list_model .dataTables_filter {
    z-index:99;
    margin-top:10px;
}

#tab-catalog .nav-link{
    color:var(--color_font);
    
}
#tab-catalog .nav-link.active {
 color:var(--color_hover)!important;
}
.btn-add-quotation{
    background:#3cb67d;
    color:white!important;
}


.btn-add-quotation:hover{
    background:#30aa71;
    color:white!important;
}

.btn-import-quotation{
    background:#ecbb2e;
    color:white!important;
}

.btn-clear-quotation{
    background:#d0606b;
    color:white!important;
}
#nav-tab .nav-link{
    color:var(--color_font)!important;

}
#nav-tab .nav-link.active{
    color:var(--color_hover)!important;

}
.navbar.navbar-expand-lg.bg-light .nav-item .nav-link {
    color: white !important;
}
.navbar.navbar-expand-lg.bg-light .nav-item .nav-link.active {
    color:var(--color_hover2)!important;
}

.btn-search-vin{
    border:1px solid var(--color_main);
    color:var(--color_main);
}
.btn-search-vin:hover{
    border:1px solid var(--color_main);
    background:var(--color_main);
    color:white;
}
.btn-search{
    border:1px solid var(--color_main);
    color:var(--color_main);
}
.btn-search:hover{
    border:1px solid var(--color_main);
    background:var(--color_main);
    color:white;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
}







@media only screen and (max-width: 1000px) {
    #container-desktop{
        display:none;
    }

}

@media only screen and (min-width: 1001px) {
    #container-mobile{
        display:none;
    }

}








@-moz-keyframes gauge-loader {
  0% {
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -moz-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -moz-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -moz-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -moz-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -moz-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -moz-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -moz-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
@-webkit-keyframes gauge-loader {
  0% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
@keyframes gauge-loader {
  0% {
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
/* :not(:required) hides this rule from IE9 and below */
.gauge-loader:not(:required) {
  background: #6ca;
  -moz-border-radius-topleft: 32px;
  -webkit-border-top-left-radius: 32px;
  border-top-left-radius: 32px;
  -moz-border-radius-topright: 32px;
  -webkit-border-top-right-radius: 32px;
  border-top-right-radius: 32px;
  display: inline-block;
  width: 64px;
  height: 32px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
}
.gauge-loader:not(:required)::before {
  -moz-animation: gauge-loader 4000ms infinite ease;
  -webkit-animation: gauge-loader 4000ms infinite ease;
  animation: gauge-loader 4000ms infinite ease;
  background: white;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  content: '';
  position: absolute;
  left: 30px;
  top: 5.33333px;
  width: 4px;
  height: 26.66667px;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.gauge-loader:not(:required)::after {
  content: '';
  background: white;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  position: absolute;
  left: 25.6px;
  top: 25.6px;
  width: 12.8px;
  height: 12.8px;
}


.shwimgsubgroupvin {
  text-align: center;
  text-align: center;
  background: white;
  padding: 8px;
  margin: 5px;
  border: 1px solid var(--color_main);
}
.shwimgsubgroupvin img{
  width:100%;
}

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

.namesubgroup .shwname {
  color: black;
}



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


.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;
}

.lx-vin-supg .list-group-item.active {

  color: white !important;

  padding: 10px !important;
}



.lx-vin-supg .list-group-item {

  color: black !important;
  padding: 10px !important;
}

.lx-vin-supg .list-group-item{

  color: black !important;

  padding: 10px !important;
  background:white;
  border:0.1px solid lightgray!important;

}

.list-group-item+.list-group-item {
  border-top-width: 0;
}

.shwvinlx {
  padding: 10px;
  border-radius: 10px;

  color: var(--color_main);
  width: 100%;
  margin-top: 20px;
}

#load-wrapp {
  position: fixed;
  top: 0;
  z-index: 99;
  padding: 0;
}
.load-wrapp {
  text-align: center;
  display: none;
}

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

#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 { 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);
 }
}


.loader_step3{
  display: none;
}
.label-selectcar {
  color:var(--color_main);
  font-size: 16px!important;
}

.dbselected{
  width: 100%;
  border: 4px solid #14b09e;
}
.dba , .dbb{
  color:black;
}

#nav-tab .nav-link.disabled1{
  color: lightgray!important;

}


    /* ตั้งค่า container */
    .subscription-container {
      position: relative;
      width: 100%; /* กำหนดขนาดรูป */
    
      overflow: hidden; /* ตัดส่วนเกินออก */
      border-radius: 10px; /* ขอบโค้งมน */
    }
    
    /* สไตล์ภาพพื้นหลัง */
    .background-image {
      width: 100%;

      object-fit: cover; /* ให้ภาพเต็มขนาดโดยไม่เพี้ยน */
      display: block;
    }
    
    /* สไตล์สำหรับ overlay */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* คลุมดำจางๆ */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff; /* สีข้อความ */
      text-align: center;
      padding: 10px;
      transition: background 0.3s ease; /* เพิ่มเอฟเฟกต์ hover */
    }
    
    /* เพิ่มข้อความและปุ่ม */
    .subscription-text h2 {
      font-size: 1.5rem;
      margin: 0 0 10px;
    }
    
    .subscription-text p {
      font-size: 1rem;
      margin: 0 0 15px;
    }
    
    .subscribe-button {
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      text-shadow: none;

      background: #3b488d !important;
    color: white !important;
    }
    
    .subscribe-button:hover {
     /* background-color: #e85b50;*/
    }
    
    /* เอฟเฟกต์ hover ที่ container */
    .subscription-container:hover .overlay {
      background: rgba(0, 0, 0, 0.7); /* คลุมเข้มขึ้นเมื่อ hover */
    }


      .navbar.navbar-expand-lg.bg-light .nav-item.disabled2  .nav-link {
    color: #d4d3d3 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    cursor: not-allowed;
    opacity: 0.6;
    }
    .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{
      font-size:15px!important;
    

    }