/****************************************************************************/
/*   Import/Export        -                                                 */
/****************************************************************************/
/*                                       WORLD MAP                          */
/* The container will have relative positioning */
.continent-container {
  position: relative;
  width: 80vw;  /* Adjust as needed */
  height: 80vh; /* Adjust as needed */
  margin: 0 auto;
  background-color: #f0f0f0; /* Just for better visibility */
  overflow: hidden;  /* Ensure images don't overflow */
}

/* Overlay images are absolutely positioned in the center */
.overlay-NorthAmerica {
  position: absolute;
  top: 33%;
  left: 15%;
  transform: translate(-50%, -50%);
  width: 40%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}

.overlay-SouthAmerica {
  position: absolute;
  top: 66%;
  left: 21.5%;
  transform: translate(-50%, -50%);
  width: 15%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}
.overlay-Europe {
  position: absolute;
  top: 28%;
  left: 44%;
  transform: translate(-50%, -50%);
  width: 25%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}
.overlay-Africa {
  position: absolute;
  top: 58%;
  left: 44%;
  transform: translate(-50%, -50%);
  width: 20%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}

.overlay-Asia {
  position: absolute;
  top: 40%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 50%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}

.overlay-Australia {
  position: absolute;
  top: 70.5%;
  left: 85%;
  transform: translate(-50%, -50%);
  width: 20%;  /* Adjust to make image responsive */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for effects */
}


/* Hover effect for image */
.overlay-image:hover {
  filter: brightness(0.8) contrast(1.2); /* Change color on hover */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);  /* Add shadow effect */
  transform: translate(-50%, -50%) scale(1.1);  /* Zoom effect on hover */
}

/*                              TOGGLE SIDEBAR                          */

/* The sidebar is fixed to the right-center of the screen */
.toggle-sidebar-ie {
  position: fixed;
  right: 0;
  top: 20%;
  transform: translateY(-50%);
  width: 230px; /* Set the width of the sidebar when fully expanded */
  height: 100px;
  background-color: #8dd3cf;
  color: #000000;
  box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease; /* Smooth transition for toggling */
  z-index: 1000;
  overflow: hidden;
  display: flex;
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
  filter: alpha(opacity=50);  /* IE 5-7 */
  -moz-opacity: 0.5;          /* Netscape */
  -khtml-opacity: 0.5;        /* Safari 1.x */
  opacity: 0.5;               /* Good browsers */

}

/* Arrow on the left side */
.toggle-sidebar-ie .arrow {
  width: 20px; /* Width of the arrow bar */
  height: 100%; /* Full height */
  background-color: #333; /* Same as sidebar background */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow direction */
.toggle-sidebar-ie .arrow::before {
  content: '→'; /* Right arrow */
  font-size: 20px;
  color: white;
  transition: transform 0.3s ease;
}

/* Content of the sidebar */
.toggle-sidebar-ie .content {
  padding: 8px;
  flex-grow: 1;
  overflow: auto;
  text-align: right;  /* Align text to the right */
  font-size: 13px;
}

/* The small strip when sidebar is collapsed */
.toggle-sidebar-ie.closed {
  width: 40px;  /* Width when collapsed (small strip) */
  box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.5); /* More prominent shadow when collapsed */
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
  filter: alpha(opacity=100);  /* IE 5-7 */
  -moz-opacity: 1;          /* Netscape */
  -khtml-opacity: 1;        /* Safari 1.x */
  opacity: 1;
}

/* Optional: Change appearance of the content when collapsed */
.toggle-sidebar-ie.closed .content {
  display: none; /* Hide the content when collapsed */
}

.toggle-sidebar-ie.closed .arrow::before {
  transform: rotate(180deg); /* Rotate the arrow to point left */
}

/*                              TOGGLE SIDEBAR CLOSED                    */