/*----------------------------------------------------------------------
 Project:        Spiralogics Store - Responsive HTML Template Based On Twitter Bootstrap 4 Version:        0.1

-----------------------------------------------------------------------*/
html, body { color: #707683; background-color: #faf8f8 !important; font-size: 0.875rem !important; font-size: 13px; }

.w-65 { width: 65%; }

.w-35 { width: 35%; }

.w-20 { width: 22%; }

.max-w-60 { max-width: 60%; }

.max-w-80 { max-width: 80%; }

.btn, a[type="button"] { -webkit-appearance: none; }

.login-container { background-color: #faf8f8; background-image: url(../images/bg/login_top.png), url(../images/bg/login_bottom.png); background-position: top 0 right 0, bottom 0 left 0; background-repeat: no-repeat, no-repeat; }

.signup-container { background-color: #faf8f8; background-image: url(../images/bg/signup_top.png), url(../images/bg/signup_bottom.png); background-position: top 0 left 0, bottom 0 right 0; background-repeat: no-repeat, no-repeat; }

.login-heading { font-size: 20px; color: #323c47; text-align: center; }

.login-signin form, .login-signin .form { max-width: 432px; margin: 0 auto; }

.bg-forgot { background-image: url(../images/bg/forgot_top.png), url(../images/bg/password_bottom.png); background-position: top 0 left 0, bottom 0 right 0; background-repeat: no-repeat, no-repeat; }

.bg-error { background-image: url(../images/bg/password_bottom.png); background-position: bottom 0 right 0; background-repeat: no-repeat; }

.toggle-password { position: absolute; width: 38px; height: 38px; cursor: pointer; right: 0; bottom: 0; text-align: center; line-height: 38px; }

.has-error .input-error { max-width: fit-content; }

.primary-heading { color: #323c47 !important; }

.primary-body { color: #707683 !important; }

.img-rounded { border-radius: 50%; }

.header-web { background: white; border-color: #E0E0E0; }

.web-view { color: #323c47; }

.mobile-display { display: none; }

.product-desc-head { font-size: 1.1rem; color: #323c47; margin: 0 0 10px 0; font-weight: 600; }

.margined { margin-bottom: 25px; }

.ParallaxVideo { width: 100%; height: auto; max-height: none; border-radius: 10px; position: relative; margin-bottom: 8px; display: inline-block; }
.ParallaxVideo img { width: 100%; max-height: none; border-radius: 10px; }

.gallery-item { width: 25%; max-width: 135px; max-height: 100px; border-radius: 10px; display: inline-block; border: 1px solid #cfd0d2; }
.gallery-item img { border-radius: 10px; }

.footer-web { background: white; border-top: 1px solid #E0E0E0; }
.footer-web .font-size-sm { font-weight: 400; }

.card.card-custom { border: 1px solid #E6E7E9; border-radius: 8px !important; }
.card.card-custom > .card-header { min-height: 40px; }
.card.card-custom > .card-header .card-title { font-size: 1.01rem; color: #323c47; font-weight: 500; }
.card.card-custom > .card-header.card-header-tabs-line .nav .nav-link { padding-top: 1rem; padding-bottom: 1rem; }

.form-group { margin-bottom: 1.3rem; }
.form-group label { font-size: 0.875rem; font-weight: 500; color: #707683; }
.form-group .form-control { font-weight: 400; color: #707683; font-size: 0.875rem; }

.form-imp-desc { color: #323c47; font-size: 0.875rem; font-weight: 500; }

.form-group-heading { font-size: .938rem; font-weight: 500; margin-bottom: 1.3rem; color: #323c47; }

.field-validation-error { display: block; font-weight: 500; text-align: left; margin-top: 5px; }

.input-error { font-weight: 500; text-align: left; margin-top: 5px; }

.btn { font-size: .875rem; font-weight: 500; }

.brand { border-bottom: 1px solid #EBEFF2; }

.dropdown-menu { border-radius: 0 0 0.42rem 0.42rem; }

.aside-menu .menu-nav > .menu-item { border-radius: 5px; }
.aside-menu .menu-nav > .menu-section { margin: 10px 0; height: 0; }

.aside-menu .menu-nav > .menu-item > .menu-link { padding: 6px 12px; margin: 0 15px; border-radius: 5px; }

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon { font-size: 18px; }

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text { font-size: 13px; }

.aside-menu .menu-nav > .menu-item > .menu-heading, .aside-menu .menu-nav > .menu-item > .menu-link { min-height: 36px; }

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text, .aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon { color: #707683; }

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link { background-color: #f0483e; }

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-text, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: white; }

.payment .product-list { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #EBEFF2; }
.payment .product-list:last-child { margin: 0; padding: 0; border-bottom: 0; }
.payment .product-list .product-desc-head { margin-bottom: 10px; }

.payment-option { margin-top: 2.5rem; }

.payment-right { border-left: 1px solid #f0483e; }

.payment-price-detail { width: 100px; height: 100px; text-align: center; line-height: 100px; position: absolute; top: 0; right: 0; background: #f0483e; border-radius: 50%; color: #faf8f8; font-size: 18px; font-weight: 600; }

.page-head { font-size: 1.35rem; color: #323c47; margin: 0 0 15px 0; font-weight: 600; }

.notifications { font-size: 14px; }

.navi-item.border-bottom { border-color: #F6F6F9; }

.navi-link i.right { font-size: 12px; }

.navi-text div { font-size: 13px; color: #707683; }
.navi-text .text-xs { font-size: 12px; }

.symbol.symbol-round { border-radius: 50%; }
.symbol.symbol-round img { border-radius: 50%; }
.symbol.symbol-150 img { width: 150px; }

.overline { font-size: 12px; color: #707683; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; }

.modal-backdrop.show { opacity: 0.7; }

.modal .modal-header .modal-title { font-size: 1rem; }

.accordion.accordion-light .card { border: 1px solid #E6E7E9; }
.accordion.accordion-light .card:first-child { border-top: 1px solid #E6E7E9; }

.accordion .card .card-header .card-title .card-label { font-size: .97rem; font-weight: 500; color: #707683; }

.accordion .card .card-body { font-size: 0.875rem; }

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

.feedback { position: fixed; right: 15px; bottom: 35px; border-radius: 50%; background: #56CCF2; color: white; width: 45px; height: 45px; line-height: 40px; text-align: center; border-width: 2px !important; cursor: pointer; }
.feedback i { color: white; }
.feedback.customer { box-shadow: 0 0 0 #56ccf2; animation: pulse 1s infinite; }

@-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(86, 204, 242, 0.8); }
  70% { -webkit-box-shadow: 0 0 0 10px rgba(86, 204, 242, 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(86, 204, 242, 0); } }

@keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(86, 204, 242, 0.8); box-shadow: 0 0 0 0 rgba(86, 204, 242, 0.8); }
  70% { -moz-box-shadow: 0 0 0 10px rgba(86, 204, 242, 0); box-shadow: 0 0 0 10px rgba(86, 204, 242, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(86, 204, 242, 0); box-shadow: 0 0 0 0 rgba(86, 204, 242, 0); } }

.dx-widget { font-family: Poppins, Helvetica, "sans-serif" !important; }

.dx-popup-wrapper > .dx-overlay-content { border: 0 !important; }

.dx-popup-title.dx-toolbar .dx-toolbar-label { font-size: 1rem !important; font-weight: 500; }

.modal-ku { width: 500px; margin: auto; }

.modal.fade .modal-dialog.modal-wt { width: 450px; }

::-ms-reveal { display: none; }

#sync2.owl-carousel { margin-top: 15px; }
#sync2.owl-carousel .owl-item { max-width: 110px !important; object-fit: fill; }
#sync2.owl-carousel .owl-item .item img { border-radius: 10px; border: 1px solid #faf8f8; object-fit: fill; }
#sync2.owl-carousel .owl-item.current .item img { border: 1px solid #f0483e; }
#sync2.owl-theme .custom-nav { position: absolute; top: 20%; left: 0; right: 0; }
#sync2.owl-theme .custom-nav .owl-prev, #sync2.owl-theme .custom-nav .owl-next { position: absolute; height: 100px; color: inherit; background: none; border: none; z-index: 100; }
#sync2.owl-theme .custom-nav .owl-prev i, #sync2.owl-theme .custom-nav .owl-next i { font-size: 2.5rem; color: #cecece; }
#sync2.owl-theme .custom-nav .owl-prev { left: 0; }
#sync2.owl-theme .custom-nav .owl-next { right: 0; }

#sync1.owl-carousel .owl-item img, #sync1.owl-carousel .owl-item video { border-radius: 10px; }
#sync1.owl-carousel .owl-item video { height: 300px; }

.owl-carousel .owl-stage-outer { border-radius: 10px; }

#carousel-custom .carousel-inner img { width: auto !important; height: 100%; object-fit: cover; border-radius: 10px; }

#carousel-custom .carousel-inner video { width: auto !important; height: 100%; border-radius: 10px; }

.container-slide { overflow: hidden; padding: 0; position: initial; width: auto; min-height: 0; }

#carousel-custom .carousel-indicators { margin: 0; overflow-x: auto; position: static; text-align: left; white-space: nowrap; width: 100%; justify-content: flex-start; /* display: inline- block;*/ }

#carousel-custom .carousel-indicators li { background-color: transparent; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; width: auto; height: auto; margin: 0 !important; margin-right: 8px !important; }

#carousel-custom .carousel-indicators li img { display: block; border: 1px solid #cfd0d2; border-radius: 10px; }

#carousel-custom .carousel-indicators li.active img { border: 1px solid #f0483e; margin-right: 8px; }

#carousel-custom .carousel-inner .img-container { height: 300px; width: 100%; background-size: cover; background-position: center center; object-fit: contain; position: relative; display: inline-block; }

#carousel-custom .carousel-indicators .thumb { max-width: 110px; max-height: 100px; cursor: pointer; float: left; opacity: 1; }

#carousel-custom .carousel-indicators .thumb img { width: 100%; height: 100%; }

#carousel-custom .carousel-outer { position: relative; }

a { color: #f0483e; }
a:hover { color: #e91e12; }

.text-dark { color: #323c47 !important; }

.text-body { color: #707683 !important; }

.text-primary { color: #f0483e; }
.text-primary:hover { color: #e91e12; }

.btn.btn-primary { background: #f0483e; color: white; border-color: #f0483e; }
.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary.focus:not(.btn-text), .btn.btn-primary:hover, .btn.btn-primary:focus { background: #ed2418; color: white; border-color: #ed2418; }
.btn.btn-primary.disabled, .btn.btn-primary:disabled { background: #f4756d; border-color: #f4756d; color: white; }

.btn.btn-light-primary { background: #ffe5e5; color: #f0483e; border-color: #ffe5e5; }
.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light-primary:focus:not(.btn-text), .btn.btn-light-primary.focus:not(.btn-text), .btn.btn-light-primary:hover, .btn.btn-light-primary:focus { background: #f0483e; color: white; border-color: #f0483e; }
.btn.btn-light-primary.disabled, .btn.btn-light-primary:disabled { background: #fffefe; color: #f0483e; border-color: #fffefe; }

.btn.btn-primary.btn-web { background: #f0483e; color: white; border-color: #f0483e; }
.btn.btn-primary.btn-web:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-primary.btn-web:focus:not(.btn-text), .btn.btn-primary.btn-web.focus:not(.btn-text), .btn.btn-primary.btn-web:hover, .btn.btn-primary.btn-web:focus { background: #ed2418; color: white; border-color: #ed2418; }

.btn.btn-outline-primary { color: #f0483e; background-color: transparent; border-color: #f0483e; }
.btn.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-outline-primary:focus:not(.btn-text), .btn.btn-outline-primary.focus:not(.btn-text), .btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus { background: #f0483e; color: white; border-color: #f0483e; }

.badge { font-size: 14px; border-radius: 2rem; font-weight: normal; }

.badge-success { background: #27ae60 !important; }

.badge-primary { background: #f0483e !important; }

.badge-danger { background: #ce1c0f !important; }

.badge-warning { background: #fd7900 !important; }

.label-outline-success { border-color: #27ae60 !important; color: #27ae60 !important; }

.label-outline-primary { border-color: #f0483e !important; color: #f0483e !important; }

.label-outline-warning { border-color: #fd7900 !important; color: #fd7900 !important; }

.label-light-primary { color: #f0483e !important; background-color: #ffe5e5 !important; }

.bg-primary { background-color: #f0483e !important; }

.text-primary { color: #f0483e !important; }
.text-primary:hover { color: #e91e12; }

a.text-primary { color: #f0483e !important; }
a.text-primary:hover, a.text-primary:focus { color: #e91e12; }

.text-info { color: #2f80ed !important; }

.text-danger { color: #ce1c0f !important; }

.text-warning { color: #fd7900 !important; }

.text-success { color: #27ae60 !important; }

.text-secondary-blue { color: #f0483e; }

.text-muted { color: #707683; }

.input-validation-error { border-color: #ce1c0f; }

.form-group.has-error input, .form-group.has-error input.form-control { border-color: #ce1c0f; }

.nav .show > .nav-link .nav-text, .nav .nav-link:hover:not(.disabled) .nav-text, .nav .nav-link.active .nav-text { color: #f0483e; }

.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line .nav-link.active, .nav.nav-tabs.nav-tabs-line .show > .nav-link { border-color: #f0483e; }

.header-mobile .btn:hover .svg-icon svg g [fill] { fill: #f0483e; }
.header-mobile .burger-icon:hover span { background-color: #f0483e; }
.header-mobile .burger-icon:hover span::before, .header-mobile .burger-icon:hover span::after { background-color: #f0483e; }

.alert { border: 1px solid #E6E7E9; border-radius: 4px 0px 0px 4px; background: white; font-weight: 600; box-shadow: 0px 4px 10px rgba(0, 48, 135, 0.14); text-align: left !important; }
.alert.alert-success { background: linear-gradient(88.6deg, #ffffff 1.52%, #27ae60 155.79%); color: #1e8449; border-color: transparent; }
.alert.alert-success button.close:before { color: black !important; }
.alert.alert-danger { background: linear-gradient(88.6deg, #ffffff 1.52%, #ce1c0f 155.79%); color: #9e160c; border-color: transparent; }
.alert.alert-danger button.close:before { color: black !important; }
.alert.alert-custom.alert-danger { background: linear-gradient(88.6deg, #ffffff 1.52%, #ce1c0f 155.79%) !important; color: #9e160c !important; border-color: transparent !important; }
.alert.alert-custom.alert-danger .alert-text { color: #9e160c !important; }
.alert.alert-custom.alert-danger .alert-close .ki-close { color: black !important; }
.alert.alert-warning { background: linear-gradient(88.6deg, #ffffff 1.52%, #fd7900 155.79%); color: #ca6100; border-color: transparent; }
.alert.alert-warning button.close:before { color: black !important; }
.alert.alert-info { background: linear-gradient(88.6deg, #ffffff 1.52%, #2f80ed 155.79%); color: #1366d6; border-color: transparent !important; }
.alert.alert-info button.close:before { color: black !important; }

.checkbox > input:checked ~ span { background-color: #f0483e; }

.symbol .symbol-label.bg-transparent { background-color: transparent; }
.symbol.symbol-light-primary .symbol-label { background-color: #faf8f8; }

.btn-link { color: #f0483e; }
.btn-link i { color: #f0483e; font-size: 13px; }
.btn-link:hover { text-decoration: none; color: #f0483e; }

.dx-overlay-shader { background: rgba(0, 0, 0, 0.5) !important; }

.dx-popup-title.dx-toolbar { background-color: #f0483e; }

.dx-popup-title.dx-toolbar .dx-toolbar-items-container { color: white; }

.dx-overlay-wrapper, .dx-overlay-wrapper *, .dx-overlay-wrapper :after, .dx-overlay-wrapper :before, .dx-overlay-wrapper:after, .dx-overlay-wrapper:before { color: white; }

.modal .modal-header { background-color: #f0483e; border-bottom: 1px solid #eee; }

.modal .modal-header .modal-title { color: white; }

.modal .modal-header .close .ki-close { color: white; }

@media (max-width: 2800px) and (min-width: 991.98px) { .large-screens { width: 18.5%; position: fixed; } }
@media (max-width: 1440px) and (min-width: 1199px) { .ParallaxVideo { max-height: 250px; }
  .ParallaxVideo img { max-height: 250px; } }
@media (min-width: 992px) { .content { padding: 20px 0; }
  .footer-fixed .footer { height: auto; left: 0; } }
@media screen and (max-width: 991.98px) { .login-aside { width: 100% !important; }
  .login-container, .signup-container { display: none !important; }
  .bg-reset { background-image: url(../images/bg/forgot_top.png), url(../images/bg/password_bottom.png); background-position: top 0 left 0, bottom 0 right 0; background-repeat: no-repeat, no-repeat; }
  .payment-product, .payment-card { width: 100% !important; }
  .payment-product .align-self-center { position: relative; }
  .payment-right { margin: 0 !important; border: 0 !important; margin-top: 3.5rem !important; }
  .payment-right .text-left { text-align: center !important; }
  .modal-dialog.modal-wt { width: 100% !important; }
  .gallery-item { max-width: 110px; }
  input[type='text'], input[type='number'], input[type='email'], input[type='password'], input, select, textarea, input:focus, select:focus, textarea:focus { font-size: 16px !important; } }
@media screen and (max-width: 767px) { .payment .product-list { display: block !important; }
  .payment .product-list .product-list-inner, .payment .product-list .product-install { width: 100% !important; }
  .payment .product-list .product-install { margin-top: 1.2rem; }
  #transactionHistory .card .card-header .card-title { width: 65% !important; }
  #transactionHistory .card .card-header .local-time { font-size: 11px; }
  .mobile-display { display: block; }
  .login-aside { padding: 0 !important; }
  .login-aside .d-flex.flex-column-fluid.flex-column.flex-start { flex: 1; }
  .login-signin { padding: 0 !important; }
  .login-signin form, .login-signin .form { max-width: none; width: 100%; margin: 0; padding: 5.6rem 2rem !important; }
  .bg-reset { background-size: 165px; }
  .aj--checkout-box { min-width: 350px !important; height: 215px !important; padding: 25px 30px; }
  .product-basic .product-brief, .product-basic .product-buy { width: 100% !important; }
  .large-screens .img-container { display: none; }
  .ParallaxVideo { height: auto; }
  .ParallaxVideo i, .ParallaxVideo i.far { top: 41% !important; left: 45% !important; }
  #universalPopup .dx-overlay-content.dx-popup-normal.dx-popup-draggable.dx-resizable { width: 95vw !important; } }
@media screen and (max-width: 540px) { #universalPopup .dx-overlay-content.dx-popup-normal.dx-popup-draggable.dx-resizable { width: 100vw !important; height: 60vh !important; } }
@media screen and (max-width: 480px) { .login-heading.signin { max-width: fit-content; } }
@media screen and (max-width: 355px) { .login-form-elements #ibtnReset { margin-bottom: 0.5rem; } }