: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);
}

html, body {
      height: 100dvh;
      margin: 0;
}

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


/* --------------------------------------*/
/* --------------- TABLES ---------------*/
/* --------------------------------------*/

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;
}

th{
  background-color: rgb(250, 253, 255);
}

.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)
}

.columnHeader{
  text-align:left;
  font-weight:bold;
}

.rowHeader{
  text-align:right;
  font-weight:bold;
}

/* --------------------------------------*/
/* --------------- IFRAME ---------------*/
/* --------------------------------------*/

iframe{
  border: 1px solid black;
  width:100%;
  height:75vh;
}

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


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

.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);
  align-self: center;
  justify-self: center;
}

@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;
}