@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

: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, #textarea-preview {
    tab-size: 2;

    font-family: 'Roboto Mono', monospace !important;

    padding-top: 2rem;
}

#padTitle {
    padding: .3rem .75rem !important;
    border-radius: .25rem;
    display: inline-block;
}

.dark #padTitle {
    color: #db3384;
    background-color: rgba(0, 0, 0, 0.10);
}

.light #padTitle {
    color: #555273;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

#pad-content-area {
    position: relative;

    display: flex;
    flex-flow: column;
}

.light .edit-content-text {
    color: white !important;
}

.edit-content-text {
    display: none;
}

.read-only-content .edit-content-text {
    margin-top: 1rem;
    display: block !important;
}

.read-only-content .view-content-text {
    display: none !important;
}

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

    user-select: none;
}

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

    padding-top: 2rem;
    margin-top: 1rem;
}

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