/* Popup container - can be anything you want */

body{
	font-family: 'Roboto', sans-serif;
}
    

.container {display: grid;
            width: 100%;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			justify-items: center;
}
.container>.folder{width: 1200px;
                     height: auto;
					 border: 1px solid black;
					 padding-left: 10px;
					 line-heght: 1em;
					 
					 
}
.container>.subfolder{width: 350px;
                     height: auto;
					 border: 1px solid black;
					 text-align: center;
					 cursor: pointer;
}
.container>.abstand{width: 0px;
                     height: 30px;
					 border: 1px solid black;
}
.zwei_spans{display: grid;
            width: 100%;
      	grid-template-columns: 1fr 1fr 1fr 1fr ;
	   }
.zwei_spalten {
	    display: grid;
        width: 100%;
	    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */
		grid-column-gap: 20px;
	}

	.zwei_spalten > div {
		background-color: #fff;
        padding-right: 2em;		
	}

.pointer {cursor: pointer;
         }
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  height: 100px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;  
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

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

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

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

@keyframes fadeIn {
  from {opacity: 0;}
  
.border {border: 1px solid #000000;
}

.container {display: grid;
            width: 100%;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			justify-items: center;
}
.container>.folder{width: 500px;
                     height: 400px;
					 border: 1px solid black;
}