* {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;  
  cursor: default;
  background-color: rgba(0,0,0,0.6);
  padding: 0;
  margin: 0;
}

html, body {
  color: ivory;
  margin: 0;
  height: 100%;
  width: 100%
}

.flex-container-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.header {
  border: 10px;
  border-color: rgb(65, 64, 64); 
  margin: 0px;
  background-color: rgb(65, 64, 64);
}

#headertable {
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);  
}

#fileshippinglogo {
  width: 120px;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);  
}

#fileshippingtext {
  font-size: 42px;
  text-align: center;
  cursor: pointer;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);   
}

#betatext {
  font-size: 12px;  
  text-align: center;
  cursor: pointer;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);   
}

.footer {
  border: 10px;
  border-color: rgb(65, 64, 64); 
  margin: 0px;
  background-color: rgb(65, 64, 64);
}

.footertext {
  text-align: left;
  vertical-align: top;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);   
}

.flex-container-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;    
}

.flex-container-filetransfer {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;    
}

.fileelement {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;     
  border-radius: 10px;
  max-width: 500px;
  min-width: 300px;  
  padding: 5px;
  border-style: solid;
  border-width: 0px;
  border-color: ivory;
  margin: 10px;   
  box-shadow: 2px 2px 8px ivory, 0px -2px 8px ivory, -2px 0px 10px ivory;
  animation: bouncy .3s linear forwards;
}

.interactiveelements {
  display: flex;
  flex-direction: row;
  justify-content: center;  
  align-items: center;     
}

.fileelementtext { 
  word-break: break-all; 
  display: inline-block;    
  margin: 10px;  
  cursor: copy;
}

.droptarget {
  border: 5px;
  border-style: dashed;
  border-radius: 30px;  
  border-color: ivory;
  font-size: 24px;
  text-align: center;
  color: grey;
  display: flex;
  justify-content: center;
  align-items: center;  
  min-width: 550px; 
  min-height: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0px;
}

.wizardtext {
  font-size: 12px;
  text-align: center;
  color: grey;
  justify-content: center;
  align-items: center;      
}

input[type="file"] {
  display: none;
}

.custom-file-upload-label {
  border: 1px solid ivory;
  border-radius: 8px;  
  display: inline-block;
  background-color: #00ccff;
  padding: 6px 12px;
  color: ivory;
  cursor: pointer;
  margin: 0px;
}

.custom-upload-button-text {
  background-color: #00ccff; 
  cursor: pointer;  
  color: ivory;  
}

.custom-file-upload-label:hover {
  box-shadow: 2px 2px 8px ivory, 0px -2px 8px ivory, -2px 0px 8px ivory;
}

.buttoncontainer {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;    
  min-width: 300px;   
}

#brlogo {
  width: 150px;
  height: auto;
  background-color: rgb(65, 64, 64);  
}

#highseas {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.copytoclipboardimg {
  width: 24px;
  height: auto;
  display: inline-block;   
  margin: 5px;  
  cursor: copy;
}

.sendemailimg {
  width: 24px;
  height: auto;
  display: inline-block;   
  margin: 5px;  
  cursor: pointer;
}

a:link {
  color: grey; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: grey;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: ivory;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: grey;
  background-color: transparent;
  text-decoration: none;
}

canvas {
  visibility: hidden;
  display: none;
}

.header-footer-td {
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);  
}

.navitem {
  border: 1px;
  border-style: solid;
  border-radius: 5px;  
  border-color: ivory;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  background-color: #00ccff; 
}

.navitem:hover {
  box-shadow: 2px 2px 8px ivory, 0px -2px 8px ivory, -2px 0px 8px ivory;
}

.slidecontainer {
  width: 100%; 
  margin-bottom: 5px;
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);   
}

.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 5px; 
  background: #d3d3d3; 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: .2s; 
  transition: opacity .2s; 
}

.slider:hover {
  opacity: 1; 
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  width: 15px; 
  height: 20px; 
  border-radius: 10px;   
  background: #00ccff; ; 
  cursor: pointer;   
}

.slider::-moz-range-thumb {
  width: 15px; 
  height: 20px; 
  border-radius: 10px;  
  background: #00ccff;
  cursor: pointer; 
}

.footerclickable {
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);  
  cursor: pointer;   
}

.powerindicator {
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64); 
}

#footertable {
  border-color: rgb(65, 64, 64); 
  background-color: rgb(65, 64, 64);
}

.infoelementcontainer {
  border: 3px;
  border-style: solid;
  border-radius: 30px;  
  border-color: ivory;
  max-width: 500px;
  min-width: 300px;
  margin: 10px;
}

.infoelementheading {  
  font-size: 32px;
  margin: 15px;
}

.infoelementcontent {  
  font-size: 14px;
  margin: 15px;
}

.progress-container {
  border-style: hidden;  
  background-color: rgb(65, 64, 64); 
  text-align: center;
  border-radius: 8px;  
  margin-bottom: 10px;
}

.progress-bar-rounded {
  background-color: #00ccff;
  border-radius: 8px;
}

@keyframes bouncy {
  0% { transform: scale(.1); opacity: 0 }  
  80% { transform: scale(1.15); opacity: 1 }  
  90% { transform: scale(.9); }  
  100% { transform: scale(1); }  
}

#main-container {
  height: 100%;
  width: 100%;
  border-collapse: collapse;
}

.invisible {
  display: none;
}