body { font-family: 'Segoe UI'; background-color: aliceblue; margin:0; padding: 0 }

body, html {
  height: auto !important;
  overflow-x: hidden;
}

 /* Fixed sidenav, full height */
 .sidenav {
  height: 100%;
  width: 220px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  /* padding-top: 20px; */
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 0px 8px 6px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #ffffff;
  display: block;
  border: none;
  /* background: none; */
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  background: linear-gradient(to left, rgb(85, 85, 85) 50%, rgb(24, 91, 206) 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
  background-position: left;
}

/* Main content */
.container-content {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: #2095f2;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
} 

h1.hTitle { width: 320px; font-size:24px; text-align: center; background-color: #f7bf20; 
    margin-left: auto; margin-right: auto; 
    position:absolute; top:5px; left:0;right:0;z-index: 1; 
    height: 35px;
    padding: 5px 0;
}

.wrapper        { padding-top: 100px; text-align: center; z-index: 1; height: 100%; position: relative;}

div.divContent      { margin-top: 0px;}
div.headerBackground {
    width: 350px;
    height: 40px;
    position: absolute;
    top: 10px;
    background-color: #f78f6c;
    -ms-transform: rotate(-3deg); /* IE 9 */
    transform: rotate(-3deg);
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 0;
  }

.mainContainer    {display: grid; grid-template-columns: 150px auto; }
.sideNav        { background-color: #555;}
h2              { font-size: 18px; }
.ulGuide      { padding: 0; margin: 0; width: 1300px; }
.ulGuide li      { display: inline-block; width: 400px; border: 2px solid #EAEAEA; height: 305px; margin-bottom: 10px; list-style-type: none; background-color: white; }

.divContainerGuide  { display: grid; grid-template-columns: 25px auto 15px 20px; gap:5px; }
.divNumber    { background-color: #f7906c; width: 35px; margin-bottom: 10px; border-radius: 100%; }

/* .guideContent { 
  padding-left: 5px; 
  text-align: left; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */

.divContainerGuide i        { color: blue; cursor: pointer; }
.divContainerGuide i.iMore        { color: grey; cursor: pointer; }

/* .ulGuide li img:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport)  } */

.mytooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted white;
}

.mytooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: white;
  color: black;
  font-size: 12px;
  font-family: 'Segoe UI';
  font-weight: normal;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  border: 1px solid #AAA;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -160px;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.mytooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.popup {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  z-index: 1000;
  float: right;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #FFF;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  border: 1px solid black;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  font-size: 12px;
  font-family: 'Segoe UI';
  font-weight: normal;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFF transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.thumb {
  height: 200px !important;
  width: 400px;
}

/* .thumb {
  background: linear-gradient(to left, rgb(252, 252, 252) 0%, rgb(24, 91, 206) 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}

.thumb:hover {
  background-position: left;
} */

.cross-btn {
  /* position: absolute; */
  float: right !important;
  padding: 5px 5px;
}

.burger-btn {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  z-index: 2;
}

.sidenav-closed {
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-name: closeNav;
}

.container-fit {
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-name: fitContent;
}

.sidenav-open {
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-name: openNav;
}

.container-shrink {
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-name: shrinkContent;
}

.other-link {
  text-align: left !important;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

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

@keyframes closeNav {
  from {width: 220px}
  to {width: 0px;}
}

@keyframes fitContent {
  from {margin-left: 220px;}
  to {margin-left: 0px;}
}

@keyframes openNav {
  from {width: 0px}
  to {width: 220px;}
}

@keyframes shrinkContent {
  from {margin-left: 0px;}
  to {margin-left: 220px;}
}

/* @media (max-width: 768px) {
  .burger-btn {
    display: inline !important;
  }

  .sideNav {
    display: none !important;
  }

  .container-content {
    margin-left: 0 !important;
  }
} */