:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --orange-active: #ff5e00;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --gray: #7E8299;
    --gray-light: #DBE3F4;
    --gray-dark: #3F4254;
    --dark: #181C32;
    --dark-transparent: rgba(24, 28, 50, 0.1);
    --dark-active: #131628;
    --white: #ffffff;
    --black: #000000;
    --external: #eaedf2;
    
    --primary: #417DF1;
    --primary-light: #73A2FF;
    --primary-hover: #2364E0;
    --primary-active: #1950BC;
    --success: #4bb34b;
    --success-light: #a6e1a6;
    --success-hover: #37918b;
    --success-active: #307f7a;
    --warning: #dfba49;
    --warning-hover: #d0a625;
    --warning-active: #dbb233;
    --danger: #F3565D;
    --danger-light: #ffd6d6;
    --danger-hover: #f0262f;
    --danger-active: #f13e46;
    --info: #89C4F4;
    --info-hover: #5aadf0;
    --info-active: #72b8f2;
    
    --vk: #0077FF;
    --vk-light: rgba(29, 161, 242, 0.1);
    --vk-active: #0d8ddc;
    --ok: #FF7700;
    --ok-light: #FFA046;
    --ok-active: #FF7700;
    --telegram: #2AABEE;
    --telegram-light: rgba(0, 175, 240, 0.1);
    --telegram-dark: rgb(48, 48, 73);
    --telegram-active: #0093ca;
    --facebook: #3b5998;
    --facebook-light: rgba(59, 89, 152, 0.1);
    --facebook-active: #30497c;
    --instagram: #e1306c;
    --instagram-light: rgba(225, 48, 108, 0.1);
    --instagram-active: #cd1e59;
    --viber: #7d51a0;
    --viber-light: rgba(0, 119, 181, 0.1);
    --viber-active: #005e8f;
    --whatsapp: #43c552;
    --whatsapp-light: #43c552;
    --whatsapp-active: #43c552;
    --youtube: #ff0000;
    --youtube-light: #ff0000;
    --youtube-active: #ff0000;
    --discord: #5865F2;
    --discord-light: #5865F2;
    --discord-active: #5865F2;
    --twitter: #000000;
    --twitter-light: #000000;
    --twitter-active: #000000;
}
a {
  color: var(--primary);
}
a:hover {
  color: var(--primary-active);
  text-decoration: none;
}
.position-relative {
    position: relative !important;
}
.position-absolute {
    position: absolute !important;
}
.pre-header a:hover {
  color: var(--primary);
}
.shop-currencies a.current {
  color: var(--primary);
}
.header-navigation ul > li.active > a,
.header-navigation ul > li > a:hover,
.header-navigation ul > li > a:focus,
.header-navigation ul > li.open > a,
.header-navigation ul > li.open > a:hover,
.header-navigation ul > li.open > a:focus {
  color: var(--primary);
}
.header-navigation li.menu-search i:hover {
  color: var(--primary);
}
.sidebar a:hover {
  color: var(--primary);
}
.sidebar .dropdown.open .dropdown-toggle:hover {
  color: var(--primary);
}
.sidebar-menu .dropdown-menu li > a:hover, .sidebar-menu .dropdown-menu li > a:focus, .sidebar-menu li.active > a, .sidebar-menu li.active > a:hover {
  color: var(--primary);
}
.content-page a:hover,
.sidebar2 a:hover {
  color: var(--primary);
}
.content-page .link, .content-page .link:hover, .content-page .link:active {
  color: var(--primary);
}
.page-404 .number,
.page-500 .number {
  color: var(--primary);
}
.content-form-page a:hover {
  color: var(--primary);
}
.quote-v1 a.btn-transparent:hover {
  background: var(--primary);
}
.recent-work h2 a:hover {
  color: var(--primary);
}
.recent-work .recent-work-item .fa:hover {
  color: var(--primary);
}
.our-clients h2 a:hover {
  color: var(--primary);
}
.front-team h3 strong {
  color: var(--primary);
}
.ecommerce .header-navigation ul > li.active > a,
.ecommerce .header-navigation ul > li > a:hover,
.ecommerce .header-navigation ul > li > a:focus,
.ecommerce .header-navigation ul > li.open > a,
.ecommerce .header-navigation ul > li.open > a:hover,
.ecommerce .header-navigation ul > li.open > a:focus {
  color: var(--primary);
}
.product-item h3 a:hover {
  color: var(--primary);
}
.checkout-page a:hover {
  color: var(--primary);
}


.langs-block-others:after {
  border-bottom: 8px solid var(--primary);
}
.header-navigation > ul > li.dropdown:hover > a:after {
  border-bottom: 8px solid var(--primary);
}
.header-navigation .dropdown-menu > li > a:hover,
.header-navigation .dropdown-menu > li.active > a,
.header-navigation .header-navigation-content .header-navigation-col li > a:hover,
.header-navigation .header-navigation-content .header-navigation-col li.active > a {
  background: var(--primary);
  color: var(--white);
}
.header-navigation .dropdown-menu .header-navigation-content-ext li > a:hover,
.header-navigation .dropdown-menu .header-navigation-content-ext li.active > a {
  background: var(--white);
  color: var(--primary);
}
.header-navigation .search-box:after {
  border-bottom: 8px solid var(--primary);
}
.header-navigation .search-box {
  border-top: solid 2px var(--primary);
}
.title-wrapper h1 span {
  color: var(--primary);
}
.breadcrumb > .active {
  color: var(--primary);
}
.form-info h2 em {
  color: var(--primary);
}
.nav-tabs {
  /* border-color: var(--primary); */
}
.content-search h1 em {
  color: var(--primary);
}
.recent-work .recent-work-item:hover a.recent-work-description {
  background: var(--primary);
}
.testimonials-v1 blockquote:after {
  background-color: var(--primary);
}
.testimonials-v1 span.testimonials-name {
  color: var(--primary);
}
.search-result-item h4 a {
  color: var(--primary);
}
.top-cart-content:after {
  border-bottom: 8px solid var(--primary);
}
.goods-data a,
.checkout-page .checkout-description a {
  color: var(--primary);
}
.product-page .review a {
  color: var(--primary);
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    /* background: var(--primary);
    color: var(--white); */
    cursor: pointer;
    color: var(--primary);
    border-color: transparent;
    border-bottom: 2px solid var(--primary);
    background: transparent;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: var(--primary);
    border-color: transparent;
    border-left: 2px solid var(--primary);
    background: transparent;
}

.nav-center {
    display: flex;
    justify-content: center; 
    width: 100%;
}

.list-view-sorting a {
  background: var(--white);
  color: var(--primary);
}
.tooltip { 
  font-family: "Open Sans", sans-serif;
  letter-spacing: 1px;
}
.tooltip-inner {
  /* min-width: auto; */
  /* white-space: nowrap; */
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  vertical-align: middle;
}


::-moz-selection {
  color: var(--white);
  background: var(--primary);
}
::selection {
  color: var(--white);
  background: var(--primary);
}
.steps-block ::-moz-selection {
  color: var(--primary);
  background: var(--white);
}
.steps-block ::selection {
  color: var(--primary);
  background: var(--white);
}


.fancybox__container {
    z-index: 10078;
}
.owl-buttons .owl-prev:hover {
    background-color: var(--primary);
}
.owl-buttons .owl-next:hover {
    background-color: var(--primary);
}
.steps-block-red {
  background: var(--primary);
}
.pre-footer .photo-stream img:hover {
  border-color: var(--primary);
}
.pre-footer-light dl.f-twitter dd a {
  color: var(--primary);
}
.pre-footer-light address a {
  color: var(--primary);
}
.testimonials-v1 .left-btn:hover {
    background-color: var(--primary);
}
.testimonials-v1 .right-btn:hover {
    background-color: var(--primary);
}
.blog-tags li i,
.blog-info li i {
  color: var(--primary);
}
.blog-posts .more,
.blog-sidebar .more {
  color: var(--primary);
}
.recent-news h3 a {
  color: var(--primary);
}
.blog-photo-stream li img:hover {
  border-color: var(--primary);
}
.blog-tags li a:hover {
  color: var(--white);
  background: var(--primary);
}
.blog-tags li a:hover:after {
  border-left-color: var(--primary);
}
.sidebar-categories li > a:hover,
.sidebar-categories li.active > a,
.sidebar-categories li.active:hover > a {
  color: var(--primary);
}
.blog-item blockquote {
  border-color: var(--primary);
}
.blog-item h4.media-heading span a {
    color: var(--primary);
}
.front-steps-wrapper .front-step1 {
  background: var(--primary);
}
.pricing-active {
  border: 3px solid var(--primary);
  box-shadow: 7px 7px rgba(100, 174, 217, 0.2);
}
.pricing:hover {
  border: 3px solid var(--primary);
}
.pricing:hover h4 {
  color: var(--primary);
}
.pricing-head h3 {
  background: var(--primary);
}
.pricing-head-active h4 {
  color: var(--primary);
}
.pricing-content li i {
  color: var(--primary);
}
.top-cart-block .fa-shopping-cart {
  background: var(--primary);
}
.product-item .btn:hover {
  background: var(--primary);
}
.pi-price {
  color: var(--primary);
}
.product-item .add2cart:hover {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary);
}
.goods-page-price strong,
.goods-page-total strong,
.checkout-price strong,
.checkout-total strong {
  color: var(--primary);
}
.shopping-total strong,
.checkout-total-block strong {
  color: var(--primary);
}
.compare-item strong {
  color: var(--primary);
}
.sidebar-products .price {
    color: var(--primary);
}
.price-availability-block .price strong {
  color: var(--primary);
}

.require {
  color: var(--primary);
}
.content-form-page .form-control:focus {
  border: solid 1px var(--primary);
}
.content-search input:focus {
  border: solid 1px var(--primary);
}

.btn,
.form-control {
  line-height: 1.5;
  /* border-radius: 0.35rem !important; */
}

.sweet-alert .btn,
.sweet-alert .form-control {
  border-radius: 0.35rem !important;
}

.btn-default:hover > i {
  color: var(--primary-hover);
}

.bootstrap-select .dropdown-toggle {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 34px;
  line-height: 1;
}

.bootstrap-select .dropdown-toggle .filter-option {
  min-height: 34px;
  position: relative;
  overflow: hidden;
}

.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
  height: 100%;
  position: absolute;
}

.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner .filter-option-inner-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner .filter-option-inner-inner span.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner .filter-option-inner-inner span.text small {
  margin-top: 3px;
}

.bootstrap-select .dropdown-menu li a {
  display: flex;
  align-items: center;
  white-space: break-spaces;
}

.bootstrap-select .dropdown-menu li a > span:not(.check-mark):not(.text) {
  min-width: 24px;
  display: flex;
  justify-content: center;
}

.form-group .input-group {
  height: 100%;
}

.form-group .input-group > input,
.form-group .input-group > .btn  {
  height: 100%;
}

.input-group-btn > .btn:not(.btn-sm),
.input-group > .btn:not(.btn-sm),
.btn-group:not(.bootstrap-select) > .btn:not(.btn-sm) {
  height: calc(1.5em + 1.3rem + 2px);
}

.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option {
  position: static;
  padding: 0;
  float: left;
}

.input-group-btn:not(:nth-last-child(1)):not(:first-child):not(:last-child) > .btn:not(:hover),
.input-group:not(:nth-last-child(1)):not(:first-child):not(:last-child) > .btn:not(:hover),
.btn-group:not(.bootstrap-select):nth-last-child(1) > .btn:not(:hover),
.dropdown-menu .btn[role=option] {
  border-radius: 0 !important;
}

.input-group-btn:not(:nth-last-child(1)) > .btn:not([role=option]):first-child,
.input-group:not(:nth-last-child(1)) > .btn:not([role=option]):first-child,
.btn-group:not(.bootstrap-select):nth-last-child(1) > .btn:not([role=option]):first-child,
.input-group-btn:not(:nth-last-child(1)) > .btn:hover,
.input-group:not(:nth-last-child(1)) > .btn:hover,
.btn-group:not(.bootstrap-select):nth-last-child(1) > .btn:hover {
  border-radius: 0.35rem 0 0 0.35rem !important;
}

.input-group-btn:not(:nth-last-child(1)) > .btn:not([role=option]):last-child,
.input-group:not(:nth-last-child(1)) > .btn:not([role=option]):last-child,
.btn-group:not(.bootstrap-select):nth-last-child(1) > .btn:not([role=option]):last-child,
.input-group-btn .btn-group.bootstrap-select .btn.dropdown-toggle,
.input-group-btn:not(:nth-last-child(1)) > .btn:hover,
.input-group:not(:nth-last-child(1)) > .btn:hover,
.btn-group:not(.bootstrap-select):nth-last-child(1) > .btn:hover,
.input-group-btn .btn-group.bootstrap-select .btn.dropdown-toggle:hover {
  border-radius: 0 0.35rem 0.35rem 0 !important;
}

.input-group-btn:nth-last-child(1):not(:first-child):not(:last-child)>.btn:not(.dropdown-toggle) {
  border-radius: 0.35rem !important; 
}

.bootstrap-switch.bootstrap-switch-normal {
  min-height: 32.8px;
  border-radius: 0.35rem !important;
}

.bootstrap-switch.bootstrap-switch-normal .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-normal .bootstrap-switch-handle-off {
  min-height: 32.8px;
  line-height: 22.8px !important;;
}

.bootstrap-select .dropdown-menu li a.opt {
  display: flex;
  align-items: center;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top: auto;
}

.bootstrap-switch .bootstrap-switch-handle-on, 
.bootstrap-switch .bootstrap-switch-handle-off, 
.bootstrap-switch .bootstrap-switch-label {
  line-height: 24.4px;
}

.nav-pills>li>a {
  border-radius: 0 !important;
}

.btn-primary {
  background: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover);
}

.btn-primary:active:hover, 
.btn-primary.active:hover,
.btn-primary:active {
  background: var(--primary-active);
}

.bg-blue {
  border-color: #428bca !important;
  background-image: none !important;
  background-color: #428bca !important;
}

.text-success {
  color: var(--success);
}

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

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, 
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background: var(--primary);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, 
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background: var(--primary);  
}

.window .brow .btn {
  text-overflow: ellipsis;
}

.window .btn-primary, .brow .btn-primary{
  color: var(--white);
  background-color: #428bca;
  border-color: #357ebd;
}

.header-navigation .dropdown-menu > li:first-child {
    border-top: 2px solid var(--primary);
}
.front-steps-wrapper .front-step1:after {
    border-left: 15px solid #fc832c;
}

.del-goods:hover,
.add-goods:hover {
  background-color: #fc832c;
}

.sidebar a:hover > .fa-angle-down {
  background-position: -22px 0;
}
.sidebar .collapsed:hover > .fa-angle-down {
  background-position: -22px -37px;
}

.top-cart-content {
  border-top: solid 2px #fc832c;
}

.front-skills .progress-bar {
  background: #fc832c;
}

.service-box-v1:hover {
  background: #fc832c;
}

.header .mobi-toggler:hover {
  background-color: #fc832c;
  border-color: #fc832c;
}

@media (max-width: 1024px) {
  .header .header-navigation li > a:hover,
  .header .header-navigation li.active > a,
  .header .header-navigation li.open > a:hover {
    color: #fc832c !important;
  }
}

.faq-tabbable {
  border-left: solid 2px #fc832c;
}
.faq-tabbable li:hover a,
.faq-tabbable li.active a{
  background: #fc832c;
}
.faq-tabbable li.active:after {
  border-left: 6px solid #fc832c;
}

.mix-filter li:hover, .mix-filter li.active {
    background: #fc832c;
    color: var(--white);
}
.mix-grid .mix .mix-details {
  background: #fc832c;
}
.mix-grid .mix a.mix-link,
.mix-grid .mix a.mix-preview {
  background: #1ab8db;
}
.langs-block-others {
  border-top: solid 2px #fc832c;
}

.brands .owl-buttons .owl-prev:hover {
    background-position: 18px -325px;
}
.brands .owl-buttons .owl-next:hover {
    background-position: -249px -325px;
}
.header-navigation ul > li.active > a/*,
.ecommerce .header-navigation ul > li.active > a*/ {
  border-bottom: 2px solid #fc832c;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
  background-color: var(--primary);
}

.page-footer-inner a {
  color: #d8d8d8;
}

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

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

.overflow-x {
    overflow-x: auto !important;
}

.overflow-y {
    overflow-y: auto !important;
}

.portlet .table-scrollable {
    border: 0 !important;
    margin: 0 !important;
}

.portlet .dataTables_pager {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.portlet .dataTables_pager .dataTables_length {
    margin: 0.5rem 0;
    margin-right: 1rem;
    display: inline-block;
}

.portlet .table.table-head-custom thead th:not(div) {
    font-weight: 500;
    font-size: 13px;
    color: #ababab !important;
    text-transform: uppercase;
    letter-spacing: 0.1rem;    
}

.portlet .table.table-head-custom thead th.sorting:not(div) {
    cursor: pointer;    
}

.portlet .table.table-head-custom thead th > div {
    font-weight: 100;
    color: var(--black);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.2rem;
}

.table > thead > tr > td.active, .table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th {
    background-color: #EBEDF3;
    border-left-color: #EBEDF3;
    border-right-color: #EBEDF3;
    color: #3F4254;
}

.input-group.input-group-solid .form-control {
    padding-left: 0 !important;
}

.input-group.input-group-solid .form-control {
    border: 0;
    background-color: transparent;
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.input-group.input-group-solid .input-group-addon {
    background-color: transparent;
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
}

:root {
  --form-control-color: var(--white);
  --form-control-disabled: #959495;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #EBEDF3;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.30em;
  height: 1.30em;
  border: 0.15em solid transparent;
  border-radius: 0.42rem !important;
  display: grid;
  place-content: center;
}

[class^="alert-"] input[type="checkbox"] {
    background-color: var(--white);
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
}

input[type="checkbox"]:focus {
  outline: 0;
  outline-offset: 0;
}

input[type="checkbox"]:checked {
  background-color: var(--primary);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.fa-lg, .icon-lg {
  font-size: 18px !important;
}

.page-content-wrapper .page-content {
    background-color: #f1f8ff !important;
}

.portlet.light.bordered {
    -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
    border: 1px solid rgb(0 0 0 / 5%) !important;
    border-left: 0 !important;
    border-radius: 0.42rem !important;
}

.portlet .portlet-body {
    padding: 0 25px 25px 25px;
}

.portlet .portlet-body .desc {
    text-overflow: ellipsis;
    overflow: hidden;
    -ms-line-clamp: 2;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
}

.bgi {
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgi-gradient {
    background: linear-gradient(to top, var(--white) 0%, 55%, transparent 100%);
}

.h-150 {
    height: 150px !important;
}

.icon-ss {
  font-size: 0.5rem !important; }

.icon-xs {
  font-size: 0.65rem !important; }

.icon-sm {
  font-size: 0.75rem !important; }

.icon-nm {
  font-size: 0.9rem !important; }

.icon-ms {
  font-size: 1.15rem !important; }

.icon-md {
  font-size: 1.25rem !important; }

.icon-lg {
  font-size: 1.5rem !important; }

.icon-xl {
  font-size: 1.75rem !important; }

.icon-xxl {
  font-size: 2.25rem !important; }

.icon-1x {
  font-size: 1rem !important; }

.icon-2x {
  font-size: 2rem !important; }

.icon-3x {
  font-size: 3rem !important; }

.icon-4x {
  font-size: 4rem !important; }

.icon-5x {
  font-size: 5rem !important; }

.icon-6x {
  font-size: 6rem !important; }

.icon-7x {
  font-size: 7rem !important; }

.icon-8x {
  font-size: 8rem !important; }

.icon-9x {
  font-size: 9rem !important; }

.icon-10x {
  font-size: 10rem !important; }
  
.sweet-alert-content {
  z-index: 100051 !important;
}

.sweet-overlay {
  z-index: 100050 !important;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 2rem 1.25rem;
    color: inherit;
}

.quick-nav {
    position: fixed;
    z-index: 101;
    top: 50%;
    right: 10px;
	transform: translateY(-50%);
    pointer-events: none; }
.quick-nav .quick-nav-bg {
    /* this is the stretching navigation background */
    position: absolute;
    z-index: 10102;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px !important;
    background: #262f3c;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    webkit-transition: height .2s, box-shadow .2s;
    -moz-transition: height .2s, box-shadow .2s;
    -ms-transition: height .2s, box-shadow .2s;
    -o-transition: height .2s, box-shadow .2s;
    transition: height .2s, box-shadow .2s; }
.quick-nav.nav-is-visible {
    pointer-events: auto; }
.quick-nav.nav-is-visible .quick-nav-bg {
    height: 100%;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); }

.quick-nav-trigger {
    position: absolute;
    z-index: 10103;
    top: 0;
    right: 0;
    height: 60px;
    width: 60px;
    border-radius: 50% !important;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    pointer-events: auto; }
.quick-nav-trigger span,
.quick-nav-trigger span::after,
.quick-nav-trigger span::before {
    /* this is the hamburger icon */
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #ffffff; }
.quick-nav-trigger span {
    /* middle line of the hamburger icon */
    webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); }
.quick-nav-trigger span::after,
.quick-nav-trigger span::before {
    /* top and bottom lines of the hamburger icon */
    content: '';
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s; }
.quick-nav-trigger span::before {
    webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px); }
.quick-nav-trigger span::after {
    webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px); }
.no-touch .quick-nav-trigger:hover ~ .quick-nav-bg {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); }
.nav-is-visible .quick-nav-trigger span {
    background-color: transparent; }
.nav-is-visible .quick-nav-trigger span::before {
    webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }
.nav-is-visible .quick-nav-trigger span::after {
    webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); }

.quick-nav ul {
    position: relative;
    z-index: 10103;
    padding: 5px 0;
    margin: 0;
    visibility: hidden;
    webkit-transition: visibility 0.3s;
    -moz-transition: visibility 0.3s;
    -ms-transition: visibility 0.3s;
    -o-transition: visibility 0.3s;
    transition: visibility 0.3s;
    text-align: right;
    list-style: none; }
.quick-nav ul > li a span {
    display: none;
    padding-right: 30px;
}
.quick-nav ul > li a:hover span {
    display: block;
}
.quick-nav ul > li a {
    position: relative;
    display: flex;
    height: 50px;
    width: 60px;
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -ms-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s; }
.quick-nav ul > li.divider {
    border-bottom: 1px solid var(--white);
    margin: 5px 0;
}
.quick-nav ul > li a:hover {
    text-decoration: none; }
.quick-nav ul > li a:hover > span {
    text-decoration: none; }
.quick-nav ul > li a > i {
    right: 0;
    color: var(--white);}
.quick-nav ul > li a::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 16px;
    top: 50%;
    right: 60px;
    webkit-transform: translateX(3px) translateY(-50%) scaleY(0);
    -moz-transform: translateX(3px) translateY(-50%) scaleY(0);
    -ms-transform: translateX(3px) translateY(-50%) scaleY(0);
    -o-transform: translateX(3px) translateY(-50%) scaleY(0);
    transform: translateX(3px) translateY(-50%) scaleY(0);
    background-color: var(--primary); }
.quick-nav ul > li a#elemSave::before {
    background-color: var(--success); }
.quick-nav ul > li a#elemSelRemove::before {
    background-color: var(--danger); }
.quick-nav ul > li a[data-block-type=operation]::before {
    background-color: #c4c4ff; }
.quick-nav ul > li a[data-block-type=condition]::before {
    background-color: #ffd96e; }   
.quick-nav ul > li a[data-block-type=vrm]::before {
    background-color: #e6ffa0; } 	
.quick-nav ul > li span {
    /* navigation item labels */
    color: gray;
    font-weight: 400;
    display: block;
    opacity: 0;
    webkit-transform: translateX(-25px);
    -moz-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    -o-transform: translateX(-25px);
    transform: translateX(-25px); }

.quick-nav.nav-is-visible ul {
    visibility: visible; }
.quick-nav.nav-is-visible ul a::after {
    /* navigation item icons */
    webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    -webkit-animation: scaleIn 0.15s backwards;
    -o-animation: scaleIn 0.15s backwards;
    animation: scaleIn 0.15s backwards;
    webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s; }
.quick-nav.nav-is-visible ul a:hover::after {
    opacity: 1; }
.quick-nav.nav-is-visible ul a:hover::before {
    webkit-transform: translateX(3px) translateY(-50%) scaleY(2);
    -moz-transform: translateX(3px) translateY(-50%) scaleY(2);
    -ms-transform: translateX(3px) translateY(-50%) scaleY(2);
    -o-transform: translateX(3px) translateY(-50%) scaleY(2);
    transform: translateX(3px) translateY(-50%) scaleY(2);
    webkit-transition: transform 0.15s 0.3s;
    -moz-transition: transform 0.15s 0.3s;
    -ms-transition: transform 0.15s 0.3s;
    -o-transition: transform 0.15s 0.3s;
    transition: transform 0.15s 0.3s; }
.quick-nav.nav-is-visible ul a:hover > span {
    color: black;
    background: rgb(255 255 255 / 25%);
    padding: 0 12px;
    margin-right: 14px;
    border-radius: 0.65rem 0 0 0.65rem; }
.quick-nav.nav-is-visible ul a:hover > i {
    color: var(--primary); }
.quick-nav.nav-is-visible ul a#elemSave:hover > i {
    color: var(--success); }
.quick-nav.nav-is-visible ul a#elemSelRemove:hover > i {
    color: var(--danger); }
.quick-nav.nav-is-visible ul a[data-block-type=operation]:hover > i {
    color: #c4c4ff; }
.quick-nav.nav-is-visible ul a[data-block-type=condition]:hover > i {
    color: #ffd96e; }
.quick-nav.nav-is-visible ul a[data-block-type=vrm]:hover > i {
    color: #e6ffa0; }
.quick-nav.nav-is-visible ul span {
    opacity: 1;
    webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: slideIn 0.15s backwards;
    -o-animation: slideIn 0.15s backwards;
    animation: slideIn 0.15s backwards;
    webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s; }
.no-touch .quick-nav.nav-is-visible ul a:hover::after {
    opacity: 1; }
.no-touch .quick-nav.nav-is-visible ul a:hover span {
    webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -o-transform: translateX(-5px);
    transform: translateX(-5px); }

.quick-nav-overlay {
    display: none;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 10101;
    background: transparent; }

.quick-nav.nav-is-visible + .quick-nav-overlay {
    background: rgba(0, 0, 0, 0.8);
    display: block;
    -webkit-transition: background .7s ease-out;
    -moz-transition: background .7s ease-out;
    -o-transition: background .7s ease-out;
    transition: background .7s ease-out; }

.badge-orange {
    background-color: var(--orange);
    background-image: none;
}

.need-save {
    color: #48ff48 !important;
}

.datetimepicker .active {
    background-color: var(--primary) !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

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

.media-body {
    width: auto;
}

@media (max-width: 991px) {
    /* 991px */
    .quick-nav {
        top: 120px;
        margin-top: 0; } }

/* .modal :not(.lowercase):first-letter, */
/* .page-header :not(.lowercase):first-letter, */
/* .page-sidebar :not(.lowercase):first-letter, */
/* .page-footer :not(.lowercase):first-letter, */
/* .page-container .dataTable :not(.lowercase):first-letter, */
/* .page-container .page-title :not(.lowercase):first-letter { */
  /* text-transform: uppercase; */
/* } */

/* .lowercase, */
/* .lowercase:first-letter { */
	/* text-transform: lowercase; */
/* } */