@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/******************************************************************************/
/* Global Styles */
/******************************************************************************/

:root {
  /* 
  --blue10: #5AF;
  --blue20: #1188fe;
  --blue30: #0065cb;
  --blue40: #048;
  --blue50: #036;
  */
  --blue10: #4096FF;
  --blue20: #3987E6;
  --blue30: #3070BF;
  --blue40: #204B80;
  --blue50: #102540;
  /* this is Chrome's color for checkboxes and radio buttons */
  --blue: #0075ff;

  --gray10: #eee;
  --gray30: #ccc;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* font-family: sans-serif; */
  /* font-family: 'Lucida Grande', monospace; */
  /* font-family: 'Roboto Mono', monospace; */
  /* font-family: 'Source+Code+Pro', monospace; */
  font-family: 'Bai Jamjuree', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 300;

  scrollbar-width: thin;
}

/* .roboto-mono {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
} */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;

  color: #333;
  
  /* Some weird feature where browsers adjust the size of h1, p, etc. when
  on a mobile browser. Setting this to none fixes the issue... */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 15px 0;
}
ul, ol {
  padding-inline-start: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* @keyframes blue-pulse {
  0% {
    outline-color: var(--blue10);
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -2px;
  }
  80% {
    outline-color: transparent;
    outline-style: solid;
    outline-width: 8px;
    outline-offset: 6px;
  }
  100% {
    outline-color: transparent;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -2px;
  }
} */

code {
  font-size: 12px;
  font-family: monaco, 'Courier New', monospace;
}

.mono {
  font-family: monaco, 'Courier New', monospace;
}

/******************************************************************************/
/* Structure */
/******************************************************************************/
main.app {
  height: 100%;
  width: 100%;
}
.si {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
  nav.main {
    flex: none;
    display: flex;
    align-items: center;
    height: 44px;
    width: 100%;
    overflow: auto hidden;

    /* background: var(--gray10); */
    border-bottom: 2px solid var(--gray30);
  }
    .logo {
      color: transparent;
      
      & svg {
        margin: 5px;
        width: 30px;
        height: 30px;
      }
    }
    a.link-nav {
      margin: 0 10px;
    }
    .account {
      flex: auto;
      display: flex;
      justify-content: end;
      margin: 0 10px;

      img {
        margin: 5px;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        cursor: pointer;
      }
    }

  main.main {
    flex: auto;
    width: 100%;
    overflow: auto;
  }

  footer.main {
    flex: none;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    padding: 5px;

    background: var(--gray10);
    border-top: 2px solid var(--gray30);
  }

.so {
  height: 100%;
  width: 100%;
  margin: 50px;
  text-align: center;
}

/******************************************************************************/
/* Images */
/******************************************************************************/
img:hover {
  filter: none !important;
}

/******************************************************************************/
/* Links */
/******************************************************************************/
a {
  color: var(--blue20);
  text-decoration: none;
}
a:active, a:hover, a:visited {
  color: var(--blue30);
}


/******************************************************************************/
/* Buttons */
/******************************************************************************/
.button,
button {
  min-width: 48px;
  min-height: 48px;
  height: 48px;
  /* padding: 0 24px; */
  /* margin-left: 5px; */
  /* margin-right: 5px; */

  /* background: #3992c6; */
  background: var(--blue20);
  color: #FFF;
  /* border-radius: 5px; */
  /* border: 1px solid #ddd; */
  border: none;
  text-wrap: nowrap;

  cursor: pointer;
}

.primary,
button.p {
  padding: 16px 24px;
}

button:disabled {
  cursor: not-allowed;
  background: #888;
}

/******************************************************************************/
/* Inputs */
/******************************************************************************/
input, select {

  padding: 0;
  margin: 0;
  border-radius: 0;

  border: none;
  background-color: transparent;
  color: #333;
  accent-color: var(--blue40);
  outline-color: var(--blue10);
  /* -webkit-appearance: none; */
}

input::placeholder {
  color: var(--gray30);
}

input:invalid,
textarea:invalid,
select:invalid {
  /* border: 1px solid #8f0000; */
  /* background: #8f0000; */
  /* text-decoration: dashed underline #bd2e2e; */
  text-decoration: dashed underline 2px #ffa303;
  text-underline-offset: 2px; 
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 1;
  color: #aaa;
  -webkit-text-fill-color: #aaa;
}

/* input:focus,
select:focus {
  animation: blue-pulse 2s linear infinite;
} */

/******************************************************************************/
/* Tables */
/******************************************************************************/
table {
  border-collapse: collapse;
}

.table {
  background-color: #fff;
  border: 1px solid #bbb;
}

.table th,
.table td {

  padding: 6px;

  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
}

.table th {
  background-color: #ddd;
}

.table tr:hover {
  background-color: #eee;
}

/******************************************************************************/
/* Lists */
/******************************************************************************/
ul.comma {

  padding: 0;
  margin: 0;

  display: inline;

  list-style: none;
}
ul.comma li {
  display: inline
}
ul.comma li:not(:last-child):after {
  content: ', '
}

/******************************************************************************/
/* Overlay */
/******************************************************************************/
.overlay {
  pointer-events: none;
}
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 64px;
  margin-top: -32px;
  margin-left: -32px;
  border-top: 3px solid var(--blue10);
  border-right: 3px solid transparent;
  border-radius: 50%;
  animation: spin 500ms linear infinite;
}

/******************************************************************************/
/* Dialog */
/******************************************************************************/
dialog {
  margin: auto;
  border: none !important;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition:
    opacity .2s ease-out,
    overlay .2s ease-out allow-discrete,
    display .2s ease-out allow-discrete;
}
dialog[open] {
  opacity: 1;
}
@starting-style {
  dialog[open] {
    opacity: 0;
  }
}
body:has(dialog[open]) {
  overflow: hidden;
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display .2s allow-discrete,
    overlay .2s allow-discrete,
    background-color .2s;
}
dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 25%);
}
@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

/******************************************************************************/
/* Auth */
/******************************************************************************/
.mobile-panel {
  height: 600px;
  width: 300px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;

  background-color: #fff;
  border-radius: 6px;
  box-shadow: rgb(0, 0, 0, .2) 0px 6px 20px 1px;
}