@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");

html, body {
  color: #454751;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 16px !important;
  line-height: 24px;
  margin:0px!important;
}

body {
  margin:0px!important;
}

h1{
  margin-top: 0px;
}

button:hover{
  cursor: pointer; 
}

.album-card:hover{
  cursor: pointer; 
}   

.headerText:hover{
  cursor: pointer; 
}

a:link {
  text-decoration: none;
}

ul {
  list-style-type: none;
}
.upperBanner{
  position: relative;
  background-color: #1A264B;
  width: -webkit-calc(100% - 106px);
  width:    -moz-calc(100% - 106px);
  width:         calc(100% - 106px);
  padding-top: 10px;
  padding-left: 10px;
  height: 97px;
  color: white;
  font-size: 29px;
  padding-left: 106px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))
}

.card{
  display: inline-block;
  word-break: break-all;
  border: 2px solid #5C5F62;
  border-radius: 15px;
  width: 219px;
  height: 300px;
  vertical-align:top;
  margin-bottom:10px;
  margin-left: 10px;
  position: relative;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.cardBody{
  position: absolute;
  bottom: 0px;
  width: 219px;
  height: 150px;
  /* display: flex;
  justify-content: center; */
  background-color: #F4F4F7;
  border-radius: 0 0 15px 15px;
  display: flex;
  justify-content: center;
}

.cardDownloadButtonDiv{
  justify-content: center;
  margin-bottom: 5px;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 10px;
}


.card img{
  width: 219px;
  height: 100%;
  border-radius: 12px 12px 0px 0px;
}

.photoName{
  word-break: break-all!important;
  margin-left: 5px;
  margin-right: 5px;
}

.session_token_span {
    width: 500px;
    word-break: break-word;
}

#s3button{
  position: absolute;
  right: 110px;
  font-size: 16px;
  top: 60px;
}
#s3button:hover{
  cursor: pointer;
}

div#directoryCardSpace ul li {
  display: inline;
  list-style-type: none;
  padding: 0;
}

#directoryCardSpace{
  padding-top: 22px;
}

.albumCard{
  display: inline-block;
  word-break: break-all;
  border: 1px solid #C2D1D9;
  border-radius: 15px;
  /* height: 283px; */
  height: 283px;
  vertical-align:top;
  margin-bottom:10px;
  position: relative;
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
}

.carouselImage{
  max-height: 220px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.album-card{
  display: inline-block;
  word-break: break-all;
  border: 1px solid #C2D1D9;
  border-radius: 15px;
  /* height: 283px; */
  height: 283px;
  vertical-align:top;
  margin-bottom:10px;
  position: relative;
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
}
.albumCardImgDiv{
  position: relative;
  top: 0%;
}

.albumCardNameDiv{
  position: relative;
  bottom: 0%;
  height: 63px;
  margin-left: 10px;
}
.albumCard img{
  max-height: 220px;
  /* border-radius: 12px 12px 0px 0px; */
  overflow: hidden;
}
#yourAlbums{
  margin-left: 106px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  margin-top: 20px;
  position: relative;
  margin-right: 106px;
}
.path{
  margin-left: 106px;
  margin-top: 28px;
  display: inline-flex;
}
.path button{
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: #515457;
}

.albumRefreshButton{
  padding-left: 0px;
}
.headerText{
  color: white;
  font-size: 29px;
  font-weight: 600;
  line-height: 35px;
  position: absolute;
  top: 36px;
}
.horizontalLine{
  border: 1px solid #D8D8D8;
  margin-left: 106px;
  margin-right: 106px;
}

#albumsDiv{
  display: grid;
  grid: auto/ auto auto auto auto;
  margin-right: 106px;
  margin-left: 106px;
  gap: 27px 32px;
}

.overCard{
  display: inline-block;
  height: 283px;
}
.over-card{
  display: inline-block;
  /* height: 283px; */
  height: 100%;
}



*, ::after, ::before {
  box-sizing: content-box!important;
}

.folderIcon{
  height: 24px!important;
  width: 24px!important;
  display: inline-block;
  position: relative;
  top: 20px;
  left: 9px;
}
.folderName{
  display: inline-block;
  position: relative;
  top: 20px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  top: 3px;
  margin-right: 35px;
  white-space: nowrap;
  width: 65%;
  overflow: hidden;
  text-align: left;
  margin-left: 14px;
}

.album-card .folderName{
  display: inline-block;
  position: relative;
  top: 20px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  top: 20px;
  margin-right: 0px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-align: left;
  margin-left: 12px;
}

.footer{
  background-color: #1A264B;
  /* position:absolute;
  bottom:0px; */
  height: 439px;
  width: 100%;
  color: white;
  font-size: 16px;
  padding-left: 106px;
  margin-right: 106px;
  margin-top: 114px;
  padding-top: 27px;
  width: -webkit-calc(100% - 106px);
  width: -moz-calc(100% - 106px);
  width: calc(100% - 106px);
  position: relative;
}

.footer .horizontalLine{
  margin-top: 34px;
  margin-left: 0px;
  margin-bottom: 25px;
}
.footerBody div span{
  font-weight: 700;
}

.footerLine{
  border: 1px solid #ffffff;
}
.footerBody{
  display: grid;
  grid: auto/ auto auto auto auto;
  gap: 27px 32px;
  margin-right: 106px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footerContact{
  grid-column: 4;
  display: grid;
  grid: auto/ auto auto auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footerContact div{
  grid-column: 2/4;
}


.footerCopyright{
  position: absolute;
  bottom: 20px;
}
@media screen and (min-width: 501px) and (max-width: 1200px){
  #albumsDiv{
    display: grid;
    grid: auto/ auto auto auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cardSpace{
    grid: auto/ auto auto auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1201px){
  #albumsDiv{
    display: grid;
    grid: auto/ auto auto auto auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cardSpace{
    grid: auto/ auto auto auto auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    
  }
}
/* @media screen and (min-width: 1501px){
  #albumsDiv{
    display: grid;
    grid: auto/ auto auto auto auto auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cardSpace{
    grid: auto/ auto auto auto auto auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
} */
@media screen and (min-width: 200px) and (max-width: 500px){
  #albumsDiv{
    display: grid;
    grid: auto/ auto;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .cardSpace{
    grid: auto/ auto;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.returnHome{
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding-left: 0px;
  position: relative;
  top: 4px;
}
.albumName{
  display: inline-block;
  margin-left: 10px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}
.backMenu{
  margin-left: 106px;
  margin-top: 19px;
  position: relative;
}
.subFoldersName{
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 24px;
}

.imagesText{
margin-left: 106px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 32px;
margin-bottom: 20px;
}

.subFoldersName{
margin-left: 106px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 32px;
}

.photoCard{

  display: inline-block;
  word-break: break-all;
  border: 1px solid #C2D1D9;
  border-radius: 15px;
  width: auto;
  height: 283px;
  vertical-align:top;
  margin-bottom:10px;
  position: relative;
  width: 100%;
  margin-right: 10px;

}
.photoCard img{
  width: 100%;
  height: 220px;
  border-radius: 12px 12px 0px 0px;
}
.cardSpace{
  display: grid;
  margin-left: 106px;
  margin-right: 106px;
  gap: 27px 32px;
}
.downloadButton{
  background-color: rgba(0, 0, 0, 0);
  border: none;
  display: inline-block;
  position: relative;
}






/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: rgba(0,0,0,0)!important;
  margin: 8% auto; /* 15% from the top and centered */
  position: relative;
  border: none!important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

.modalFooter{
  width: 100%;
  height: 53px;
  position: absolute;
  bottom: 6px;
  background-color: rgba(0,0,0,0.6);
}

.modalFooterImageNameDiv{
  color: white;
  position: absolute;
  bottom: 16px;
  left: 20px;
  overflow: hidden;
  width: calc(100% - 40px);
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 68px;
  font-weight: 300;
  position: absolute;
  right: -53px;
  top: -81px;
}

.close:hover,
.close:focus {
  color: #888888;
  text-decoration: none;
  cursor: pointer;
}
#modalImg{
  width: 100%;
}
.carouselPrev{
top: 170px;
left: -100px;
position: absolute;
padding: 10px;
}
.carouselNext{
top: 170px;
left: calc(100% + 50px);
position: absolute;
padding: 10px;
}

.downloadIcon{
  margin-right: 9px;
  top: 14px;
}

.subFoldersName .horizontalLine{
  margin-left: 0px;
}

.backMenu{
  margin-right: 106px;
}

.viewButton{
  background-color: rgba(0,0,0,0);
  border: none;
}

.gridViewButton{
  display: inline-block;
  position: absolute;
  right: 0px;
}
.listViewButton{
  display: inline-block;
  position: absolute;
  right: 31px;
}

/* .listView{
  grid: auto/ auto !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 0px 0px !important;
} */

/* .imagesCardNameDivListView {
  position: absolute;
  top: -7px;
  left: 94px;
  width: 100%;
}

.horizontalLineListView{
  margin: 0px;
  border: 1px solid #f3eded;
}
.listViewImgWrappedListView{
  left: 20px;
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 50px;
} */




.listView{
  grid: auto/ auto !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 0px 0px !important;
}


.listView .overCard{
  height: 50px;
}
.listView .over-card{
  height: 50px;
}
.listView .album-card{
  height: 50px;
  border: none;
}
.listView .albumCard{
  height: 50px;
  border: none;
}
.listView .albumCardImgDiv{
  height: 50px;
}
.listView .carouselImage{
  max-height: 40px;
  top: 5px;
  position: absolute;
}
.listView .cardDownloadButtonDiv{
  right: 110px;
}

.listView .imagesFolderIcon{
  display: none;
}

.listView .albumCardNameDiv {
  position: absolute;
  top: -7px;
  left: 94px;
  width: 100%;
}

.listView .horizontalLineListView:not(:last-child){
  margin: 0px;
  border: 1px solid #f3eded;
  display: block !important;
}
.listView .listViewImgWrapped{
  left: 20px;
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 50px;
}

.mainFolderIcon{
  max-height: 220px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.1;
}


.listView .mainFolderIcon{
  position: relative;
  overflow: hidden;
  max-height: 40px;
  margin-left: 0;
  margin-right: 0;
  top: 5px;
}

.image-logo{
  width: 80px;
  position: absolute;
  left: 12px;
  top: 22px;
}
.image-logo:hover{
  cursor: pointer;
}

.albumCardNameDiv {
    position: absolute;
    width: 100%;
}