/*BS CANVAS OVERLAY ==============================================================================================================*/
  .bs-canvas-overlay {
      opacity: 0.85;
    z-index: 1100;
  }

  .bs-canvas {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    /*width: 500px;*/
    transition: margin .4s ease-out;
    -webkit-transition: margin .4s ease-out;
    -moz-transition: margin .4s ease-out;
    -ms-transition: margin .4s ease-out;
  }


  .bs-canvas-left {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 80%;
    transition: margin .4s ease-out;
    -webkit-transition: margin .4s ease-out;
    -moz-transition: margin .4s ease-out;
    -ms-transition: margin .4s ease-out;
  }
  .bs-canvas-left {
    left: 0;
    margin-left: -80%;
  }

  .bs-canvas-right {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 70%;
    transition: margin .4s ease-out;
    -webkit-transition: margin .4s ease-out;
    -moz-transition: margin .4s ease-out;
    -ms-transition: margin .4s ease-out;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -70%;
  }


/*CSS CANVAS OVERLAY ==============================================================================================================*/
  /*FROM LEFT*/
    .overlay-left {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      background-color: rgb(0,0,0); /* Black fallback color */
      background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
      overflow-x: hidden; /* Disable horizontal scroll */
      transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay-left (height or width, depending on reveal) */
    }

    /* Position the content inside the overlay-left */
    .overlay-left-content {
      position: relative;
      top: 25%; /* 25% from the top */
      width: 100%; /* 100% width */
      text-align: center; /* Centered text/links */
      margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }

    /* The navigation links inside the overlay-left */
    .overlay-left a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block; /* Display block instead of inline */
      transition: 0.3s; /* Transition effects on hover (color) */
    }

    /* When you mouse over the navigation links, change their color */
    .overlay-left a:hover, .overlay-left a:focus {
      color: #f1f1f1;
    }

    /* Position the close button (top right corner) */
    .overlay-left .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }

    /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
    @media screen and (max-height: 450px) {
      .overlay-left a {font-size: 20px}
      .overlay-left .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }

  /*FROM TOP*/
    .overlay-top {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-y: hidden;
      transition: 0.5s;
    }

    .overlay-top-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }

    .overlay-top a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .overlay-top a:hover, .overlay-top a:focus {
      color: #f1f1f1;
    }

    .overlay-top .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }

    @media screen and (max-height: 450px) {
      .overlay-top {overflow-y: auto;}
      .overlay-top a {font-size: 20px}
      .overlay-top .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
      }
    }

  /*FROM IMM*/
    .overlay-imm {
      height: 100%;
      width: 100%;
      display: none;
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
    }

    .overlay-imm-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }

    .overlay-imm a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .overlay-imm a:hover, .overlay-imm a:focus {
      color: #f1f1f1;
    }

    .overlay-imm .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }

    @media screen and (max-height: 450px) {
      .overlay-imm a {font-size: 20px}
      .overlay-imm .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
      }
    }

  /*CANVAS LEFT*/
    .CanvasLeftOverlay {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 10000; /* Stay on top */
      top: 0;
      left: 0;
      background-color: #111; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    .CanvasLeftOverlay a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    .CanvasLeftOverlay a:hover {
      color: #f1f1f1;
    }
    .CanvasLeftOverlay .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    #main {
      transition: margin-left .5s;
      padding: 20px;
    }
    @media screen and (max-height: 450px) {
      .CanvasLeftOverlay {padding-top: 15px;}
      .CanvasLeftOverlay a {font-size: 18px;}
    }

  /*CANVAS RIGHT*/
    .CanvasRightOverlay {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 10000; /* Stay on top */
      top: 0;
      right: 0;
      background-color: #111; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    .CanvasRightOverlay a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    .CanvasRightOverlay a:hover {
      color: #f1f1f1;
    }
    .CanvasRightOverlay .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    #main {
      transition: margin-left .5s;
      padding: 20px;
    }
    @media screen and (max-height: 450px) {
      .CanvasRightOverlay {padding-top: 15px;}
      .CanvasRightOverlay a {font-size: 18px;}
    }


/*CSS SHORTCUT RIGHT ==============================================================================================================*/
  #RightShortcut a {
    position: fixed; /* Position them relative to the browser window */
    top: 200px;
    /*z-index: 100;*/
    right: -92px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 10px; /* 15px padding */
    width: 120px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 14px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 5px 0px 0px 5px; /* Rounded corners on the top right and bottom right side */
    /*margin-top: 100px;*/
    /*display: block;*/
  }
  #RightShortcut a:hover {
    right: 0; /* On mouse-over, make the elements appear as they should */
  }
/* Only for demo */
body {
    min-height: 100vh;
} 


/*PRODUCT STYLE*/
  .product_image{
    width: 100% !important;
    padding-top: 85% !important;
  }
  .badge_image{
    position: absolute;
    top: 10px;
    left: -5px;
    font-size: 12px;
    box-shadow: 1px 1px 5px 1px #888888;
  }
  label.col-form-label{
    padding-left: 0px !important; 
    padding-right: 0px !important;
    color: #999;
    text-align: right;
  }
/*LINK*/
  .link{
    color: blue;
    cursor: pointer;
  }

/*ZOOM*/
  body{
    zoom: 90% !important; /* Webkit browsers */
  }
  .modal-backdrop{
    width: 100% !important;
    height: 100% !important;
  }


/*SIDEBAR*/
/*#sidebar {
  height: 100%;
  position: fixed;
  overflow-x: hidden;
}*/