/* Fonts */
@font-face {
    font-family: "Avenir Next";
    src: url("avenirnextltpro-regular-webfont.woff2") format("woff2"), url("avenirnextltpro-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Avenir Next";
    src: url("./avenirnextltpro-it-webfont.woff2") format("woff2"), url("./avenirnextltpro-it-webfont.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Avenir Next";
    src: url("./avenirnextltpro-medium-webfont.woff2") format("woff2"), url("./avenirnextltpro-medium-webfont.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Avenir Next";
    src: url("./avenirnextltpro-demi-webfont.woff2") format("woff2"), url("./avenirnextltpro-demi-webfont.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Avenir Next";
    src: url("./avenirnextltpro-bold-webfont.woff2") format("woff2"), url("./avenirnextltpro-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Courier Prime";
    src: url("./courierprime-bold-webfont.woff2") format("woff2"), url("./courierprime-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Courier Prime";
    src: url("./courierprime-bolditalic-webfont.woff2") format("woff2"), url("./courierprime-bolditalic-webfont.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: "Courier Prime";
    src: url("./courierprime-italic-webfont.woff2") format("woff2"), url("./courierprime-italic-webfont.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Courier Prime";
    src: url("./courierprime-regular-webfont.woff2") format("woff2"), url("./courierprime-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

/* Styling */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body, body * {
    font-family: "Avenir Next", sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

html {
    background: #D2ECFB;
}

body {
    margin: 0;
    padding: 0;
}

form {
    margin-block-start: unset;
    margin-block-end: unset;
}

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1536px;
    margin: 7.5em auto 12.5em;
}

.container--center {
    max-width: unset;
    height: calc(100vh - 82px);
    align-items: center;
    margin: 0;
}

.container--high {
    margin: 2.5em auto 2.5em;
}

/* Text */

h1, h2, h3, p {
    color: #000;
    margin: unset;
}

h1, h2, h3 {
    font-weight: 700;
}

h1 {
    font-size: 2.5em;
    margin: 1.25rem 0;
}

h2 {
    font-size: 2em;
    margin: 1.25rem 0;
}

h3 {
    font-size: 1.1875em;
    font-weight: 600;
}

.external-heading {
    flex: 1 0 100%;
    margin-bottom: -1em;
}

.text-regular {
    font-weight: 400;
}

.text-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #fff;
}

.capitalize {
    text-transform: capitalize;
}

/* Layout */

.login-wrapper {
    background: #fff;
    border: 1px solid #D0D0D0;
    border-radius: 1.25em;
    padding: 2.5em 5em;
}

.landing-wrapper {
    background: #fff;
    border: 1px solid #D0D0D0;
    border-radius: 1.25em;
    padding: 2.5em 5em;
}

.generate-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6.25em;
    background: #25376A;
    border-radius: 1.25em;
    margin: 0 7.5em 2.5em;
    padding: 0 2.5em;
}

.admin-wrapper, .user-wrapper, .user-man-wrapper, 
.user-edit-wrapper, .user-add-wrapper, .file-wrapper {
    width: 100%;
    background: #fff;
    border: 1px solid #D0D0D0;
    border-radius: 1.25em;
    margin: 0 2.5em;
    padding: 2.5em 5em 5em;
}

.user-edit-wrapper, .user-add-wrapper {
    padding: 2.5em 5em 2.5em;
}

.file-wrapper {
    padding: 1.25em 5em 2.5em;
}

.admin-wrapper form {
    margin: 0;
}

.admin-grid, .user-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5em;
}

.user-grid {
    margin-bottom: 2.5em;
}

.proj-users-wrapper {
    grid-column: 1/3;
}

.spread-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spread-wrapper--user {
    padding-top: 2.5em;
    border-top: 1px solid #D0D0D0;
}

.spread-wrapper--temp-top {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    margin-bottom: 20px;
}

.button-wrapper {
    display: flex;
    justify-content: flex-end;
    column-gap: 2.5em;
}

.user-cred-wrapper {
    display: flex;
    grid-column: 1/3;
    column-gap: 2.5em;
}

.user-cred-wrapper .input {
    width: 50%;
}

.user-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 1em;
    background: #F5F5F5;
    border-radius: 4px;
    padding: 2.5em;
}

.username-wrapper {
    display: flex;
    column-gap: 10px;
    margin-left: 0.75em;
}

.user-icon {
    font-size: 1.25em;
}

/* Nav bar */

.navbar {
    display: flex;
    width: 100vw;
    height: 82px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0 40px;
}

.logo {
    height: 60px;
}

.logo__img {
    width: auto;
    height: 100%;
}

.nav-buttons {
    display: flex;
    gap: 1.5em;
}

/* Button */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 10rem;
    height: 2.5em;
    font-weight: 600;
    border-width: 3px;
    border-style: solid;
    border-radius: 4px;
    padding: 0 0.75em;
    cursor: pointer;
}

.btn--s {
    max-width: 40px;
}

.btn--l {
    height: 2.75rem;
    font-size: 1.1875em;
}

.btn--alt {
    max-width: unset;
    border-radius: 1em;
}

.btn--primary {
    background: #253A78;
    border-color: #253A78;
    color: #fff;
}

.btn--primary:hover {
    background: #25376A;
    border-color: #25376A;
    color: #F5F5F5;
}

.btn--secondary {
    background: #fff;
    border-color: #253A78;
    color: #253A78;
}

.btn--secondary:hover {
    background: #F5F5F5;
    border-color: #25376A;
    color: #25376A;
}

.btn--white {
    background: #fff;
    border-color: #fff;
    color: #253A78;
}

.btn--white:hover {
    background: #F5F5F5;
    border-color: #F5F5F5;
    color: #25376A;
}

.btn--no-border {
    border: none;
}

.btn--invisible, .btn--invisible:hover {
    background: none; 
    border: none; 
    padding: 0;
}

/* Select & Dropdown */

.select-wrapper {
    width: 100%;
    max-width: 27rem;
    position: relative;
}

.select {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    justify-content: center;
    position: relative;
}

.select__trigger {
    background: none;
    text-align: center;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    padding: 10px 60px 10px 20px;
}

.select__value {
    font-size: 2em;
    font-weight: 600;
    transition: ease-in-out 0.08s; 
}

.select__trigger:hover {
    background: #F5F5F5;
}

.select__arrow {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 8px;
    pointer-events: none;
    transition: 0.14s ease-in 0.02s;
}

.select__arrow--header {
    font-size: 32px;
    background: #fff;
    color: #00A2E9;
    border-radius: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px;
    pointer-events: none;
    transition: 0.14s ease-in 0.02s;
}

.select--active .select__arrow {
    transform: rotate(180deg);
    transition: 0.14s ease-out 0.02s;
}

.select__dropdown {
    list-style: none;
    width: 420px;
    max-height: 40vh;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    position: absolute;
    top: 60px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.14s ease-in-out 0.02s;
}

.select--active .select__dropdown {
    top: 72px;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.select__dropdown:hover, .select__dropdown:focus-within, 
.select__dropdown:hover .dropdown__item, .select__dropdown:focus-within .dropdown__item {
    border-color: #9c9c9c;
}

.dropdown__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
    position: relative;
    cursor: pointer;
}

.dropdown__item:hover {
    background: #f5f5f5;
}

.dropdown__item input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}

.dropdown__item input:checked ~ .dropdown__label {
    font-weight: 600;
    color: #253A78;
    text-indent: 20px;
}
.dropdown__item input:checked ~ .dropdown__label::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    background: #253A78;
    border-radius: .25em;
    position: absolute;
    top: calc(50% - .25em);
}

.dropdown__item:nth-last-of-type(1) {
    border-bottom: none;
}

.dropdown__label {
    width: 100%;
    font-size: 1em;
    font-weight: 500;
    padding: 0 1.25em;
    cursor: pointer;
    transition: padding 0.14s ease-in-out 0.02s;
}

.select--active .dropdown__label {
    padding: .75em 1.25em;
}

.dropdown-wrapper:hover {
    background: #F0F0F0;
    transition: 0.14s ease-in-out 0.02s;
    cursor: pointer;
}

.dropdown {
    display: none;
}

/* Tabs */

.tabs {
    width: 100%;
    display: grid;
    gap: 2px;
    list-style-type: none;
    padding: 0;
}

.tabs--login {
    grid-template-columns: repeat(2, 1fr);
    margin: 1.25em 0 2.5em;
}

.tabs--table {
    grid-template-columns: repeat(6, 1fr);
    margin: 0 0 .25em;
}

.tab {
    position: relative;
}

.tab input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}

.tab input:checked ~ .tab__label {
    background: #fff;
    color: #00A2E9;
    font-weight: 700;
    cursor: default;
}

.tab__label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.75rem;
    background: #F5F5F5;
    color: #253A78;
    font-size: 1.1875em;
    font-weight: 400;
    text-align: center;
    border-radius: .25em;
    cursor: pointer;
    transition: 0.04s ease-in-out;
}

.tab__label:hover {
    background: #F0F0F0;
    color: #25376A;
}

/* Login form */

.form {
    width: 432px;
}

.input {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.input--flex {
    flex-wrap: unset;
    align-items: center;
}

.input--flex .input__label {
    flex: 1 0 auto;
    margin-bottom: unset;
}

.input--mt {
    margin-top: 10px;
}

.input--mt-l {
    margin-top: 1.5em;
}

.input--mb {
    margin-bottom: 1.25em;
}

.input__label {
    flex: 1 0 100%;
    display: block;
    font-weight: 600;
    margin-bottom: 0.625em;
}

.input__field {
    font-family: 'Courier Prime', Courier, monospace;
    width: 100%;
    max-width: 27rem;
    height: 2.5em;
    background: #fff;
    border: 1px solid #000;
    border-radius: .25em;
    outline: none;
    padding: .75em;
}

@media only screen and (max-width: 1320px) {
    .input__field {
        width: 80%;
    }
}


.input__field::placeholder {
    color: #D0D0D0;
}

.input__field.select {
    height: unset;
    padding: 9.75px .75em;
}

.input__field:-webkit-autofill::first-line {
    font-family: 'Courier Prime', Courier, monospace;
}

.input__field--inactive {
    border-color: #fff;
}

.input__field--stretch {
    max-width: unset;
}

.input__icon {
    position: absolute;
}

.input__button {
    margin-left: auto;
}

.form__button {
    width: 50%;
    margin-top: 1.25em;
    margin-left: auto;
}

.form__error {
    color: #ED6167;
}

.form__error--login {
    margin-bottom: 1.25em;
}

/* Lists */

ul {
    list-style-type: none;
}

.label-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 .5em;
    padding: 2px 10px .75em;
}

.label-list--table {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.label {
    display: flex;
    align-items: center;
    height: 26px;
    background: #00A2E9;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    color: #fff;
    border-radius: 1em;
    padding: 2px 1.25em;
    cursor: default;
}

.label--small {
    padding: 2px 0.5em;
}

.label__cross {
    font-size: 1em;
    color: #fff;
    margin: 0 -8px 0 8px;
    cursor: pointer;
}

/* Table */

.table {
    width: 100%;
}

.table__row {
    display: grid;
    align-items: center;
    max-height: 5em;
    border-bottom: 1px solid #D0D0D0;
    padding: 1.25em 0;
}


.table__row:not(:nth-of-type(1)):hover {
    max-height: calc(5em + 1px);
    border-top: 1px solid;
    margin-top: -1px;
}

.table__row:hover {
    border-color: #000;
}

.table__row--active-tpl {
    grid-template-columns: 1fr 1fr 10em 10em 84px;
}

.table__row--archive-tpl {
    grid-template-columns: 1fr 1fr 10em 10em;
}

.table__row--user-tpl {
    grid-template-columns: 1fr 10em 10em;
}

.table__row--user-tpl:nth-of-type(1) {
    border-top: 1px solid #D0D0D0;
}

.table__row--user-tpl:nth-of-type(1):hover,
.table__row--add-file-active:hover {
    border-top: 1px solid #000;
}

.table__row--add-file {
    display: flex;
    justify-content: center;
    border: none;
}

table.table tr.table__row--add-file:hover {
    max-height: 5em;
    background: #F5F5F5;
    border-top: none;
    margin-top: unset;
}

table.table tr.table__row--add-file-active:hover {
    border-top: 1px solid;
    margin-top: -1px;
}

.table__row--add-file .table__cell {
    display: none;
}

.table__row--add-file .table__cell--add-file {
    display: flex;
}

.table__row--add-file-active {
    display: grid;
    align-items: flex-end;
    grid-template-columns: 382px 15em 1fr 10em;
    max-height: 102px;
    border-bottom: 1px solid #D0D0D0;
    padding: 10px 0 1.25em;
}

table.table tr.table__row--add-file-active:hover {
    max-height: 102px;
    background: #fff;
}

.table__row--add-file-active .table__cell {
    display: block;
}

.table__row--add-file-active .table__cell--add-file {
    display: none;
}

.table__row--user {
    grid-template-columns: 1fr 25em 25em 10em;
}

.table__row--admin {
    display: flex;
    height: 5em;
}

.table__cell {
    margin-right: 1.5em;
    padding: 0;
    overflow: hidden;
}

.filename-input,
.search-input {
    width: calc(100% - 50px);
    border-color: #fff;
    cursor: text;
}

.filename-button {
    background: #fff;
    border-color: #fff;
    color: #fff;
    cursor: default;
}

.filename-wrapper:hover .filename-input,
.search:hover .search-input {
    border-color: #D0D0D0;
}

.filename-wrapper:hover .filename-button,
.search:hover .search-button {
    color: #D0D0D0;
}

.filename-input:focus, .filename-input:focus:hover,
.search-input:focus, .search-input:focus:hover {
    border-color: #000;
}

.filename-wrapper--inactive:hover .filename-input,
.filename-wrapper--inactive .filename-input:focus, .filename-wrapper--inactive .filename-input:focus:hover {
    border-color: #fff;
}

.filetype {
    text-transform: capitalize;
    padding-left: 1em;
}

.archive-btn {
    border-radius: 1.25em;
    width: 60px;
}

.archive-icon {
    font-size: 1.5em;
}

.search {
    width: 27rem;
}

.search-input {
    text-align: right;
    transition: all ease-in-out 0.05s;
}

.search-input::placeholder {
    color: #D0D0D0;
}

.search-button {
    background: #fff;
    border-color: #fff;
    color: #D0D0D0;
}

.search-icon {
    font-size: 1.25em;
}

/* Misc */

.user-switch {
    display: flex;
    text-transform: uppercase;
    margin: 0 -2em;
}

.user-switch__trigger {
    color: #00A2E9;
    font-size: 20px;
    line-height: 1;
    margin-left: auto;
    cursor: pointer;
}

.user-switch__trigger:hover {
    color: #0097D9;
}

.user-del {
    text-transform: uppercase;
}

.user-del__trigger {
    color: #ED6167;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.user-del__trigger:hover {
    color: #DC4F5A;
}

.template-name {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.template-alert {
    width: 100%;
    color: #5DB01D;
    position: absolute;
    left: 0;
    bottom: -10px;
}

.theme-select {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin: 0;
    padding: 0;
}

.theme {
    position: relative;
}

.theme input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}

.theme input:checked ~ .theme__label {
    background: #00A2E9;
    color: #fff;
}

.theme__label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #D0D0D0;
    border-radius: 20px;
    cursor: pointer;
}

.theme__icon {
    font-size: 1.5em;
}

.CodeMirror {
    height: calc(100vh - 5em) !important;
    border-radius: 10px;
}

.clickable {
    cursor: pointer;
}

.hidden {
    display: none;
}

.source-btn, .preview-btn, .restore-btn, .edit-btn {
    width: 100%;
}

.file-btn {
    display: none;
}

.file-selected {
    margin: auto 0 auto 24px;
}

/* Old styling */

tr .oddrow {
    background-color: #e5e5e5;
}

td .oddrow {
    background-color: #e5e5e5;
}