@charset "utf-8";
/* CSS Document */

.wl_file_upload {
}
.wl_file_upload .fileinput-button {
	position: relative;
}

.wl_file_upload .btn {
	display: inline-block;
	/* padding: 6px 12px; */
	padding: 3px 0;
	margin-bottom: 0;

	font-weight: normal;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	max-width: 100%;
	width: 100%;
}

.wl_file_upload .btn .label {
	background-color: #3b72ad;
	padding: 10px 0;
	color: #fff;
	border-radius: 5px;
	width: 100%;
	display: block;
	font-size: 14px;
}

.wl_file_upload .fileinput-button input {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	cursor: pointer;
}

.wl_file_upload .progress {
	height: 16px;
	overflow: hidden;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 3px 9px rgb(0 0 0 / 19%);
	background-color: #f5f5f5;
	width: 100%;
}

.wl_file_upload .progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	background-color: #7bbb49;
	color: #ffffff;
	font-family: Verdana, Geneva, sans-serif;
	text-align: left;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-webkit-transition: width 0.6s ease;
	transition: width 0.6s ease;
}

.wl_file_upload .upload_success {
	width: auto;
}

.wl_file_upload .upload_success {
	width: auto;
}

.wl_file_upload .uploaded_image {
	width: 100%;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat;
	padding-top: 83%;
	position: relative;
}

.holder_uploaded_img {
	position: relative;
}

.holder_uploaded_img video {
	width: 100%;
}

.holder_uploaded_document {
	text-align: center;
	position: relative;
}

.holder_uploaded_document .document_icon {
	font-size: 6em;
}

.wl_file_upload .holder_uploaded_img .uploaded_image_img {
	width: 100%;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat;

	position: relative;
}

.wl_file_upload .holder_uploaded_img .times {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #3b72ad;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.wl_file_upload .holder_uploaded_img .fa {
	color: #fff;
	font-size: 25px;
	display: inline-block;
	top: 2px;
	position: absolute;
	right: 6px;
}

.wl_file_upload .holder_uploaded_document .times {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #3b72ad;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.wl_file_upload .holder_uploaded_document .fa-times {
	color: #fff;
	font-size: 25px;
	display: inline-block;
	top: 2px;
	position: absolute;
	right: 6px;
}

.wl_file_upload .holder_uploaded_document .fa-file {
	font-size: 6em;
}

.wl_file_upload .holder_uploaded_document .file_name {
	margin-bottom: 5px;
}

.wl_file_upload .uploaded_image .times {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #3b72ad;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.wl_file_upload .uploaded_image .fa {
	color: #fff;
	font-size: 25px;
	display: inline-block;
	top: 2px;
	position: absolute;
	right: 6px;
}


/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

/* CSS Document */
body {
  margin: 0px;
  font-size: 12px;
  font-family: Verdana, Geneva, sans-serif; }

a {
  text-decoration: none;
  color: #2C7BDC; }

a:hover {
  text-decoration: underline;
  color: #0099CC; }

/* ================================ LOADER ===================================*/
#loader {
  display: none;
  position: fixed;
  z-index: 99999;
  background: url(../images/loader/bg_transparent.png); }

#loader_position {
  background: #fff;
  width: 48px;
  text-align: center;
  margin: 0 auto;
  height: 40px;
  padding: 8px 0 0 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

/* ================================ WEBSITE TOP MESSAGE ===================================*/
.website_system_message {
  background-size: 40px 40px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  width: 100%;
  border: 1px solid;
  color: #fff;
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  _position: absolute;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  animation: animate-bg 5s linear infinite;
  text-align: center;
  z-index: 999999999999999999 !important;
  font-size: 20px;
  font-family: Calibri, Arial, Helvetica, Sans-serif;
  font-weight: bold;
  display: none; }

.website_system_message.info {
  background-color: #4ea5cd;
  border-color: #3b8eb5; }

.website_system_message.error {
  background-color: #de4343;
  border-color: #c43d3d; }

.website_system_message.warning {
  background-color: #eaaf51;
  border-color: #d99a36; }

.website_system_message.success {
  background-color: #61b832;
  border-color: #55a12c; }

.clear {
  clear: both; }

.none {
  display: none; }

.relative {
  position: relative; }

a {
  text-decoration: none !important; }

.desktop {
  display: block; }
  @media screen and (max-width: 768px) {
    .desktop {
      display: none !important; } }

.mobile {
  display: none !important; }
  @media screen and (max-width: 768px) {
    .mobile {
      display: block !important; } }

.development_panel .button {
  background-color: #304061;
  color: #fff;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  display: inline-block;
  border: 0;
  font-size: 12px;
  cursor: pointer;
  outline: 0; }
  .development_panel .button:hover {
    background-color: #707090;
    color: #fff; }
  .development_panel .button.green {
    background-color: #7bb705; }
.development_panel .wl_file_upload {
  display: inline-block; }
  .development_panel .wl_file_upload .btn {
    height: 40px;
    padding: 0px;
    cursor: pointer; }
    .development_panel .wl_file_upload .btn .label {
      cursor: pointer;
      padding: 10px 20px;
      font-size: 12px; }
.development_panel .form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999999999; }
  .development_panel .form .form_bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000000c7;
    z-index: 9999999999999; }
  .development_panel .form .form_holder {
    position: absolute;
    top: 10vh;
    left: 25vw;
    width: 50vw;
    background-color: #304061;
    background-image: url(../images/xenon_development/form.png);
    border: 1px solid #000;
    box-shadow: 3px 3px 4px 3px #02020273;
    border-radius: 10px;
    padding: 30px;
    z-index: 99999999999999; }
    .development_panel .form .form_holder .header {
      margin-bottom: 30px;
      position: initial !important; }
      .development_panel .form .form_holder .header .form_title {
        float: left;
        font-size: 18px;
        font-weight: bold;
        color: #f89500; }
      .development_panel .form .form_holder .header .close_btn {
        float: right; }
        .development_panel .form .form_holder .header .close_btn i {
          font-size: 30px;
          cursor: pointer; }
          .development_panel .form .form_holder .header .close_btn i:hover {
            color: #000; }
    .development_panel .form .form_holder .body {
      width: 100%; }
      .development_panel .form .form_holder .body label {
        display: block;
        font-size: 14px;
        font-weight: bold; }
      .development_panel .form .form_holder .body select {
        width: 100%;
        border: 1px solid #47475c;
        padding: 4px;
        font-size: 12px;
        border-radius: 5px; }
      .development_panel .form .form_holder .body input {
        width: 100%;
        border: 1px solid #47475c;
        padding: 4px;
        font-size: 12px;
        border-radius: 5px; }
      .development_panel .form .form_holder .body textarea {
        width: 100%;
        border: 1px solid #47475c;
        padding: 4px;
        font-size: 12px;
        border-radius: 5px; }
    .development_panel .form .form_holder .footer {
      margin-top: 10px; }
      .development_panel .form .form_holder .footer .col-6 {
        padding: 0 !important; }
      .development_panel .form .form_holder .footer button.red {
        background-color: #bd0b0b;
        color: #fff; }
        .development_panel .form .form_holder .footer button.red:hover {
          background-color: red;
          color: #fff; }
      .development_panel .form .form_holder .footer button.orange {
        background-color: #ff7600;
        color: #fff; }
        .development_panel .form .form_holder .footer button.orange:hover {
          background-color: orange;
          color: #fff; }
.development_panel.active .content {
  right: 0px; }
.development_panel.active .start_btn {
  background-color: #000; }
  .development_panel.active .start_btn .fa-cogs {
    display: none; }
  .development_panel.active .start_btn .fa-arrow-right {
    display: block; }
.development_panel .start_btn {
  position: fixed;
  top: 10px;
  right: 0;
  padding: 10px;
  background-color: #304061;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 9999999999; }
  .development_panel .start_btn:hover {
    background-color: #000; }
  .development_panel .start_btn i {
    color: #fff;
    font-size: 20px; }
    .development_panel .start_btn i.fa-cogs {
      display: block; }
    .development_panel .start_btn i.fa-arrow-right {
      display: none; }
.development_panel .content {
  width: 50vw;
  position: fixed;
  top: 0px;
  right: -50vw;
  height: 100vh;
  background-color: #0c121e;
  background-image: url(../images/xenon_development/main_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 999999999;
  transition: all 0.5s; }
  .development_panel .content .title {
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
    background: url(../../public/images/xenon_development/astronaut.png) center no-repeat;
    background-size: cover;
    text-shadow: 3px 3px 6px #000000; }
  .development_panel .content .content_body {
    color: #fff;
    position: relative;
    color: #000;
    padding-top: 10px;
    padding-left: 10px; }
    .development_panel .content .content_body .header {
      position: absolute;
      top: 20px;
      right: -150px;
      z-index: 9999999999999;
      padding: 0px; }
      .development_panel .content .content_body .header li {
        width: 200px;
        cursor: pointer;
        list-style: none;
        display: block;
        padding: 5px 10px;
        background-color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        margin-bottom: 5px;
        color: #0c121e;
        border: 1px solid #fff;
        transition: all 0.2s; }
        .development_panel .content .content_body .header li i {
          font-size: 30px;
          display: inline-block;
          padding-right: 12px; }
        .development_panel .content .content_body .header li:hover {
          margin-left: -100px;
          background-color: #0c121e;
          color: #fff; }
        .development_panel .content .content_body .header li.active {
          background-color: #0c121e;
          color: #fff; }
        .development_panel .content .content_body .header li.no_page {
          border: 0;
          background-color: transparent;
          cursor: default; }
    .development_panel .content .content_body .sub_header {
      padding: 0px; }
      .development_panel .content .content_body .sub_header li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        padding: 5px 10px; }
        .development_panel .content .content_body .sub_header li.active {
          border-bottom: 1px solid #fff; }
    .development_panel .content .content_body .development_pages {
      background-color: #0000006b;
      border: 1px solid #ffffff57;
      height: calc(100vh - 110px);
      width: 93%;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      overflow-x: hidden; }
      .development_panel .content .content_body .development_pages textarea {
        width: 100%; }
      .development_panel .content .content_body .development_pages select {
        width: 100%;
        border: 1px solid #000;
        padding: 3px 5px;
        margin-bottom: 5px; }
      .development_panel .content .content_body .development_pages .sub_items_content {
        display: none; }
        .development_panel .content .content_body .development_pages .sub_items_content.active {
          display: block; }
      .development_panel .content .content_body .development_pages .items {
        display: none; }
        .development_panel .content .content_body .development_pages .items table.master {
          width: 100%; }
          .development_panel .content .content_body .development_pages .items table.master tr td {
            padding: 5px; }
            .development_panel .content .content_body .development_pages .items table.master tr td b {
              color: #f89500; }
            .development_panel .content .content_body .development_pages .items table.master tr td a {
              color: #f89500; }
              .development_panel .content .content_body .development_pages .items table.master tr td a.external_link {
                text-decoration: underline !important; }
            .development_panel .content .content_body .development_pages .items table.master tr td.actions a {
              background-color: #fff;
              padding: 3px 5px;
              border-radius: 2px;
              color: #51516f; }
              .development_panel .content .content_body .development_pages .items table.master tr td.actions a:hover {
                background-color: #f89500;
                color: #fff; }
          .development_panel .content .content_body .development_pages .items table.master .file_name {
            border-bottom: 1px solid #fff; }
        .development_panel .content .content_body .development_pages .items table.listing {
          width: 100%; }
          .development_panel .content .content_body .development_pages .items table.listing .actions {
            width: 150px; }
          .development_panel .content .content_body .development_pages .items table.listing .order_number {
            width: 30px; }
          .development_panel .content .content_body .development_pages .items table.listing tr th {
            border-bottom: 1px solid #fff;
            border-left: 1px solid #fff;
            padding: 5px;
            font-weight: bold;
            background-color: #fff;
            color: #000; }
          .development_panel .content .content_body .development_pages .items table.listing tr td {
            border-bottom: 1px solid #fff;
            border-left: 1px solid #fff;
            padding: 5px; }
            .development_panel .content .content_body .development_pages .items table.listing tr td:last-child {
              border-right: 1px solid #fff; }
            .development_panel .content .content_body .development_pages .items table.listing tr td a {
              background-color: #fff;
              color: #000;
              width: 30px;
              text-align: center;
              display: inline-block;
              border-radius: 5px;
              padding: 5px 0;
              font-size: 14px; }
              .development_panel .content .content_body .development_pages .items table.listing tr td a:hover {
                background-color: #f89500;
                color: #fff; }
            .development_panel .content .content_body .development_pages .items table.listing tr td span.sync_tag {
              padding: 2px 10px;
              border-radius: 5px;
              display: block;
              width: 60px;
              text-align: center; }
              .development_panel .content .content_body .development_pages .items table.listing tr td span.sync_tag.success {
                background-color: green; }
              .development_panel .content .content_body .development_pages .items table.listing tr td span.sync_tag.error {
                background-color: red; }
        .development_panel .content .content_body .development_pages .items.active {
          display: block; }
        .development_panel .content .content_body .development_pages .items.home .welcome {
          text-align: center;
          font-size: 45px;
          margin-top: 50px; }
      .development_panel .content .content_body .development_pages .expand_item {
        border: 1px solid #fff;
        background-color: #ffffff75;
        color: #fff;
        margin-bottom: 5px;
        cursor: pointer; }
        .development_panel .content .content_body .development_pages .expand_item.active .bar {
          background-color: #f89500;
          color: #fff; }
        .development_panel .content .content_body .development_pages .expand_item.active .bar_content {
          display: block; }
        .development_panel .content .content_body .development_pages .expand_item .bar {
          padding: 5px 10px; }
        .development_panel .content .content_body .development_pages .expand_item .bar_content {
          display: none;
          padding: 10px; }
  .development_panel .content .no_results {
    text-align: center;
    border: 1px dashed #fff;
    padding: 10px;
    background-color: #9000006b; }

.structure_editor {
  padding: 15px; }
  .structure_editor .add_section {
    border: 1px dashed #fff;
    cursor: pointer;
    text-align: center;
    padding: 10px 0; }
    .structure_editor .add_section:hover {
      background-color: #ffffff47; }

.xenon_page.show_structure .container {
  border: 1px dashed #d82a2a; }
.xenon_page.show_structure .row {
  border: 1px dashed #638edd;
  margin: 1px -14px;
  padding: 1px; }
  .xenon_page.show_structure .row .col, .xenon_page.show_structure .row .col-1, .xenon_page.show_structure .row .col-10, .xenon_page.show_structure .row .col-11, .xenon_page.show_structure .row .col-12, .xenon_page.show_structure .row .col-2, .xenon_page.show_structure .row .col-3, .xenon_page.show_structure .row .col-4, .xenon_page.show_structure .row .col-5, .xenon_page.show_structure .row .col-6, .xenon_page.show_structure .row .col-7, .xenon_page.show_structure .row .col-8, .xenon_page.show_structure .row .col-9, .xenon_page.show_structure .row .col-auto, .xenon_page.show_structure .row .col-lg, .xenon_page.show_structure .row .col-lg-1, .xenon_page.show_structure .row .col-lg-10, .xenon_page.show_structure .row .col-lg-11, .xenon_page.show_structure .row .col-lg-12, .xenon_page.show_structure .row .col-lg-2, .xenon_page.show_structure .row .col-lg-3, .xenon_page.show_structure .row .col-lg-4, .xenon_page.show_structure .row .col-lg-5, .xenon_page.show_structure .row .col-lg-6, .xenon_page.show_structure .row .col-lg-7, .xenon_page.show_structure .row .col-lg-8, .xenon_page.show_structure .row .col-lg-9, .xenon_page.show_structure .row .col-lg-auto, .xenon_page.show_structure .row .col-md, .xenon_page.show_structure .row .col-md-1, .xenon_page.show_structure .row .col-md-10, .xenon_page.show_structure .row .col-md-11, .xenon_page.show_structure .row .col-md-12, .xenon_page.show_structure .row .col-md-2, .xenon_page.show_structure .row .col-md-3, .xenon_page.show_structure .row .col-md-4, .xenon_page.show_structure .row .col-md-5, .xenon_page.show_structure .row .col-md-6, .xenon_page.show_structure .row .col-md-7, .xenon_page.show_structure .row .col-md-8, .xenon_page.show_structure .row .col-md-9, .xenon_page.show_structure .row .col-md-auto, .xenon_page.show_structure .row .col-sm, .xenon_page.show_structure .row .col-sm-1, .xenon_page.show_structure .row .col-sm-10, .xenon_page.show_structure .row .col-sm-11, .xenon_page.show_structure .row .col-sm-12, .xenon_page.show_structure .row .col-sm-2, .xenon_page.show_structure .row .col-sm-3, .xenon_page.show_structure .row .col-sm-4, .xenon_page.show_structure .row .col-sm-5, .xenon_page.show_structure .row .col-sm-6, .xenon_page.show_structure .row .col-sm-7, .xenon_page.show_structure .row .col-sm-8, .xenon_page.show_structure .row .col-sm-9, .xenon_page.show_structure .row .col-sm-auto, .xenon_page.show_structure .row .col-xl, .xenon_page.show_structure .row .col-xl-1, .xenon_page.show_structure .row .col-xl-10, .xenon_page.show_structure .row .col-xl-11, .xenon_page.show_structure .row .col-xl-12, .xenon_page.show_structure .row .col-xl-2, .xenon_page.show_structure .row .col-xl-3, .xenon_page.show_structure .row .col-xl-4, .xenon_page.show_structure .row .col-xl-5, .xenon_page.show_structure .row .col-xl-6, .xenon_page.show_structure .row .col-xl-7, .xenon_page.show_structure .row .col-xl-8, .xenon_page.show_structure .row .col-xl-9, .xenon_page.show_structure .row .col-xl-auto {
    border: 1px dashed #00bd89; }

.show_structure_holder {
  position: relative;
  height: 24px; }
  .show_structure_holder .slide_option {
    position: absolute;
    left: 0;
    top: 0.25em;
    border-radius: 12px;
    width: 44px;
    height: 24px;
    cursor: pointer;
    background: #d8d8d8; }
    .show_structure_holder .slide_option.active {
      background: -webkit-gradient(linear, right top, left top, from(#fba606), to(#f66d02));
      background: linear-gradient(270deg, #fba606, #f66d02); }
      .show_structure_holder .slide_option.active:before {
        left: 50%; }
    .show_structure_holder .slide_option:before {
      content: "";
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: #fff;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      z-index: 2; }

.development_pages .images .show_images_holder .folder_content {
  border: 1px solid #fff;
  padding: 5px;
  margin-bottom: 10px; }
  .development_pages .images .show_images_holder .folder_content:hover {
    background-color: #ffffff40; }
  .development_pages .images .show_images_holder .folder_content .folder {
    text-align: center; }
    .development_pages .images .show_images_holder .folder_content .folder i {
      font-size: 85px; }
  .development_pages .images .show_images_holder .folder_content .image {
    text-align: center; }
    .development_pages .images .show_images_holder .folder_content .image img {
      max-width: 100%;
      max-height: 100px; }
  .development_pages .images .show_images_holder .folder_content .folder_item {
    height: 100px;
    cursor: pointer; }
  .development_pages .images .show_images_holder .folder_content .name {
    text-align: center; }
.development_pages .breadcrumps {
  margin: 10px 0px; }
  .development_pages .breadcrumps a {
    color: #fff;
    text-decoration: underline !important; }

.form.selected_image .preview_holder {
  text-align: center;
  border: 1px solid #fff;
  padding: 5px; }
  .form.selected_image .preview_holder .preview {
    max-width: 100%;
    max-height: 400px; }

.dev_code_panel {
  position: fixed;
  z-index: 99999999;
  left: 0px;
  bottom: -30px;
  width: 15%;
  transition: all 0.5s; }
  .dev_code_panel.mode_code {
    bottom: 0px; }
  .dev_code_panel:hover {
    bottom: 0px; }
  .dev_code_panel .menu {
    margin-top: 40px; }
    .dev_code_panel .menu .option {
      float: left;
      cursor: pointer; }
      .dev_code_panel .menu .option.active .op {
        background-color: #da9d2d; }
      .dev_code_panel .menu .option:hover .op {
        background-color: #da9d2d; }
      .dev_code_panel .menu .option .op {
        height: 20px;
        float: left;
        background-color: #000; }
        .dev_code_panel .menu .option .op.sl {
          border-top-left-radius: 10px;
          width: 10px; }
        .dev_code_panel .menu .option .op.name {
          color: #fff;
          padding: 0px 20px; }
        .dev_code_panel .menu .option .op.sr {
          border-top-right-radius: 10px;
          width: 10px; }

.code_panel {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 999999;
  background-color: #000;
  display: none; }
  .code_panel.active {
    display: block; }
  .code_panel .panel_menu {
    background-color: #ebedef;
    width: 15%;
    float: left;
    height: 100vh;
    color: #808080;
    padding: 20px; }
    .code_panel .panel_menu .line {
      border-bottom: 1px solid #808080;
      margin-bottom: 20px; }
    .code_panel .panel_menu .name {
      font-weight: bold;
      margin-bottom: 10px; }
    .code_panel .panel_menu .options {
      margin-bottom: 20px; }
      .code_panel .panel_menu .options .folder {
        margin-bottom: 5px;
        cursor: pointer; }
        .code_panel .panel_menu .options .folder.inner {
          padding-left: 15px; }
        .code_panel .panel_menu .options .folder.inner-bigger {
          padding-left: 25px; }
        .code_panel .panel_menu .options .folder .title {
          margin-bottom: 3px; }
  .code_panel .code_holder {
    background-color: #272822;
    width: 85%;
    float: left;
    height: 100vh; }
    .code_panel .code_holder .file_menu {
      width: 100%;
      background-color: #6c6d69;
      padding-top: 5px;
      padding-left: 10px; }
      .code_panel .code_holder .file_menu a {
        background-color: #41423d;
        display: inline-block;
        padding: 5px 20px 5px 10px;
        color: #989898;
        position: relative;
        min-width: 100px;
        margin: 0px 5px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        font-size: 10px;
        position: relative; }
        .code_panel .code_holder .file_menu a .fa-times {
          color: #989898;
          display: block;
          float: right;
          border-radius: 50%;
          margin-right: -15px;
          z-index: 9999999;
          position: absolute;
          top: 8px;
          right: 20px; }
        .code_panel .code_holder .file_menu a.active {
          color: #fff;
          background-color: #272822; }
          .code_panel .code_holder .file_menu a.active:before {
            border-color: transparent #272822 transparent transparent;
            z-index: 9999; }
          .code_panel .code_holder .file_menu a.active:after {
            border-color: transparent transparent transparent #272822;
            z-index: 9999; }
        .code_panel .code_holder .file_menu a:before {
          content: "\A";
          border-style: solid;
          border-width: 18.5px 11px 0px 2px;
          border-color: transparent #41423d transparent transparent;
          position: absolute;
          left: -13px;
          top: 6px; }
        .code_panel .code_holder .file_menu a:after {
          content: "\A";
          border-style: solid;
          border-width: 18.5px 2px 0px 11px;
          border-color: transparent transparent transparent #41423d;
          position: absolute;
          right: -13px;
          top: 6px; }

* {
  padding: 0;
  margin: 0; }

html {
  font-size: 13px; }

@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Light.eot");
  src: url("../fonts/Montserrat/Montserrat-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Light.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Light.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Light.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Light.svg#Montserrat-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-ExtraLightItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-ExtraLightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-ExtraLightItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-ExtraLightItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-ExtraLightItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-ExtraLightItalic.svg#Montserrat-ExtraLightItalic") format("svg");
  font-weight: 200;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Italic.eot");
  src: url("../fonts/Montserrat/Montserrat-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Italic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Italic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Italic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Italic.svg#Montserrat-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-ExtraLight.eot");
  src: url("../fonts/Montserrat/Montserrat-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-ExtraLight.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-ExtraLight.woff") format("woff"), url("../fonts/Montserrat/Montserrat-ExtraLight.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-ExtraLight.svg#Montserrat-ExtraLight") format("svg");
  font-weight: 200;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-ThinItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-ThinItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-ThinItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-ThinItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-ThinItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-ThinItalic.svg#Montserrat-ThinItalic") format("svg");
  font-weight: 100;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Medium.eot");
  src: url("../fonts/Montserrat/Montserrat-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Medium.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Medium.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Medium.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Medium.svg#Montserrat-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-BlackItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-BlackItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-BlackItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-BlackItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-BlackItalic.svg#Montserrat-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-SemiBoldItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-SemiBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-SemiBoldItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-SemiBoldItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-SemiBoldItalic.svg#Montserrat-SemiBoldItalic") format("svg");
  font-weight: 600;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Black.eot");
  src: url("../fonts/Montserrat/Montserrat-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Black.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Black.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Black.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Black.svg#Montserrat-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-MediumItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-MediumItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-MediumItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-MediumItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-MediumItalic.svg#Montserrat-MediumItalic") format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-SemiBold.eot");
  src: url("../fonts/Montserrat/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-SemiBold.woff") format("woff"), url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-SemiBold.svg#Montserrat-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Regular.eot");
  src: url("../fonts/Montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Thin.eot");
  src: url("../fonts/Montserrat/Montserrat-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Thin.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Thin.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Thin.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Thin.svg#Montserrat-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-LightItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-LightItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-LightItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-LightItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-LightItalic.svg#Montserrat-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-Bold.eot");
  src: url("../fonts/Montserrat/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-Bold.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-Bold.svg#Montserrat-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-BoldItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-BoldItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-BoldItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-BoldItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-BoldItalic.svg#Montserrat-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.eot");
  src: url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.woff") format("woff"), url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-ExtraBoldItalic.svg#Montserrat-ExtraBoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/Montserrat/Montserrat-ExtraBold.eot");
  src: url("../fonts/Montserrat/Montserrat-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-ExtraBold.woff2") format("woff2"), url("../fonts/Montserrat/Montserrat-ExtraBold.woff") format("woff"), url("../fonts/Montserrat/Montserrat-ExtraBold.ttf") format("truetype"), url("../fonts/Montserrat/Montserrat-ExtraBold.svg#Montserrat-ExtraBold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }
.template_wrapper {
  font-family: "Montserrat";
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header top"  "header main" "header footer";
  height: 100vh;
  overflow-y: none; }
  .template_wrapper .xenon_page {
    overflow-y: scroll;
    padding-bottom: 2rem; }

header {
  grid-area: header;
  background-color: #1d81da;
  display: grid;
  align-content: space-between;
  width: 230px;
  overflow: hidden; }
  header:not(.expanded) {
    width: 48px; }
    header:not(.expanded) span {
      display: none; }
    header:not(.expanded) .category > .category_tree {
      display: none !important; }
  header h4 {
    font-size: 14px;
    padding: 6px;
    color: white;
    margin: 0; }
  header .category.current > p {
    border-left: 3px solid white; }
  header .category.current > .category_tree {
    display: unset; }
  header .category > p {
    border-left: 3px solid #1d81da; }
  header .category:hover > p {
    border-color: white; }
  header .category,
  header .menu_btn {
    cursor: pointer;
    text-transform: capitalize; }
    header .category > p, header .category > a,
    header .menu_btn > p,
    header .menu_btn > a {
      font-size: 14px;
      padding: 6px;
      color: white;
      display: block; }
    header .category > p > a,
    header .menu_btn > p > a {
      color: white; }
    header .category i,
    header .menu_btn i {
      height: 22px;
      width: 22px;
      text-align: center;
      font-size: 19px;
      margin-right: 5px; }
  header .category_tree {
    list-style-type: none; }
    header .category_tree > li {
      transition: all 0.3s, opacity 0s, visibility 0s;
      padding: 0.3rem;
      background-color: #00597c;
      border-left: 0px;
      padding-left: 7px; }
      header .category_tree > li.not_visible {
        height: 0px;
        width: 0px;
        padding: 0px;
        visibility: hidden;
        opacity: 0; }
      header .category_tree > li:hover a {
        color: white; }
      header .category_tree > li a {
        padding: 5px 5px 5px 9px;
        color: #ececec; }
        header .category_tree > li a i {
          height: auto;
          width: auto;
          font-size: 14px; }
      header .category_tree > li.current_page a {
        color: white; }
  header i.fa-archive {
    transform: rotate(180deg); }

.top_header {
  grid-area: top;
  background-color: #1d81da;
  height: 46px;
  padding: 1rem 5rem;
  display: flex;
  justify-content: space-between;
  text-align: center; }
  @media screen and (max-width: 1200px) {
    .top_header {
      padding: 1rem; } }
  .top_header p,
  .top_header a {
    font-size: 14px;
    color: white;
    display: block; }
  .top_header i {
    height: 22px;
    width: 22px;
    text-align: center;
    font-size: 16px; }
  .top_header span {
    white-space: nowrap; }

footer {
  background-color: #042029;
  height: fit-content;
  display: grid;
  place-items: center;
  color: #ffffff;
  padding: 0.5rem 0; }
  @media screen and (max-width: 1200px) {
    footer {
      width: calc(100vw - 4rem ); } }
  footer p {
    font-size: 1rem;
    margin: 0; }
  footer a {
    color: #ffffff; }

ul,
ol,
p {
  margin: 0; }

button,
a.button {
  color: #042029;
  text-align: center;
  background-color: transparent;
  padding: 0.5rem 1rem;
  min-width: 7rem;
  border: 1px solid #042029;
  transition: all 0.5s; }
  button.primary,
  a.button.primary {
    border: 1px solid #1d81da;
    background-color: #1d81da;
    color: #ffffff; }
  button:hover,
  a.button:hover {
    background-color: rgba(29, 129, 218, 0.5);
    border: 1px solid #ffffff;
    color: #ffffff; }
  button:focus,
  a.button:focus {
    outline: none; }

form {
  width: fit-content;
  margin: 0;
  display: grid;
  gap: 1rem;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */ }
  form .form_group {
    align-items: flex-start;
    max-width: 20rem;
    display: grid;
    gap: 0.3rem;
    width: fit-content; }
    form .form_group > .wrapper {
      display: flex;
      padding: unset;
      min-height: unset; }
    form .form_group > button {
      justify-self: flex-start; }
  form .form_row {
    display: flex;
    align-items: center;
    gap: 1rem; }
  form .remove {
    cursor: pointer;
    background-color: #1d81da;
    padding: 0.5rem;
    border-radius: 7px;
    box-shadow: 0px 0px 15px -8px #000;
    font-size: 1.2rem; }
    form .remove:hover {
      background-color: #ffffff; }
      form .remove:hover i {
        color: #042029; }
    form .remove i {
      color: #ffffff; }
  form .products_forward_list_header, form .staff_list_header {
    display: grid;
    grid-template-columns: 1fr 1fr 2rem;
    gap: 1rem; }
    form .products_forward_list_header p, form .staff_list_header p {
      margin: 0;
      padding: 0;
      color: #1d81da;
      text-transform: capitalize;
      min-width: 3rem;
      width: 100%;
      font-size: 0.85rem;
      font-weight: bold; }
  form .acceptance_letter_header, form .shipping_receipt_header, form .packaging_list_header, form .subcooled_list_header, form .products_list_header, form .products_ambalaza_acceptance_letter_list_header, form .products_ambalaza_shipping_receipt_list_header, form .semi_products_list_header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2rem;
    gap: 1rem; }
    form .acceptance_letter_header p, form .shipping_receipt_header p, form .packaging_list_header p, form .subcooled_list_header p, form .products_list_header p, form .products_ambalaza_acceptance_letter_list_header p, form .products_ambalaza_shipping_receipt_list_header p, form .semi_products_list_header p {
      margin: 0;
      padding: 0;
      color: #1d81da;
      text-transform: capitalize;
      min-width: 3rem;
      width: 100%;
      font-size: 0.85rem;
      font-weight: bold; }
  form .products_forward_list, form .packaging_list, form .subcooled_list, form .products_list, form .semi_products_list, form .products_ambalaza_acceptance_letter_list, form .products_ambalaza_shipping_receipt_list, form .staff_list {
    list-style-type: none;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto; }
    form .products_forward_list li[data-product-template] .remove, form .products_forward_list li[data-acceptance-letter-list-item-template] .remove, form .packaging_list li[data-product-template] .remove, form .packaging_list li[data-acceptance-letter-list-item-template] .remove, form .subcooled_list li[data-product-template] .remove, form .subcooled_list li[data-acceptance-letter-list-item-template] .remove, form .products_list li[data-product-template] .remove, form .products_list li[data-acceptance-letter-list-item-template] .remove, form .semi_products_list li[data-product-template] .remove, form .semi_products_list li[data-acceptance-letter-list-item-template] .remove, form .products_ambalaza_acceptance_letter_list li[data-product-template] .remove, form .products_ambalaza_acceptance_letter_list li[data-acceptance-letter-list-item-template] .remove, form .products_ambalaza_shipping_receipt_list li[data-product-template] .remove, form .products_ambalaza_shipping_receipt_list li[data-acceptance-letter-list-item-template] .remove, form .staff_list li[data-product-template] .remove, form .staff_list li[data-acceptance-letter-list-item-template] .remove {
      cursor: unset;
      opacity: 0; }
      form .products_forward_list li[data-product-template] .remove:hover, form .products_forward_list li[data-acceptance-letter-list-item-template] .remove:hover, form .packaging_list li[data-product-template] .remove:hover, form .packaging_list li[data-acceptance-letter-list-item-template] .remove:hover, form .subcooled_list li[data-product-template] .remove:hover, form .subcooled_list li[data-acceptance-letter-list-item-template] .remove:hover, form .products_list li[data-product-template] .remove:hover, form .products_list li[data-acceptance-letter-list-item-template] .remove:hover, form .semi_products_list li[data-product-template] .remove:hover, form .semi_products_list li[data-acceptance-letter-list-item-template] .remove:hover, form .products_ambalaza_acceptance_letter_list li[data-product-template] .remove:hover, form .products_ambalaza_acceptance_letter_list li[data-acceptance-letter-list-item-template] .remove:hover, form .products_ambalaza_shipping_receipt_list li[data-product-template] .remove:hover, form .products_ambalaza_shipping_receipt_list li[data-acceptance-letter-list-item-template] .remove:hover, form .staff_list li[data-product-template] .remove:hover, form .staff_list li[data-acceptance-letter-list-item-template] .remove:hover {
        background-color: #1d81da; }
        form .products_forward_list li[data-product-template] .remove:hover i, form .products_forward_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .packaging_list li[data-product-template] .remove:hover i, form .packaging_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .subcooled_list li[data-product-template] .remove:hover i, form .subcooled_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .products_list li[data-product-template] .remove:hover i, form .products_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .semi_products_list li[data-product-template] .remove:hover i, form .semi_products_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .products_ambalaza_acceptance_letter_list li[data-product-template] .remove:hover i, form .products_ambalaza_acceptance_letter_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .products_ambalaza_shipping_receipt_list li[data-product-template] .remove:hover i, form .products_ambalaza_shipping_receipt_list li[data-acceptance-letter-list-item-template] .remove:hover i, form .staff_list li[data-product-template] .remove:hover i, form .staff_list li[data-acceptance-letter-list-item-template] .remove:hover i {
          color: #ffffff; }
    form .products_forward_list li + li, form .packaging_list li + li, form .subcooled_list li + li, form .products_list li + li, form .semi_products_list li + li, form .products_ambalaza_acceptance_letter_list li + li, form .products_ambalaza_shipping_receipt_list li + li, form .staff_list li + li {
      padding-top: 1rem; }
    form .products_forward_list li .form_group, form .packaging_list li .form_group, form .subcooled_list li .form_group, form .products_list li .form_group, form .semi_products_list li .form_group, form .products_ambalaza_acceptance_letter_list li .form_group, form .products_ambalaza_shipping_receipt_list li .form_group, form .staff_list li .form_group {
      gap: 1rem;
      max-width: unset;
      display: flex; }
      form .products_forward_list li .form_group > div, form .packaging_list li .form_group > div, form .subcooled_list li .form_group > div, form .products_list li .form_group > div, form .semi_products_list li .form_group > div, form .products_ambalaza_acceptance_letter_list li .form_group > div, form .products_ambalaza_shipping_receipt_list li .form_group > div, form .staff_list li .form_group > div {
        display: grid;
        width: fit-content; }
  form input, form textarea, form select {
    resize: none;
    min-width: 5rem;
    width: 15rem;
    line-height: 100%;
    height: 2rem;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid #1d81da;
    font-size: 1.3rem;
    color: #042029; }
    form input::placeholder, form textarea::placeholder, form select::placeholder {
      text-transform: capitalize;
      color: rgba(4, 32, 41, 0.5); }
    form input:invalid, form textarea:invalid, form select:invalid {
      color: rgba(4, 32, 41, 0.5); }
    form input option, form textarea option, form select option {
      color: #042029; }
  form label {
    margin: 0;
    padding: 0;
    color: #1d81da;
    text-transform: capitalize;
    min-width: 3rem;
    width: 100%;
    font-size: 0.85rem;
    font-weight: bold; }
    form label.max {
      color: rgba(29, 129, 218, 0.7); }
    form label.note {
      width: unset; }
  form input[type="checkbox"] {
    transform: scale(1.3);
    min-width: unset;
    width: auto; }
  form input[type="radio"] {
    width: unset;
    height: 1.5rem; }
  form .checkbox_container {
    display: flex;
    gap: 1rem;
    align-items: center; }
    form .checkbox_container label {
      white-space: nowrap; }
  form *:focus {
    outline: none; }
  form input::-webkit-outer-spin-button,
  form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  form input[type="number"] {
    -moz-appearance: textfield; }

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(7px);
  z-index: 99; }
  .popup.open {
    display: grid; }
  .popup .wrapper {
    position: relative;
    padding: 2rem;
    background-color: #ffffff;
    min-height: 15rem;
    min-width: 20rem;
    width: fit-content;
    display: grid;
    justify-content: space-between;
    gap: 2rem; }
  .popup_header {
    display: flex;
    justify-content: space-between; }
    .popup_header h3 {
      display: flex;
      gap: 1rem;
      align-items: center; }
    .popup_header .popup_back {
      cursor: pointer;
      color: #042029;
      font-size: 1.5rem; }
      .popup_header .popup_back:hover {
        color: rgba(4, 32, 41, 0.5); }
    .popup_header .popup_close {
      cursor: pointer;
      color: #042029;
      font-size: 1.5rem;
      position: absolute;
      right: 1rem;
      top: 1rem; }
      .popup_header .popup_close:hover {
        color: rgba(4, 32, 41, 0.5); }
  .popup_body {
    width: fit-content; }
    .popup_body p {
      max-width: 30rem;
      font-size: 1.2rem; }
    .popup_body .komore_cards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2rem;
      max-height: 20rem;
      overflow-y: auto; }
      .popup_body .komore_cards .card {
        cursor: pointer;
        height: 9rem;
        min-width: 20rem;
        border: none;
        box-shadow: 0px 0px 12px -5px #000;
        padding: 1rem;
        color: white;
        background: linear-gradient(45deg, #1d81da 80%, #50a5ee 80%);
        transition: background 0.7s;
        background-size: 120%; }
        .popup_body .komore_cards .card:hover {
          background-size: 100%; }
        .popup_body .komore_cards .card.eksterne {
          background: linear-gradient(45deg, #1d81da 80%, #014b68 80%);
          transition: background 0.7s;
          background-size: 120%; }
          .popup_body .komore_cards .card.eksterne:hover {
            background-size: 100%; }
  .popup_actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem; }

.page_header_component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  position: sticky;
  padding: 1.5rem 5rem;
  top: 0;
  z-index: 5;
  box-shadow: 3px 8px 18px -18px black; }
  @media screen and (max-width: 1200px) {
    .page_header_component {
      padding: 1rem;
      display: grid; } }
  .page_header_component h1 {
    font-size: 1.5rem;
    font-weight: 500; }
  .page_header_component .btns {
    display: flex;
    gap: 1rem; }
    @media screen and (max-width: 1200px) {
      .page_header_component .btns {
        display: grid;
        width: calc(100vw - 2rem - 4rem); } }
  .page_header_component .row {
    margin: 0px; }
  .page_header_component .search_btn {
    padding: .35rem;
    border: 2px solid #1d81da;
    background-color: #1d81da;
    color: white; }
  .page_header_component .search_btn:hover {
    background-color: white;
    color: #1d81da; }

.page_filters_component {
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .page_filters_component {
      padding: 1rem; } }

.page_table_component,
.table_component {
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .page_table_component,
    .table_component {
      padding: 1rem; } }
  .page_table_component table,
  .table_component table {
    border: none;
    width: 100%; }
  .page_table_component tr,
  .table_component tr {
    font-size: 1rem; }
    @media screen and (max-width: 1200px) {
      .page_table_component tr,
      .table_component tr {
        width: calc(100vw - 2rem - 4rem);
        display: grid; }
        .page_table_component tr.table_header,
        .table_component tr.table_header {
          display: none; } }
    .page_table_component tr:nth-child(even),
    .table_component tr:nth-child(even) {
      background-color: #fbfbfb; }
      .page_table_component tr:nth-child(even):hover,
      .table_component tr:nth-child(even):hover {
        background-color: rgba(4, 32, 41, 0.15); }
        @media screen and (max-width: 1200px) {
          .page_table_component tr:nth-child(even):hover,
          .table_component tr:nth-child(even):hover {
            background-color: unset; } }
    .page_table_component tr:nth-child(odd),
    .table_component tr:nth-child(odd) {
      background-color: #f9f9f9; }
      .page_table_component tr:nth-child(odd):hover,
      .table_component tr:nth-child(odd):hover {
        background-color: rgba(4, 32, 41, 0.15); }
        @media screen and (max-width: 1200px) {
          .page_table_component tr:nth-child(odd):hover,
          .table_component tr:nth-child(odd):hover {
            background-color: unset; } }
    .page_table_component tr:first-child,
    .table_component tr:first-child {
      font-size: 1.3rem;
      background-color: transparent;
      font-weight: bold; }
      .page_table_component tr:first-child:hover,
      .table_component tr:first-child:hover {
        background-color: transparent; }
        @media screen and (max-width: 1200px) {
          .page_table_component tr:first-child:hover,
          .table_component tr:first-child:hover {
            background-color: unset; } }
      .page_table_component tr:first-child + tr,
      .table_component tr:first-child + tr {
        border: 0; }
    .page_table_component tr + tr,
    .table_component tr + tr {
      border-top: 1px solid rgba(4, 32, 41, 0.2); }
    @media screen and (max-width: 1200px) {
      .page_table_component tr.expanded td,
      .table_component tr.expanded td {
        display: flex !important;
        color: #042029; } }
    .page_table_component tr th,
    .table_component tr th {
      text-transform: capitalize; }
    .page_table_component tr th, .page_table_component tr td,
    .table_component tr th,
    .table_component tr td {
      padding: 0.5rem 0.3rem;
      color: #042029; }
      @media screen and (max-width: 1200px) {
        .page_table_component tr th, .page_table_component tr td,
        .table_component tr th,
        .table_component tr td {
          display: flex;
          color: #1d81da;
          text-align: left; }
          .page_table_component tr th:before, .page_table_component tr td:before,
          .table_component tr th:before,
          .table_component tr td:before {
            color: #3a4555;
            font-weight: 600;
            content: attr(data-before);
            margin-right: auto; } }
      @media screen and (max-width: 1200px) {
        .page_table_component tr th.expanded ~ td, .page_table_component tr td.expanded ~ td,
        .table_component tr th.expanded ~ td,
        .table_component tr td.expanded ~ td {
          display: flex; } }
      @media screen and (max-width: 1200px) {
        .page_table_component tr th:first-child ~ td, .page_table_component tr td:first-child ~ td,
        .table_component tr th:first-child ~ td,
        .table_component tr td:first-child ~ td {
          display: none; } }
      .page_table_component tr th span, .page_table_component tr th a, .page_table_component tr td span, .page_table_component tr td a,
      .table_component tr th span,
      .table_component tr th a,
      .table_component tr td span,
      .table_component tr td a {
        cursor: pointer;
        font-size: 10px;
        background-color: #1d81da;
        color: white;
        padding: 0.3rem;
        border-radius: 7px;
        box-shadow: 0px 0px 15px -8px #000; }
        .page_table_component tr th span + span, .page_table_component tr th span + a, .page_table_component tr th a + span, .page_table_component tr th a + a, .page_table_component tr td span + span, .page_table_component tr td span + a, .page_table_component tr td a + span, .page_table_component tr td a + a,
        .table_component tr th span + span,
        .table_component tr th span + a,
        .table_component tr th a + span,
        .table_component tr th a + a,
        .table_component tr td span + span,
        .table_component tr td span + a,
        .table_component tr td a + span,
        .table_component tr td a + a {
          margin-left: 0.5rem; }
        .page_table_component tr th span:hover, .page_table_component tr th a:hover, .page_table_component tr td span:hover, .page_table_component tr td a:hover,
        .table_component tr th span:hover,
        .table_component tr th a:hover,
        .table_component tr td span:hover,
        .table_component tr td a:hover {
          background-color: #ffffff;
          color: #1d81da; }
          .page_table_component tr th span:hover i, .page_table_component tr th a:hover i, .page_table_component tr td span:hover i, .page_table_component tr td a:hover i,
          .table_component tr th span:hover i,
          .table_component tr th a:hover i,
          .table_component tr td span:hover i,
          .table_component tr td a:hover i {
            color: #042029; }
        .page_table_component tr th span i, .page_table_component tr th a i, .page_table_component tr td span i, .page_table_component tr td a i,
        .table_component tr th span i,
        .table_component tr th a i,
        .table_component tr td span i,
        .table_component tr td a i {
          color: #ffffff; }
        .page_table_component tr th span.qr_code_link, .page_table_component tr th a.qr_code_link, .page_table_component tr td span.qr_code_link, .page_table_component tr td a.qr_code_link,
        .table_component tr th span.qr_code_link,
        .table_component tr th a.qr_code_link,
        .table_component tr td span.qr_code_link,
        .table_component tr td a.qr_code_link {
          background-color: unset;
          padding: 0;
          border-radius: 0; }
          .page_table_component tr th span.qr_code_link img, .page_table_component tr th a.qr_code_link img, .page_table_component tr td span.qr_code_link img, .page_table_component tr td a.qr_code_link img,
          .table_component tr th span.qr_code_link img,
          .table_component tr th a.qr_code_link img,
          .table_component tr td span.qr_code_link img,
          .table_component tr td a.qr_code_link img {
            height: 35px;
            width: 35px; }

.component_evidencija_table tr td:first-child {
  font-size: 2rem; }
  @media screen and (max-width: 1200px) {
    .component_evidencija_table tr td:first-child {
      font-size: 1rem; } }
.component_evidencija_table tr .increased {
  padding: 0 2rem;
  color: #09883a; }
  @media screen and (max-width: 1200px) {
    .component_evidencija_table tr .increased {
      padding: 0.3rem 1rem; } }
.component_evidencija_table tr .decreased {
  padding: 0 2rem;
  color: #b31e0d; }
  @media screen and (max-width: 1200px) {
    .component_evidencija_table tr .decreased {
      padding: 0.3rem 1rem; } }

.table_component {
  padding: 0; }

.page_form_component {
  margin: 2rem 5rem;
  gap: 2rem; }
  .page_form_component h3 {
    text-transform: capitalize;
    width: 6rem;
    color: dark;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0;
    padding: 0; }
  .page_form_component > div {
    display: flex;
    align-items: flex-start;
    gap: 2rem; }
    .page_form_component > div > .btns {
      flex-grow: 1;
      display: grid;
      gap: 1rem; }
      .page_form_component > div > .btns > button {
        justify-self: flex-end;
        align-self: flex-start; }
    .page_form_component > div + div {
      padding-top: 2rem;
      border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .page_form_component .wrapper {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr; }
    .page_form_component .wrapper .form_group {
      gap: 0; }
  .page_form_component .holder {
    padding: 1rem;
    border: 1px solid #bbb;
    display: grid;
    gap: 1rem; }
    .page_form_component .holder > h4 {
      padding-bottom: 1rem;
      border-bottom: 1px solid #bbb; }

.page_sidebar_component {
  width: 30%; }
  @media screen and (max-width: 1200px) {
    .page_sidebar_component {
      width: unset; } }
  .page_sidebar_component > div {
    display: grid;
    gap: 0.5rem; }
    .page_sidebar_component > div + div {
      margin-top: 3rem; }
    .page_sidebar_component > div .btns {
      display: grid;
      gap: 0.5rem; }
      .page_sidebar_component > div .btns .current {
        background-color: #ffffff;
        color: #1d81da; }
        .page_sidebar_component > div .btns .current:hover {
          background-color: #f9f9f9; }
  .page_sidebar_component .prijemi_header {
    display: flex;
    justify-content: space-between; }
  .page_sidebar_component .prijemi_wrapper tr {
    padding: 0.5rem; }
    .page_sidebar_component .prijemi_wrapper tr:nth-child(even) {
      background-color: #fbfbfb; }
      .page_sidebar_component .prijemi_wrapper tr:nth-child(even):hover {
        background-color: rgba(4, 32, 41, 0.15); }
        @media screen and (max-width: 1200px) {
          .page_sidebar_component .prijemi_wrapper tr:nth-child(even):hover {
            background-color: unset; } }
    .page_sidebar_component .prijemi_wrapper tr:nth-child(odd) {
      background-color: #f9f9f9; }
      .page_sidebar_component .prijemi_wrapper tr:nth-child(odd):hover {
        background-color: rgba(4, 32, 41, 0.15); }
        @media screen and (max-width: 1200px) {
          .page_sidebar_component .prijemi_wrapper tr:nth-child(odd):hover {
            background-color: unset; } }
    .page_sidebar_component .prijemi_wrapper tr.current {
      background-color: rgba(1, 75, 104, 0.7);
      color: white; }
      .page_sidebar_component .prijemi_wrapper tr.current:hover {
        background-color: rgba(1, 75, 104, 0.5); }

.page_main_component {
  width: 70%; }
  @media screen and (max-width: 1200px) {
    .page_main_component {
      width: unset; } }
  .page_main_component > div {
    display: grid;
    gap: 0.5rem; }
    .page_main_component > div + div {
      margin-top: 3rem;
      padding: 0; }
  .page_main_component .vaga_wrapper {
    display: grid;
    width: fit-content; }
    @media screen and (max-width: 1200px) {
      .page_main_component .vaga_wrapper input, .page_main_component .vaga_wrapper textarea, .page_main_component .vaga_wrapper select {
        width: calc(100vw - 4rem - 2rem); } }
    @media screen and (max-width: 1200px) {
      .page_main_component .vaga_wrapper {
        width: unset; } }
    .page_main_component .vaga_wrapper .vaga_header {
      display: flex;
      align-items: center;
      gap: 2rem;
      justify-content: space-between; }
    .page_main_component .vaga_wrapper form {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; }
      @media screen and (max-width: 1366px) {
        .page_main_component .vaga_wrapper form {
          grid-template-columns: 1fr 1fr; } }
      @media screen and (max-width: 1200px) {
        .page_main_component .vaga_wrapper form {
          place-content: center;
          grid-template-columns: 1fr; } }
    .page_main_component .vaga_wrapper button {
      margin-top: 1rem; }
  .page_main_component .ambalaza_zaduzenje_wrapper .ambalaza_zaduzenje_header {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between; }
  .page_main_component .ambalaza_zaduzenje_wrapper form {
    max-width: fit-content; }
    .page_main_component .ambalaza_zaduzenje_wrapper form .form_group {
      max-width: 10rem; }
      .page_main_component .ambalaza_zaduzenje_wrapper form .form_group input, .page_main_component .ambalaza_zaduzenje_wrapper form .form_group textarea, .page_main_component .ambalaza_zaduzenje_wrapper form .form_group select {
        width: 9rem; }
  .page_main_component .merenje_wrapper form {
    max-width: fit-content; }
    .page_main_component .merenje_wrapper form .form_group {
      max-width: 10rem; }
      .page_main_component .merenje_wrapper form .form_group input, .page_main_component .merenje_wrapper form .form_group textarea, .page_main_component .merenje_wrapper form .form_group select {
        width: 9rem; }
  .page_main_component .merenja_header {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center; }

.xenon_page.home.index .logo_img {
  padding: 1rem 5rem; }
  .xenon_page.home.index .logo_img img {
    width: 30vh; }
.xenon_page.home.index .categories_list {
  display: grid;
  padding: 1rem 5rem;
  gap: 2rem; }
  @media screen and (max-width: 1200px) {
    .xenon_page.home.index .categories_list {
      padding: 1rem; } }
  .xenon_page.home.index .categories_list .category_card {
    box-shadow: 0px 0px 25px -15px rgba(0, 0, 0, 0.608);
    background-color: white; }
    .xenon_page.home.index .categories_list .category_card > p {
      font-weight: 500;
      border-top: 3px solid #1d81da;
      border-bottom: 1px solid #bebfbf;
      font-size: 1.3rem;
      padding: 0.5rem 1rem; }
    .xenon_page.home.index .categories_list .category_card .category_pages_list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 0.5rem 1rem; }
      @media screen and (max-width: 768px) {
        .xenon_page.home.index .categories_list .category_card .category_pages_list {
          display: grid; } }
      .xenon_page.home.index .categories_list .category_card .category_pages_list .category_page {
        display: grid;
        justify-items: center;
        align-content: center;
        padding: 1rem 2rem;
        background-color: #1d81da;
        border-radius: 7px;
        color: white; }
        .xenon_page.home.index .categories_list .category_card .category_pages_list .category_page i {
          font-size: 16px; }

.xenon_page.proizvodnja.radni_nalog .products_from_reception_table, .xenon_page.proizvodnja.radni_nalog .semi_products_from_reception_table, .xenon_page.proizvodnja.radni_nalog .subcooled_from_reception_table {
  display: block;
  width: 600px;
  max-height: 300px;
  overflow-y: scroll;
  padding-left: 5px; }
  .xenon_page.proizvodnja.radni_nalog .products_from_reception_table tr, .xenon_page.proizvodnja.radni_nalog .semi_products_from_reception_table tr, .xenon_page.proizvodnja.radni_nalog .subcooled_from_reception_table tr {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr; }

.xenon_page.prijem .prijem > .wrapper {
  display: flex;
  gap: 1rem 3rem;
  height: 100%;
  margin-top: 2rem;
  margin-left: 5rem;
  margin-right: 5rem; }
  @media screen and (max-width: 1200px) {
    .xenon_page.prijem .prijem > .wrapper {
      display: grid;
      margin-left: 0;
      padding: 0 1rem 2rem 1rem;
      grid-template-columns: 1fr; } }

.xenon_page.skladiste.index .component_komore_cards {
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .xenon_page.skladiste.index .component_komore_cards {
      padding: 1rem; } }
.xenon_page.skladiste.index .komore_cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem; }
  .xenon_page.skladiste.index .komore_cards .card {
    display: flex;
    text-align: center;
    cursor: pointer;
    min-width: 20rem;
    border: none;
    box-shadow: 0px 0px 12px -5px #000;
    padding: 1rem;
    color: white;
    background: linear-gradient(45deg, #1d81da 80%, #50a5ee 80%);
    transition: background 0.7s;
    background-size: 120%; }
    .xenon_page.skladiste.index .komore_cards .card_header {
      padding-bottom: 1rem;
      border-bottom: 1px solid white; }
    .xenon_page.skladiste.index .komore_cards .card_body {
      padding: 1rem 0px;
      align-self: stretch; }
    .xenon_page.skladiste.index .komore_cards .card:hover {
      background-size: 100%; }
    .xenon_page.skladiste.index .komore_cards .card.eksterne {
      background: linear-gradient(45deg, #1d81da 80%, #014b68 80%);
      transition: background 0.7s;
      background-size: 120%; }
      .xenon_page.skladiste.index .komore_cards .card.eksterne:hover {
        background-size: 100%; }

.xenon_page.login {
  height: 100vh; }
  .xenon_page.login.index {
    padding-bottom: 0;
    width: 100vw;
    overflow: auto; }
    .xenon_page.login.index > .login {
      height: 100%;
      display: grid;
      justify-content: center;
      align-content: center; }
    .xenon_page.login.index .wrapper {
      color: white;
      background: linear-gradient(45deg, #1d81da 80%, #50a5ee 80%);
      box-shadow: 0px 0px 15px -8px #000;
      padding: 7rem 3rem;
      justify-items: center;
      display: grid;
      gap: 3rem; }
      .xenon_page.login.index .wrapper .text {
        text-align: center; }
        .xenon_page.login.index .wrapper .text h2 {
          margin-bottom: 0; }
      .xenon_page.login.index .wrapper form label {
        color: white; }
      .xenon_page.login.index .wrapper form input {
        padding: .3rem; }
      .xenon_page.login.index .wrapper .btns button {
        background-color: white;
        color: #1d81da;
        font-weight: 500; }

.xenon_page.eksternaskladista.index .component_komore_cards {
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .xenon_page.eksternaskladista.index .component_komore_cards {
      padding: 1rem; } }
.xenon_page.eksternaskladista.index .komore_cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem; }
  .xenon_page.eksternaskladista.index .komore_cards .card {
    cursor: pointer;
    height: 9rem;
    min-width: 20rem;
    border: none;
    box-shadow: 0px 0px 12px -5px #000;
    padding: 1rem;
    color: white;
    background: linear-gradient(45deg, #1d81da 80%, #50a5ee 80%);
    transition: background 0.7s;
    background-size: 120%; }
    .xenon_page.eksternaskladista.index .komore_cards .card:hover {
      background-size: 100%; }
    .xenon_page.eksternaskladista.index .komore_cards .card.eksterne {
      background: linear-gradient(45deg, #1d81da 80%, #014b68 80%);
      transition: background 0.7s;
      background-size: 120%; }
      .xenon_page.eksternaskladista.index .komore_cards .card.eksterne:hover {
        background-size: 100%; }

.xenon_page.qrscanner.index .component_qrScanner_body {
  display: flex;
  gap: 3rem;
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .xenon_page.qrscanner.index .component_qrScanner_body {
      padding: 1rem; } }
  .xenon_page.qrscanner.index .component_qrScanner_body .data_wrapper {
    display: grid;
    align-content: space-between;
    gap: 1rem; }
  .xenon_page.qrscanner.index .component_qrScanner_body form {
    display: grid;
    grid-template-columns: 1fr 1fr; }
  .xenon_page.qrscanner.index .component_qrScanner_body video {
    box-shadow: 0px 0px 12px -5px #000;
    width: 640px;
    height: 400px; }
  .xenon_page.qrscanner.index .component_qrScanner_body .btns {
    display: grid;
    align-items: center;
    gap: 1rem; }

.top_slider_section .item {
  position: relative; }
.top_slider_section .fade_desktop {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 0; }
.top_slider_section_text {
  position: absolute;
  bottom: 30px;
  left: 5%;
  width: 90%;
  color: #eee9e5;
  margin: 0 auto;
  background-color: #00000073;
  padding: 30px; }
  @media screen and (max-width: 768px) {
    .top_slider_section_text {
      margin-top: -220px; } }
  .top_slider_section_text_title {
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 10px; }
    @media screen and (max-width: 1200px) {
      .top_slider_section_text_title {
        font-size: 25px;
        line-height: 30px; } }
    @media screen and (max-width: 768px) {
      .top_slider_section_text_title {
        font-size: 17px;
        line-height: 21px; } }
    @media screen and (max-width: 322px) {
      .top_slider_section_text_title {
        font-size: 13px;
        line-height: 18px;
        padding-top: 50px; } }
  .top_slider_section_text_subtitle {
    font-size: 20px; }
    @media screen and (max-width: 1200px) {
      .top_slider_section_text_subtitle {
        font-size: 15px; } }

.component_komora_prikaz {
  padding: 1rem 5rem; }
  @media screen and (max-width: 1200px) {
    .component_komora_prikaz {
      padding: 1rem; } }
  .component_komora_prikaz table {
    box-shadow: 0px 0px 15px -8px #000; }
    .component_komora_prikaz table th, .component_komora_prikaz table td, .component_komora_prikaz table .shelf, .component_komora_prikaz table .passage {
      height: 2.3rem;
      width: 2.3rem;
      text-align: center; }
      .component_komora_prikaz table th.highlight, .component_komora_prikaz table td.highlight, .component_komora_prikaz table .shelf.highlight, .component_komora_prikaz table .passage.highlight {
        -webkit-box-shadow: 0px 0px 3px 5px rgba(46, 255, 140, 0.83);
        -moz-box-shadow: 0px 0px 3px 5px rgba(46, 255, 140, 0.83);
        box-shadow: 0px 0px 3px 5px rgba(46, 255, 140, 0.83); }
    .component_komora_prikaz table tr {
      display: flex; }
      .component_komora_prikaz table tr:first-child th {
        display: grid;
        align-items: center;
        height: 4.6rem; }
      .component_komora_prikaz table tr + tr td {
        display: grid;
        justify-items: center;
        margin-top: 2.3rem; }
      .component_komora_prikaz table tr + tr th {
        height: 4.6rem;
        display: grid;
        align-items: center; }
    .component_komora_prikaz table th {
      width: 4.6rem; }
    .component_komora_prikaz table td {
      width: 4.6rem;
      position: relative; }
      .component_komora_prikaz table td[data-open_item] {
        cursor: pointer; }
      .component_komora_prikaz table td:hover .shelf_1, .component_komora_prikaz table td:hover .passage_1 {
        top: 0rem; }
      .component_komora_prikaz table td:hover .shelf_2, .component_komora_prikaz table td:hover .passage_2 {
        top: -1rem; }
      .component_komora_prikaz table td:hover .shelf_3, .component_komora_prikaz table td:hover .passage_3 {
        top: -2rem; }
      .component_komora_prikaz table td:hover .shelf_4, .component_komora_prikaz table td:hover .passage_4 {
        top: -3rem; }
      .component_komora_prikaz table td.hidden {
        cursor: unset; }
    .component_komora_prikaz table .shelf {
      transition: all 0.1s;
      position: absolute;
      top: 0;
      background-color: white;
      border: 1px black solid;
      border-radius: 4px;
      transform: rotate(-45deg) skew(15deg) skewY(10deg);
      border-color: #1d81da; }
      .component_komora_prikaz table .shelf_1 {
        top: 0rem; }
      .component_komora_prikaz table .shelf_2 {
        top: -0.5rem; }
      .component_komora_prikaz table .shelf_3 {
        top: -1rem; }
      .component_komora_prikaz table .shelf_4 {
        top: -1.5rem; }
    .component_komora_prikaz table .passage {
      transition: all 0.1s;
      position: absolute;
      top: 0;
      border: 1px black solid;
      border-radius: 4px;
      transform: rotate(-45deg) skew(15deg) skewY(10deg);
      background-color: white;
      border-color: black; }
      .component_komora_prikaz table .passage_1 {
        top: 0rem; }
      .component_komora_prikaz table .passage_2 {
        top: -0.5rem; }
      .component_komora_prikaz table .passage_3 {
        top: -1rem; }
      .component_komora_prikaz table .passage_4 {
        top: -1.5rem; }

.component_komora_open_position .popup_body {
  display: flex;
  gap: 1rem;
  align-items: flex-start; }
  .component_komora_open_position .popup_body .popup_shelves {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem; }
    .component_komora_open_position .popup_body .popup_shelves .shelf_card {
      cursor: pointer;
      display: grid;
      justify-content: center;
      align-items: center;
      width: 6rem;
      height: 6rem;
      border: 1px black solid;
      border-radius: 4px;
      opacity: 0.4;
      transition: all 0.2s; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card p {
        font-size: 3rem; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card_1 {
        border-color: black; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card_2 {
        border-color: black; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card_3 {
        border-color: black; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card_4 {
        border-color: black; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card.empty {
        background-color: white; }
      .component_komora_open_position .popup_body .popup_shelves .shelf_card.selected {
        color: white;
        background-color: black;
        border-color: white;
        opacity: 1; }
  .component_komora_open_position .popup_body .shelf_main {
    display: none; }
    .component_komora_open_position .popup_body .shelf_main_selected {
      display: grid;
      align-content: space-between;
      gap: 1rem; }
      .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li {
        padding: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4rem; }
        .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(even) {
          background-color: #fbfbfb; }
          .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(even):hover {
            background-color: rgba(4, 32, 41, 0.15); }
            @media screen and (max-width: 1200px) {
              .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(even):hover {
                background-color: unset; } }
        .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(odd) {
          background-color: #f9f9f9; }
          .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(odd):hover {
            background-color: rgba(4, 32, 41, 0.15); }
            @media screen and (max-width: 1200px) {
              .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li:nth-child(odd):hover {
                background-color: unset; } }
        .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li h4, .component_komora_open_position .popup_body .shelf_main_selected .shelf_information li p {
          margin: 0;
          padding: 0;
          font-weight: normal;
          font-size: 1.1rem; }
      .component_komora_open_position .popup_body .shelf_main_selected .btns {
        display: grid;
        gap: 0.5rem; }
      .component_komora_open_position .popup_body .shelf_main_selected #send_to_production,
      .component_komora_open_position .popup_body .shelf_main_selected #send_to_transport {
        display: grid;
        gap: .5rem;
        justify-content: start;
        justify-items: start; }
        .component_komora_open_position .popup_body .shelf_main_selected #send_to_production button,
        .component_komora_open_position .popup_body .shelf_main_selected #send_to_transport button {
          width: 100%; }
  .component_komora_open_position .popup_body .text {
    width: 24rem; }
  .component_komora_open_position .popup_body label, .component_komora_open_position .popup_body input, .component_komora_open_position .popup_body .form_group {
    max-width: 24rem; }
  .component_komora_open_position .popup_body video {
    width: 24rem; }

/*# sourceMappingURL=style.css.map */