:root{
  --primary-color: #1E1E1E;
  --secondary-color: #121212;
  --highlight-color: #3882F6;
  --highlight2-color: #BB86FC;
  --hover-color: #242428;
  --primary-text-color: #F8F9FA;
  --muted-text-color:#4a4c51;
  --primary-font: gg-sans, sans-serif;
  --bold-font: gg-sans-bold, sans-serif;
  --semibold-font: gg-sans-semibold, sans-serif;
  --medium-font: gg-sans-medium, sans-serif;
  --border-color: #495057;


  --border: hsl(214.3 31.8% 91.4%);

  --background: hsl(0 0 100%);
  --muted: #FAFCFD;
  --background-muted: var(--muted)/0.3;
  --text: hsl(243, 76%, 5%);
  --title-text: #1f2937;
  --primary: hsl(243, 68%, 48%);
  --accent: hsl(242, 100%, 62%);
  --dark-button: HSL(222.2 47.4% 11.2%);

  --dark-blue: #2b63be;
  --dark-blue-hover: #3375e0;
  --blue: #3882F6;
  --blue-hover: #186ef7;
  --orange: rgb(255, 175, 71);
}

main{
  background-color: var(--muted);
}

.file svg, .folder svg{
  width:25px;
  height:25px;
}

.file, .folder {
  display:flex;
  align-items: center;
  gap:8px;
}

.folder-header svg{
  width:25px;
  height:25px;
}

.folder-header {
  display:flex;
  align-items: center;
  gap:8px;
  font-size:1rem;
  font-family:sans-serif;
  font-weight:bold;
}

a{
  text-decoration: none;
  color:black;
}

body{
  margin:0;
  padding:0;
}

.root-container{
  min-height:100dvh;
  display:grid;
  grid-template-rows: auto 1fr auto;
}

p{
  margin:0;
  padding:0;
}

li{
  list-style-type: none;
}

/* --------------------------------*/
/* ------------ NAVBAR ------------*/
/* --------------------------------*/

.navbar-wrapper{
  border-bottom: solid 1px var(--border);
  display:flex;
  justify-content: center;
  width:100%;
  background-color: var(--background);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05)
}

.navbar-container{
  max-width:1200px;
  display:flex;
  flex:1;
  justify-content: space-between;
  align-items: center;
  margin-left:16px;
  margin-right:16px;
}

.navbar-links{
  display: flex;
  gap:16px;
}

.nav-logo a{
  color: black;
  font-size:1.5rem;
  font-style: italic;
  font-weight: bold;
  font-family: sans-serif;
  display:flex;
  gap: 4px;
  align-items: center;
}

.nav-logo svg{
  width:1.5rem;
  height:1.5rem;
}

.get-started-button{
  background-color: var(--dark-button);
  color:white;
  border-radius:4px;
  padding:10px 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size:0.9rem;
  font-weight:500;
}

.get-started-button:hover{
  background-color: HSL(222.2 47.4% 20.2%);
}



.log-in-button, .log-in-button-logged-in{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size:0.9rem;
  font-weight:500;
}

@media(max-width:373px){
  .log-in-button{
    display:none;
  }
}



/* --------------------------------*/
/* ------------ LOG IN ------------*/
/* --------------------------------*/

.login-container{
  display:flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  letter-spacing: 0.01em;
  padding: 0 1rem;
}

.login-container label{
  padding-bottom:2px;
  font-size:.8rem;
}

.login-form > .form-group input{
  border: 1px solid var(--border);
  padding: 8px;
}

.login-form > .form-group input:focus{
  border: 1px solid var(--border);
}



.login-container button{
  color:white;
  border:none;
  border-radius:4px;
  padding:10px 16px;
  margin-bottom: 16px;
}

.login-container button:not(.dark-button){
  background-color: var(--blue);
}

.login-container button:not(.dark-button):hover{
  background-color: var(--blue-hover);
}

.dark-button{
  background-color: var(--dark-blue);
}

.dark-button:hover{
  background-color: var(--dark-blue-hover);
}

.login-box{
  min-width:350px;
  border: solid 1px var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:24px 48px;
  background-color:white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
}

@media(max-width: 375px){
  .login-box{
    min-width:0px;
    padding:12px 24px;
    flex:1;
  }
}

.login-box h3{
  font-family: sans-serif;
  text-align: center;
}

.login-form{
  width:100%;
}

.login-form label{

}

.form-group{
  display:flex;
  flex-direction: column;
  align-self: center;
  margin-top:16px;
  flex-wrap:wrap;
}

.form-group input{
  padding:6px;
  
}

.login-box button{
  width:100%;
}

.login-signup-title{
  font-size: 0.9rem;
  color: var(--muted-text-color);
  font-family: sans-serif;
  margin-top:24px;
  margin-bottom:8px;
}

hr{
  width:100%;
}

.form-spacer{
  margin-top:16px;
  display:flex;
  width:100%;
  gap:2px;
  color: var(--muted-text-color);
}

.form-spacer hr{
  border-width:0;
  height: 0.001em;
  border: 0.001em solid var(--muted-text-color);
}

button{
  cursor: pointer;
}

/* ---------------------------------*/
/* ------------- ERROR -------------*/
/* ---------------------------------*/

.error{
  padding-top:0px;
  color:red;
  font-size:1rem;
  word-break: break-word;
  text-align:left;
  padding-bottom:8px;
  font-weight:500;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.good-error{
  padding-top:0px;
  color:rgb(0, 170, 0);
  font-size:1rem;
  word-break: break-word;
  text-align:left;
  padding-bottom:8px;
  font-weight:500;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



/* --------------------------------------*/
/* ------------- TABLE DATA -------------*/
/* --------------------------------------*/
.file-dashboard-header{
  max-width: 1200px;
  width:100%;
  justify-self: center;
  padding:8px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:16px;
  box-sizing: border-box;
  background-color: var(--muted);
}

.file-dashboard-header-left p{
  width: 100%;
}

.file-dashboard-header-right{
  display:flex;
  gap:16px;
}

@media (max-width: 675px){
  .file-dashboard-header {
    flex-direction: column;
  }
  .file-dashboard-header-right, .file-dashboard-header-right form{
    display: flex;
    flex-direction:column;
    gap: 1rem;
    justify-content: center;
    width:100%;
  }
}

@media (max-width: 800px){
  .column-4{
    display:none;
  }
}

@media (max-width: 650px){
  .column-3{
    display:none;
  }
}

@media (max-width: 516px){
  .column-2{
    display:none;
  }
}

.file-dashboard-table{
  box-sizing: border-box;
  padding: 0px 8px 0px 8px;
}

.folder-view-header{
  max-width: 1200px;
  width:100%;
  justify-self: center;
  display:flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding:8px;

}

@media(max-width: 639px){
  .folder-view-header{
    flex-direction: column;
    gap:1rem;
    align-items: flex-start;
  }

  .file-dashboard-header-buttons, .file-dashboard-header-buttons button{
    display: flex;
    flex-direction:column;
    gap: 1rem;
    justify-content: center;
    width:100%;
  }

  .folder-header{
    width:100%;
    justify-content: center;
  }
  
}

.folder-view-header a{
  display:flex;
  align-items: center;
  color:rgb(0, 0, 0);
  background-color: var(--orange);
  border-radius:8px;
  padding:8px 24px;
}
.folder-view-header svg{
  height:16px;
  width:16px;
}

.file-dashboard-header-buttons{
  display:flex;
  gap:16px;
}

#realFileInput{
  display:none;
}

.file-dashboard-header button, .folder-view-header button:not(.gray-button2){
  border:none;
  cursor: pointer;
  background-color:var(--blue);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
}


.file-dashboard-header button, .folder-view-header button:hover:not(.gray-button2){
  background-color: var(--blue-hover);
}

.gray-button2{
  border:none;
  cursor: pointer;
  background-color: rgb(151, 151, 151);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
}

.gray-button2:hover{
  background-color: rgb(122, 122, 122);
}



.table-row-name{
  display:flex;
  gap: 4px;
  align-items: center;
}

.table-row-name svg{
  width:25px;
  height:25px;
}

table {
  border-collapse: collapse;
 /*border: 2px solid rgb(140 140 140);*/
  border: 2px solid var(--border);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  max-width:1200px;
  width:100%;
  justify-self: center;
  background-color: var(--background);
}

th, td {
  padding: 8px 10px;
  white-space: nowrap;
}

.truncate-text{
  max-width: 275px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

tr{
  /*border: 1px solid rgb(160 160 160);*/
  border: 1px solid var(--border);
}

tbody tr:hover{
  background-color: rgb(233, 233, 233);
  cursor:pointer;
}

tbody th{
  font-weight:normal;
}

tbody td{
  color: var(--muted-text-color)
}

thead{
  text-align:left;
}

/* ---------------------------------------*/
/* -------------- FILE INFO --------------*/
/* ---------------------------------------*/

.file-view-header{
  max-width: 1200px;
  width:100%;
  justify-self: center;
  display:flex;;
  align-items: center;
  box-sizing: border-box;
  padding:8px;
  justify-content: space-between;
}

.file-view-header a{
  display:flex;
  justify-self: left;
  align-items: center;
  color:rgb(0, 0, 0);
  background-color: var(--orange);
  border-radius:8px;
  padding:8px 24px;
}
.file-view-header svg{
  height:16px;
  width:16px;
}

.file-info-card-container{
  padding: 0px 8px 0px 8px;
}

.file-info-card{
  justify-self: center;
  max-width:600px;
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  /*box-shadow: 5px 5px 10px rgb(197, 197, 197);*/
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
  padding:32px;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  align-items:center;
  background-color: var(--background);
}

.copy-status{
  margin-top:8px;
  text-align:center;
  font-weight:500;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:green;
}

.copy-container-top input{
  border: 1px solid var(--border);
  border-radius:8px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.file-info-card:not(.file-info-card-buttons){
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.file-info-card-buttons-bottom form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.file-info-card-buttons-bottom .expiration{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content: center;
}

.file-info-card-title{
  font-weight:bold;
}

.file-info-card-body{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding:32px;
  
}

.file-info-card-body p{
  word-wrap: break-word;
  max-width:350px;
}

.file-info-card-buttons{
  display:flex;
  flex-direction: column;
  gap:16px;
  align-items:center;
}

.file-info-card-buttons-top{
  display:flex;
  gap:16px;
}

.file-info-card-buttons-bottom{
  display:flex;
}

.generate-link-button{
  box-shadow: 3px 3px 5px rgb(201, 201, 201);
}

.file-info-card-manage-links-button{
  color: var(--muted-text-color);
  text-decoration: underline;
}

/* Links Page - Using file info card styles*/

.file-info-card-title-links{
  padding-bottom:12px;
  
}


.file-info-card-title-subtext{
  color: var(--muted-text-color);
  display:flex;
  align-items: center;
  gap:8px;
  padding-bottom:32px;
}

.file-info-card-title-subtext svg{
  width:25px;
  height:25px;
}

.file-info-card-body-links{
  display:flex;
  flex-direction: column;
  gap:16px;
  padding-bottom:16px;
}

.file-info-card-body-link-group{
  display:flex;
  gap:16px;
}



.file-info-card-body-link-group input{
  border: 1px solid var(--border);
  border-radius:8px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}



.file-info-card-body-link-group-expiration{
  display:flex;
  align-items: center;
  gap:8px;
  font-weight: bold;
  
}



.file-info-card-body-link-group-expiration svg{
  width:20px;
  height:20px;
}

.button-copy-svg{
  border:none;
  background-color: white;
  padding:0;
  margin:0;
  color: var(--dark-blue);
}

.button-copy-svg:hover{
  transform:scale(1.1);
}

.copy-svg{
  width:30px;
  height:30px;
}

.button-delete-svg{
  border:none;
  background-color: white;
  color: rgb(255, 65, 65);
  padding:0;
  margin:0;
}

.button-delete-svg:hover{
  transform:scale(1.1);
}

.delete-svg{
  width:30px;
  height:30px;
}

.copied-svg{
  width:30px;
  height:30px;
  color:rgb(0, 189, 0);
  display:none;
}

@media (min-width: 640px){
  .delete-svg{
    display:none;
  }
  .button-delete-svg{
    display:none;
  }
  .copy-svg{
    display:none;
  }
  .button-copy-svg{
    display:none !important;
  }
  .copied-svg{
    display:none !important;
  }
}

@media (max-width: 639px){
  .file-info-card-body-link-group .darker-blue-button{
    display:none;
  }

  .file-info-card-body-link-group .red-button{
    display:none;
  }
  .copy-button-green{
    display:none;
  }

  
}

@media (max-width: 500px){
  .copy-input{
    width:125px;
  }
}

@media (max-width: 374px){
  .copy-input{
    width:100px;
  }
}









/* ---------------------------------------*/
/* --------- Create Folder Modal ---------*/
/* ---------------------------------------*/

.create-folder-modal{
  border: 1px solid var(--border-color);
  border-radius:8px;
}

.create-folder-modal input:focus{
  /*outline:none;
  border:2px solid rgb(0, 180, 0);*/
}

.create-folder-modal input{
  padding: 6px;
  border: 1px solid var(--border);
  border-radius:4px;
}



/* ----------------------------------------*/
/* ------------ GLOBAL BUTTONS ------------*/
/* ----------------------------------------*/
 
.blue-button{
  border:none;
  cursor: pointer;
  background-color:var(--blue);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
  box-shadow: 3px 3px 5px rgb(201, 201, 201);
}

.darker-blue-button{
  border:none;
  cursor: pointer;
  background-color: var(--dark-blue);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
  box-shadow: 3px 3px 5px rgb(201, 201, 201);
}

.darker-blue-button:hover{
  background-color: var(--dark-blue-hover);
}

.gray-button{
    border:none;
  cursor: pointer;
  background-color: rgb(151, 151, 151);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
}

.gray-button:hover{
  background-color: rgb(122, 122, 122);
}

.button-shadow{
  box-shadow: 3px 3px 5px rgb(201, 201, 201);
}



.blue-button:hover{
  background-color: var(--blue-hover);
}

.red-button{
  border:none;
  cursor: pointer;
  background-color:#f63838;
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
}

.red-button:hover{
  background-color: #e43434;
}

.green-button{
  border:none;
  cursor: pointer;
  background-color:rgb(8, 230, 0);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
  box-shadow: 3px 3px 5px rgb(201, 201, 201);
}

.green-button:hover{
  background-color:rgb(6, 192, 0);
}

.orange-button{
  border:none;
  cursor: pointer;
  background-color:rgb(255, 145, 0);
  color:#F9FaF8;
  border-radius: 8px;
  padding:8px 24px;
  font-family:sans-serif;
  font-size:.9rem;
}

.orange-button:hover{
  background-color:rgb(207, 117, 0);
}

/* --------------------------------------*/
/* ------------ HERO SECTION ------------*/
/* --------------------------------------*/

.hero{
  padding: 5rem 0;
  text-align: center;
  background-color:white;
}

@media(max-width:363px){
  .hero{
    padding-top:1rem;
    padding-bottom:5rem;
  }
}

.hero-container{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-title{
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--title-text) /* text-foreground */
}

.hero-highlight{
  display: block;
  color: #3b82f6; /* text-primary */
}

.hero-subtext{
  font-size: 1.25rem;
  color: #6b7280; /* text-muted-foreground */
  margin-bottom: 2rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 640px){
  .hero-buttons {
    flex-direction: row;
  }
}

.hero-btn{
  font-size: 1.125rem;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.primary{
  background-color: #3b82f6;
  color: white;
}

.primary:hover{
  background-color: #2563eb;
}

.outline{
  background-color: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.outline:hover{
  background-color: #eff6ff;
}

/* --------------------------------------*/
/* ---------- FEATURES SECTION ----------*/
/* --------------------------------------*/

.features-container{
  width:100%;
  max-width: 1200px;
  justify-self: center;
  padding:0px 1rem;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-bottom:32px;
  box-sizing: border-box;
}

.features-title h2{
  text-align:center;
  font-size:2rem;
  color: var(--title-text);
}

.features-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
  grid-auto-rows: auto;
  gap:32px;
}

@media (max-width: 425px){
  .features-cards{
    grid-template-columns: repeat(auto-fit, minmax(375px,1fr));
  }
}

@media (max-width: 400px){
  .features-cards{
    grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
  }
}

@media (max-width: 375px){
  .features-cards{
    grid-template-columns: repeat(auto-fit, minmax(330px,1fr));
  }
}

.features-card svg{
  width: 48px;
  height: 48px;
  
}

.features-card{
  display:flex;
  flex-direction:column;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius:8px;
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05)
}

.features-card-title{
  margin-top:16px;
  margin-bottom:4px;
  font-size:1.5rem;
  font-weight:500;
}

.features-card-subtext{
  color:var(--muted-text-color);
  padding:0;
  margin:0;
}

/* ---------------------------------*/
/* ---------- CTA SECTION ----------*/
/* ---------------------------------*/

.cta-container{
  padding:16px;
  text-align:center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
  
}

.cta-title{
  font-size: 2rem;
  color: var(--title-text);
  margin-bottom:32px;
}

.cta-content{
  margin-bottom:32px;
  font-weight: 500;
  color: var(--muted-text-color);
}

.cta-button{
  font-size:1.1rem;
  border:none;
  margin-bottom:32px;
}

.cta-subtext{
  color: var(--muted-text-color);
  margin-bottom:32px;
}

/* ----------------------------------*/
/* ------------- FOOTER -------------*/
/* ----------------------------------*/

.footer{
  border-top: 1px solid var(--border);
}

.footer-container{
  padding:16px;

}

.footer-copyright p{
  color: var(--muted-text-color);
  text-align:center;
}



/* ---------------------------------------*/
/* ------------ MEDIA QUERIES ------------*/
/* ---------------------------------------*/
/*
@media (prefers-color-scheme: light) {
  :root {
    --text: hsl(243, 76%, 5%);
    --background: hsl(0, 0%, 100%);
    --primary: hsl(243, 68%, 48%);
    --secondary: hsl(210 40% 96.1%);
    --accent: hsl(242, 100%, 62%);
  }
}
*/
/*
@media (prefers-color-scheme: dark) {
  :root {
    --text: hsl(243, 76%, 95%);
    --background: hsl(240, 60%, 1%);
    --primary: hsl(243, 68%, 52%);
    --secondary: hsl(243, 100%, 7%);
    --accent: hsl(242, 100%, 38%);
    --theme-name: "dark";
  }
}
*/