:root {
  --web-color : #086bbe;
  --web-color1 : #ec3237;
  --table-color : #086bbe;
  --status1-color : #006cb1;
  --status1-bg : #d9e9f3;
  --status2-color : #ec3237;
  --status2-bg : #ffe9ea;
  --status3-color : #333333;
  --status3-bg : #eeeeee;

}
body{
  color: #333333;
}


a{
  color: #3989cb;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
img {
  border: 0;
  max-width: 100%;
}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,blockquote,pre,form,input,textarea {
  margin: 0;
  padding: 0;
}
p {margin:0 ;padding:5px 0;}
ol,ul {	list-style: none;}
b, strong {
  font-weight: 700;
}
.clear {clear: both; font-size: 0; line-height: 0; height:0;}


.clearfix:after
{
  content: '[DO NOT LEAVE IT IS NOT REAL]';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  display: inline;
  position: relative;
}
/*\*/
.clearfix	{
  display: block;
}
.clear {clear: both; font-size: 0px; line-height: 0px; height:0;}
.fl {float:left;}
.fr {float:right;}
.radio label::before,
.checkbox label::before {
  border-color: #767676;
}

.btn-reset {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
.btn-reset:hover{
  color: #fff;
}

.btn-cancel {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
.btn-cancel:hover{
  color: #fff;
}

.btn-submit {
  background-color: var(--web-color) !important;
  border-color: var(--web-color) !important;
}
.btn-submit:focus, .btn-submit:active, .btn-submit:hover{
  color: #fff !important;
  background-color: #000000 !important;
  border-color: var(--web-color) !important;
}


.authentication-bg {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

.account-card-box .card {
  border-color: var(--web-color);
}
.account-pages {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}
body.enlarged {
  min-height: auto !important;
}

.logo-box {
  height: 50px !important;
}
.logo-box .logo {
  padding: 5px;
}
.logo-box .logo img {
  max-height: 40px;
}
.logo span.logo-lg {
  display: flex ;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.enlarged .logo span.logo-sm{
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.enlarged .logo span.logo-sm img {
  max-width: 100%;
}

.profile-dropdown {
  width: 270px !important;
}


.navbar-custom {
  background-color: var(--web-color);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
  height: 50px !important;
}
.navbar-custom .button-menu-mobile {
  color: #ffffff;
  height: 50px !important;
  line-height: 50px !important;
}
.navbar-custom .app-search .form-control {
  background-color: #ffffff;
}
.navbar-custom .app-search .btn {

}
.navbar-custom .topnav-menu .nav-link {
  color: #ffffff;
  font-weight: bold;
  max-height: 50px !important;
  line-height: 50px !important;
}
.notification-list .noti-icon-badge {
  background-color: #ffffff;
}



.vnt-header-wishlist {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: #eeeeee;
  padding: 4px;
  border: 1px solid #eeeeee;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 10px 0;
}

.notification-list .nav-link:hover .vnt-header-wishlist {
  background: #ffffff;
  color: #ec3237;
}
.vnt-header-wishlist > i{
  font-size: 30px;
  line-height: 30px;
}

.notification-list .nav-link .num_wishlist{
  display: block;
  position: absolute;
  right: -10px;
  top: -7px;
  font-size: 12px;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 10px;
  color: #333333;
  background: #ffffff;
  font-weight: bold;
}
.notification-list .nav-link:hover .num_wishlist{
  background: var(--web-color);
  color: #ffffff;
  border: 1px solid #eeeeee;
}

#vnt-sidebar .card-header {
  background: #2b3d51;
  color: #FFFFFF;
  text-transform: uppercase;
}

.left-side-menu {
  top: 50px !important;
}
#vnt-sidebar-list ul li {

}

#vnt-sidebar-list ul li a{
  color: #333333;
}
#vnt-sidebar-list ul li a:hover{
  color: #FF5722;
}
#vnt-sidebar-list ul li i {
  color: #FF5722;
  font-weight: bold;
  font-size: 16px;
  margin-right: 5px;
}

#sidebar-menu>ul>li>a {
  font-size: 14px;
}
#sidebar-menu>ul>li>a.active {
  color: var(--web-color);
}

.content-page {
  margin-top: 50px !important;
}

.card-box .card-title {
  color: var(--web-color);
  font-size: 18px;
  padding-bottom: 10px;
  box-shadow: inset 0 -1px 0 rgba(38,50,56,.1);
}


.card-header-tabs {}
.card-header-tabs .nav-item {}
.card-header-tabs .nav-item .nav-link {
  font-size: 18px;
  text-transform: uppercase;
}

.card-header-tabs .nav-item .nav-link.active {

}
.card-header-tabs .nav-item .nav-link:hover{
  color: var(--web-color);
}

/*vnt-tab-nav*/
.vnt-tab-nav {
  width: 750px;
  margin: 0 auto;
  margin-bottom: 15px;
}
.vnt-tab-nav .nav {

}
.vnt-tab-nav .nav-item {

}
.vnt-tab-nav .nav-item .nav-link {
  display: block;
  background: #fff;
  color: #333;
  padding: 5px 10px;
  border: 1px solid #ccc;

  line-height: 20px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}
.vnt-tab-nav .nav-item.active .nav-link,
.vnt-tab-nav .nav-item .nav-link:hover {
  background: var(--web-color);
  color: #fff;
}



/*Table*/
.vnt-table-responsive {
  overflow-x:inherit;
}

.vnt-table {
  margin-bottom: 0;
}

.vnt-table > thead > tr {
  background: var(--table-color);
}

.vnt-table > thead > tr > th {
  color:#ffffff;
  font-weight:bold;
  white-space: nowrap;
}
.vnt-table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #eaf4f9 ;
}

.vnt-table .checkbox-single label {
  margin-bottom: 0;
}

.table-sm td {
  font-size: 12px;
  line-height: 20px;
}

table.tblRemote {}
table.tblRemote thead th {
  text-align: center;
  background: #f0f0f0;
  color: #666;
  padding: 5px 5px;
}

.tblRemote tbody tr td {
  border: 1px solid #ddd !important;
  padding: 5px 5px;
}

.nav-action  { margin-bottom: 15px; }
.nav-action a.btn { margin-right: 10px;}

.nav-action.nav-bottom {
  position: relative;
  padding-left: 50px;
}
.nav-bottom::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f064";
  font-weight: 900;
  left: 13px;
  top: 0;

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  color: #FF0000;
  font-size: 18px;
}

.vnt-flex {
  display: flex;
  margin: 0 -5px;
}
.vnt-flex .i-flex {
  padding: 0 5px;
}




.box-item-info {
  margin-bottom: 10px;
  position: relative;
}

.box-item-info .div-back {
  position: absolute;
  right: 0;
  top: -55px;
  z-index: 10;
}

.box-item-info .box-item {
  display: flex;
  width: 100%;
}

.box-item-info .box-item .i-img {
  width: 150px;
}

.box-item-info .box-item .i-info {
  width: calc(100% - 150px);
}

.box-item-info .admintable td.row1 {
  white-space: nowrap;
}

.box-item-info .img {
  max-width: 150px;
  margin-right: 10px;
  height: 80px;
  text-align: center;
}

.box-item-info .img img {
  max-width: 100%;
  max-height: 100%;
}

.box-item-info .name {
  color: var(--web-color);
}

.box-item-info .maso {
  color: #B84120;
}

.box-item-info .div-back {
  padding-top: 10px;
}

.box-item-info .div-back .btn {
  padding: 2px 10px;
  line-height: 18px;
}



.info-item{
  position: relative;
}

.info-item .i-item{
  margin-bottom: 2px;
  font-size: 12px;
}
.info-item .i-title a{
  color: #21759B;
  font-weight: bold;
  font-size: 13px;
}
.info-item.item-sub .i-title a {
  color: unset;
  font-size: 12px;
}

.info-item .i-title a:hover{
  color: #F77225;
}

.info-item .badge{
  font-size: 9px;
}


.info-item .i-link a {
  color: #666666;
}
.info-item .i-item a.label  {
  display: flex;
  width: 100%;
  font-size: 12px;
  font-weight: normal;
  padding: 3px 5px;
  height: 25px;
  line-height: 18px;
  margin: 3px 0;

  border: 1px solid #333333 !important;

}
.info-item .i-item a.label > span {
  display: block;
}
.info-item .i-item a.label > span.icon {
  font-size: 16px;
  line-height: 20px;
  margin-right: 5px;
  width: 20px;
}
.info-item .i-item a.label > span.txt {
  line-height: 18px;
}


.info-item .label{
  width: 100%;
  padding: 5px;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  border-radius: 10px;
  color: #ffffff;
}
.label-status1 {
  background: #5cb85c;
}
.label-status2 {
  background: #dc3545;
}
.label-status0 {
  background: #5bc0de;
}


.info-item .i-status{
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
  border-radius: 10px;
  color: #ffffff;
  min-width: 80px;
  text-align: center;
}
.info-item .i-status.status0 {
  background: #5cb85c;
}
.info-item .i-status.status1 {
  background: #006cb1;
}
.info-item .i-status.status2 {
  background: #e0a800;
}
.info-item .i-status.status3 {
  background: #333333;
}



.link-action .badge {
  margin-left: 5px;
  color: #ff0000;
  background: #ffffff;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  border-radius: 10px;
}

.info-item .vnt-flex {
  justify-content: space-between;
}
.info-item .vnt-flex .i-flex {
  width: 100%;
  text-align: center;
}


.grid-pic {
  display: flex;
  flex-wrap: wrap;
  margin : -5px;
}
.grid-pic .pic_item{
  padding: 5px;
  position:relative;

}
.grid-pic .pic_item .img {
  border:#ccc solid 1px;
  width: 230px;
  height: 150px;
  position: relative;
  overflow: hidden;

  display: flex;
  justify-items: center;
  justify-content: center;
  /*display: block;
  padding-top: 66.666667%;*/

}
.pic_item  .img img {
  /*position: absolute;
  top: 0;
  left: 0;*/
  max-width: 100%;
  max-height: 100%;
}

.pic_item .remove {
  width:18px;
  height:18px;
  display:inline-block;
  position:absolute;
  top: 5px;
  right: 5px;
  text-decoration: none;
  z-index: 100;
}
.pic_item .remove::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  font-weight: 900;
  left:0;
  color: #FF0000;
  font-size: 18px;
}

.pic_item input[type=text] {
  width: 100%;
}

.pic_item::after {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #cccccc;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #333333;
  content: ''attr(data_count)'';
}


.fs-25 { font-size: 25px; line-height: 30px;}
.fs-20 { font-size: 20px; line-height: 25px;}
.fs-14 { font-size: 14px; line-height: 22px;}
.fs-16 { font-size: 16px; line-height: 24px;}
.red { color: #ea0000 !important;}
.blue { color: #0271c6 !important;}
.blue-light { color: #00aeef !important;}
.green {	color: #69aa46 !important;}
.orange { color: #ff961b !important}
.bigger-110{font-size:110%!important}.bigger-120{font-size:120%!important}.bigger-130{font-size:130%!important}.bigger-140{font-size:140%!important}.bigger-150{font-size:150%!important}.bigger-160{font-size:160%!important}.bigger-170{font-size:170%!important}.bigger-180{font-size:180%!important}.bigger-190{font-size:190%!important}.bigger-200{font-size:200%!important}.bigger-210{font-size:210%!important}.bigger-220{font-size:220%!important}.bigger-230{font-size:230%!important}.bigger-240{font-size:240%!important}.bigger-250{font-size:250%!important}

 .modal-header {
   background: var(--web-color);

 }
.modal-header .modal-title , .modal-header .close {
  color: #ffffff  ;

}
.modal-header .close {
  opacity: 1 !important;
}
.modal-header .close:hover {
  color: #ff5d48;
  text-shadow: unset;
}

.modal-content-shadow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07);
}
.modal-footer-shadow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07);
}

.div_input {
  position: relative;
}
.div_input.has-error .form-control{
  border-color: #a94442 !important;
}
.div_input.has-success .form-control {
  border-color: #3c763d !important;
}
.div_input .help-block {
  display: none;
}

.vnt-filter .dropdown .cur-text {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.div_input.has-error em {
  position: absolute;
  z-index: 10;
  right: 0;
  top: -23px;
  white-space: nowrap;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-style: italic;
  padding: 3px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.div_input.has-error em::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0d7';
  color: #000;
  right: 15px;
  bottom: -11px;
}



.validate .form-group {
  position: relative;
}

.validate .select2-container.is-invalid .select2-selection--single,
.validate .select2-container.is-invalid .select2-selection--multiple{
  border-color: #ff5d48 !important;
}

em.error {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 30px;
  white-space: nowrap;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-style: italic;
  padding: 3px 10px;
  margin: 0;
  width: auto;

  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
em.error::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0d7';
  color: #000;
  right: 15px;
  bottom: -11px;
}
.validate .form-group.row em.error {
  right: 12px;
}
.validate .form-group.d-flex  em.error {
  right: 30px;
}

.typeAHeadDiv {
  position: relative;
}

.vnt-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: -15px;
  margin-left: -15px;
}

.vnt-wrap-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: 15px;
  margin-left: 15px;
}

.vnt-wrap-item-fill {
  -webkit-box-flex: 0;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}

.vnt-gird {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.vnt-gird-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
}

.vnt-gird-item-fill {
  -webkit-box-flex: 0;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}

.manage-top {
  margin-bottom: 15px;
}
.box-search {}
.box-search .box-search-content {

}

.form-wrap-370 {
  max-width: 370px;
  margin: 0 auto;
}

.boxForm .group-checkbox{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.boxForm .group-checkbox>div{
  margin-right: 20px;
}
.boxForm .group-checkbox>div:last-child{
  margin-right: 0;
}
.boxForm .form-group {
  position: relative;
  margin-bottom: 15px;
}

.boxForm .form-label {
  font-weight: bold;
}
.boxForm .form-label span {
  font-weight: normal;
  color: #ff0000;
}
.boxForm .form-input {
  min-height: 38px;
}
.boxForm .input-text {
   padding: 6px 0;
}

.boxForm .form-group.d-flex {
  margin-left: -10px;
  margin-right: -10px;
}
.boxForm .form-group.d-flex > div{
  padding-left: 10px;
  padding-right: 10px;
}
.boxForm .form-group.d-flex .form-label {
  width: 170px;
  line-height: 35px;
}
.boxForm .form-group.d-flex .form-input {
  width: calc(100% - 180px);
}
.boxForm  .list-radio {
  padding: 4px 5px;
}
.boxForm  .list-radio label {cursor: pointer}

.boxForm .nav-tabs {
  position: relative;
}
.boxForm .nav-tabs>li>a {
  background: #f0f0f0;
  border-color: #efefef;
  color: #333;
  font-weight: bold;
  margin-right: 5px;
  text-transform: uppercase;
}
.boxForm .nav-tabs>li>a:hover {
  color: #ffffff;
  background: var(--web-color);
}
.boxForm .nav-tabs>li>a.active {
  background: var(--web-color);
  color: #ffffff !important;
  border-color: var(--web-color);
}
.boxForm .nav-tabs>li.dropdown {
  position: absolute;
  right: 0;
}
.boxForm .nav-tabs>li.dropdown> a {
  margin-right: 0;
  text-transform: none;
  color: var(--web-color);
}
.boxForm .nav-tabs>li.dropdown .dropdown-menu {
  min-width: 250px;
}
.boxForm .nav-tabs>li.dropdown .dropdown-menu .nav-link {
  border: none;
}
.boxForm .form-footer {
  text-align: center;
  position:-webkit-sticky;
  position:sticky;
  bottom:0;
  background: #ffffff;
  margin-bottom: 25px;

  padding: 15px;
  -webkit-box-shadow: 0 0 35px 0 rgba(73,80,87,.15);
  box-shadow: 0 0 35px 0 rgba(73,80,87,.15);
  border-radius: .25rem;
}



.boxForm .form-footer .btn  {
  height: 45px ;
  padding: 6px 20px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
}

.vnt-checkbox{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:solid 1px rgba(0,0,0,0.1);
  position: relative;
  cursor: pointer;
}
.vnt-checkbox:before{
  content: "\f00c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  color:#ffffff;
  display: none;
}
.vnt-checkbox.active:before{
  display: block;
}
.vnt-checkbox input{
  display: none;
}
.vnt-checkbox.active{
  background: #f57a1a;
}

.vnt-upload-file {
  position: relative;
}
.vnt-upload-file .upload-input{
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.vnt-upload-file .btn-upload {
  height: 40px;
  min-width: 220px;
}
.vnt-upload-file .uploadfile {
  position: relative;
}

.vnt-upload-file input[type=file].file-hidden {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  text-align: right;
  opacity: 0;
  outline: 0;
  background: #fff;
  cursor: inherit;
  display: block;
}
.vnt-upload-file.active .btn-upload span {
  display: none;
}
.vnt-upload-file .upload-loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}
.vnt-upload-file.active .upload-loading {
  display: block;
}

.vnt-upload-file .upload-loading .ball-pulse{
  padding: 5px 80px;
  display: block !important;
}

.vnt-upload-file .upload-loading .ball-pulse>div {
  height: 10px ;
  width: 10px;
  background-color: #ffffff;
}

.vnt-upload-file .upload-result {

}

.vnt-upload-file.has-file .upload-input {
  display: none;
}

.upload-result-view .item-file {
  padding: 5px;
  padding-left: 30px;
  border: 1px solid #cccccc;
  position: relative;
}
.upload-result-view .item-file::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: '\f15c';
  color: #000;
  left: 5px;
  font-weight: bold;
  font-size: 22px;
}

.upload-result-view .item-file .i-name {
  display: inline-block;
  margin-right: 5px;
}
.upload-result-view .i-del {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.upload-result-view  .i-del::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: '\f057';
  color: #ff0000;
  top: 0;
  font-weight: bold;
  font-size: 18px;
}

.upload-result-view .item-pic {
  position: relative;
  display: inline-block;
  max-width: 150px;
}
.upload-result-view .item-pic .i-del {
  position: absolute;
  z-index: 90;
  right: 5px;
  top: 5px;
}
.upload-result-view .item-pic .i-del::after {
  font-size: 20px;
}


.ball-pulse{float:left;line-height:30px;margin-left:10px;display:none}
.ball-pulse>div{background-color:#3a3c3f;border-radius:100%;margin:0 1px;display:inline-block;width:8px;height:8px;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.ball-pulse>div:nth-child(1){-webkit-animation:scale-pulse .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale-pulse .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)}
.ball-pulse>div:nth-child(2){-webkit-animation:scale-pulse .75s -.15s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale-pulse .75s -.15s infinite cubic-bezier(.2,.68,.18,1.08)}
.ball-pulse>div:nth-child(3){-webkit-animation:scale-pulse .75s -.11s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale-pulse .75s -.11s infinite cubic-bezier(.2,.68,.18,1.08)}
@-webkit-keyframes scale-pulse {
  0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
  45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}
}
@keyframes scale-pulse {
  0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
  45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}
}





.action-buttons {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-buttons > a{
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border:solid 1px rgba(0,0,0,0.1);
  margin: 0 5px;
  background: #ffffff;
  padding: 0;
  position: relative;
  color:#999999;
  font-size: 14px;
}
.action-buttons > a:hover{
  border-color: #e0493e;
  color:#e0493e;
}
.action-buttons > a:last-child{
  margin-right: 0;
}
.action-buttons > a:before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.action-buttons a.i-edit:before{
  content: "\f044";
}
.action-buttons a.i-duplicate:before{
  content: "\f0c5";
}
.action-buttons a.i-hidden:before{
  content: "\f070";
}
.action-buttons a.i-display:before{
  content: "\f06e";
}
.action-buttons a.i-del:before{
  content: "\f00d";
}

.action-buttons .action-more {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  position: relative;
}

.action-more .i-more {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border:solid 1px rgba(0,0,0,0.1);

  background: #ffffff;
  padding: 0;
  color:#999999;
  font-size: 14px;
}

.action-more .i-more:hover{
  border-color: #e0493e;
  color:#e0493e;
}

.action-more.show .i-more {
  border-color: var(--web-color);
  background-color: var(--web-color);
  color: #ffffff;
}


.action-more .i-more::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  content: "\f0c9";
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.action-more.show .i-more::before {
  content: "\f00d";
}

.action-more .dropdown-menu {
  padding: 10px;
  border: 1px solid var(--web-color);
}
.action-more a {
  display: flex;
  align-items: center;
  align-content: center;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 10px 5px 12px;
  border-radius: 5px;
  color: #fff;
  background: var(--web-color);
  margin: 5px 0;
  border: 1px solid #CCCCCC;
}
.action-more a:hover {
  border-color: var(--web-color1);
}
.action-more a i {
  width: 15px;
  margin-right: 10px;
  text-align: center;
}
.action-more a span{
  white-space: nowrap;
}
.action-more a.ac-edit {
  background: #38a52d;
}
.action-more a.ac-display {
  background: #0098da;
}
.action-more a.ac-hidden {
  background: #666666;
}
.action-more a.ac-del {
  background: #f42e41;
}

.action-more a.ac-active{
  background: #64b0f2;
}





.action-link { }
.action-link a {
  position: relative;
  display: block;
  margin-bottom: 5px;
}
.action-link:last-child {
  margin-bottom: 0;
}

.action-link a.has-icon {
  display: flex;
  margin: 0 -3px;
}
.action-link a.has-icon span {
  padding: 0 3px;
  white-space: nowrap;
}
.action-link .badge {
  position: absolute;
  top: -9px;
  right: -5px;

  color: var(--web-color);
  border: 1px solid var(--web-color);
  width: 18px;
  height: 18px;
  padding: 0;
  font-weight: bold;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  border-radius: 100%;
}

.action-link .label-status {
  margin-left: 5px;
  color: var(--web-color);
  border: 1px solid var(--web-color);

  padding: 0;
  font-weight: bold;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
}
.action-link .label-status.label-danger{
  background-color: var(--web-color);
  color: #ffffff;
}

.badge-status {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
  border-radius: 10px;
  color: #ffffff;
  background: var(--web-color);
  min-width: 80px;
  text-align: center;
}
.badge-status i {}
.badge-status span {}

.div-loading {
  text-align: center;
}
.div-loading span {
  width: 10px;
  height: 10px;
}

.hidden {
  display: none !important;
}

.list-choose {

}
.list-choose .div-key-choose {
  margin-bottom: 10px;
}

.list-choose ul {
  list-style: none;
  padding: 0;
  margin: -5px -10px;
  overflow-y: auto;
  max-height: 400px;
}
.list-choose .i-choose {
  padding: 10px 10px;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
}

.list-choose .i-choose span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #b9b9b9;
  color: #8bb949;
  text-align: center;
  font-size: 17px;

  line-height: 20px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
}

.list-choose .i-choose span {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
}

.list-choose .i-choose.checked span::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  color: #8bb949;
  text-align: center;
  font-size: 17px;

  line-height: 20px;
  box-sizing: border-box;
}

.list-choose .i-more {
  padding: 5px 10px;
}


.list-choose-singel {

}
.list-choose-singel ul {
  list-style: none;
  padding: 0;
  margin: 0 -10px;
  overflow-y: auto;
  max-height: 400px;
}
.list-choose-singel .i-choose {
  padding: 5px 10px;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
}

.list-choose-singel .i-choose span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1px solid var(--web-color);
  color: var(--web-color);
  text-align: center;
  font-size: 17px;
  border-radius: 100%;
  line-height: 20px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
}

.list-choose-singel .i-choose span {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
}

.list-choose-singel .i-choose.checked span::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  color: var(--web-color);
  text-align: center;
  font-size: 14px;

  line-height: 20px;
  box-sizing: border-box;
}

.picture .del {
  position: relative;
  padding-left: 25px;
}
.picture .del::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f057";
  position: absolute;
  top: 0px;
  left: 5px;
  width: 20px;
  height: 20px;
  color: #ff0000;
  text-align: center;
  font-size: 17px;

  line-height: 20px;
  box-sizing: border-box;
}


.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.blink-bg{
  animation: blinkingBackground 2s infinite;
}
@keyframes blinkingBackground{
  0%		{ background-color: #ececec;}
  25%		{ background-color: #dbd9d9;}
  50%		{ background-color: #dbd6d6;}
  75%		{ background-color: #bab9b9;}
  100%	        { background-color: #a3a1a1;}
}

.blink-text{
  color: #000;
  font-weight: bold;
  font-size: 2rem;
  animation: blinkingText 2s infinite;
}
@keyframes blinkingText{
  0%		{ color: #10c018;}
  25%		{ color: #1056c0;}
  50%		{ color: #ef0a1a;}
  75%		{ color: #254878;}
  100%	        { color: #04a1d5;}
}


.alert[data-notify] {
  min-width: 300px;
  padding: 1rem 1.5rem;
  z-index: 999999 !important;
}

.swal2-modal .swal2-title {
  white-space: nowrap;
}
.swal2-container {
  z-index: 999999 !important;
}

/*card-toolbar*/

.card-toolbar {
  padding-bottom: 10px;
  margin-bottom: 15px;
  box-shadow: inset 0 -1px 0 rgba(38,50,56,.1);
}
.form-search {
  position: relative;
}

.search-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
  align-items: center;
  align-content: center;
}
.search-grid > div {
  padding: 0 5px;
  margin-bottom: 10px;
}


.form-search .s-item {
  position: relative;
}

.form-search .s-item label {
  display: block;
}
.form-search .s-item .select2-container {
  min-width: 100px;
}

.select2-dropdown {
  min-width: 200px !important;
}


.form-search .btn-select {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
  color: #333333;
  background:#f2f2f2;
  border: 1px solid #dfdfdf !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}

.form-search .input-daterange {
  max-width: 300px;
}
.form-search .input-daterange .input-date {
  width: 50%;
}

.input-date {
  position: relative;
}
.input-date input {
  padding-right: 30px;
}
.input-date::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f073";
  color: #999999;
  pointer-events: none;
}
.form-search .s-advanced {
  text-align: center;
}

.form-search .s-advanced a span {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.form-search .s-advanced a span::after  {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0d8';
  right: 0;
}
.form-search .s-advanced a span.text-open::after {
  content: '\f0d7';
}
.btn-toggle .text-open {display:inline}
.btn-toggle:not(.collapsed)  .text-open {display:none}
.btn-toggle.collapsed .text-close {display:none}
.form-search .s-button button {
  width: 100%;
  white-space: nowrap;
}


.nav-tool  a.btn {
  white-space: nowrap;
}

.toolbar-action {}
.toolbar-action .bulk-actions .btn { margin-left: 5px}


/*vnt-tabs*/
.vnt-tabs {
  position: relative;
}

.vnt-tabs .nav-tabs   a {
  background: #eceff1;
  margin-right: 5px;
}
.vnt-tabs .nav-tabs   a.active {
  background: #64b0f2;
  color: #ffffff;
}





/*Comment*/
.vnt-comment {}
.vnt-comment__form {}
.vnt-comment__form .cm-avatar {
  width: 50px;
}
.vnt-comment__form .cm-avatar img {
  max-width: 40px;
  max-height: 40px;
}
.vnt-comment__form .cm-input {
  width: calc(100% - 50px);
}


.vnt-comment__form .cm-attach {
  margin-left: 50px;
}
.vnt-comment__list {}

.vnt-comment__list .comment-row {
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 15px;

  background: #fff;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.vnt-comment__list .comment-name {
  color: #007bff;
  font-size: 16px;
}
.vnt-comment__list .comment-user {
  color: red;
  font-size: 13px;
}
.vnt-comment__list .comment-date {
  font-size: 13px;
}
.vnt-comment__list .comment-text {}


  /*vnt more less*/
.content_show_hidden{
  font-size: 15px;
  line-height: 25px;
  overflow: hidden;
  position: relative;
}
.content_show_hidden.active_show{
  margin-bottom: 10px;
}
.content_show_hidden:after{
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  content: '';
  background: -moz-linear-gradient(top,rgba(255, 255, 255,0) 0,rgba(255, 255, 255,1) 45%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255, 255, 255,0)),color-stop(45%,rgba(255, 255, 255,1)));
  background: -webkit-linear-gradient(top,rgba(255, 255, 255,0) 0,rgba(255, 255, 255,1) 45%);
  background: -ms-linear-gradient(top,rgba(255, 255, 255,0) 0,rgba(255, 255, 255,1) 45%);
  background: linear-gradient(to bottom,rgba(255, 255, 255,0) 0,rgba(255, 255, 255,1) 45%);
}
.content_show_hidden.active_show:after{
  background: transparent;
}
.button_show_hidden{
  text-align: center;
}
.button_show_hidden a{
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 15px;
  color: #ffffff;
  background: #333333;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.button_show_hidden a:after{
  font-family: "Font Awesome 5 Free";
  padding-left: 10px;
  content: '\f0da';
  font-weight: 900;
}
.content_show_hidden.active_show ~ .button_show_hidden a:after{
  content: '\f0d8';
}
.button_show_hidden a:hover{
  background: rgb(255, 87, 34);
}


.ribbon-wrapper {
  height: 70px;
  overflow: hidden;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 70px;
  z-index: 10;
}

.ribbon-wrapper .ribbon {
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  font-size: .8rem;
  line-height: 100%;
  padding: .375rem 0;
  position: relative;
  right: -2px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.4);
  top: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 90px;
}
.ribbon-wrapper .ribbon::before {
  left: 0;
}
.ribbon-wrapper .ribbon::after {
  right: 0;
}
.ribbon-wrapper .ribbon::after, .ribbon-wrapper .ribbon::before {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #9e9e9e;
  bottom: -3px;
  content: "";
  position: absolute;
}
.ribbon-wrapper .ribbon.bg-danger , .ribbon-wrapper .ribbon.bg-dark  {
  color: #ffffff;
}

/*pagination*/
.page-list .btn {
  width: 30px;
  height: 30px;
  line-height: 18px;
  padding: 2px;
}

.pagination{
  background: transparent;
  padding-top: 1.5rem;
  margin:0;
}
.pagination ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination.text-center ul {
  margin: 0 auto;
}
.pagination ul li{
  display: inline-block;
  margin:0 5px 5px 0;
}
.pagination ul li span.pagetotal{
  display: table-cell;
  height: 40px;
  vertical-align: middle;
  background: none;
  color: #333333;
}
.pagination ul li span.pagecur,
.pagination ul li a{
  display: table-cell;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 26px;
  vertical-align: middle;
  color:#333333;
  font-weight: normal;
  background-color: #ffffff;
  border: solid 1px #d0d0d0;
  text-align: center;
}
.pagination ul li span.pagecur img,
.pagination ul li a img{
  width: 20px;
  height: 20px;
}
.pagination ul li a:hover, .pagination ul li span.pagecur {
  color: #ffffff;
  background-color: var(--web-color);
  border-color: var(--web-color);
}
.pagination a, .pagination a:visited{
  color: #666666;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content:unset;
}




.js-pagination {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.js-pagination li {
  margin: 0 1px;
}

.js-pagination li a , .js-pagination li span{
  cursor: pointer;
  display: table-cell;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  background: #eeeeee;
  font-size: 18px;
  line-height: 26px;
  vertical-align: middle;
  color:#666666;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
  font-weight: normal;

  border: 1px solid #dfdedb;
  border-radius: 5px;
}
.js-pagination li a:hover, .js-pagination li.active a , .js-pagination li span.pagecur{
  background-color: var(--web-color);
  border-color: var(--web-color);
  color: #fff;
}

.js-pagination li.disabled {}



.vnt-popup{
  pointer-events: auto;
}
.vnt-popup .fancybox-bg {

}
.vnt-popup .fancybox-slide--iframe{
  padding: 0;
}
.vnt-popup .fancybox-slide--iframe .fancybox-content{
  width: 95%;
  max-width: 410px;
}
.vnt-popup .fancybox-content {
  background:#fff;
  overflow:visible;
  border-radius: 5px;
  box-shadow: 0 0 15px 0 rgba(236, 0, 140, 0.2);
}

.vnt-popup.fancybox-container {

}
.vnt-popup button[data-fancybox-close]{
  padding: 0;
  top: 0px;
  right: 0px;
  color: #ffffff;
  height: 44px;
  width: 44px;
  opacity: 1;
}
.vnt-popup button[data-fancybox-close] svg {
  width: 100%;
}

.vnt-popup .popup-title {
  background: #337ab7;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  position: relative;
  padding: 15px;
}

.vnt-popup .popup-content {
  padding:15px;
}

.vnt-popup .fancybox-slide--html .fancybox-content {
  padding: 0 !important;
  background: #ffffff;
}

.vnt-popup .popup-footer {
  background: var(--web-color);
  color: #ffffff;
  line-height: 30px;
  padding: 5px 15px;
}

.vnt-popup .popup-footer a{
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
}

/*
.vnt-popup .fancybox-slide--html .fancybox-content {
  min-width: 410px;
  padding: 0 !important;
  background: #ffffff;
  overflow: hidden;
}
*/

/*Loading*/

.loading {
  position: relative;
  z-index: 9999;
}

.loading:before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.loading:after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 901;
  width: 150px;
  height: 150px;
  background: url(../images/loading.svg) no-repeat center center;
  background-size: cover;
  opacity: 1;
}


.vnt-loading {
  position: relative;
}

.vnt-loading:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.vnt-loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 100px;
  height: 100px;
  background: url(../images/loading.svg) no-repeat center center;
  background-size: cover;
  opacity: 0.6;
}

.vnt-loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--web-color);
  --_m:
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: myloader 1s infinite linear;
}
@keyframes myloader {to{transform: rotate(1turn)}}

.load-more {
  padding: 15px 0;
}

.load-more span{
  display: inline-block;
  padding: 7px 50px;
  position: relative;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  border: 1px solid #a01d21;
  background-color: #a01d21;
  cursor: pointer;
}
.load-more span::before{
  /* content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-color: #1d439c;
  width: 0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;   */
}
.load-more span:hover{
  background-color: #fff;
  color: #a01d21;
}
.load-more span:hover::before{
  width: 100%;
}


.loadmore_overlay{
  float: left;
  width: 100%;
  height: 40px;
  background: url(../images/preloader.gif) no-repeat 50% 50%;
}


.loading-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin: 0 -10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.loading-grid .loading-col {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 10px;

}

.loading-grid .loading-item {
  padding: 0;
  background: #ffffff;
  /*border: 1px solid #eeeeee;*/
  margin-bottom: 10px;
  position: relative;
}


.loading-grid .loading-item::after {
  content: '';
  clear: both;
  display: table;
}

.loading-grid .loading-col .loading-img {
  height: 110px;
  background-color: #eeeeee;
  width: 150px;
  float: left;
}

.loading-grid .loading-col .loading-info {
  width: calc(100% - 160px);
  float: right;
}
.loading-grid .loading-col .loading-text {
  height: 20px;
  margin-bottom: 7px;
  background-color: #eeeeee;
}
.loading-grid .loading-col .loading-text:last-child {
  margin-bottom: 0;
}



.loading-table {}


.loading-table .loading-item {
  padding: 0;
  background: #ffffff;
  /*border: 1px solid #eeeeee;*/
  margin-bottom: 10px;
  position: relative;
}


.loading-table .loading-item::after {
  content: '';
  clear: both;
  display: table;
}

.loading-table .loading-item .loading-img {
  height: 110px;
  background-color: #eeeeee;
  width: 150px;
  float: left;
}

.loading-table .loading-item .loading-info {
  width: calc(100% - 160px);
  float: right;
}
.loading-table .loading-item .loading-text {
  height: 20px;
  margin-bottom: 7px;
  background-color: #eeeeee;
}
.loading-table .loading-item .loading-text:last-child {
  margin-bottom: 0;
}



.fade-loading-animated {
  -webkit-animation-name: fadeLoading;
  animation-name: fadeLoading;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes fadeLoading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeLoading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}




/******** CSS MODULE DUNG CHUNG ***********/

/*popup info*/

.popup-info-item {

}
.popup-info-item a {
  text-decoration: underline;
}
.popup-info-item .item-info {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e6e6e6;
  position: relative;
}
.popup-info-item .i-title { }

.popup-info-item .i-check {
  position: absolute;
  right: 0;
  bottom: 0;
}

.popup-info-item .item-info h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px 0;
}
.popup-info-item .item-info h3 span {
  display: block;
  border-left: 3px solid #f5871d;
  padding-left: 10px;
}

.popup-info-item .item-info .row {
  margin-left: -2px;
  margin-right: -2px;
}
.popup-info-item .item-info .row > div {
  padding-left: 2px;
  padding-right: 2px;
}

.popup-info-item .i-info {
  padding-top: 3px ;
  padding-bottom: 3px;
}

.popup-info-item .i-info.has-icon {
  display: flex;
}
.popup-info-item .i-info.has-icon .i-icon {
  width: 25px;
  font-size: 14px;
  line-height: 22px;
}
.popup-info-item .i-info.has-icon .i-text {
  width: calc(100% - 30px);
}

.popup-info-item .i-info .txt-advantage-defect {
  font-weight: bold;
}
.popup-info-item .i-info .txt-advantage-defect span{
  font-weight: normal;
  color: var(--web-color);
}

.popup-info-item .i-info .i-list {
  list-style: none;
}
.popup-info-item .i-info .i-list li {
  padding: 2px 0;
}
.popup-info-item .item-link {
  padding: 15px 5px;
}
.popup-info-item .item-link a {
  font-size: 14px;
  line-height: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--web-color);
  text-decoration: underline;
}




/*Logs*/
.popupViewLogs {
  width: 1130px;
}
.popupViewLogs {}

.popupViewLogs .item-logs {}
.vnt-popup .i-edit{
  display: none;
}
.vnt-popup .i-val{}
.vnt-popup .showedit .i-edit{
  display: block;
}
.vnt-popup .showedit .i-val{
  display: none;
}

.popupViewLogs td .form-control {

}

.popupViewLogs td .form-control.dates {
  background-position:98% 3px;
}

.vnt-popup .i-action a {
  display: inline-block;
  margin: 0px 3px;
  font-size: 16px;
}
.vnt-popup .i-action a.ac-edit_logs {
  color: #086bbe;
}
.vnt-popup .i-action a.ac-del_logs {
  color: red;
}


/*popupLandPrice*/
.popupLandPrice {
  width: 750px;
}
.note-post {
  padding: 10px 20px;
}

.valuation a.s-blue  {
  color: #086bbe !important;
}
.valuation a.s-red {
  color: #ff0000 !important;
}

/*popupValuation*/
.vhformall .grform{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -7px;
}
.vhformall .grform > div{
  padding: 0 7px;
}
.vhformall .grform .colm{
  width: 43%;
}
.vhformall .grform .colb{
  width: 50%;
}
.vhformall .grform .colh{
  width: 57%;
}
.vhformall .grform .colmm{
  width: 50%;
}
.hpformall.vchange{
  position: relative;
}
.hpformall.vchange input{
  padding-right: 70px;
}
.hpformall.vchange .met{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background-color: #eeeeee;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.hpformall.vchange.vmax input{
  padding-right: 80px;
}
.hpformall.vchange.vmax .met{
  width: 75px;
}
.vhgrippop{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin: 0 -10px;
}
.vhgrippop > div{
  padding: 0 10px;
}

/* <==== vhformdinhg ====> */
.vhformdinhg {
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
}
.vhformdinhg .ttform{
  text-align: center;
  background-color: #086bbe;
  color: #fff;
  padding: 9px 40px;
}
.vhformdinhg .ttform h2{
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.vhformdinhg .fancybox-close-small{
  color: #fff;
  opacity: 1;
  padding: 5px;
}
.vhformdinhg .grcont{
  display: flex;
  flex-wrap: wrap;
}
.vhformdinhg .grcont .lcol{
  width: 670px;
}
.vhformdinhg .grcont .rcol{
  width: 480px;
}
.hpforminpu{
  padding: 25px 30px 35px;
  background-color: #fff;
}
.vhgripfrmpp{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.vhgripfrmpp.vres{
  justify-content: center;
}
.vhgripfrmpp > div{
  padding: 0 12px;
  width: 50%;
}
.vhgripfrmpp.vres > div{
  width: auto;
}
.tpform{
  margin-bottom: 12px;
}
.tpform label{
  display: block;
  font-size: 14px;
  line-height: 22px;
}
.tpform label span{
  color: #fe0000;
}
.tpform .tminner{
  max-width: 185px;
}
.tpform button{
  font-size: 14px;
  line-height: 22px;
  font-weight: bold;
  padding: 0 35px;
  height: 40px;
  color: #fff;
  border: none;
}
.tpform.btnvm button{
  background-color: #086bbe;
}
.tpform.btnvh button{
  background-color: #666666;
}

.hpforminfo{
  height: 100%;
  padding: 25px 20px;
  background-color: #f6f6f6;
  color: #333;
}
.hpforminfo.vres{
  padding: 0;
  background-color: transparent;
  height: auto;
}
.hpforminfo .ttinfo{
  font-size: 14px;
  line-height: 22px;
  color: #086bbe;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: bold;
}
.hpforminfo .ctinfo{
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.hpforminfo .grinfo{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
}
.hpforminfo .grinfo .colm{
  width: 115px;
}
.hpforminfo .grinfo .colm{
  width: 120px;
}
.hpforminfo .grinfo .colh{
  width: calc(100% -  245px);
}
.hpforminfo .grinfo .colb{
  width: calc(100% - 120px);
}
.hpforminfo .grinfo .colt{
  width: 100%;
}
.hpforminfo .grinfo .coln{
  width: 155px;
}
.hpforminfo .grinfo .cols{
  width: calc(100% - 155px);
}
.hpforminfo .grinfo:last-child{
  border-bottom: none;
}
.hpforminfo .grinfo .mminfo{
  padding: 10px 8px 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  align-content: center;
}
.hpforminfo .grinfo .mminfo:last-child{
  border-bottom: none
}
.hpforminfo .grinfo > div{
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.hpforminfo .grinfo > div:last-child{
  border-right: none;
}
.hpforminfo .infofa{
  position: relative;
  padding-left: 25px;
}
.hpforminfo .infofa::before{
  position: absolute;
  left: 0;
  top: 0;
  color: #086bbe;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.hpforminfo .infofa p{
  padding: 0;
  margin-bottom: 2px;
}
.hpmapinfo {
  padding: 20px 20px 25px;
  border-radius: 5px;
  overflow: hidden;
}
.hpmapinfo .fancybox-close-small{
  opacity: 0;
}
.hpmapinfo .ttinfo{
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
}

.hpforminfo .lkinfo {
  display: flex;
  justify-content: space-between;
}
.hpforminfo .lkinfo .div-date {
  margin-top: 10px;
  line-height: 30px;
  padding: 10px;
  font-weight: bold;
}

.vhtabnav {
  margin-top: 20px;
  overflow: hidden;
}
.vhtabnav ul {
  list-style: none;
  float: right;
}
.vhtabnav li {
  float: left;
  margin-left: 5px;
}
.vhtabnav li a {
  display: block;
  padding: 5px 10px;
  line-height: 25px;
  background: #086bbe;
  color: #ffffff;
}
.vhtabnav li a .num {
  color: #ed1c24;
}

.vhtabnav .btn-search {
  height: 30px;
  padding: 5px 10px;
  background: #086bbe;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  color: #ffffff;
}
.vhtabnav .btn-search span {
  line-height: 20px;
}
.vhtabnav .btn-search:hover {
  background: #ee3135;
}
.vhtabnav li .fa{
  line-height: 25px;
}


/*Compare*/
.vnt-header-compare {
  position: absolute;
  top : 0;
  right: 0;
  z-index: 99;
  height: 107px;

  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07);
}
.vnt-header-compare .hc-content {
  padding: 15px;
  min-width: 240px;
}
.vnt-header-compare .hc-title {
  font-weight: bold;
  text-transform: uppercase;
}
.vnt-header-compare .hc-text {
   margin-bottom: 5px;
}
.vnt-header-compare .hc-btn {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vnt-header-compare .hc-btn .btn {
  width: 100%;
  border-radius: 0;
  font-size: 13px;
}


#vnTModalCompare .modal-dialog {
  width: 95% !important;
  max-width: 1400px !important;
}

#vnTModalCompare .modal-content {
  border-radius: 0;
  border: none;
}
#vnTModalCompare .modal-header {
  background: #16a34a;
  height: 40px;
  padding: 5px 15px;
  border-radius: 0;
  border: 0;
}
#vnTModalCompare .modal-header .modal-title {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 30px;
  width: calc(100% - 50px);

}

#vnTModalCompare .modal-header .close {
  width: 50px;
}
#vnTModalCompare .modal-body {
  padding: 0;
  border: 0;
}
#vnTModalCompare .modal-footer {
  background: var(--web-color);
  color: #ffffff;
  height: 40px;
  padding: 5px 10px;
  border-radius: 0;
}
#vnTModalCompare .modal-footer a {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
}



.vnt-popup-compare.fancybox-container{
  pointer-events: auto;
  z-index: 99;
}
.vnt-popup-compare .fancybox-bg {
  opacity: 0.3;
}
.vnt-popup-compare .fancybox-slide--iframe{
  padding: 0;
}
.vnt-popup-compare .fancybox-slide--iframe .fancybox-content{
  width: 95%;
  max-width: 410px;
}
.vnt-popup-compare .fancybox-content {
  background:#fff;
  overflow:visible;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07);
}

.vnt-popup-compare.fancybox-container {

}
.vnt-popup-compare button[data-fancybox-close]{
  padding: 0;
  top: 0px;
  right: 0px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  opacity: 1;
}
.vnt-popup-compare button[data-fancybox-close] svg {
  width: 100%;
}

.vnt-popup-compare .popup-title {
  background: #16a34a;
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #ffffff;
  position: relative;
  padding: 5px 15px;
}

.vnt-popup-compare .popup-close {
  position: absolute;
  right: 15px;
  color: #ffffff;
  font-size: 18px;
}
.vnt-popup-compare .popup-content {
  padding:0;
}

.vnt-popup-compare .popup-footer {
  background: var(--web-color);
  color: #ffffff;
  line-height: 30px;
  padding: 5px 15px;
}

.vnt-popup-compare .popup-footer a{
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
}

.vnt-popup-compare .fancybox-slide--html .fancybox-content {
  min-width: 410px;
  padding: 0 !important;
  background: #ffffff;
  overflow: hidden;
}


.vnt-table-compare {
  margin-bottom: 0;
  min-width: 1050px;
}

.vnt-table-compare > thead > tr {
  background: #eaf4f9;
}

.vnt-table-compare > thead > tr > th {
  font-weight:bold;
  white-space: nowrap;
  font-size: 13px;
  color: #333333;
}

.vnt-table-compare > thead > tr > th .th-inner {
  padding: 10px 5px !important;
}
.vnt-table-compare.table-striped tbody tr:nth-of-type(even) {
  background-color: #eaf4f9 ;
}
.vnt-table-compare.table-striped tbody tr:nth-of-type(odd) {
  background-color: #ffffff ;
}

.vnt-table-compare.table-striped tbody tr:hover {
  background-color: rgba(0,0,0,.075);
}
.vnt-table-compare > tbody > tr > td {
  padding: 8px 5px !important;
  white-space: nowrap;
}
.vnt-table-compare td .street_name{
  width: 130px;
  overflow: hidden;
  white-space: initial;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  cursor: pointer;
}

.vnt-table-compare td a {
  text-decoration: underline;
}


.fixed-table-container.fixed-height {
  overflow: hidden;
}

.text-tooltip {
  cursor: pointer;
}
ul.tooltip-list {list-style: none}
ul.tooltip-list li{
  padding: 2px 0;
}
ul.tooltip-list li span {
  color: #e0a800;
}


.compare-save-list {
  max-height: 200px;
  overflow-y: auto;
}
.compare-save-list ul {}
.compare-save-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.compare-save-list .sl-title {}
.compare-save-list .sl-title .i-add {
  display: inline-block;
  width: 20px;
  color: var(--web-color);
}
.compare-save-list .sl-title .num {}
.compare-save-list .sl-action {
  display: flex;
  gap: 10px;
}
.compare-save-list .sl-action a {
  color: var(--web-color);
  text-decoration: underline;
}






.bootstrap-table .pagination-detail {
  display: none;
}
.bootstrap-table .pagination  {

  padding: 0 !important;
}
.bootstrap-table .float-right.pagination {
  float: none !important;
  margin: 15px 0  0!important;
  padding: 0 !important;
  text-align: center !important;

}
.bootstrap-table .float-right.pagination ul{
  margin: 0 auto !important;
  padding: 15px 0;
}

.bootstrap-table .float-right.pagination ul li a {

}




.multiselect-container .input-group {
  width: auto;
}

.multiselect-container>li>a {
  display: block;
  padding: 3px 10px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.multiselect-container>.active>a, .multiselect-container>.active>a:focus, .multiselect-container>.active>a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}
.multiselect-container>li>a>label {
  display: block;
}
.multiselect-container>li .checkbox input[type=checkbox] {
  opacity:unset !important;
}

.multiselect-container>li>label.multiselect-group {
  display: block;
  margin: 0;
  padding: 3px 10px  !important; ;
  margin-bottom: 2px;
  font-weight: bold;
  color: #333333;
  font-size: 14px;
  text-transform: uppercase;

  border-bottom: 1px dotted #dedede;
}

/*Responsive*/


@media all and (max-width: 1400px){
  .vnt-table-responsive {
    overflow-x: auto;
  }
  .navbar-custom .topnav-menu .nav-link {
    padding: 0 10px;
  }
}
@media (min-width: 768px) {
  .responsive-tabs .dropdown-arrow {
    display: none;
  }
}

@media screen and (max-width: 767px){
  .responsive-tabs {
    position: relative;
    height: 40px;

  }
  .responsive-tabs ul {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    min-width: 10rem;
    margin: 0;

    list-style: none;
    border: 1px solid rgba(0,0,0,.15);
    background-clip: padding-box;
  }
  .responsive-tabs li {
    width: 100%;
    margin:   0 !important;
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.15);
  }
  .responsive-tabs li:last-child {
    border-bottom: none;
  }
  .responsive-tabs li > a {
    display: none;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .responsive-tabs.open li > a, .responsive-tabs li > a.active {
    display: block;
  }
  .responsive-tabs .dropdown-arrow {
    position: absolute;
    top: 15px;
    right: 15px;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    vertical-align: middle;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all ease .5s;
    cursor: pointer;
    z-index: 1001;
  }
  .responsive-tabs.open .dropdown-arrow {
    transform: rotate(-135deg);
    transition: all ease .5s;
  }


}

@media screen and (max-width: 480px){
   .form-search .s-item {
     width: 100% !important;
   }
  .form-search .s-advanced {
    margin-bottom: 10px;
  }
  .form-search .s-button {
    width: 100% !important;
  }

  .form-search .input-daterange {
    max-width:  unset;
  }

  .box-item-info .box-item .i-img {
     display: none;
  }

  .box-item-info .box-item .i-info {
    width: 100%;
  }



  .boxForm .form-group.d-flex {
    flex-direction: column;
  }

  .boxForm .form-group.d-flex .form-label {
    width: 100%;
  }

  .boxForm .form-group.d-flex .form-input {
    width: 100%;
  }

  .popupMedia .fancybox-slide--iframe {
    padding: 30px 15px 0;
  }

  .card-header-tabs .nav-item .nav-link {
    font-size: 16px;
  }
  .card-header-tabs .nav-item .nav-link .hidden-small { display: none}
}

@media all and (max-width: 479px){

  .bootstrap-table .pagination ul li a {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 20px;
    padding: 5px;

  }
}