/* styles in src/style directory are applied to the whole page */
/* import via custom font  */
@font-face {
  font-family: 'fontello';
  src: url('../public/fonts/via-custom/fontello.eot?4325343');
  src: url('../public/fonts/via-custom/fontello.eot?4325343#iefix') format('embedded-opentype'),
       url('../public/fonts/via-custom/fontello.woff2?4325343') format('woff2'),
       url('../public/fonts/via-custom/fontello.woff?4325343') format('woff'),
       url('../public/fonts/via-custom/fontello.ttf?4325343') format('truetype'),
       url('../public/fonts/via-custom/fontello.svg?4325343#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../public/fonts/via-custom/icomoon.eot?t34zx');
  src:  url('../public/fonts/via-custom/icomoon.eot?t34zx#iefix') format('embedded-opentype'),
    url('../public/fonts/via-custom/icomoon.ttf?t34zx') format('truetype'),
    url('../public/fonts/via-custom/icomoon.woff?t34zx') format('woff'),
    url('../public/fonts/via-custom/icomoon.svg?t34zx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-bgall:before {
  content: "\e903";
  color: var(--primary-bg);
}
.icon-pheu .path1:before {
  content: "\e901";
  color: var(--primary-bg);
}
.icon-pheu .path2:before {
  content: "\e902";
  color: var(--primary-color-border);
}

.via-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-bg-tab:before { content: '\e800'; }
.icon-layers:before { content: '\e801'; }
.icon-bg-scroll-top:before { content: '\e802'; }
.icon-right:before { content: '\e803'; }
.via-fs-12{
  font-size: 12px;
}
.daterangepicker{
  font-family: 'Montserrat', sans-serif !important;
}
/* end import via custom font  */

:root {
  --primary-color: #FF8200;
  --primary-bg-mobile: #FFF;
  --primary-hover-color: #FF9323;
  --primary-bg-backdrop: #00000066;
  --primary-color-text: #212121;
  --primary-color-border: #EAEAEA;
  --primary-bg: #FFF;
  --primary-bg-scroll-track: #F1F1F1;
  --primary-bg-scroll-thumb: #CCC;
  --primary-border-menu: #D8D8D8;
  --primary-border-order: #E6E6E6;
  --primary-color-icon-menu: #999999;
  --primary-color-border-profile: #999999;
}

html {
  font-size: 10pt
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  color: var(--primary-color-text);
}

a {
  color: #03A9F4;
}

main {
  padding: 1em;
  text-align: center;
  margin-top: 50px;
  display: block;
}

.no-padding {
  padding: 0px;
}

.no-margin {
  margin: 0px;
}

.no-border {
  border: none;
}

.gray-bg {
    background: #FAF9F6;
    height: 36rem;
    width: 100%;
    overflow: visible;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0px 10px 25px rgba(221,114,3,0.45) !important;
  color: #fff !important;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0px 10px 25px rgba(221,114,3,0.45);
}

.btn-primary:not(:disabled):hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-color);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  background-color: #dd7203;
  border-color: #dd7203;
}

.btn:disabled {
  background-color: #E6E6E6;
  border-color: #fff;
}

.btn:disabled:hover {
  color: grey;
}

.btn-primary.focus, .btn-primary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(221,114,3,.5);
    box-shadow: 0 0 0 0.2rem rgba(221,114,3,.5);
}

.btn-default {
  background-color: #fff;
  color: #999999;
  border-color: #E6E6E6;
}

.btn-default:focus, .btn-default.focus {
  border-color: #E6E6E6;
  box-shadow: none !important;
}

.btn {
    font-size: 1rem;
    padding: 1rem 3rem;
    min-width: 140px;
    border-radius: 0.5rem
}

.btn.focus, .btn:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(221,114,3,.25);
    box-shadow: 0 0 0 0.2rem rgba(221,114,3,.25);
}

.btn.no-shadow {
  box-shadow: none !important;
}

.btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

a {
  color: #999999;
}

a:hover, a:active, a:focus {
  color: var(--primary-color);
  text-decoration: none;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    cursor: pointer;
    color: #000 !important;
    text-decoration: none;
    background-color: var(--primary-color);

}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=phone], input[type=url], textarea {
  outline-color: var(--primary-color);
  font-weight: 500;
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  border-color: #e6e6e6;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=phone]:focus, input[type=url]:focus, textarea:focus, select:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(221,114,3,.25);
}

select.form-control {
  outline-color: var(--primary-color);
  font-weight: 500;
  border-radius: 0.5rem;
  border-color: #e6e6e6;
}

.w-full {
  width: 100%;
}

.w-100px {
  width: 100px;
}

.w-120 {
  width: 120px;
}

.w-120-important {
  width: 120px !important;
}

.w-130 {
  width: 130px;
}

.w-200 {
  width: 200px;
}

.w-300 {
  width: 300px;
}

.w-100-percent {
  width: 100%;
}

.w-40-percent {
  width: 40%;
}

.w-30-percent {
	width: 30%;
}
.w-5ch {
	width: 5ch;
}

.w-auto {
	width: auto;
}

.clear {
  clear: both;
}


.text-gray {
  color: #999999;
}

.text-black {
  color: #212121;
}

.text-orange {
  color: var(--primary-color);
}

.text-red {
  color: #FF0000;
}

.text-warn {
  color: #9F6000;
  background-color: #FEEFB3;
}

.text-signin {
  color: var(--primary-color);
}

.text-reference {
  color: var(--primary-color);
}

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

.small-title {
  font-size: 2rem;
  font-weight: 500;
}

.pt-5p {
  padding-top: 5px;
}
.pt-50 {
  padding-top: 50px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-70 {
  padding-left: 70px;
}

.pr-5p {
  padding-right: 5px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-70 {
  padding-right: 70px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-5p {
  margin-right: 5px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-5p {
  margin-left: 5px;
}

.mt-4p {
  margin-top: 4px;
}

.mt-5p {
  margin-top: 5px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-70 {
  margin-top: 70px;
}

.mb-5p {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.h-30 {
  height: 30px;
}

.h-40 {
  height: 40px;
}

.gray-sep {
  display: inline-block;
  width: 2px;
  background: #D8D8D8;
  height: 30px;
  vertical-align: middle;
  margin: 0 10px;
}

.content-box {
  background: #fff;
  border: solid 1px #EAEAEA;
  border-radius: 12px;
  padding: 6rem 3rem;
  min-height: 300px;
  margin-top: 80px;
}

.gray-underline {
  border-bottom: solid 1px #D8D8D8;
  display: inline-block;
}

.semi-bold {
  font-weight: 500;
}

.font-20 {
  font-size: 2rem;
}
.font-18 {
  font-size: 1.8rem;
}
.font-16 {
  font-size: 1.6rem;
}
.font-15 {
  font-size: 1.5rem;
}
.font-14 {
  font-size: 1.4rem;
}
.font-13 {
  font-size: 1.3rem;
}
.font-12 {
  font-size: 1.2rem;
}
.font-11 {
  font-size: 1.1rem;
}
.font-10 {
  font-size: 1rem;
}
.font-9 {
  font-size: 0.9rem;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(221,114,3,.25);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
  opacity: 1; /* Firefox */
  font-weight: normal;
  font-size: 1rem;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
}


.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

.gray-box {
  background-color: #F5F5F5;
  border: solid 1px #EAEAEA;
  border-radius: 12px;
  padding: 20px;
}

textarea {
  resize: none;
  padding-bottom: 5px 10px !important;
  line-height: 15px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.cursor-pointer {
  cursor: pointer;
}


.blur-loading {
    position: relative;
}

.blur-loading:after {
    position: absolute;
    background: url("/img/ajax_loader.svg") no-repeat scroll center center rgba(255,255,255,0.45);
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: block;
}

.home-staging-loading {
  position: relative;
}

.home-staging-loading:after {
  position: absolute;
  background: url("/img/ajax_loader.svg") no-repeat scroll center center white;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: block;
}

.home-staging-loading:before {
    position: absolute;
    content: "We're preparing the data; please wait for a moment.";
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 21;
    color: #ff8200;
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

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

/* ------------------- header & footer ------------------- */

.footer {
  clear: both;
  width: 100%;
  margin-top: 30px;
}

.footer-top {
  display: none;
}

.top-bar {
  margin-top: 4rem;
}

.user-top-bar {
  background: #fff;
  border: solid 1px #EAEAEA;
  width: auto;
  height: auto;
  border-radius: 12px;
  margin-top: 20px;
  padding: 10px 20px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #efefef;
}

.user-name {
  color: #212121;
  font-weight: bold;
  margin-left: 20px;
}

.esoft-user-name {
  cursor: default;
}

.esoft-user-name:hover {
  color: #212121;
}

.company {
  color: #212121;
  font-weight: bold;
}

.disabled-company {
  cursor: default;
  color: #999999;
}

.disabled-company:hover, .disabled-company:focus {
  color: #999999;
}

.esoft-support {
  padding: 5px; font-weight: bold; color: var(--primary-color);
}

footer {
  text-align: center;
  font-size: 0.8em;
}

.logo {
    margin-top: 20px;
    max-width: 200px;
    max-height: 200px;
}

/* ------------------- icon list ------------------- */
.i-download {
  width: 30px;
  height: 30px;
  margin-left: 3px;
  background-image: url("/img/icon_download.svg");
  background-size: 100% 100%;
  background-position: top left;
  vertical-align: middle;
}


/* ------------------- welcome page ------------------- */
.property-form {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center
}

.search-properties {
  width: 60%;
  float: none;
  padding: 20px;
  border-radius: 10px;
  border: solid 1px #EAEAEA;
  margin-top: 30px;
  min-width: 400px;
  box-shadow: 0 20px 25px -20px rgba(0,0,0,0.2);
}

.property-error {
  width: 60%;
  margin-top: 10px;
  text-align: left;
  padding-bottom: 0.1rem;
}

div.auto-complete-container ul.auto-complete-results li.auto-complete-item {
  list-style-type: none;
  padding: 5px;
  color: #212121;
  cursor: pointer;
  font-weight: normal;
  background-color: #fff;
}

li.auto-complete-item > p {
  margin: 0;
}

div.auto-complete-container ul.auto-complete-results li.auto-complete-item:hover, .auto-complete-item-selected {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

div.auto-complete-container {
  border: none;
  background-color: #fff;
  white-space: nowrap;
  margin-top: -12px;
}

div.auto-complete-container ul.auto-complete-results {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0px;
  padding: 0px;
  border: solid 1px #EAEAEA;
  border-top: none;
  border-radius: 0 0 10px 10px;
}

/* ------------------- report page ------------------- */
.report-error {
  text-align: center;
  padding: 50px 200px 100px 200px;
  background: rgb(249, 249, 249)
}

.report-header {
  text-align:center;
  margin-top:-55px;
  margin-bottom:10px;
  font-size:xx-large
}

/* ------------------- create order page ------------------- */
.via-col-3{
  -ms-flex: 0 0 18%;
  -webkit-box-flex: 0;
  flex: 0 0 18%;
  max-width: 18%;
}

.via-pdl-22 {
  padding-left: 22px;
}

.via-fw-400 {
  font-weight: 400;
}

.via-pdlr-22 {
  padding-left: 22px;
  padding-right: 22px;
}

.via-zi-4 {
  z-index: 4 !important;
}

.via-zi-3 {
  z-index: 3 !important;
}

.via-zi-2 {
  z-index: 2 !important;
}

.via-zi-1 {
  z-index: 1 !important;
}

.via-header-service-filter-bar {
  border-bottom: solid 1px var(--primary-color);
}

.alert-banner {
  margin: 24px 0;
}

.alert-banner .alert-banner-content {
  background: linear-gradient(90deg, var(--primary-color) 0%, #ffffff 100%);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.alert-banner .alert-banner-content span {
  position: relative;
  padding-left: 24px;
}

.alert-banner .alert-banner-content span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('/img/icon_alert.svg') no-repeat center center;
  background-size: contain;
}

.product-selected-card {
  margin-top: 24px;
  border: 2px solid var(--primary-color);
  border-radius: 16px;
}

.product-selected-card-content {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-selected-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-selected-card-image {
  border-radius: 6px;
  margin-right: 16px;
}

.product-selected-card-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.product-selected-card-btn {
  display: flex;
  align-items: center;
  color: #9B9B9B;
  border: 1px solid #9B9B9B;
  border-radius: 8px;
  padding: 8px 12px;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  background: transparent;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.product-selected-card-btn .icon-edit {
  width: 20px;
  height: 20px;
  background-image: url('/img/icon_edit.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.product-selected-card-btn:focus {
  outline: none;
  box-shadow: none;
}

.product-selected-card-btn:hover {
  background-color: #f0f0f0;
}

.modal-confirm-auto-submit .modal-dialog  {
  width: 540px;
  max-width: 540px;
}

.modal-confirm-auto-submit .modal-content  {
  border-radius: 16px;
  width: 100%;
  padding: 30px 0;
  text-align: center;
}


.modal-confirm-auto-submit .modal-header  {
  position: relative;
}

.modal-confirm-auto-submit .modal-title  {
  width: 100%;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #212121;
}


.modal-confirm-auto-submit .modal-header .btn-close  {
  position: absolute;
  border: none;
  right: 30px;
  top: 0;
  width: 20px;
  height: 20px;
  background: url('/img/icon_close.svg') no-repeat center center;
  background-size: contain;
}


.modal-confirm-auto-submit .product-info  {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--primary-color-text);
}

.modal-confirm-auto-submit .package-info  {
  width: 450px;
  margin: 0 auto;
}

.modal-confirm-auto-submit .package-info > li  {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--primary-color-text);
  border-bottom: solid 1px var(--primary-border-order);
}

.modal-confirm-auto-submit .package-info > li:last-child {
  border-bottom: none;
}

.modal-confirm-auto-submit .order-instructions  {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--primary-color-text);
  margin: 30px 0 20px;
}

.modal-confirm-auto-submit .modal-footer .btn-submit {
  color: #fff;
  background: var(--primary-color);
  padding: 12px 70px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 12px;
  border: none;
}

.modal-confirm-auto-submit .modal-footer .btn-submit:hover {
    background: var(--primary-hover-color);
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.via-product-icon-package {
  padding: 4px 8px;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 4px;
  z-index: 99;
}

.step-block {
  margin-top: 20px;
}

.service-filter-bar {
  list-style: none;
  padding: 0;
  clear: both;
  margin-top: 12px;
  margin-bottom: 0;
  display: flex;
}

.service-filter-bar > li {
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  width: 228px;
  height: 48px;
  background-image: url("/img/bg-tab.svg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 4;
  color: #999;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}

.service-filter-bar > li span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.service-filter-bar > li:not(:first-child) {
  margin-left: -30px;
}

.service-filter-bar > li.active{
  background-image: initial;
  color: #fff;
  z-index: 999 !important;
}

.service-filter-bar > li.active::before{
  font-family: "fontello";
  content: '\E800';
  color: var(--primary-color);
  font-size: 54px;
  position: absolute;
  left: 0px;
  line-height: 100%;
  bottom: -3px;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.service-list > li {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
}

.service-list > li:hover   {
  box-shadow: 0px 10px 25px 0px var(--primary-color);
}

.service-list > li .product-name {
  font-weight: bold;
}

/* Card product */
.service-list .via-container-product {
  position: relative;
  padding: 6px;
  border-radius: 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-list > li > .via-container-product > div > img {
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  width: 100%;
  height: 105px;
  object-fit: cover;
}

.via-product-description {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.via-product-description > a {
  color: var(--primary-color);
}

.via-product-hover {
  display: block;
  cursor: pointer;
}

.via-product-hover ul {
  padding-left: 0;
  list-style-type: none;
}

.via-product-hover ul li {
  position: relative;
  margin-bottom: 4px;
}

.via-product-hover ul li span {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  display: inline-block;
}

.via-product-hover ul li span .icon-right {
  font-size: 10px;
  color: var(--primary-color);
}

.via-product-hover ul li span::after {
  content: "";
  height: 1px;
  width: 100%;
  display: block;
  background: linear-gradient(90deg, var(--primary-color) 0%, rgba(255, 130, 0, 0) 100%);
  margin-top: 2px;
}

.ai-service-card {
  padding: 8px;
  margin-bottom: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-service-product-img {
  border: 1.25px solid var(--primary-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom:6px;
}

.ai-service-product-img img.ai-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 0;
  display: block;
}

.ai-service-badge {
  top: 8px;
  left: 8px;
}

.ai-badge {
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 6px 4px 24px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}

.ai-badge::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('/img/icon_alert.svg') no-repeat center center;
  background-size: contain;
}

.ai-thumbnail {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
  object-fit: cover;
}

.ai-services-info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-services-info-title h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ai-services-info-price {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.ai-services-features {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 6px;
}

.feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.feature-label img {
  width: 16px;
  height: 16px;
}

.feature-value {
  font-weight: 500;
}

.feature-value .green {
  color: #00A63E;
}

/* Responsive Grid */
@media (max-width: 1200px) {
  .service-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr;
  }
}

.via-price-package h4 {
  color: #999;
  font-size: 14px;
}

.via-total-regular-price {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 8px;
}

.via-total-promotion {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
  margin-bottom: 8px;
}

.via-total-price-text {
  font-size: 16px;
  font-weight: 500;
}

.via-total-price-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
}

.via-price-package table {
  width: 100%;
}

.toggle-thumb-btn {
  text-align: right;
  padding: 4px;
}

.input-thumb-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.input-thumb-list > .thumb-item {
  margin-right: 20px;
  margin-bottom: 30px;
  width: 160px;
  height: 90px;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 6px;
}

.input-thumb-list > .thumb-item.small-thumb {
  width: 153px;
}

.input-thumb-list > .thumb-item > img {
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background-color: #F9F9F9;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8px;
  border: solid 1px #EAEAEA;
  position: relative;
}

.input-thumb-list > .thumb-item > img.material {
  height: 100px;
  width: 100%;
}

.input-thumb-list > .thumb-item:nth-child(6n+6) {
  margin-right: 0;
}

.style-checkbox {
  position: relative;
  padding-left: 15px;
  overflow: hidden;
  height: auto;
  display: inline-block;
  white-space: pre-wrap;
  cursor: pointer;
  word-break: break-word;
  width: 100%;
  padding-bottom: 2px;
  font-weight: 500;
  margin-bottom: 0;
}

#feedback-type > .style-checkbox {
  z-index: 999999;
}

.style-checkbox.disabled {
  cursor: auto;
}

.style-checkbox:before {
  width: 16px;
  height: 16px;
  display: block;
  background: #fff;
  border: solid 1px #abb5be;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}

.style-checkbox.disabled:before {
  border: solid 1px lightgrey;
}

.style-checkbox.checked::before {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.style-checkbox.checked:after {
  width: 6px;
  height: 6px;
  display: block;
  background: #fff;
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 50%;
}

.style-checkbox.disabled:after {
  background: lightgrey;
}

.style-checkbox > input {
  position: absolute;
  left: -999px;
}

.file-uploader:hover svg path{
  fill: var(--primary-color);
}

.file-uploader {
  text-align: center;
  width: 100%;
  height: 220px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--primary-color);
  border-radius: 14px;
  margin-top: 20px;
  cursor: pointer;
  position: relative;
}

.file-uploader.dragover, .file-uploader:hover {
  background-color: #fffbf7;
  border-style: dashed;
}

.file-uploader.dragover:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.file-uploader.dragover > * {
  display: none;
}

.file-uploader.dragover .dragover-text {
  display: block !important;
  margin-top: 130px;
}

.via-icon-upload{
  font-size: 40px;
  color: #CED4DA;
}

.file-uploader:hover .via-icon-upload{
  color: var(--primary-color);
}

.btn-dropbox {
  background-color: #007bff;
}

.dragover-text {
  display: none;
}

.upload-image-list {
  padding: 10px;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  list-style: none;
  height: 302px;
  border: solid 1px #e9e9e9;
  border-radius: 14px;
}

.upload-image-list > li {
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  width: 100%;
}

.upload-image-list > li > img {
  max-width: 100px;
  height: auto;
  margin-right: 20px;
  border-radius: 6px;
}

li > .remove-btn {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  display: none;
  background-image: url("/img/remove_icon.svg");
  background-size: cover;
  background-position: center center;
  vertical-align: middle;
}

li:hover > .remove-btn {
  display: inline-block;
}

.upload-image-list > li > .filename {
  color: #212121;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: calc(100% - 170px);
  margin: 0;
  vertical-align: middle;
  border-bottom: solid 1px #fff;
  padding-bottom: 5px;
}

.upload-image-list > li:hover > .filename {
  color: var(--primary-color);
  border-bottom: solid 1px var(--primary-color);
}

.notify-list {
  list-style: none;
  padding: 0;
}

.notify-list > li {
  white-space: nowrap;
  display: inline-block;
  margin-right: 10px;
  line-height: 2rem;
  border: solid 1px #e6e6e6;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  color: #212121;
  font-weight: bold;
  margin-bottom: 10px;
}

.notify-list > li:last-child {
  border: none;
  overflow: visible;
  padding: 0;
}

.notify-list > li > .remove-icon {
  width: 12px;
  height: 12px;
  margin-left: 20px;
  display: inline-block;
  background-image: url("/img/remove_icon_gray.svg");
  background-size: 12px 12px;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  color: #e6e6e6;
  padding: 10px;
  background-repeat: no-repeat;
}

.notify-list > li:hover > .remove-icon {
  background-image: url("/img/remove_icon.svg");
}

.search-box {
  position: relative;
}

.via-mg-search {
  margin-top: 15px;
  margin-right: 22px;
}

.search-box:after {
  content: "";
  position: absolute;
  right: 11px;
  top: 11px;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("/img/icon_search.svg");
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
}

.order-search-box:after {
  top: 35px;
}

.search-box > input {
  padding-right: 50px;
}

.indicator-number {
  background: #fff;
  padding: 5px;
  color: var(--primary-color);
  display: inline-block;
  width: auto;
  height: 24px;
  vertical-align: middle;
  line-height: 11pt;
  border-radius: 12px;
  margin-left: 10px;
  margin-right: -10px;
  min-width: 24px;
  text-align: center;
  margin-top: -3px;
  margin-bottom: -3px;
}

.btn-default .indicator-number {
  background-color: var(--primary-color);
  color: #fff;
}

.no-wrap {
  white-space: nowrap;
}

.last_24h_icon {
  width: 12px;
  height: 6px;
  display: inline-block;
  background-image: url("/img/last_24h_icon.svg");
  background-size: cover;
  background-position: center center;
  vertical-align: middle;
}

.product-icon-info {
  position: absolute;
  right: 10px;
  z-index: 3;
  background-image: url("/img/icon_info.svg");
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: center;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid 1px #fff;
  cursor: pointer;
  bottom: 24px;
  z-index: 99;
  display: none;
}

.product-short-description {
  display: block;
  position: absolute;
  z-index: 2;
  padding: 0 10px 0 10px;
  height: 0;
  left: 0;
  right: 0;
  bottom: 45px;
  background-color: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 8px;
  transition: all .3s ease-out;
  overflow: hidden;
}

.product-short-description > a {
  color: var(--primary-color) !important;
}

.product-short-description > a:hover {
  text-decoration: underline;
}

.product-short-description.show {
  height: calc(100% - 45px);
  padding: 40px 10px 10px 10px;
}

.submit_button_explain {
  max-width: 260px;
  height: auto;
  display: inline-block;
  white-space: pre-line;
  word-break: break-all;
}

.submit-order-container > span {
  vertical-align: text-top;
}

.file-extension {
  padding: 2px 5px;
  background-color: var(--primary-color);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  min-width: 50px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 16px;
}

/* packages  */
.via-h-100{
  height: 100%;
}

.via-pl-0 {
  padding-left: 0;
}

.visual-tool-choosen-image {
  border: solid 2px var(--primary-color);
}

.via-product-packages .item {
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  height: 100%;
}

.via-product-packages .item:hover,
.via-product-packages .item.active {
  border-color: var(--primary-color);
}

.via-product-packages .item-left {
  -ms-flex: 0 0 24%;
  -webkit-box-flex: 0;
  flex: 0 0 24%;
}

.via-product-packages .item-center {
  flex: 1;
  padding-left: 10px;
  padding-right: 10px;
}

.via-product-packages .item-right {
  -ms-flex: 0 0 10%;
  -webkit-box-flex: 0;
  flex: 0 0 10%;
  display: flex;
}

.via-product-packages .item img {
  width: 100%;
  min-height: 66px;
  border-radius: 4px;
}

.via-product-packages .item .title {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.via-product-packages .item .quantity {
  color: #999;
  font-size: 12px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 6px;
}

.via-product-packages .item .additional-instruction {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  display: inline-block;
  vertical-align: middle;
}

.via-product-packages .item .additional-instruction span {
  display: inline-block;
  vertical-align: middle;
}

.via-product-packages .item .minimal-quantity {
  color: var(--primary-color);
  line-height: 120%;
  display: inline-block;
  vertical-align: middle;
}

.via-product-packages .product-package-status {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.via-product-packages .product-package-status .icon-stack3{
  color: var(--primary-color);
  font-size: 26px;
}

.via-package-status-item{
  text-transform: capitalize;
}

/* via-product-finish  */
.via-product-finish-order {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background-image: url(/img/bg-product-finish.svg);
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 1039;
}

.via-scroll-top {
  position: absolute;
  width: 48px;
  height: 48px;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.via-scroll-top i{
  font-size: 45px;
  color: #fff;
}

.via-scroll-top:hover {
  background-color: var(--primary-hover-color);
}

.via-mt-22 {
  margin-top: 22px;
}

.via-product-variant-slide,
.via-product-simple {
  height: 65px;
  margin-top: 13px;
}

.via-product-content {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.via-product-content span {
  color: var(--primary-color);
  color: var(--primary-color);
  line-height: 120%;
  display: inline-block;
}

.product-content-editing {
  color: #000000 !important;
}

.via-product-variant-slide .via-content {
  padding: 0 16px;
  -ms-flex: 0 0 300px;
  -webkit-box-flex: 0;
  flex: 0 0 300px;
  max-width: 300px;
}

.via-product-variant-slide .via-prev,
.via-product-variant-slide .via-next {
  cursor: pointer;
}

.via-product-variant-slide .via-prev i,
.via-product-variant-slide .via-next i {
  font-size: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid #E6E6E6;
  border-radius: 5px;
  color: #999999;
  line-height: 22px;
  text-align: center;
}

.via-product-variant-slide .via-prev i{
  transform: rotate(180deg);
}

.via-product-variant-slide .via-prev:hover i,
.via-product-variant-slide .via-next:hover i {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.via-product-variant-slide .via-prev:hover path,
.via-product-variant-slide .via-next:hover path {
  fill: #fff;
}

/* ------------------- thank you page ------------------- */
.supporter-info > img {
  border-radius: 6px;
  display: inline-block;
  margin-right: 20px;
  width: 194px;
}

.supporter-info > div {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.supporter-info {
  display: block;
  overflow: hidden;
  margin-top: 30px;
}

.order-summary {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-summary > li {
  margin-top: 20px;
  clear: both;
  overflow: hidden;
  text-align: left;
}

.order-summary > li > img {
  width: 100px;
  float: left;
  margin-right: 20px;
}

#thumbnail-in-thankyou-page {
  width: 100px;
  float: left;
  margin-right: 20px;
}

/* ------------------- order list page ------------------- */

.order-list-filter-box {
  text-align: left;
  padding-bottom: 20px;
}

.more-filter-box {
  text-align: left;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.btn-light-primary {
  border: solid 1px var(--primary-color);
  color: var(--primary-color);
}

.btn-light-primary:hover, .btn-light-primary:active {
  color: var(--primary-color) !important;
}

.order-table {
  width: calc(100% - 2px);
  text-align: left;
  border-collapse: collapse;
}

.order-table > tbody {
  background-color: #F9F9F9;
}

.order-table > tbody > tr:last-child {
  border-bottom: solid 20px #fff;
}

.order-table > thead > tr > th {
  padding: 5px;
}

.order-table > tbody > tr > td {
  padding: 4px;
}

.order-table > thead > tr > th:last-child, .order-table > tbody > tr > td:last-child {
  padding-right: 0;
}

.order-table > tbody > tr > td > a {
  vertical-align: middle;
}

.btn-xs {
  padding: 8px 12px;
  min-width: auto;
}

.table-wrap {
  overflow: auto;
  width: 100%;
  padding: 12px;
}

.list-btn {
  border: solid 1px #e9e9e9;
  padding: 8px 10px;
  text-align: center;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  float: left;
}


.list-btn.disabled {
  padding: 8px 13px;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

a.list-btn.disabled {
  color: #eaeaea;
  cursor: default;
  border: solid 1px #e9e9e9;
}

.list-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

a.list-btn.disabled:hover {
  color: #eeeeee;
  border: solid 1px #e9e9e9;
}

.list-btn > i {
  width: 18px;
}

.draw-object-type-btn {
  border: solid 1px #e9e9e9;
  padding: 3px 3px;
  text-align: center;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  float: left;
}

.decorate-border-icon-in-comment-material {
	border: solid 1px #e9e9e9;
  padding: 3px 3px;
  text-align: center;
  margin-right: 5px;
  border-radius: 5px;
  cursor: auto;
  background-color: #fff;
  display: inline-block;
}

.draw-object-type-btn-selected {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.draw-object-type-btn > i {
  width: 18px;
}

td > .list-btn:last-child {
  margin-right: 0
}

/* add tooltip */
.has-tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.has-tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: 13px;
    border-radius: 6px;
    position: absolute;
    z-index: 11112;
    left: 50%;
    margin-left: -50px;
    top: -60px;
    line-height: 20px;
    padding: 5px;
    height: 50px;
}

.via-tooltip-custom{
  width: auto !important;
  height: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -40px !important;
  margin-left: initial !important;
}

.has-tooltip .tooltiptext--large {
  width: 120px;
  left: -4px;
  top: -50px;
}

.has-tooltip .tooltiptext--xlarge {
  width: 180px;
  top: -50px;
}

.has-tooltip .tooltiptext--xxlarge {
  width: 300px;
  top: -50px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent  transparent;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip-on-right .tooltiptext {
    margin-left: -140px !important;
}

.tooltip-on-right .tooltip-bottom::after {
    left: 80% !important;
}

.via-fw-500{
  font-weight: 500;
}

/* Show the tooltip text when you mouse over the tooltip container */
.has-tooltip:hover .tooltiptext {
    visibility: visible;
}

a.order-filter {
  width: 110px;
  overflow-x: hidden;
}

a.order-user-filter {
  min-width: 110px;
}

a.order-product-filter {
  min-width: 110px;
}

input[type=text].photographer-filter-query {
  padding: 0.5rem 0.2rem;
  margin: 0.5rem 1.5rem;
  border-radius: .3rem;
  width: auto;
  border: 1px solid #ced4da;
}

input[type=text].product-filter-query {
  padding: 0.5rem 0.2rem;
  margin: 0.5rem 1.5rem;
  border-radius: .3rem;
  width: 300px;
  border: 1px solid #ced4da;
}

.search-photographer-dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

.search-product-dropdown-menu {
  max-height: 400px;
  width: 360px;
  overflow-y: auto;
}

.search-product-dropdown-menu .list-content{
  max-height: 130px;
  overflow-y: auto;
}

.search-product-dropdown-menu .list-content::-webkit-scrollbar {
  width: 8px;
}

.search-product-dropdown-menu .list-content::-webkit-scrollbar-track {
  background-color: var(--primary-bg-scroll-track);
  border-radius: 4px;
}

.search-product-dropdown-menu .list-content::-webkit-scrollbar-thumb {
  background-color: var(--primary-bg-scroll-thumb);
  border-radius: 4px;
}

.search-product-dropdown-menu .list-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-bg-scroll-thumb);
}

.search-product-dropdown-menu .select-product-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  max-height: 17px;
  margin-bottom: 0px;
  font-size: 14px;
}

.search-product-dropdown-menu .select-product-item {
  margin: 0px;
  display: flex;
  padding: 5px 20px;
}

.search-product-dropdown-menu .select-product-item input{
  margin-right: 10px;
}

.search-product-dropdown-menu .select-product-item:hover{
  background-color: var(--primary-color);
  text-decoration: none;
}

/* via css order list  */
.via-ml-24{
  margin-left: 24px;
}

.content-box{
  padding-left: 15px;
  padding-right: 15px;
}

.via-cursor-pointer{
  cursor: pointer;
}

.via-active-icon{
  color: var(--primary-color);
}

.via-order-list-price{
  color: #212121;
  font-size: 12px;
  font-weight: 600;
}

.via-order-list-regular-price{
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
}

.via-order-list-total-regular-price{
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 400;
}

.via-order-list-title-package{
  color: #212121;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
}

.via-order-list-title-package-icon{
  font-size: 20px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.via-bg-white{
  background-color: #fff;
}

.via-last-item{
  border-bottom: 8px solid #fff;
}

.via-last-item td:first-child{
  border-bottom-left-radius: 16px;
}

.via-last-item td:last-child{
  border-bottom-right-radius: 16px;
}

.via-order-list-package td:first-child,
.via-last-item:not(.via-order-list-package-item) td:first-child{
  border-top-left-radius: 16px;
}

.via-order-list-package td:last-child,
.via-last-item:not(.via-order-list-package-item) td:last-child{
  border-top-right-radius: 16px;
}

.via-table-custom thead,
.via-border-bottom{
  border-bottom: 1px solid #E7EAEE !important;
  height: 60px;
}

.via-table-custom tbody:last-child tr:last-child{
  border-bottom: 0 !important;
}

.via-ml-12 {
  margin-left: 12px;
}
/* ------------------- order details page ------------------- */
pre {
  font-family: inherit;
  font-size: inherit;
}

.paragraph {
  color: #212121;
  overflow: hidden;
  word-break: break-all;
  width: 100%;
  height: auto;
  white-space: pre-line;
}

.material-list {
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.material-list > a {
  display: block;
  float: left;
  margin-right: 9px;
  margin-bottom: 25px;
  width: calc(16% - 2px);
  height: 100px;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 6px;
  border: solid 1px #EAEAEA;
}

.material-list > a > img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background-color: #F9F9F9;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8px;
  position: relative;
}

.material-list > a:nth-child(6n+6) {
  margin-right: 0;
}

.material-list > a.no-border {
  border: 0px;
}

.material-list > a > img.spinner {
  background-color: #fff;
  border: none;
}

.material-list > a > img.material {
  height: 100px;
  width: 100%;
  display: none;
}

.view_matterial_btn {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  cursor: pointer;
}

.star-rating {
  display: inline-block;
  padding: 5px;
  line-height: 20px;
  white-space: nowrap;
  word-break: keep-all;
}

.star-rating.small > div {
  width: 14px;
  height: 14px;
  margin-right: 2px;
}

.star-rating > div {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
}

.star-rating svg {
  width: 100%;
  cursor: pointer;
}

.rated_star path {
  fill: var(--primary-color);
}

.materials_details {
  position: relative;
}

.material_type {
  background: #f9f9f9;
  color: #fff;
  padding: 2px 5px;
  border-radius: 6px;
  bottom: 5px;
  left: 5px;
  position: absolute;
  font-size: 10px;
  z-index: 0;
}

.material_name {
  bottom: -20px;
  position: absolute;
  background: #efefef;
  text-align: center;
  overflow-x: hidden;
  text-overflow: ellipsis;
  left: 0px;
  right: 0px;
  padding: 0 5px;
  white-space: nowrap;
}

.material_type.image, .material_type.panorama_jpeg, .material_type.picture_still {
  background-color: rgb(102, 187, 106) !important;
}

.material_type.video, .material_type.slideshow {
  background-color: rgb(102, 187, 106) !important;
}

.material_type.interactive_floor, .material_type.floor_plan {
  background-color: rgb(102, 187, 106) !important;
}

.material_type.virtual_tour, .material_type.panorama_html5, .material_type.panorama_flash {
  background-color: rgb(102, 187, 106) !important;
}

.material_type.poi, .material_type.ifp {
  background-color: rgb(102, 187, 106) !important;
}

.material_type.animated_picture, .material_type.picture_animated {
  background-color: rgb(102, 187, 106) !important;
}


.materials_details .material_links {
  right: 0;
  top: 0;
  margin-right: 5px;
  margin-top: 5px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.2);
  background: var(--primary-color);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 11px;
  position: absolute;
  z-index: 99;
  box-shadow: none;
  outline: none;
  border: none;
}

.material_links:hover {
  text-decoration: underline;
}

.fancybox-slide--iframe .fancybox-content {
  width  : 1024px;
  max-height : 80%;
  margin: 0;
}

.via-content-box{
  background: #fff;
  border: solid 1px #EAEAEA;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.via-title-order{
  font-size: 24px;
  font-weight: 700;
}
.via-order-detail-title-package{
  color: var(--primary-color);
  margin-bottom: 16px;
}

.via-order-detail-buttons-container {
  position: relative;
}
.via-order-detail-buttons-container .via-order-detail-buttons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
.via-order-detail-title-package .via-order-list-title-package{
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
}
.via-order-detail-collapse.collapsed{
  transform: rotate(180deg);
}
.via-order-detail-collapse-feedback{
  color: #212121 !important;
  background-color: #fff;
  border-radius: 3px !important;
}
.via-icon-correction-product i{
  color: var(--primary-color);
  font-size: 20px;
  margin-right: 15px;
  background-image: url(/img/bg-icon-track-detail.svg);
  background-repeat: no-repeat;
  width: 42px;
  height: 42px;
  line-height: 42px;
  background-position: center;
}
.via-icon-correction-product.collapsed i{
  background-image: initial;
  width: 42px;
  height: 42px;
  background-color: #F9F9F9;
  border-radius: 50%;
  line-height: 42px;
}
.via-icon-correction-product {
  color: #212121;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  padding: 0 30px;
  height: 42px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.via-number-correction-product{
  color: var(--primary-color);
  margin-right: 5px;
}
.via-order-line-group-content-item-custom{
  padding: 12px !important;
}
.via-group-correction{
  background-color: #F9F9F9;
  border-radius: 4px;
  margin-top: -1px;
}
.via-item-package:not(.via-item-package-last){
  margin-bottom: 24px;
}

/* customize fancybox */
.fancybox-content {
  border: solid 10px #fff;
  border-radius: 10px;
}

.fancybox-slide--image .fancybox-close-small {
  background: #4e4e4e;
  color: #f2f4f6;
  height: 36px;
  opacity: 1;
  padding: 6px;
  right: 0;
  top: 0;
  width: 36px;
}

.fancybox-navigation .fancybox-button {
  background-clip: content-box;
  height: 150px;
  opacity: 0;
  position: absolute;
  top: calc(50% - 50px);
  width: 120px;
}

.fancybox-navigation .fancybox-button div {
  padding: 20px;
}

.fancybox-button--arrow_right svg, .fancybox-button--arrow_left svg {
  display: block;
  height: 48px;
  overflow: visible;
  position: relative;
  width: 48px;
}

.fancybox-infobar, .fancybox-toolbar, .fancybox-caption, .fancybox-navigation .fancybox-button {
  visibility: visible !important;
  opacity: 1 !important;
}

.fancybox-button--feedback, .fancybox-button--download {
  width: 120px;
  margin-right: 20px;
  background: var(--primary-color);
  color: #fff;
}

@media all and (min-width: 800px) {
  .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }

  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
}
/* ------------------- correction page ------------------- */

.comment-wrapper {
  margin-top: 20px;
  /* overflow: hidden; */
  height: auto;
  position: relative;
  padding: 5px 0 70px 0;
}

.comment-wrapper .fixed_buttons {
  float: right;
  width: calc(50% - 20px);
  padding: 0;
}

.comment-wrapper .fixed_buttons > .btn {
  width: calc(50% - 10px);
  float: left;
}

.correct_tutorial > img {
  width: 30px;
}

.feedback_complain {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.feedback_request {
  color: rgb(102, 187, 106);
  border-color: rgb(102, 187, 106);
}

.feedback_other {
  color: rgb(92, 107, 192);
  border-color: rgb(92, 107, 192);
}

.feedback_type {
  float: left;
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

.feedback_complain.selected {
  background-color: var(--primary-color);
  color: #fff;
}

.feedback_request.selected {
  background-color: rgb(102, 187, 106);
  color: #fff;
}

.feedback_other.selected {
  background-color: rgb(92, 107, 192);
  color: #fff;
}

.image-slider {
  width: 100%;
  margin-right: 40px;
  /* float: left; */
}

.image-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: calc(100% + 10px);
  overflow-y: hidden;
  overflow-x: auto;
  margin-right: -10px;
}

.image-list > li {
  float: left;
  width: calc(14.3% - 10px);
  height: 110px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  line-height: 0;
  margin-bottom: 10px;
  position: relative;
  background-color: #efefef;
  border-radius: 5px;
  overflow: hidden;
}

.image-list > li:nth-child(7n+7) {
  margin-right: 0;
}

.image-list > li.active {
  border: solid 2px var(--primary-color);
}

.image-list > li > img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: calc(100% - 20px);
}

.image-list > li .file_name {
  position: absolute;
  z-index: 2;
  left: 0;
  display: block;
  right: 0;
  bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  border: solid 1px #ddd;
}

.big-image {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  height: auto;
  text-align: center;
  min-height: 400px;
}

.big-image > #full-image {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 5px;
}

.big-image > #before-image {
  position: absolute;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  z-index: 1;
}

.big-image .comment-shapes {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border: 1px solid #ced4da;
  border-radius: 5px;
  touch-action: none;
}

.big-pdf {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  height: auto;
  min-height: 400px;
  overflow: scroll;
}
.pdf-container {
	position: relative;
	overflow: scroll;
}

#pdf-menu {
	float: left;
}

#pdf-feedback-popup {
	z-index: 100000000;
}

.comment_editing_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  z-index: 101;
  height: auto;
}

.comment_editing_box > textarea {
  width: calc(100% - 22px);
  padding-top: 20px !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.75);
  max-height: 200px;
  overflow-y: auto !important;
  resize: none !important;
  background-color: white;
}

.comment_editing_box .btn-ok {
  position: absolute;
  right: -10px;
  top: -10px;
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
}

.comment_editing_box .btn-delete {
  position: absolute;
  right: 30px;
  top: -10px;
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
}

.comment_editing_box .btn-ok:hover, .comment_editing_box .btn-ok:hover:after, .comment_editing_box .btn-delete:hover, .comment_editing_box .btn-delete:hover:after {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  background-color: #fff;
}

.comment-shapes .comment-shape {
  position: absolute;
  z-index: 3;
  background-color: rgba(255, 255, 0, 0.15);
  border: solid 1px var(--primary-color);
  border-radius: 3px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  touch-action: none;
  cursor: move;
}

.comment-shapes .arrow-comment-shape {
  position: absolute;
  z-index: 3;
  background-color: rgba(255, 255, 0, 0.15);
  border: solid 1px var(--primary-color);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  touch-action: none;
  cursor: move;
}

.comment-shapes .arrow-comment-end-point {
  position: absolute;
  z-index: 3;
  background-color: rgba(255, 255, 0, 0.15);
  border: solid 1px var(--primary-color);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  touch-action: none;
  cursor: move;
}

.cursor-move {
  cursor: move;
}

.comment-shapes .comment-shape.active {
  background-color: rgba(255, 255, 0, 0.45);
}
.comment-shapes .comment-shape .comment_index, .comment-shapes .arrow-comment-shape .comment_index {
  position: absolute;
  display: block;
  z-index: 1;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 26px;
  top: calc(50% - 10px);
  left: calc(50% - 20px);
}

.image-comment {
  width: 100%;
  /* float: left; */
}

.image-comment > ol {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.image-comment > ol > li {
  clear: both;
  margin-bottom: 10px;
  position: relative;
}

.image-comment > ol > li > textarea {
  width: calc(100% - 80px);
}

.image-comment > ol > li > pre {
  width: calc(100% - 80px);
  height: auto;
  white-space: pre-line;
  cursor: pointer;
  word-break: break-all;
}

.image-comment > ol > li > .comment-indicator {
  float: left;
  display: block;
  margin-right: 12px;
  height: 38px;
  width: 38px;
  background: #e9e9e9;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
}

.image-comment > ol > li.active > .comment-indicator {
  background: var(--primary-color);
  color: #fff;
}

.has-feedback {
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 5px;
  height: 20px;
  width: auto;
  text-align: right;
}

.has-feedback > span {
  float: right;
  margin: 0;
  padding: 0 10px;
  text-shadow: 0 0 1px rgba(0,0,0,0.75);
  width: auto;
  height: 26px;
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 13px;
  line-height: 26px;
  text-align: center;
}

.remove-comment-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #fff;
  padding: 5px;
  cursor: pointer;
}

.select-draw-object-type {
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.cursor-auto {
  cursor: auto;
}

.modal-full-screen {
	width: 100%;
	height: 100%;
	max-width: 100% !important;
}

.comment-wrapper-position {
	position: absolute;
	top: 0px;
	left: 0px;
}

.primary-back-ground-color {
	background-color:var(--primary-color);
}
.comment-list-pointer {
	width: 8ch;
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}
.comment-list-pointer:focus {
	color: black;
}

.h-100-percent {
	height: 100%;
}
/* ------------------- end correction page ------------------- */

/* ------------------- upload file box css ------------------- */
.uploader-box {
  position: fixed;
  z-index: 9999999;
  right: 0;
  top: 0;
  width: 25%;
  background-color: #fff;
  border-left: solid 1px #e9e9e9;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  -webkit-box-shadow: 0px 0 30px rgba(0,0,0,0.25);
  box-shadow: 0px 0 30px rgba(0,0,0,0.25);
  min-width: 300px;
}

.uploader-box-list {
  width: 100%;
  height: calc(100% - 20px);
  overflow-x: hidden;
  border-top: solid 1px #e9e9e9;
  margin-top: 10px;
  padding-top: 10px;
}

.uploader-box.collapsed {
  height: 60px !important;
  top: auto;
  bottom: 0;
  overflow: hidden;
}

.upload-file-box {
  margin: 0;
  padding-left: 30px;
  list-style-type: none;
}

.upload-file-box .index {
  float: left;
}

.upload-file-box .progress {
  width: 40px;
  float: left;
  margin-right: 10px;
  text-align: center;
  background: #eee;
  color: var(--primary-color);
  font-weight: bold;
  display: inline-block;
}

.upload-file-box > li {
  clear: both;
  margin-top: 10px;
}

.bg-success {
  color: #fff !important;
  background-color: #00d54d !important;
}

.bg-error {
  color: #fff !important;
  background-color: #ff0000 !important;
}

.bg-gray {
  font-weight: bold;
  color: #000 !important;
  background-color: #FAF9F6 !important;
}

.col-exp-btn {
  float: left;
  margin-right: 12px;
  color: var(--primary-color);
  padding: 0 5px;
  cursor: pointer;
}

/* ------------------- profile ------------------- */

.profile-uploader .custom-file {
  width: 160px;
}

.profile-uploader .upload-progress {
  width: 160px;
}

.avatar-cover-container {
    width: 160px;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.avatar-cover {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    float: right;
/*    cursor: pointer;*/
    background-size: cover;
    border: solid 1px #ddd;
    background-position: center center;
    background-repeat: no-repeat;
}

.avatar-cover:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    content: "\e944";
    font-family: icomoon;
    font-size: 48px;
    transition: height .5s;
    text-align: center;
    color: #fff;
    line-height: 150px;
    z-index: 2;
    height: 0;
/*    cursor: pointer;*/
}

/**
.avatar-cover:after {
    content: "Select file to upload";
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    color: #fff;
    text-align: center;
    height: 0;
    overflow: hidden;
    width: 100%;
    display: block;
    font-size: 14px;
    position: absolute;
    z-index: 3;
    padding-top: 70%;
    cursor: pointer;
    transition: height .5s;
}

.avatar-cover:hover:after {
    display: block;
    height: 100%;
}

.avatar-cover:hover:before {
    display: block;
    height: 100%;
}
**/
/* ------------------- responsive css ------------------- */

@media (min-width: 576px) and (max-width: 768px) {
  .new-order-btn, .order-list-btn {
    padding: 1rem 2rem;
  }
  .report-error {
    text-align: center;
    padding: 25px;
  }
}

@media screen and (min-width: 981px) {
  .hide-on-pc {
      display: none;
  }

  #search-order-input {
    width: 40%;
  }

  #search-user-input {
    float: left !important;
    width: 40% !important;
  }

  .confirm-order {
    width: 420px;
  }

  .add-order {
    width: 420px;
  }

  .order-delete, .order-save-draft {
    width: 120px;
  }

  .order-delete .btn, .order-save-draft .btn{
    padding: 1rem 2rem;
    min-width: 120px;
  }

}

@media screen and (min-width: 651px) and (max-width: 980px) {
  .hide-on-tablet {
    display: none;
  }

  .material-list > li {
    width: calc(33.33% - 6px) !important;
  }

  .material-list > li:nth-child(4n+4) {
    margin-right: 9px !important;
  }

  .material-list > li:nth-child(3n+3) {
    margin-right: 0 !important;
  }

  .image-slider {
    width: 100%;
    margin: 0;
  }

  .image-comment {
    width: 100%;
    margin-top: 20px;
  }

  .comment-wrapper .fixed_buttons {
    position: static;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    clear: both;
    float: left;
    padding: 20px 0 0 0;
  }

  .service-list > li {
    width: 196px;
  }

  .service-list > li:nth-child(3n+3) {
    margin-right: 0;
  }

  .confirm-order {
    width: 420px;
  }

  .add-order {
    width: 420px;
  }

  .order-delete, .order-save-draft {
    width: 150px;
  }

}

/* responsive on mobile device */
@media screen and (max-width: 650px) {
  .hide-on-mobile {
    display: none;
  }

  .material-list > li {
    width: calc(50% - 9px) !important;
  }

  .material-list > li:nth-child(4n+4) {
    margin-right: 9px !important;
  }

  .material-list > li:nth-child(3n+3) {
    margin-right: 9px !important;
  }

  .material-list > li:nth-child(2n+2) {
    margin-right: 0 !important;
  }

  .logo {
    width: 90px;
    margin-top: 30px;
  }

  .user-top-bar {
    padding: 10px;
    height: auto;
    margin-top: 20px;
  }

  .service-filter-bar {
    width: 100%;
  }

  .search-box {
    width: 100%;
  }

  .search-properties {
    min-width: 90%;
  }

  .user-name {
    display: inline-block;
    margin-left: 10px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
    white-space: nowrap;
    padding-top: 6.3px;
  }

  .user-top-bar .user-avatar {
    display: none;
  }

  .submit-order-container > span {
    display: block;
  }

  .submit-order-container > span > .btn {
    width: 100%;
  }

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

  .image-slider {
    width: 100%;
    margin: 0;
  }

  .image-comment {
    width: 100%;
    margin-top: 20px;
  }

  .comment-wrapper .fixed_buttons {
    position: static;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    clear: both;
    float: left;
    padding: 20px 0 0 0;
  }

  .list-btn {
    margin-top: 5px;
  }

  .mt-10-xs {
    margin-top: 10px;
  }

  #search-order-input {
    float: left !important;
    width: 100% !important;
    margin-top: 10px;
  }

  #search-user-input {
    float: left !important;
    width: 50% !important;
  }

  .supporter-info > img {
    width: 100px;
  }

  .top-bar > .btn {
    min-width: auto;
  }

  .clear-on-mobile {
    float: none !important;
    clear: both;
  }

  .float-left-on-mobile {
    float: left !important;
  }

  .ml-0-mobile {
    margin-left: 0 !important;
  }

  .mr-0-mobile {
    margin-right: 0 !important;
  }

  .mt-20-mobile {
    margin-top: 20px;
  }

  .order-list-btn, .new-order-btn {
    width: 48%;
  }

  .cancel-feedback-btn, .save-feedback-btn {
    min-width: unset;
    padding: 1rem 2rem;
  }

  .order-delete, .order-save-draft {
    width: 260px;
  }

  .report-error {
    text-align: center;
    padding: 25px;
  }
}

@media (min-width: 576px) {
  .order-instruction {
    max-width: 440px;
    min-width: 300px;
  }

}

@media (min-width: 768px) {
  .order-instruction {
    max-width: 620px;
    min-width: 400px;
  }
}

@media (min-width: 992px) {
  .order-instruction {
    max-width: 860px;
    min-width: 430px;
  }
}

@media (min-width: 1200px) {
  .order-instruction {
    max-width: 1040px;
  }
}

.order-instruction {
  min-height: 100px;
  resize: both;
}

/* ----------------------- ag-grid ---------------- */
.ag-class-header {
    font-weight: bold;
    padding-right: 10px;
    padding-left: 10px;
    /*border: 1px solid #bdbdbd;*/
}

.ag-class-row {
  /*border: 1px solid #bdbdbd !important;  */
    padding-right: 10px;
    padding-left: 10px;
    border-top: none !important;
}

.ag-class-cell {
    vertical-align: middle !important;
    line-height: 67px !important;
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.ag-cell-focus,.ag-cell-no-focus{
    border:none !important;
}
.ag-cell:focus{
    border:none !important;
    outline: none;
}

.fix-dropdown-aggrid-adminpage {
    overflow: visible !important;
}

.ag-layout-normal .ag-row {
    overflow: visible;
}

.ag-class-header-service-consumption-settings {
    padding-top: 10px;
    font-weight: bold;
    text-align: right;
}

.ag-class-service-consumption-settings-cell {
    padding-left: 20px;
}


.ag-class-service-consumption-settings-header {
    padding-top: 10px;
    padding-left: 20px;
    font-weight: bold;
    text-align: center;
}

/*.ag-layout-normal .ag-header {
    color: var(--primary-color) !important
}*/

.ag-overlay-loading-center {
    font-size: 18px;
    color: #ccc;
    box-shadow: none;
}

.ag-theme-material .ag-header-row {
    height: 32px !important;
}

.ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
    line-height: 32px !important;
}

.ag-theme-material .ag-header-cell-label {
    text-transform: uppercase;
}

.ag-cell .btn-nake {
    margin-top: 10px;
}

.ag-header-cell.text-right .ag-header-cell-label {
    display: block !important;
    text-align: right !important;
    float: right;
}

.ag-header-cell.text-right .ag-header-cell-label .ag-header-cell-text {
    float: none !important;
}
.ag-header-cell.text-right .ag-header-cell-label .ag-header-icon {
    float: right;
}

.ag-theme-material .ag-cell {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ag-theme-material .ag-header-cell-label {
    width: auto !important;
    max-width: 100% !important;
}

.ag-overlay-loading-center {
  box-shadow: none !important;
}

.btn-nake {
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #ddd;
    border-radius: 30px;
    color: #DDDDDD !important;
    display: inline-block;
    height: 26px;
    margin-right: 3px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 26px;
    transition: 0.5s;
}

.btn-nake:hover {
    background: none repeat scroll 0 0 #EFEFEF;
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    outline: none;
    text-decoration: none;
}

.btn-nake:active, .btn-nake:focus {
    outline: none;
}

.btn-nake:after {
    display: block;
    font-family: "icomoon";
    /* font-size: 14px; */
    font-style: normal;
    font-weight: normal;
    height: 100%;
    left: 0;
    line-height: 25px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.btn-nake.text-green {
    border-color: rgb(102, 187, 106) !important;
    background-color: rgba(102, 187, 106, 0.15) !important;
    color: rgb(102, 187, 106) !important;
}

.btn-nake.text-danger {
    border-color: rgb(244, 67, 54) !important;
    background-color: rgba(244, 67, 54, 0.15) !important;
    color: rgb(244, 67, 54) !important;
}

.btn-delete:after {
    content: "\e99e";
}

.btn-view:after {
    content: "\ecab";
}

.btn-edit:after {
    content: "\e90e";
}

.btn-reset:after {
    content: "\eaa4";
}

.btn-ok:after {
    content: "\e372";
}

.btn-add:after {
    content: "\ed5a";
}

.btn-setting:after {
    content: "\e9eb";
}

.btn-message:after {
    content: "\eb09";
}

.btn-excel:after {
    content: "\ef39";
}

.btn-ok.btn-removable:hover {
    border-color: rgb(244, 67, 54) !important;
    background-color: rgba(244, 67, 54, 0.15) !important;
    color: rgb(244, 67, 54) !important;
}
.btn-ok.btn-removable:hover:after {
    content: "\ed5b";
}

.btn-group {
  background-image: url("/img/group.svg");
  border: 1px solid #ddd;
  border-radius: 30px;
  color: #DDDDDD !important;
  display: inline-block;
  height: 26px;
  margin-right: 3px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 26px;
  transition: 0.5s;
}

.btn-group:hover {
  /*background: none repeat scroll 0 0 #EFEFEF;*/
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
  outline: none;
  text-decoration: none;
}

.btn-settings {
  background-image: url("/img/settings.svg");
  border: 1px solid #ddd;
  border-radius: 30px;
  color: #DDDDDD !important;
  display: inline-block;
  height: 26px;
  margin-right: 3px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 26px;
  transition: 0.5s;
}

.btn-settings:hover {
  /*background: none repeat scroll 0 0 #EFEFEF;*/
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
  outline: none;
  text-decoration: none;
}

.btn-products {
  background-image: url("/img/products.svg");
  border: 1px solid #ddd;
  border-radius: 30px;
  color: #DDDDDD !important;
  display: inline-block;
  height: 26px;
  margin-right: 3px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 26px;
  transition: 0.5s;
}

.btn-products:hover {
  /*background: none repeat scroll 0 0 #EFEFEF;*/
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
  outline: none;
  text-decoration: none;
}

.btn-packages {
  background-image: url("/img/package.png");
  border: 1px solid #ddd;
  border-radius: 30px;
  color: #DDDDDD !important;
  display: inline-block;
  height: 26px;
  margin-right: 3px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 26px;
  transition: 0.5s;
}

.btn-packages:hover {
  /*background: none repeat scroll 0 0 #EFEFEF;*/
  border-color: #ff8200;
  color: #ff8200 !important;
  outline: none;
  text-decoration: none;
}

.tag {
    border-radius: 3px;
    color: #ffffff !important;
    display: inline-block;
    margin: 5px 5px 5px 0;
    padding: 0 5px;
    line-height: 16px;
}

.tag.big_tag {
    padding: 5px 10px !important;
}

.tag.blue {
    background-color: rgb(3, 169, 244) !important;
}

.tag.red {
    background-color: rgb(244, 67, 54) !important;
}

.tag.gray {
    background-color: rgb(136, 136, 136) !important;
}

.tag.light_gray {
    background-color: #efefef !important;
}

.tag.green {
    background-color: rgb(102, 187, 106) !important;
}

.tag.violet {
    background-color: rgb(92, 107, 192) !important;
}

.tag.urban {
    background-color: rgb(38, 166, 154) !important;
}

.tag.orange {
    background-color: var(--primary-color) !important;
}

.tag.admin {
    background-color: var(--primary-color) !important;
}

.tag.pink {
    background-color: deeppink !important;
}


/*------------------------------- customer admin ---------------------------------*/
.w-410 {
  width: 410px;
}

.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

.modal-title {
  font-weight: bold;
  font-size: 1.3em;
}

.small-avatar {
  width: 38px;
  height: 38px;
  display: inline-block;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-top: 3px;
  border: solid 1px #f9f9f9;
}


/* Tooltip styling */
[data-tooltip] {
  display: inline-block;
  position: relative;
  padding: 0px 2px 15px 2px;
}
/* Tooltip styling */
[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: fixed;
  margin:10px 10px 10px 10px;
  background: white;
  color: #27394F;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.4;
  min-width: 100px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid black;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,

[data-tooltip-position="top"]:before {
  bottom: 100%;
  margin-bottom: 6px;
}


/* Tooltip arrow styling/placement */
[data-tooltip]:after {
  content: '';
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  top:100%;
  border-color: 1px solid black;

}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,

[data-tooltip-position="top"]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #000;
}

/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pd-5 {
  padding: 5px;
}

.w-300 {
  width: 300px;
}

.email-template-content-preview {
  width: 45.5rem;
  height: 30rem;
  overflow: scroll;
  border: solid 0.1px #ced4da;
  padding: 10px;
  border-radius: 5px;
}

.email-content-preview {
  min-width: 0px;
}

.email-content-edit {
  min-width: 0px;
}
/* ------------------- order line activities ------------------- */
.order-line-activities {
  position: relative;
  margin-top: 5px;
  border-top-left-radius: 12px;
}

.order-line-activities .order_container {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

.order-line-activities .order_container.collapsed {
  height: 46px;
}
.order-line-activities .order_container.collapsed > :not(:first-child) {
  display: none;
}

.order-line-activities .order_container .collapseExpandIcon {
  font-family: icomoon!important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  min-width: 1em;
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.order-line-activities .order_container .collapseExpandIcon:before {
  content: "\ed5b";
}

.order-line-activities .order_container.collapsed .collapseExpandIcon:before {
  content: "\ed5a";
}

.order-line-activities .timeline {
  overflow: hidden;
}

.order-line-activities .order_container > .event {
  padding: 5px 0 5px 10px;
  background: #efefef;
  border-radius: 3px;
  position: relative;
  overflow: visible;
  margin-bottom: 20px;
  height: 46px;
  padding-right: 10px;
  line-height: 36px;
  clear: both;
}

.order-line-activities .order_container:last-child > .event{
  margin-bottom: 0;
}

.order-line-activities .order_container > .event.hight-light {
  background-color: rgb(102, 187, 106);
  color: #fff;
}

.order-line-activities .order_container > .hight-light.event:before {
  background: rgb(102, 187, 106);
  display: none;
}

.order-line-activities .order_container > .hight-light.event:after {
  border-right: 15px solid transparent;
  background: rgb(102, 187, 106);
  width: 40px;
  left: -37px;
  border-top-left-radius: 12px;
}


.order-line-activities .order_container > .event:before {
  font-family: icomoon!important;
  color: #fff;
  position: absolute;
  left: -51px;
  width: 28px;
  height: 28px;
  background: rgb(102, 187, 106);
  border: solid 7px #fff;
  border-radius: 50%;
  top: 9px;
  text-align: center;
  line-height: 15px;
}

.order-line-activities .order_container > .event:after {
  width: 0;
  height: 0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
  content: "";
  border-right: 25px solid #efefef;
  position: absolute;
  top: 0;
  border-left: 15px solid transparent;
}

.order-line-activities .order_container > .event > .event-time {
  float: left;
  font-weight: bold;
  margin-right: 20px;
}

.order-line-activities .order_container > .event > .event-content {
  float: left;
}

.event > .event-buttons {
  float: right;
  position: absolute;
  right: 7px;
  z-index: 3;
  top: 8px;
  background: #efefef;
  width: 31px;
  height: 31px;
}

.event > .event-buttons > a {
    font-size: 1.2rem;
    float: left;
    font-weight: normal;
    border: solid 2px #999999;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    background: #efefef;
}

/* ==== customize quilljs editor ===== */
ng-quill-editor .ql-editor {
  min-height: 120px;
  overflow-y: scroll;
  resize: vertical;
  border-color: #e6e6e6;
  width: 100%;
}

ng-quill-editor .ql-editor:focus {
  border: 1px solid var(--primary-color);
  border-radius: 0.5rem 0 0 0;
  box-shadow: 0 0 0 0.2rem rgb(221 114 3 / 25%);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

ng-quill-editor .ql-container.ql-snow {
  font-family: inherit;
  border-radius: 0.5rem 0.5rem 0 0;
  border-color: #e6e6e6;
}

ng-quill-editor .ql-toolbar.ql-snow {
  border-color: #e6e6e6;
  display: block;
  border-radius: 0 0 0.5rem 0.5rem;
}
/* ==== end customize quilljs editor ===== */
/* ------------------- company setting page ------------------- */
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
  font-family: inherit;
}

.company-setting-color input[type=text], .sp-input-container input[type=text] {
  padding: 5px 10px;
  border: solid 1px #ddd;
  border-radius: 3px;
}

.sp-button-container .sp-choose {
  background: var(--primary-color) !important;
  color: #fff;
  padding: 5px 10px;
  font-size: inherit;
  font-family: inherit;
  text-shadow: none;
  border: none !important;
}

.sp-button-container .sp-cancel {
  background-color: #fff;
  color: #212121 !important;
  padding: 5px 10px;
  border-radius: 3px;
  border: none;
  text-decoration: none !important;
}

.sp-button-container .sp-cancel:hover {
  color: var(--primary-color) !important;
}

.sp-replacer {
  border: solid 1px #ddd !important;
  border-radius: 3px;
  outline: 0;
  margin: 0;
  vertical-align: top;
  height: 32px;
}

.sp-dd {
  color: #999;
}

.white-label-image {
  max-width: 120px;
  max-height: 120px;
  overflow: hidden;
  float: left;
  margin-right: 10px;
}

.white-label-image > img {
  max-width: 100%;
  max-height: 100%;
  border: solid 1px #ddd;
}

.custom-file {
  width: auto;
}

.active-list {
  width: 100%;
  padding: 0;
  counter-reset: li;
  clear: both;
  margin: 0;
}

.active-list > li {
  list-style: none;
  width: 100%;
  clear: both;
  line-height: 26px;
  padding: 5px 5px 5px 40px;
  position: relative;
  overflow: auto;
}

.active-list > li:hover {
  background: #efefef;
}

.active-list > li > .content {
  float: left;
  overflow: hidden;
  word-break: break-all;
  width: calc(100% - 80px);
}

.active-list > li > .content:before {
  position: absolute;
  content: counter(li);
  counter-increment: li;
  left: 0;
  top: 5px;
  line-height: 26px;
  font-size: 1rem;
  text-align: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.rounded-border {
  border: 1px solid #dee2e6!important;
  border-radius: 6px;
  padding: 10px;
  clear: both;
}

.branding-input-text {
  width: 80px;
  display: inline
}

.branding-css-input {
  resize:both;
  overflow:auto;
  max-width: 740px;
}

.branding-footer {
  display:flex;
  justify-content:flex-end;
}


/* ==== order-line-group ===== */
.order-line-group {
  border-bottom: 3px solid var(--primary-color);
  border-left: 3px solid var(--primary-color);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 3px;
  margin-bottom: 50px;
}

.order-line-group .paragraph  p {
  margin-bottom: 0;
}

.order-line-group .input-group-prepend {
  line-height: 30px;
}

.order-line-group-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: var(--primary-color);
  color: white;
  padding: 5px 12px 5px 23px;
  height: 46px;
  line-height: 36px;
  clear: both;
}

.order-line-group-header .event-time {
  float: left;
  font-weight: bold;
  margin-right: 20px;
}

.order-line-group-header .event-content {
  float: left;
}

.order-line-group-content {
}

.order-line-group-content-item {
  padding-top: 20px;
  padding-left: 20px;
}

.order-line-group-content-item__header {
  position: relative;
  padding: 5px 12px 5px 10px;
  background: #efefef;
  border-radius: 3px;
  overflow: visible;
  margin-bottom: 20px;
  height: 46px;
  line-height: 36px;
  clear: both;
}

.order-line-group-content-item__header::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: -28px;
  background-color: white;
  border: 3px solid var(--primary-color);
  top: 16px;
  border-radius: 50%;
  z-index: 2;
  display: none;
}

.order-line-group-content-item__header::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 26px;
  left: -27px;
  background-color: white;
  top: 9px;
  z-index: 1;
  display: none;
}

.order-line-group-content-item__header .event-time {
  float: left;
  font-weight: bold;
  margin-right: 20px;
}

.order-line-group-content-item__header .event-content {
  float: left;
}

.menu-button {
  border: 1px solid #ffffffa1;
  color: white;
  margin-left: 8px;
  line-height: 0px;
  padding: 5px;
  align-self: center;
}

.menu-button .icon-menu, .menu-button-sub-order-line .icon-menu {
  top: 0;
}

.menu-button:hover, .menu-button[aria-expanded="true"] {
  border-color: #ffffff;
  color: #ffffff;
}

.menu-button-sub-order-line:hover, .menu-button-sub-order-line[aria-expanded="true"] {
  background-color: #e8e8e8;
}

.menu-button-sub-order-line.list-btn {
  background-color: white;
  line-height: 0;
  padding: 7px;
  margin: 0;
}

.order-line-group a.disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

/* responsive on mobile device */
@media screen and (max-width: 981px) {
  .event-content--created-by {
    display: none;
  }
}

@media screen and (max-width: 650px) {
  .order-line-group-content-item__content {
    display: block;
  }
}
/* ==== end order-line-group ===== */

/* ==== presentation admin page ===== */
.presentation-title {
  margin-bottom: 50px;
}

.presentation-admin .presentation-item {
  cursor: move;
  position: relative;
}

.presentation-admin .btn-delete-item {
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid #ddd;
  border-radius: 30px;
  display: inline-block;
  height: 26px;
  width: 26px;
  color: red;
}

.presentation-admin .submit-presentation-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 60px;
}

.presentation-admin .btn-preview-presentation {
  width: 150px;
  margin-right: 10px;
}

.presentation-admin .btn-save-presentation {
  width: 200px;
}

.presentation-admin .custom-file {
  width: 330px;
}
/* ==== end presentation admin page ===== */
/* ==== copy order info ==== */
.order-link > .ng-enter {
  transition: 0.5s;
  opacity:0;
}
.order-link > .ng-enter.ng-enter-active {
  opacity:1;
}
.order-link > .ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.order-link > .ng-leave.ng-leave-active {
  opacity:0;
}

.copy-order-line-info {
  color: green
}
.order-table .order-link {
  padding-left: 8px;
}
a.copy-line-info {
  width: 20px;
  display: inline-block
}

.order-line-id-cell .order-link {
  position: relative;
}

.order-line-id-cell .order-copy {
  position: absolute;
  left: -10px;
}
/* ==== end of copy order info ==== */

/* ==== manage order status email ==== */
.day-header-cls {
  border:1px solid #d3d3d3;
  border-radius:6px;
  padding:5px;
  width:100%;
}
.circle {
	/* width: 50px !important;
	height: 50px !important; */
	border-radius: 50% !important;
}
.email-type-order-status-config {
	display: inline;
	margin-right: 5px !important;
}

.icon-delete-input-row {
  border: solid 1px #e9e9e9;
  padding: 7px 10px;
  text-align: center;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
}

.list-btn-send-at:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.icon-delete-input-row:hover {
  color: #ff8200;
  border-color: #ff8200;
}

.icon-delete-input-row > i {
	opacity: 0.6
}

/* ==== end of manage order status email ==== */
.inline-block {
	display: inline-block;
}
.center-element {
	margin: auto;
}

.multiple-line-text {
	white-space: pre;
}

.vjs-marker
{
  position:absolute;
  /* background:red; */
  /* border-radius: 50%; */
  width:5px;
  height:200%;
  z-index:30;
  vertical-align: middle;
  /* margin-left:-3px; */
}

.vjs-marker:hover span
{
  opacity:1;
}

.vjs-play-progress {
	height: 200% !important;
}
.vjs-load-progress {
	height: 200% !important;
}

.opacity-0p5 {
	opacity: 0.5;
}

/* via responsive  */
@media screen and (max-width: 991px) {
  .via-header-service-filter-bar{
    border-bottom: 0;
  }
  .service-list.via-pdl-22{
    margin-top: 20px;
  }
  .mr-0-mobile {
    margin-right: 10px !important;
  }
  .via-tooltip-custom{
    display: none;
  }
  .via-product-finish-order{
    background-image: initial;
  }
  .via-scroll-top{
    display: none;
  }
  .via-product-finish-order{
    position: static;
  }
  .via-poss-mobile{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px -5px 10px 0px #e9e9e9;
    z-index: 99999999;
  }
  .via-product-variant-slide, .via-product-simple {
    max-width: 80%;
    margin: 0 auto;
  }
  .via-product-variant-slide > div, .via-product-simple > div{
    flex-grow: 1;
  }
  .via-price-package{
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 20px;
  }
  .via-product-variant-slide .via-prev{
    text-align: right;
  }
  .via-product-variant-slide .via-next{
    text-align: left;
  }
  .submit-order-container > span > span{
    display: block !important;
    text-align: center !important;
    margin-top: 10px;
    max-width: 100% !important;
  }
  .via-mobile-quantity .float-right{
    float: left !important;
  }
}
@media screen and (max-width: 768px) {
  .service-filter-bar{
    /* align-items: center; */
  }
  .service-filter-bar > li span{
    position: static;
    transform: initial;
  }
  .service-filter-bar{
    border-bottom: solid 2px #F2F2F2;
  }
  .service-filter-bar > li:not(:first-child){
    margin-left: 0;
  }
  .service-filter-bar > li{
    background-image: initial;
    color: #212121;
    height: auto;
    position: relative;
    bottom: -2px;
    font-size: 1rem;
    padding-bottom: 10px;
    flex-basis: 30%;
  }
  .service-filter-bar > li:first-child{
    flex-basis: 40%;
  }
  .service-filter-bar > li.active::before{
    display: none;
  }
  .service-filter-bar > li.active{
    color: var(--primary-color);
    border-bottom: solid 3px var(--primary-color);

  }
  .via-mg-search{
    margin-top: 10px;
    margin-right: 0;
    padding: 0 10px 10px 10px;
  }
  .product-icon-info{
    display: block;
  }
  .via-product-hover{
    display: none !important;
  }
  .via-product-hover.show{
    display: block !important;
  }
  .via-hidden-mobile{
    display: none;
  }
  .order-line-group-header .event-content{
    height: 100%;
  }
  .order-line-activities .order_container > .event:after{
    display: none;
  }
  .submit-order-container > span{
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 545px) {
  .service-list.via-pdl-22{
    margin-top: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  .service-list.via-pdl-22 > li{
    margin-right: 0;
    margin: 0 auto;
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .service-list > li > .via-container-product > div > img{
    height: auto;
  }
  .via-product-packages .item .title{
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .via-product-packages .item .additional-instruction{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .via-product-variant-slide, .via-product-simple{
    max-width: 70%;
    margin: initial;
  }
  .via-ml-24{
    margin-left: 10px;
  }
  #search-order-input{
    margin-left: 0 !important;
  }
  #inner-search-order-input{
    width: 100% !important;
  }
  .via-content-box{
    padding-left: 15px;
    padding-right: 15px;
  }

  .content-box{
    position: relative;
  }

  .via-table-custom .dropdown-menu.show{
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 115px !important;
  }
}

/* ======================begin via common==================== */
.via-header-mobile{
  height: 75px;
  top: -75px;
  position: fixed;
  transition: top 0.3s ease;
  width: 100%;
  left: 0;
  z-index: 1010;
  display: none;
  background: var(--primary-bg);
  border-bottom: 1px solid var(--primary-color-border);
}

.via-header-mobile-top{
  height: 75px;
}

.via-header-mobile-bg-fx{
  background: var(--primary-bg-backdrop);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}

.via-header-mobile-bg-fx.open{
  display: block;
}

.via-header-mobile-menu{
  position: fixed;
  top: 75px;
  left: -70%;
  width: 70%;
  max-width: 300px;
  background-color: var(--primary-bg);
  z-index: 1010;
  color: var(--primary-color-text);
  overflow-y: auto;
  transition: all .3s ease;
  padding: 15px 22px 10px 22px;
  max-height: calc(100vh - 75px);
  overflow-y: auto;
}

.via-header-mobile-menu::-webkit-scrollbar {
  width: 8px;
}

.via-header-mobile-menu::-webkit-scrollbar-track {
  background-color: var(--primary-bg-scroll-track);
}

.via-header-mobile-menu::-webkit-scrollbar-thumb {
  background-color: var(--primary-bg-scroll-thumb);
  border-radius: 4px;
}

.via-header-mobile-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-bg-scroll-thumb);
}

.via-header-mobile-menu.open {
  left: 0;
}

.via-header-mobile-menu ul{
  list-style-type: none;
  padding-left: 0;
}

.via-header-mobile-menu > ul{
  margin-bottom: 0;
}

.via-header-mobile-menu > ul:not(:last-child){
  border-bottom: 1px solid var(--primary-border-menu);
}

.via-header-mobile-menu > ul > li > a{
  display: block;
  padding: 10px 0;
  color: var(--primary-color-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.via-header-mobile-menu > ul > li > a.active{
  color: var(--primary-color);
}

.via-header-mobile-menu > ul > li i{
  color: var(--primary-color-icon-menu);
  font-size: 12px;
  margin-right: 4px;
}

.via-header-mobile.fixed{
  top: 0;
}

.via-menu-bars{
  border: 0;
  color: var(--primary-color-text);
  font-size: 24px;
  padding: 0;
  margin: 0;
  background: initial;
  line-height: 100%;
}

.via-menu-bars.open .icon-three-bars::before{
  content: "\ea00";
  font-size: 30px;
}

.via-menu-bars:focus{
  outline: initial !important;
}

.logo-mobile{
  width: 100px;
}

.via-header-mobile .user-avatar{
  width: 32px;
  height: 32px;
}

@media screen and (max-width: 992px) {
  .via-header-desktop .top-bar .btn{
    padding: 1rem 0rem;
    min-width: 125px;
    flex: 1;
  }
}

.container.container-full-screen{
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.container.container-full-screen .gray-bg{
  display: none;
}

.container.container-full-screen .content-box{
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  margin-top: 0;
  min-height: 0;
}

@media screen and (max-width: 768px) {
  .container{
    max-width: 100%;
  }

  .content-box{
    border: 0;
    padding: 0;
  }

  .gray-bg{
    background: var(--primary-bg-mobile);
  }

  .via-header-desktop{
    display: none;
  }

  .via-header-mobile{
    display: block;
  }

  .via-header-mobile-menu .navbar-nav{
    width: 100%;
  }

  .via-header-mobile-menu .navbar-nav .nav-item.show .dropdown-toggle::after{
    transform: rotate(180deg);
  }

  .via-header-mobile-menu .navbar-nav .dropdown-menu {
    position: static !important;
    transform: initial !important;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 15px;
  }

  .via-header-mobile-menu .navbar-nav .dropdown-menu .dropdown-item {
    padding: 10px 15px;
  }

}
/* ======================end via common==================== */

/* ======================begin via page wellcome==================== */
@media screen and (max-width: 992px) {
  .login-form .small-title{
    text-align: center;
  }
  .login-form .pr-40{
    padding-right: 15px;
  }
  .login-form .pl-40{
    padding-left: 15px;
  }
}

@media screen and (max-width: 768px) {
  .login-form .small-title{
    margin-top: 45px;
    margin-bottom: 40px;
  }
  .login-form input:not([type="submit"]){
    box-shadow: 0px 20px 25px -20px var(--primary-shadow);
    height: 62px;
  }
  .login-form .form-group{
    margin-bottom: 30px;
  }
  .login-form button.mt-30{
    margin-top: 0;
  }
}
/* ======================end via page wellcome==================== */

/* ======================begin via page create order==================== */
#fc_frame{
  bottom: 100px !important;
}

.via-mobile-fixed-top-bar{
  display: none;
}

.via-hidden-desktop{
  display: none;
}

/*@media screen and (max-width: 1200px) {

  .service-list > li > .via-container-product > div > img{
    height: auto;
  }

  .service-list{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
  }

  .service-list > li{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 0;
  }
}*/

@media screen and (max-width: 992px) {

  .via-product-content {
    width: 100%;
  }

  .via-product-content:not(.package) {
    padding: 0 30px;
  }

  .service-filter-bar{
    border-bottom: solid 1px var(--primary-color);
  }

  .via-mg-search {
    padding: 0 22px;
    margin-right: 0;
    width: 100%;
  }

  .via-mg-search.search-box:after{
    right: 25px;
  }

  .submit-order-container > span > span.via-hidden-mb {
    display: none !important;
  }

  .via-hidden-desktop{
    display: block;
  }

  .via-form-reference .search-properties{
    margin-top: 20px;
    min-width: 400px;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .via-form-reference .btn-primary{
    margin-top: 5px;
    min-width: 400px;
    width: 60%;
  }

  .via-product-variant-slide, .via-product-simple{
    max-width: 100%;
  }

  .via-product-variant-slide .via-prev,
  .via-product-variant-slide .via-next{
    flex: 0 0 50px;
  }

  .via-product-variant-slide .via-content{
    flex: 1;
  }

  .via-product-finish-order{
    position: fixed;
    bottom: 0;
    height: 65px;
    width: 100%;
    left: 0;
    background: #FFF;
    box-shadow: 0px -5px 10px 0px #E9E9E9;
  }

  .via-product-finish-order .submit-order-container{
    display: flex;
    text-align: center;
  }

  .via-product-finish-order .submit-order-container > span{
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
  }

  .via-product-finish-order .submit-order-container .via-mt-22{
    margin-top: 0;
    margin-right: 0 !important;
  }

  .via-product-finish-order .submit-order-container .btn{
    border: 0;
    padding: 0;
    width: 100%;
    height: 65px;
    min-width: initial;
    position: relative;
  }

  .via-product-finish-order .submit-order-container .btn{
    background-color: var(--primary-bg);
    color: var(--primary-color-icon-menu) !important;
  }

  .via-product-finish-order .submit-order-container .btn.btn-primary{
    color: var(--primary-color) !important;
  }

  .via-product-finish-order .submit-order-container .btn i{
    font-size: 20px;
  }

  .via-product-finish-order .submit-order-container .btn.btn-primary i{
    color: var(--primary-color) !important;
  }

  .via-product-finish-order .submit-order-container .btn.btn-primary:active,
  .via-product-finish-order .submit-order-container .btn.btn-primary:active i{
    color: var(--primary-bg) !important;
  }

  .via-product-finish-order .submit-order-container .btn span{
    font-size: 10px;
  }

  .via-product-finish-order .submit-order-container .btn:not(.btn-primary) i{
    color: var(--primary-color-icon-menu);
  }

  .via-product-finish-order .submit-order-container .btn:not(.btn-primary) span{
    color: var(--primary-color-icon-menu);
  }

  .via-product-finish-order .submit-order-container .btn.btn-primary{
    border-radius: 0;
  }

  /* function  */
  .via-product-finish-order{
    bottom: -70px;
    transition: bottom 0.3s ease;
  }
  .via-poss-mobile{
    bottom: 80px;
    box-shadow: initial;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 35px;
    border: 1px solid var(--primary-border-order);
    left: -500px;
    transition: left 0.5s ease;
  }

  .via-icon-pheu{
    width: 60px;
    height: 53px;
    position: fixed;
    bottom: 28px;
    top: auto;
    z-index: 99999999;
    transition: left 0.5s ease;
    left: -500px;
  }

  .via-product-toolbar .icon-grid6{
    font-size: 16px !important;
    z-index: 999999999;
    display: block;
    padding-bottom: 2px;
    position: relative;
  }

  .via-product-toolbar.show .icon-grid6,
  .via-product-toolbar.show .via-product-text{
    color: var(--primary-color) !important;
  }

  .icon-pheu.via-icon-pheu .path1,
  .icon-pheu.via-icon-pheu .path2{
    display: inline-block;
  }

  .icon-pheu.via-icon-pheu .path1:before,
  .icon-pheu.via-icon-pheu .path2:before{
    font-size: 53px;
    position: relative;
  }

  .icon-pheu.via-icon-pheu .path2:before{
    margin-left: -70px;
  }

  .icon-pheu.via-icon-pheu .path1:before{
    top: -1px;
  }
}

@media screen and (max-width: 768px) {
  .service-list > li{
    flex: 0 0 50%;
    max-width: 50%;
    height: auto;
  }

  .via-plr-mb-0{
    padding-left: 0;
    padding-right: 0;
  }

  .via-mobile-fixed-top-bar{
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 1009;
    top: -52px;
    transition: top 0.3s ease;
  }

  .via-mobile-fixed-top-bar.show{
    top: 74px;
  }

  .via-mobile-fixed-top-bar
  .via-trapezoid {
    position: relative;
    display: block;
    height: 52px;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
  }

  .via-trapezoid:before {
    content: ' ';
    display: block;
    width: 65px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 18px;
    transform: skew(38deg);
    border-bottom-left-radius: 20px;
    border: 1px solid var(--primary-border-order);
    border-right: 0;
    z-index: -1;
    background-color: var(--primary-bg);
  }

  .via-trapezoid:after {
    content: ' ';
    display: block;
    width: 65px;
    height: 52px;
    position: absolute;
    top: 0;
    right: 18px;
    transform: skew(-38deg);
    border-bottom-right-radius: 20px;
    border: 1px solid var(--primary-border-order);
    border-left: 0;
    z-index: -1;
    background-color: var(--primary-bg);
  }

  .via-trapezoid-content {
    position: absolute;
    display: flex ;
    align-items: center;
    justify-content: center;
    width: calc(100% - 112px);
    background-color: var(--primary-bg);
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid var(--primary-border-order);
    border-bottom: 1px solid var(--primary-border-order);
    height: 100%;
  }

  .via-trapezoid-content-link{
    line-height: 52px;
    text-align: center;
  }

  .via-trapezoid-content-link.active{
    color: var(--primary-color);
  }

  .via-mt-header-mb{
    margin-top: 130px;
  }

  .via-form-reference .small-title{
    padding-top: 70px;
    margin-bottom: 0;
  }

  .via-pdlr-22{
    padding-left: 0;
    padding-right: 0;
  }

  .via-mg-search{
    padding: 0;
  }

  .service-list.via-pdl-22{
    padding: 0;
  }

  .service-list{
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media screen and (max-width: 576px) {
  .service-list.via-pdl-22{
    margin-top: 10px;
  }

  .service-list > li{
    flex: 0 0 100%;
    max-width: 100%;
  }

  .via-form-reference .search-properties{
    width: 100%;
    min-width: initial;
  }

  .via-form-reference .btn-primary{
    width: 100%;
    min-width: initial;
  }

  .via-smart-quantity input.float-right{
    float: left !important;
  }

  .via-smart-quantity > .font-weight-bold.text-black{
    display: none;
  }

  .via-smart-quantity > .clearfix.mt-20{
    margin-top: 10px !important;
    margin-bottom: 10px;
  }

  .via-product-finish-order .submit-order-container > span .btn > span:not(.via-icon-pheu){
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

@media screen and (max-width: 390px) {
  .via-poss-mobile.show{
    left: 0 !important;
  }
}
/* ======================end via page create order==================== */

/* ======================begin via page order list==================== */
@media screen and (max-width: 768px) {
  .via-toggle-search-mobile.show{
    margin-top: 0 !important;
  }

  .order-list-root{
    position: relative;
  }

  .via-toggle-search-mobile{
    display: none;
  }

  .via-toggle-search-mobile.show{
    margin-left: 0;
    position: absolute;
    width: 100%;
    left: 0;
    top: 12px;
    background: var(--primary-bg);
    display: flex;
  }

  .order-search-box:after {
    top: 10px;
  }

  .via-toggle-search-mobile .mt-5p{
    margin-top: 0;
  }

  .via-order-list-x{
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 25px;
    z-index: 99;
    background: var(--primary-bg);
    cursor: pointer;
  }

  .via-order-list-search-result{
    font-size: 14px;
  }

  .via-order-list-search-result span{
    color: var(--primary-color);
  }

  .via-table-wrap{
    padding: 0;
  }

  .via-order-list-package td:first-child, .via-last-item:not(.via-order-list-package-item) td:first-child{
    border-radius: 0;
  }

  .via-last-item td:first-child{
    border-bottom-left-radius: 0;
  }

  .via-last-item td:last-child {
    border-bottom-right-radius: 0;
  }
}
/* ======================end via page order list==================== */

/* ======================begin via page order detail==================== */
.material-list > a{
  border-radius: 10px;
}
@media screen and (max-width: 992px) {
  .order-line-group-content-item__header{
    line-height: initial;
  }

  .order-line-group-content-item__content.row,
  .via-icon-correction-product{
    width: 100%;
  }

  .material-list > a > img,
  .material-list > a{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .material_name{
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  .material-list{
    display: flex;
    flex-wrap: wrap;
  }

  .material-list > a:nth-child(6n+6){
    margin-right: 5px;
  }

  .material-list > a{
    flex-basis: calc(20% - 5px);
    margin-right: 5px;
  }

}
@media screen and (max-width: 768px) {
  .via-content-box{
    padding: 15px;
  }

  .via-content-box-header{
    padding: 0;
    border: 0;
  }

  .via-content-box .border-right.no-border-sm {
    border: none !important;
  }

  .material-list > a{
    flex-basis: calc(25% - 5px);
  }
}

@media screen and (max-width: 576px) {
  .material-list > a{
    flex-basis: calc(33.33% - 5px);
  }

  .order-line-group-content-item{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

}

@media screen and (max-width: 450px) {
  .material-list > a{
    height: 55px;
  }

}
/* ======================end via page order detail==================== */

/* ======================begin via page correction page==================== */
.via-image-list{
  margin-left: -5px !important;
  margin-right: -5px !important;
  flex-wrap: wrap;
  display: flex;
}

.via-image-list li{
  height: auto !important;
  margin-right: 0 !important;
}

.via-image-list.image-list > li.active{
  border: initial !important;
}

.via-image-list img{
  width: 100%;
}

.via-image-list-col{
  padding-left: 5px !important;
  padding-right: 5px !important;
  flex: 0 0 14.28%;
  max-width: 14.28%;
  background-color: initial !important;
  border-radius: 0 !important;
}

.via-image-list-content{
  background-color: #efefef;
  border-radius: 5px;
  overflow: hidden;
}

.via-image-list li.active .via-image-list-content{
  border: solid 2px var(--primary-color);
}

.via-image-list-content .file_name{
  position: static !important;
  height: auto !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media screen and (max-width: 992px) {
  .image-list > li{
    height: 77px;
  }

  .big-image{
    min-height: auto;
  }

  .big-image .comment-shapes{
    max-width: 100%;
  }

  .via-correction-fixed{
    bottom: -65px;
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    position: fixed;
    width: 100%;
    left: 0;
    background: #FFF;
    -webkit-box-shadow: 0px -5px 10px 0px #E9E9E9;
    box-shadow: 0px -5px 10px 0px #E9E9E9;
    z-index: 9999999999;
  }

  .via-correction-fixed .btn i{
    font-size: 20px;
    color: var(--primary-color-icon-menu);
  }

  .via-correction-action{
    display: flex;
    direction: rtl;
  }

  .via-correction-fixed.show{
    bottom: 0;
  }

  .via-correction-fixed .btn {
    border: 0;
    padding: 0;
    width: 100%;
    height: 65px;
    min-width: initial;
    position: relative;
    background-color: var(--primary-bg);
    color: var(--primary-color-icon-menu) !important;
    flex: 1;
  }

  .page-correction .footer{
    padding-bottom: 80px;
  }

  .via-correction-selected-video{
    min-height: initial !important;
  }

  .via-correction-video{
    margin-top: 0px;
  }
}

@media screen and (max-width: 768px) {
  .page-correction .content-box{
    margin-top: 90px;
    border: solid 1px #EAEAEA;
    padding: 15px;
  }

  .via-image-list-col{
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }

  .via-mb-mt{
    margin-top: 20px !important;
  }

  .page-correction .paragraph{
    margin-bottom: 0;
  }

}

@media screen and (max-width: 576px) {
  .via-image-list-col{
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin-top: 10px;
  }

  .via-small-title{
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #feedback-type{
    width: auto !important;
  }

  #feedback-type > .style-checkbox{
    margin-right: 5px;
    padding-left: 12px;
    font-size: 13px;
  }

  #feedback-type > .style-checkbox .custom-file{
    width: 100%;
  }

  .page-correction .image-comment .custom-file{
    max-width: 100% !important;
  }
}

@media screen and (max-width: 400px) {
  .via-image-list-col{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .via-small-title{
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ======================end via page correction page==================== */

/* ======================begin via page feedback==================== */
@media screen and (max-width: 992px) {
  /* table */
  .via-table-feedback{
    table-layout:fixed;
  }
  .via-table-column5,
  .via-table-column6{
    display: none;
  }
  .via-table-column1{
    width: 20%;
  }
  .via-table-column2{
    max-width: initial !important;
    width: 20%;
  }
  .via-table-column2 p{
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .via-table-column3{
    width: 20%;
  }
  .via-table-column4{
    width: 20%;
  }
  .via-table-column7{
    width: 20%;
  }
}
@media screen and (max-width: 768px) {
  .via-table-feedback-responsive{
    overflow: initial;
    padding-left: 0;
    padding-right: 0;
  }
  .page-feedback-list .content-box {
    margin-top: 90px;
    border: solid 1px #EAEAEA;
    padding: 15px;
  }
  .via-order-list-filter-box > div{
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
  }

  .via-order-list-filter-box > div > div{
    margin-right: 0;
    padding-left: 5px;
    padding-right: 5px;
    flex: 1;
  }
  .via-order-list-filter-box > div > div.via-col-20{
    flex: 0 0 50px;
    max-width: 50px;
    margin-left: 0;
    margin-right: 0;
  }
  .page-feedback-list .via-order-list-filter-box .ml-10{
    margin-left: 0;
  }
  .via-order-list-filter-box > div .form-control{
    width: 100% !important;
  }
  .page-feedback-list .list-btn.via-btn-export {
    margin-right: 0;
    float: none;
    width: 100%;
  }
  .via-order-list-filter-box > div.via-col-20 .dropdown::after{
    display: block;
    clear: both;
    content: "";
  }
  .page-feedback-list .table-wrap{
    padding: 0;
  }
  /* table */
  .via-table-feedback{
    width: 100%;
  }

  .via-table-column4{
    display: none;
  }
  .via-table-column1{
    width: 20%;
  }
  .via-table-column2{
    width: 40%;
  }
  .via-table-column3{
    width: 20%;
  }
  .via-table-column7{
    width: 20%;
  }
}
@media screen and (max-width: 576px) {
  /* table */
  .via-table-column3{
    display: none;
  }
  .via-table-column1{
    width: 30%;
    word-wrap: break-word;
  }
  .via-table-column2{
    width: 40%;
  }
  .via-table-column7{
    width: 30%;
  }
}
@media screen and (max-width: 450px) {
  .via-order-list-filter-box input[type="date"] {
    padding-left: 5px;
    padding-right: 5px;
  }
}
/* ======================end via page feedback==================== */

/* ======================begin via page manage user==================== */
@media screen and (max-width: 992px) {
  .page-users .content-box{
    padding: 3rem;
    min-height: auto;
  }
}
@media screen and (max-width: 768px) {
  .page-users .footer{
    margin-top: 0;
  }
  .page-users .content-box{
    padding: 24px 0;
  }
  #search-user-input.clicked{
    position: relative;
    width: 100% !important;
  }
  #search-user-input.clicked > input{
    position: absolute;
    width: 100%;
    top: -40px;
  }
  #search-user-input.clicked.search-box:after{
    top: -30px;
  }
  #add-user-btn{
    height: 40px;
  }
  .page-users .ag-root div[col-id="id"],
  .page-users .ag-root div[col-id="avatarUrl"]{
    display: none;
  }
  .page-users .ag-root div[col-id="fullName"]{
    left: 0 !important;
    width: 25% !important;
  }
  .page-users .ag-root div[col-id="email"]{
    left: 25% !important;
    width: 25% !important;
  }
  .page-users .ag-root div[col-id="role"]{
    left: 50% !important;
    width: 20% !important;
  }
  .page-users .ag-root div[col-id="status"]{
    left: 70% !important;
    width: 15% !important;
  }
  .page-users .ag-root div[col-id="id_1"]{
    left: 85% !important;
    width: 15% !important;
  }
}
@media screen and (max-width: 576px) {
  .page-users .ag-root div[col-id="id"],
  .page-users .ag-root div[col-id="avatarUrl"],
  .page-users .ag-root div[col-id="role"],
  .page-users .ag-root div[col-id="status"]{
    display: none;
  }
  .page-users .ag-root div[col-id="fullName"]{
    left: 0 !important;
    width: 35% !important;
  }
  .page-users .ag-root div[col-id="email"]{
    left: 35% !important;
    width: 45% !important;
  }
  .page-users .ag-root div[col-id="id_1"]{
    left: 80% !important;
    width: 20% !important;
  }
}
@media screen and (max-width: 400px) {
  .page-users .modal-footer .btn{
    padding: 8px;
  }
}
/* ======================end via page manage user==================== */

/* ======================begin via page Profile ==================== */
.via-profile-upload-button{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #00000042;
  border-radius: 50%;
  border: 1px solid var(--primary-color-border-profile);
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.via-profile-upload-button i{
  font-size: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--primary-bg);
  bottom: 5px;
  top: initial;
}
@media screen and (max-width: 768px) {
  .page-profile .content-box{
    padding-top: 15px;
  }
  .via-profile-upload{
    position: relative;
  }
  .via-profile-upload-left{
    flex: 0 0 100px;
    max-width: 100px;
    height: 100px;
    margin-right: 30px;
  }
  .via-profile-upload-right{
    flex: 1;
  }
  .page-profile .avatar-cover-container{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--primary-color-border-profile);
    overflow: hidden;
  }
  .via-profile-upload-button{
    display: block;
    cursor: pointer;
  }
  .profile-uploader{
    display: none;
  }
  .via-profile-icon{
    font-size: 16px;
    color: var(--primary-color-icon-menu);
  }
  .via-profile-btn-save{
    float: left !important;
    margin-top: 30px;
  }
  .via-profile-title{
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 576px) {
  .via-profile-upload-left{
    flex: 0 0 80px;
    max-width: 80px;
    height: 80px;
  }
  .via-profile-pr-0{
    padding-right: 0;
  }
}
/* ======================end via page Profile ==================== */

/* ======================begin via page Presentation==================== */
@media screen and (max-width: 992px) {
  .page-presentation-admin .content-box{
    padding-top: 15px;
  }
  .presentation-title{
    display: flex;
    margin-bottom: 25px;
  }
  .presentation-title span{
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .presentation-title button{
    flex: 0 0 95px;
    max-width: 95px;
  }
  .via-presentation-file-upload .custom-file{
    display: none;
  }
  .via-presentation-fixed{
    bottom: -65px;
    -webkit-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    position: fixed;
    width: 100%;
    left: 0;
    background: #FFF;
    -webkit-box-shadow: 0px -5px 10px 0px #E9E9E9;
    box-shadow: 0px -5px 10px 0px #E9E9E9;
    z-index: 9999999999;
    display: block !important;
  }

  .via-presentation-fixed .btn i{
    font-size: 20px;
    color: var(--primary-color-icon-menu);
  }

  .via-presentation-action{
    display: flex;
  }

  .via-presentation-fixed.show{
    bottom: 0;
    margin-top: 0;
  }

  .via-presentation-fixed .btn {
    border: 0;
    padding: 0;
    width: 100%;
    height: 65px;
    min-width: initial;
    position: relative;
    background-color: var(--primary-bg);
    color: var(--primary-color-icon-menu) !important;
    flex: 1;
    margin-right: 0;
  }
  .via-presentation-fixed a.btn{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .via-presentation-fixed .btn:hover{
    background-color: initial !important;
  }
  .presentation-admin .btn-delete-item{
    top: 4px;
    right: 4px;
  }
  .page-presentation-admin .material-list > a{
    height: 65px;
  }
  .page-presentation-admin .footer{
    margin-top: 200px;
  }
}
/* ======================end via page Presentation==================== */

/* ======================FloorPlanner embed edition portal==================== */
  .floorplanner-export-project-btn {
    background-color: #ef731a;
    border-radius: 4px;
    color: #fff;
    border: none;
    font-weight: 500;
  }
/* ======================end FloorPlanner embed edition portal==================== */

/* ==== manage customer third party config ==== */
.customer-third-party-config-title {
  color: grey;
}
/* ==== end of manage customer third party config ==== */


.home-staging-editor-iframe {
  height: 90vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  border: none;
}

.home-staging-logo {
  height: 100%;
  width: 100%;
}

.home-staging-overlay-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 65px;
  background-color: #fcfcfc;
  z-index: 2;
  display: flex;
  align-items: center;
}

/* ==== self edit picture for Autopix ==== */
.self-edit-page {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.self-edit-iframe, .self-edit-page-content {
  height: 100%;
  width: 100%;
}
/* ==== end of self edit picture for Autopix ==== */

/* TODO: check again with new platform */
/* ==== Autopix 2.1 - select AI Addons  ==== */
.addons-wrapper {
  padding: 0 20px;
}

.addons-box {
   padding: 16px;
}

.addon-param-box .select-custom-element {
  text-transform: capitalize;
}

.category-box {
  border-left: 1px solid #F3F4F6;
}

.category-box:first-child {
  border-left: none;
}

.category-item {
  border-top: 1px solid #E5E7EB;
  margin-top: 10px;
  padding-top: 12px;
}

.category-item:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.category-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-subtitle {
  font-size: 12px;
  font-weight: bold;
  color: var(--primary-color);
  text-transform: none;
}

.addon-item {
  position: relative;
  padding: 6px 0;
  border-top: 1px solid #F9FAFB;
}

.addon-item:first-child {
  border-top: none;
}

.addon-title {
  font-weight: 500;
  font-size: 12px;
}

/* Info icon & popup */
.addon-info-trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 4px;
}

.addon-info-icon {
  flex-shrink: 0;
  display: block;
  transition: opacity 0.15s;
}

.addon-info-trigger:hover .addon-info-icon {
  opacity: 0.7;
}

.addon-info-popup {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
  max-width: 220px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.addon-info-popup-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.addon-info-popup-title {
  font-size: 13px;
  font-weight: 400;
  color: #41454b;
  margin-top: 8px;
  line-height: 1.4;
}

.addon-desc {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
}

.addons-box.readonly .addon-item {
  cursor: not-allowed;
  opacity: 0.6;
}

.param-item {
  margin-top: 8px;
}

.param-item:first-child {
  margin-top: 0;
}

.selected-addons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-addons-item {
  display: inline-block;
  padding: 4px 8px;
  background: #fff4eb;
  color: var(--primary-color);
  border-radius: 8px;
  white-space: normal;
}

.column-category-title {
  font-weight: 600;
  font-size: 13px;
}

.addon-setting .addon-setting-head {
  border-bottom: 1px solid #E5E5E5;
}

.addon-setting .addon-setting-title {
  font-size: 15px;
}

.addon-setting .addon-setting-box {
  border-top: 1px solid #E5E7EB;
}

.addon-setting .addon-setting-box:first-child {
  border-top: none;
}

.addon-setting .addon-setting-item {
  border-top: 1px solid #F9FAFB;
}

.addon-setting .addon-setting-item:first-child {
  border-top: none;
  padding-top: 0 !important;
}

.addon-setting .addon-setting-item:last-child {
  padding-bottom: 0 !important;
}

/* ==== end Autopix 2.1 - select AI Addons  ==== */

/* ==== collapse component ==== */
.collapse-component {
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.collapse-component.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  background-color: #fafafa;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.collapse-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collapse-title {
  font-size: 14px;
  font-weight: 600;
  color: #7b7b7b;
}

.collapse-subtitle {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 400;
}

.collapse-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.collapse-suffix {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color);
}

.collapse-icon img {
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse-icon img.open {
  transform: rotate(0deg);
}
/* ==== end collapse component ==== */

/* ==== select-custom component ==== */
.select-custom {
  position: relative;
  display: block;
  min-width: 100px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.select-custom.select-custom-small {
  height: 26px;
}

.select-custom.select-custom-large {
  height: 42px;
}

.select-custom:hover:not(.disabled) {
  border-color: var(--primary-color);
}

.select-custom.disabled {
  background-color: #f7fafc;
  cursor: not-allowed;
  opacity: 0.7;
}

.select-custom-element {
  width: 100%;
  height: 100%;
  padding: 2px 8px 2px 8px;
  border: none;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 12px;
  color: #212B36;
  outline: none !important;
  cursor: pointer;
  box-shadow: none !important;
}

.select-custom-element:disabled {
  cursor: not-allowed;
}

.select-custom-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
}
/* ==== end select-custom component ==== */

/* ==== select-thumbnail component ==== */
.select-thumbnail {
  position: relative;
  display: block;
  min-width: 100px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.select-thumbnail.select-thumbnail-small {
  height: 26px;
}

.select-thumbnail.disabled {
  background-color: #f7fafc;
  cursor: not-allowed;
  opacity: 0.7;
}

.select-thumbnail:hover:not(.disabled) {
  border-color: var(--primary-color);
}

.select-thumbnail-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 2px 8px;
  user-select: none;
}

.select-thumbnail-trigger-label {
  font-size: 12px;
  color: #212B36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.select-thumbnail-trigger-placeholder {
  font-size: 12px;
  color: #9ca3af;
  flex: 1;
}

.select-thumbnail-arrow {
  flex-shrink: 0;
  margin-left: 6px;
  transform: rotate(180deg);
  transition: transform 0.2s;
  pointer-events: none;
}

.select-thumbnail-arrow.open {
  transform: rotate(0deg);
}

/* Dropdown — position: fixed, appended via ng-style so never clipped */
.select-thumbnail-dropdown {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.select-thumbnail-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}

.select-thumbnail-option:last-child {
  border-bottom: none;
}

.select-thumbnail-option:hover {
  background: #f9fafb;
}

.select-thumbnail-option.selected {
  background: #f0f4ff;
}

.select-thumbnail-option-img {
  width: 64px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.select-thumbnail-option-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.select-thumbnail-option-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.select-thumbnail-option-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.4;
}
/* ==== end select-thumbnail component ==== */

/* === switch component === */
.switch-custom {
  display: block;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.switch-custom.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.switch-custom-track {
  width: 44px;
  height: 24px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.3s ease;
}

.switch-custom.checked .switch-custom-track {
  background-color: var(--primary-color);
}

.switch-custom-handle {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-custom.checked .switch-custom-handle {
  transform: translateX(20px);
}

/* Small switch */
.switch-custom.switch-custom-small .switch-custom-track {
  width: 36px;
  height: 20px;
}
.switch-custom.switch-custom-small .switch-custom-handle {
  width: 16px;
  height: 16px;
}
.switch-custom.switch-custom-small.checked .switch-custom-handle {
  transform: translateX(16px);
}

/* Large switch */
.switch-custom.switch-custom-large .switch-custom-track {
  width: 52px;
  height: 28px;
}
.switch-custom.switch-custom-large .switch-custom-handle {
  width: 24px;
  height: 24px;
}
.switch-custom.switch-custom-large.checked .switch-custom-handle {
  transform: translateX(24px);
}
/* === end switch component === */

/* === Download Input & Output Buttons === */

/* Download Input Link */
.download-input-link {
  color: #333 !important;
  text-decoration: underline !important;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.download-input-link:hover {
  opacity: 0.8;
}

.download-input-link img {
  margin-right: 4px;
}

/* Download Output Dropdown */
.output-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-wrapper {
  background-color: #f6f6f6;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.download-output-dropdown {
  display: inline-block;
  vertical-align: middle;
}

.download-output-dropdown .btn-download-native {
  color: #333;
  border: none;
  font-size: 13px;
  padding: 6px;
  gap: 8px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1.4;
}

.download-output-dropdown .btn-download-native:disabled,
.download-output-dropdown .btn-download-native.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.download-output-dropdown .btn-download-native i {
  font-size: 16px;
}

.download-output-dropdown .btn-download-dropdown-toggle {
  border-left: 1px solid #e0e0e0;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.download-output-dropdown .btn-download-dropdown-toggle:disabled,
.download-output-dropdown .btn-download-dropdown-toggle.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dropdown Menu Styles */
.download-resize-dropdown {
  min-width: 280px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
  margin-top: 8px !important;
}

.download-resize-dropdown .dropdown-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

/* Resize Options */
.resize-option {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}

.resize-option:hover {
  background-color: #f9f9f9;
}

.resize-option.selected {
  position: relative;
  border: 1px solid var(--primary-color);
}

.resize-option.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
  opacity: 0.09;
  border-radius: inherit;
  pointer-events: none;
}

.resize-option .resize-radio {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.resize-option.selected .resize-radio {
  border-color: var(--primary-color);
}

.resize-option.selected .resize-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

.resize-option-content {
  flex: 1;
}

.resize-option-title {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.resize-option-desc {
  font-size: 12px;
  color: #888;
}

/* Download Resized Button */
.download-resize-dropdown .dropdown-divider {
  margin: 12px 0;
}

.btn-download-resized {
  width: 100%;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-download-resized:hover:not(:disabled) {
  background-color: var(--primary-hover-color);
  color: #fff;
}

.btn-download-resized:disabled {
  cursor: not-allowed;
  color: grey;
}

.btn-download-resized.is-processing:disabled {
  background-color: var(--primary-color);
  opacity: 0.65;
  color: #fff;
}


/* Keep dropdown open on click inside */
.download-resize-dropdown.show {
  display: block;
}

/* === End Download Input & Output Buttons === */


/* === Resize Progress Popup === */

.resize-progress-popup-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.resize-progress-popup-container.visible {
  opacity: 1;
  visibility: visible;
}

.resize-progress-popup {
  animation: resize-popup-slide-down 0.3s ease;
}

@keyframes resize-popup-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resize-progress-popup-content {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  min-width: 300px;
}

.resize-progress-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.resize-progress-icon.success {
  color: #333;
}

.resize-progress-icon.error {
  color: #DC2626;
}

.resize-progress-icon .spinner-icon {
  animation: resize-spinner-rotate 1s linear infinite;
}

.resize-progress-icon .spinner-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 10;
}

@keyframes resize-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.resize-progress-text {
  flex: 1;
}

.resize-progress-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.resize-progress-title.error {
  color: #333;
}

.resize-progress-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #666;
}

/* === End Resize Progress Popup === */