:root {
    --color-border-default: #444c56;
    --color-fg-default: #adbac7;
}

.light body {
    background-color: whitesmoke;
}

main#main-card {
    max-width: 768px;
}

.light main#main-card {
    background-color: white;
}

.dark main#main-card {
    background-color: var(--bs-body-bg-alt);
    border: 1px solid var(--color-border-default);
}

.dark {
    color: var(--color-fg-default);
}


.dark .hidedark, .light .hidelight {
    display: none !important;
}

#theme-toggle {
    position: fixed;
    top: .5rem;
    right: .5rem;
}

.hidden {
    display: none !important;
}

#pad-content-area {
    position: relative;

    display: flex;
    flex-flow: column;
}

#pad-content-toggler {
    position: absolute;
    top: .5rem;
    right: .5rem;

    user-select: none;
}

#textarea-preview {
    max-height: calc(20rem + 30vh);
    overflow: auto;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: none;
  box-shadow: none;
  outline: 0 none;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #3b3b3b #ffffff00;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff00;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #3b3b3b;
    border-radius: 2px;
    border: 1px solid #ffffff00;
  }