html {
  scroll-behavior: smooth!important;
}
* {
    box-sizing: border-box;
}

a {
    text-decoration: none!important;
}
.fade_in {
  animation: fade .3s ease-in;
}
.login-logo {
  width: 100%;
  right: 0;
  top: 0;
  position: fixed;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1017%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(56%2c 97%2c 80%2c 1)'%3e%3c/rect%3e%3cpath d='M594.34 528.85a45.77 45.77 0 1 0 86.5 29.96z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M702.48 121.68 a17.31 17.31 0 1 0 34.62 0 a17.31 17.31 0 1 0 -34.62 0z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M904.45 148.06a41.01 41.01 0 1 0 38.27 72.54z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M483.43 337.41a20.17 20.17 0 1 0 36.73 16.68z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1331.47 371.96a45.7 45.7 0 1 0-78.66 46.55z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1033.23 70.36a53.15 53.15 0 1 0 90.47-55.81z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M1157.14 456.89L1166.74 456.89L1166.74 485.54L1157.14 485.54z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M725.19 203.74L771.08 203.74L771.08 254.97L725.19 254.97z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1399.3 88.82a23.17 23.17 0 1 0 39.49-24.25z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M778.5 244.44L834.24 244.44L834.24 297.96L778.5 297.96z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M919.09 550.54 a45.54 45.54 0 1 0 91.08 0 a45.54 45.54 0 1 0 -91.08 0z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M567.83 351.81a42.4 42.4 0 1 0-19.24 82.59z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M742.84 415.52 a31.66 31.66 0 1 0 63.32 0 a31.66 31.66 0 1 0 -63.32 0z' stroke='%23037b0b'%3e%3c/path%3e%3cpath d='M835.78 471.21 a34.47 34.47 0 1 0 68.94 0 a34.47 34.47 0 1 0 -68.94 0z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M273.28 458.27L304.29 458.27L304.29 479.08L273.28 479.08z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M111.15 518.51L146.13 518.51L146.13 550.82L111.15 550.82z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M768.48 333.72a8.71 8.71 0 1 0 16.58 5.32z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M1255.8 465.9L1305.65 465.9L1305.65 515.75L1255.8 515.75z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M562.92 51.61 a32.22 32.22 0 1 0 64.44 0 a32.22 32.22 0 1 0 -64.44 0z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M1267.05 189.25L1311.11 189.25L1311.11 233.31L1267.05 233.31z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M1421.29 62.82L1444.59 62.82L1444.59 95.01L1421.29 95.01z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M1095.69 214.31L1145.76 214.31L1145.76 264.38L1095.69 264.38z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M238.64 159.03a51.43 51.43 0 1 0-70.43-74.96z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M1136.51 177.43L1187.23 177.43L1187.23 195.86L1136.51 195.86z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M522.42 229.17L554.41 229.17L554.41 261.16L522.42 261.16z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M882.62 414.6a22.92 22.92 0 1 0-7.2 45.27z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M474.55 301.95 a27.64 27.64 0 1 0 55.28 0 a27.64 27.64 0 1 0 -55.28 0z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M795.21 112.32a42.04 42.04 0 1 0-50.46-67.25z' fill='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M289.66 349.96L296.37 349.96L296.37 356.67L289.66 356.67z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M947.47 505.92 a48.04 48.04 0 1 0 96.08 0 a48.04 48.04 0 1 0 -96.08 0z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M179.98 153.68L186.51 153.68L186.51 160.21L179.98 160.21z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M461.56 218.69a19.61 19.61 0 1 0 15.42-36.06z' stroke='rgba(0%2c 55%2c 20%2c 1)'%3e%3c/path%3e%3cpath d='M59.58 148.47a51.28 51.28 0 1 0-89.85 49.45z' stroke='%23037b0b'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1017'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  height: 100vh;
}

@keyframes login_slider {
  0% {
    background: url('/assets/img/login-slide.jpg') no-repeat;
    background-size: cover;
    background-position: center;
  }
  50% {
    background: url('/assets/img/login-slide3.png') no-repeat;
    background-size: cover;
    background-position: center;
  }
  75% {
    background: url('/assets/img/login-slide3.jpg') no-repeat;
    background-size: cover;
    background-position: center;
  }
  90% {
    background: url('/assets/img/login-slide-4.webp');
    background-size: cover;
    background-position: center;
  }
} 
#login-left {
  width: 50%;
  border: 1px solid black;
  height: 100%;
}

.top-bg {
    /* background: rgb(249,1,5);
    background: linear-gradient(300deg, rgba(249,1,5,1) 0%, rgba(242,100,18,1) 75%); */
    background: rgb(56,97,80);
    /* background: linear-gradient(90deg, rgba(56,97,80,1) 0%, rgba(51,171,95,1) 61%); */
    background: linear-gradient(90deg, rgb(79 102 172) 0%, rgb(141, 160, 206) 61%);
    min-height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.logo {
    width: 60px;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.h-screen {
    height: 100vh;
}

.bg-main {
    background-color: #f26412!important;
}

.bg-highlight-gradient{
    /* background: rgb(198,57,57);
    background: linear-gradient(90deg, rgba(198,57,57,1) 0%, rgba(255,110,50,1) 61%); */
  background: rgb(30,86,49);
  /* background: linear-gradient(90deg, rgba(30,86,49,1) 0%, rgba(104,187,89,1) 61%); */
    background: linear-gradient(90deg, rgb(56, 84, 168) 0%, rgb(80, 114, 196) 61%);
}

.bg-main-gradient {
    /* background: rgb(249,1,5);
    background: linear-gradient(90deg, rgba(249,1,5,1) 0%, rgba(242,100,18,1) 75%); */
    background: rgb(56,97,80);
    /* background: linear-gradient(90deg, rgba(56,97,80,1) 0%, rgba(51,171,95,1) 61%); */
    background: linear-gradient(90deg, rgb(59, 56, 97) 0%, rgb(78, 88, 175) 61%);
}

.bg-secondary-gradient {
    background: rgb(149,146,146);
    background: linear-gradient(90deg, rgba(149,146,146,1) 0%, rgba(103,103,103,1) 61%);
}

.bg-order-summary {
  background-color: #C5E384!important;
  /* background-color: #E4DEAE!important; */
}

.text-main {
    /* color: #f26412!important; */
    /* color: rgb(56,97,80)!important; */
    /* color: rgb(1 90 6)!important; */
    color: rgb(72, 54, 139)!important;
}

.text-insta {
    color: pink;
}

.other-socials {
    font-size: 24pt;
}

.shadow-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
/* .shadow-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} */

.shadow-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: all 0.2s ease-in;
}
/* .shadow-2:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} */

.shadow-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.shadow-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.shadow-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-product {
    border-left: 5px #f26412 solid;
    transition: ease-in .3s;
}
.card-product:hover {
    transition: ease-in .3s;
    background: rgb(249,1,5);
}

.card-product:hover * {
    color: white!important;
}

.bg-bisque {
    background-color: bisque;
}

.loadingspinner {
    --square: 26px;
    --offset: 30px;

    --duration: 2.4s;
    --delay: 0.2s;
    --timing-function: ease-in-out;

    --in-duration: 0.4s;
    --in-delay: 0.1s;
    --in-timing-function: ease-out;

    width: calc( 3 * var(--offset) + var(--square));
    height: calc( 2 * var(--offset) + var(--square));
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    position: relative;
  }

  .loadingspinner div {
    display: inline-block;
    background: darkorange;
    /*background: var(--text-color);*/
    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
    border: none;
    border-radius: 2px;
    width: var(--square);
    height: var(--square);
    position: absolute;
    padding: 0px;
    margin: 0px;
    font-size: 6pt;
    color: black;
  }

  .loadingspinner #square1 {
    left: calc( 0 * var(--offset) );
    top:  calc( 0 * var(--offset) );
    animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square2 {
    left: calc( 0 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
  }
  
  .loadingspinner #square3 {
    left: calc( 1 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square4 {
    left: calc( 2 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square5 {
    left: calc( 3 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
  }

  @keyframes square1 {
    0%      {left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    8.333%  {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square2 {
    0%      {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    8.333%  {left: calc( 0 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    16.67%  {left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    25.00%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    83.33%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    91.67%  {left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    100%    {left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); }
  }

  @keyframes square3 {
    0%,100% {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    16.67%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    25.00%  {left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    33.33%  {left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    41.67%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    66.67%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    75.00%  {left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    83.33%  {left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    91.67%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square4 {
    0%      {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    33.33%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    41.67%  {left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    50.00%  {left: calc( 3 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    58.33%  {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square5 {
    0%      {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    50.00%  {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    58.33%  {left: calc( 3 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    66.67%  {left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    75.00%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes squarefadein {
    0%      {transform: scale(0.75); opacity: 0.0;}
    100%    {transform: scale(1.0); opacity: 1.0;}
  } .loadingspinner {
    --square: 26px;
    --offset: 30px;

    --duration: 2.4s;
    --delay: 0.2s;
    --timing-function: ease-in-out;

    --in-duration: 0.4s;
    --in-delay: 0.1s;
    --in-timing-function: ease-out;

    width: calc( 3 * var(--offset) + var(--square));
    height: calc( 2 * var(--offset) + var(--square));
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    position: relative;
  }

  .loadingspinner div {
    display: inline-block;
    background: rgb(22, 31, 109);
    /*background: var(--text-color);*/
    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
    border: none;
    border-radius: 2px;
    width: var(--square);
    height: var(--square);
    position: absolute;
    padding: 0px;
    margin: 0px;
    font-size: 6pt;
    color: black;
  }

  .loadingspinner #square1 {
    left: calc( 0 * var(--offset) );
    top:  calc( 0 * var(--offset) );
    animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square2 {
    left: calc( 0 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
  }
  
  .loadingspinner #square3 {
    left: calc( 1 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square4 {
    left: calc( 2 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
  }

  .loadingspinner #square5 {
    left: calc( 3 * var(--offset) );
    top:  calc( 1 * var(--offset) );
    animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
  }

  @keyframes square1 {
    0%      {left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    8.333%  {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square2 {
    0%      {left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    8.333%  {left: calc( 0 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    16.67%  {left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    25.00%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    83.33%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    91.67%  {left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    100%    {left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); }
  }

  @keyframes square3 {
    0%,100% {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    16.67%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    25.00%  {left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    33.33%  {left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    41.67%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    66.67%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    75.00%  {left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    83.33%  {left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    91.67%  {left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square4 {
    0%      {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    33.33%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    41.67%  {left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    50.00%  {left: calc( 3 * var(--offset) ); top: calc( 2 * var(--offset) ); }
    58.33%  {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes square5 {
    0%      {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    50.00%  {left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    58.33%  {left: calc( 3 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    66.67%  {left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); }
    75.00%  {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
    100%    {left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); }
  }

  @keyframes squarefadein {
    0%      {transform: scale(0.75); opacity: 0.0;}
    100%    {transform: scale(1.0); opacity: 1.0;}
  }

.zoom_out {
  animation: zoom_out .5s ease-in-out;
}

@keyframes zoom_out {
  from {   
      opacity: .2;
      margin-top: -20px;
  }
  to {
      opacity: .7;
      margin-top: 0px;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  } 
  to {
    opacity: 1;
  }
}

.section-to-print {
  display: none;
}
@media print {
  main #receipt.section-to-print {
    display: block!important;
  }
  main #barcodes.section-to-print {
    display: block!important;
  }
  
  main #purchase_order_detail.section-to-print {
    display: block!important;
  }

  main #barcodes.section-to-print .row {
    display: flex;
    flex-wrap: wrap;
  }
  main #barcodes.section-to-print .row .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .modal {
    display: none!important;
  }
}