/* *****                                          */
/* Birrer Photography | Gallery-System            */
/*                                                */
/* gs_styles.css: CSS Styles for Gallery System   */
/*                                                */
/* St.Birrer, Dec 2022                            */
/* *****                                          */

/* *** General Settings - START *** */
* {
  font-family: 'Raleway', sans-serif;

}

body{
  margin: 0;
  font-size: 12px;
  color: black;

}
/* *** General Settings - END *** */

/* *** Entire Page - START *** */
.gallery-page{
  display: flex;
}
/* *** Entire Page - END *** */


/* *** Side Tree View - START *** */
ul{
  margin:0;
  list-style-type: none;
  padding-bottom: 5px;
  padding-left: 20px;
}

summary{
  display : block;
  cursor: pointer;
}

summary::before{
  content: ' + ';
}

details[open] > summary::before{
  content : ' - ';
}

.tree_view{
  width: 200px;
  height: auto;
  box-sizing: border-box;
  margin-top: 50px;
  margin-left: 10px;
  padding-top: 5px;
  padding-left: 5px;
  border-width: 2px;
  border-color:rgb(32, 70, 207);
  border-style: solid;
}

.list_title{
  margin-top: -15px;
  margin-bottom: 10px;
  background-color: white;
  padding-left: 10px;
  margin-right: 5px;
}
.tree{
  padding-top: 0;
  padding-left:10px;
}
/* *** Side Tree View - END *** */


/* *** Gallery *** */
.gallery{
  margin-left: 30px;
}


/* *** Folder head Image *** */
.folder_head {
  position: relative;
  left: 9%;
  margin: 0;
  width: 80%;
  height: auto;
}
.folder_head img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.folder_desc{
  position: absolute;
  bottom: 15px;
  background-color: rgba(0,0,0,0.5);
  left: 10px;
  padding: 10px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 24px;

}



/* *** Folder Selector *** */
.folder_selector {
  position: relative;
  left: 9%;
  padding: 10px;
  font-size: 16px;
  color: rgb(17, 78, 200);
}


/* *** Folder Images *** */
.image_col {
  position: relative;
  margin: 12px;
  float: left;
  /* left: 9%; */
  width: 250px;
}

.image_col img:hover {
    opacity: 0.7;
}

.image_col img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.image_col .image_desc {
  position: absolute;
  bottom: 15px;
  background-color: rgba(0,0,0,0.5);
  left: 10px;
  right: 10px;
  padding: 5px;
  text-align: center;
  color: white;
  border-radius: 5px;
  font-size: 20px;
}

.image_col .image_desc_line_1 {
  position: absolute;
  bottom: 26px;
  background-color: rgba(0,0,0,0.5);
  left: 10px;
  right: 10px;
  padding: 5px;
  text-align: center;
  color: white;
  border-radius: 5px;
  font-size: 20px;
}

.image_col .image_desc_line_2 {
  position: absolute;
  bottom: 5px;
  background-color: rgba(0,0,0,0.5);
  left: 10px;
  right: 10px;
  text-align: center;
  color: white;
  border-radius: 5px;
  font-size: 12px;
}

.desc {
  text-align: center;
  color: white;
}

.image_desc_pic {
  position: absolute;
  bottom: 15px;
  background-color: rgba(0,0,0,0.5);
  left: 10px;
  right: 10px;
  padding: 5px;
  text-align: center;
  color: white;
  border-radius: 5px;
  font-size: 10px;
}


.download_check {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.download_submit {
  cursor: pointer;
}

.active_check {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  color: white;
}

/* *** iFrame responsive *** */
.iframe_container {
/*  position: relative;
  overflow: hidden;
  width: 80%;
  padding-top: 56.25%;  16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  position: relative;
  margin: 0 10% 0 10%;
  width: 80%;
  height: 800px; 
    
}

/* Then style the iframe to fit in the container div with full height and width */
.iframe_responsive {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.iframe_container_lake {
  position: relative;
  margin: 0 10% 0 10%;
  width: 80%;
  height: 600px; 
}
 
.iframe_container_lake_vt {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  height: 600px; 
}
  

.iframe_responsive_lake {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* *** Copyright popup question - START *** */
.copyright_text p {
background-color: white;
color: blue;
padding: 10px 25px 10px 25px;
}

.button_ok{
  background-color: green;
}

.button_nok{
  background-color: red;
}
/* *** Copyright popup question - END *** */

/* *** Groupname - START *** */
.groupname p {
color:grey;
font-weight: 500;
}
/* *** Groupname - END *** */

/* *** checkboxes - START *** */
/*[type="checkbox"] {
  position: absolute;
  align-items: right;
  right: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
  }

[type="checkbox"] + label {
  position: absolute;
  color: #1769BB;
  border-radius: 5px;
  }

[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #1769BB;
  background-color:black;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
  }
[type="checkbox"]:checked + label::before {
  box-shadow: inset 0px 0px 0px 3px #000;
  background-color: #1769BB;
  }

/* *** checkboxes - END *** */

/* *** Side Tree View - START *** */
ul{
  margin:0;
  list-style-type: none;
  padding-bottom: 5px;
  padding-left: 20px;
  color: white;
}
li{
  color: white;
}

summary{
  display : block;
  cursor: pointer;
}

summary::before{
  content: ' + ';
}

details[open] > summary::before{
  content : ' - ';
}

.tree_view{
  width: 200px;
  height: auto;
  box-sizing: border-box;
  margin-top: 50px;
  margin-left: 10px;
  padding-top: 5px;
  padding-left: 5px;
  border-width: 2px;
  border-color:rgb(32, 207, 55);
  border-style: solid;
}

.list_title{
  margin-top: -15px;
  margin-bottom: 10px;
  background-color: rgb(77, 27, 27);
  padding-left: 10px;
  margin-right: 5px;
  color:white;
}
.tree{
  padding-top: 0;
  padding-left:10px;
}
/* *** Side Tree View - END *** */