.pd-md {
    padding: 10px;
}

.button-small,
.form-style-8 .button-small.button-small {
    margin-top: 5px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.secondary-button {
    --primary-color: var(--label-color);
    margin-top: 0;
}

.secondary-button:hover {
    background-color: var(--primary-color);
}

.disabled-button {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.danger-button {
    background-color: var(--error-accent) !important;
}

.danger-button:hover {
    color: white;
}

.danger-text-decoration {
    border-bottom: 3px solid var(--error-accent);
}

.primary-button {
    background-color: var(--primary-color);
}

body > main {
    padding-right: 20px;
    padding-left: 20px;
}

.presskit-main {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.primary-button:hover {
    opacity: 0.8;
}

.cancel-button {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    margin-top: 10px;
    border-radius: 5px;
}

.cancel-button:hover {
    background-color: darkgray;
}

.container {
    max-width: 1400px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.compact-container {
    max-width: 920px;
    width: 100%;
}

.presskit-container {
    max-width: 1400px;
    width: 100%;
    display: flex;
}

.form {
    max-width: 720px;
}

.presskit-content {
    flex: 4;
    padding: 10px;
    max-width: 1400px;
    margin-inline: auto;
}

.presskit-content > .text-content {
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
}

.presskit-links li {
    margin-bottom: 10px;
}

.presskit-sidebar .presskit-links,
.links-empty-view {
    padding-left: 8px;
    border-left: 1px dashed var(--label-color);
    margin-left: 1px;
}

.links-empty-view {
    padding-top: 10px;
    padding-bottom: 10px;
}

.presskit-sidebar {
    position: relative;
    border-top: 1px solid var(--black);
    padding: 10px;
    width: 250px;
}

.presskit-sidebar .sidebar-item {
    padding: 10px;
    border-radius: var(--standard-corner-radius);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    border: 2px solid var(--secondary-background-color);
    background-color: var(--background-color);
}

.presskit-sidebar .item-group {
    border-radius: 14px;
    border: 2px solid var(--secondary-background-color);
}

.item-group > .sidebar-item {
    border-color: transparent;
    margin-bottom: 0;
    border-radius: 0;
    padding: 5px 10px;
}

.item-group > .sidebar-item:first-child {
    border-top-left-radius: var(--standard-corner-radius);
    border-top-right-radius: var(--standard-corner-radius);
}

.item-group > .sidebar-item:last-child {
    border-bottom-left-radius: var(--standard-corner-radius);
    border-bottom-right-radius: var(--standard-corner-radius);
}

.group-spacer {
    height: 1px;
    background-color: var(--secondary-background-color);
    width: 90%;
    margin-inline: auto;
}

.sidebar-item.active + .group-spacer {
    width: 100%;
}

.presskit-sidebar .sidebar-item.active {
    background-color: var(--secondary-background-color);

    border-color: var(--secondary-background-color);
    border-left: 2px solid var(--primary-color);
}

.presskit-sidebar .sidebar-item:hover:not(.active) {
    border: 2px dashed var(--primary-color);
}

.sidebar-header {
    text-transform: uppercase;
    margin-top: 30px;
    font-size: 1.2rem;
    opacity: 0.8;
    padding-left: 10px;
}

.sidebar-item > * {
    margin: 0;
}

.sidebar-item > h2 {
    font-size: 1.1rem;
    margin-bottom: 3px;
}

.sidebar-item > p {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.sidebar-sbox {
    padding: 15px 10px;
    border-radius: var(--standard-corner-radius);
    border: 1px solid var(--secondary-background-color);
    background-color: var(--background-color);
}

.label-link {
    font-size: 0.8rem;
    color: var(--label-color);
    text-decoration: none;
    font-weight: bolder;
}

.label-link:hover {
    text-decoration: underline;
}

.sidebar-sbox .button-link {
    font-size: 0.8rem;
}

.sidebar-app-info {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.sidebar-app-info * {
    margin: 0;
}

.sidebar-app-info h2 {
    font-size: 1rem;
}

.sidebar-app-info img {
    width: 40px;
    height: 40px;
}

.sidebar-app-info .presskit-tagline {
    font-size: 0.9rem;
    line-height: 1.2;
}

.presskit-product-icon {
    width: 100%;
    height: auto;
    border-radius: var(--app-icon-border-radius);
}

.sidebar-link {
    font-size: 0.8rem;
    padding-left: 10px;
    color: var(--secondary-text-color);
}

.sidebar-delete-link {

    text-decoration: none;

}

.sidebar-delete-link:hover {
    color: red;
    text-decoration: underline;
}

.faint-line {
    background-color: #a5b1c2;
    height: 1px;
    border: 0;
    opacity: 0.4;
}

.inset-form {
    padding: 20px;
    background-color: var(--tertiary-background-color);
    border-radius: 5px;
}

.form-style-8 label {
    font-weight: bolder;
    font-size: 0.8rem;
    color: var(--label-color);
    margin-bottom: 3px;
    margin-top: 15px;

}

.form-style-8 .helptext {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: -5px;
}

.form-labels-block label {
    display: block;
}

.image-form {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.image-form > input[type="file"] {
    flex: 2;
}

.image-form > input[type="submit"] {
    margin-top: 0;
}

.form-style-8 input[type="submit"] {
    -webkit-appearance: none;
    opacity: 1;
}

.form-style-8 input[type="text"],
.form-style-8 input[type="date"],
.form-style-8 input[type="datetime-local"],
.form-style-8 input[type="datetime"],
.form-style-8 input[type="email"],
.form-style-8 input[type="number"],
.form-style-8 input[type="search"],
.form-style-8 input[type="time"],
.form-style-8 input[type="url"],
.form-style-8 input[type="password"],
.form-style-8 textarea,
.form-style-8 select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    border: none;
    background: var(--secondary-background-color);
    font: 16px Arial, Helvetica, sans-serif;
    height: 35px;
    color: white;
    border-bottom: 2px solid transparent;
    border-radius: 5px;
    padding-left: 8px;
}

.readable-input-width {
    max-width: 450px;
}

.form-style-8 input[type="text"]:focus,
.form-style-8 input[type="date"]:focus,
.form-style-8 input[type="datetime"]:focus,
.form-style-8 input[type="email"]:focus,
.form-style-8 input[type="number"]:focus,
.form-style-8 input[type="search"]:focus,
.form-style-8 input[type="time"]:focus,
.form-style-8 input[type="url"]:focus,
.form-style-8 input[type="password"]:focus,
.form-style-8 textarea:focus,
.form-style-8 select:focus {
    border-bottom: 2px solid var(--label-color);
    background-color: var(--focused-form-input-background);
}

.form-style-8 input[type="file"] {
    display: block;
    margin-top: 5px;
}

.form-style-8 textarea {
    resize: none;
    overflow: hidden;
}

.form-style-8 label.required-input::after {
    content: "*";
}

.form-style-8 input[type="button"],
.form-style-8 input[type="submit"] {
    background-color: var(--primary-color);
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

.form-style-8 input[type="button"]:disabled,
.form-style-8 input[type="submit"]:disabled {
    opacity: 0.4;
    cursor: default;
}

.form-style-8 input[type="submit"]:hover {
    opacity: 0.8;
}

.form-style-8 input[type="submit"]:hover:disabled {
    opacity: 0.4;
}

.inner-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.inner-inline-form > input {
    width: inherit !important;
    flex: 1;
}

.delete-button {
    background-color: transparent !important;
    padding: 8px 16px !important;
    transition: 0.2s;
}

.empty-view {
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    text-align: center;
}

.delete-button:hover {
    background-color: var(--error-accent) !important;
}

.presskits-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 15px;
}

.presskit-card {
    padding: 15px;
    background-color: var(--tertiary-background-color);
    border-radius: var(--standard-corner-radius);
    display: flex;
    margin: 0px !important;
    position: relative;
}

.detailed-presskit-card {
    background-color: var(--tertiary-background-color);
    border-radius: var(--standard-corner-radius);
}

.detailed-presskit-card .card-header {
    padding: 15px;
    width: 100%;
    display: grid;
    place-content: center;
    min-height: 160px;
    text-align: center;
}

.card-footer {
    background-color: var(--footer-color);
}

.detailed-presskit-card .presskit-sidebar {
    width: 100%;
    padding: 0;
}

.detailed-presskit-card .sidebar-item {
    background-color: var(--tertiary-background-color);
}

.detailed-presskit-card .sidebar-item > h2 {
    font-size: 1rem;
    font-weight: 450;
    margin-bottom: 0;
}

.detailed-presskit-card p {
    margin: 0;
}

.detailed-presskit-card h3 {
    font-size: 0.9rem;
    font-weight: 450;
    text-transform: uppercase;
    padding-left: 10px;
    color: var(--secondary-text-color);
}

.card-header .pattern-element {
    z-index: 1;
}

.detailed-presskit-card .card-header img {
    width: 100px;
    height: 100px;
    border-radius: var(--app-icon-border-radius);
    z-index: 10;
    position: relative;
    display: block;
    margin-inline: auto;
}

.detailed-presskit-card .card-header h2 {
    font-size: 1.2rem;
    font-weight: 500;
}

.presskit-card .content {
    display: flex;
    flex-direction: column;
}

.presskit-card .action-items {
    margin-top: auto;
}

.presskit-card .heading > a {
    text-decoration: none;
}

.external-link-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}

.external-link-icon > svg {
    width: 30px;
    height: 30px;
}

.overview-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.overview-image {
    flex-basis: 49%;
}

.overview-image-inner {
    background-color: var(--tertiary-background-color);
    border-radius: var(--standard-corner-radius);
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative;
}

.overview-image-inner:hover .delete-image-button {
    display: block;
}

.overview-image img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    margin-bottom: 3px;
}

.copy-button {
    background-color: transparent;
    border: none;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.copy-button:hover {
    color: white;
}

#copied-info {
    font-size: 0.8rem;
}

.short-link {
    font-size: 0.8rem;
    text-decoration: none;
}

.short-link:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 700px) {
    .presskit-card-container {
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 700px) {
    .presskit-card-container {
        flex-basis: 50%;
    }
}


.presskit-card img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
    border-radius: var(--app-icon-border-radius);
}

.presskit-images {
    display: flex;
    flex-wrap: wrap;
}

.presskit-image {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin-right: 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}


.presskit-image-reorder {
    max-width: 120px !important;
    border-radius: 5px !important;
}

.presskit-image-wide {
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin-right: 10px;
    margin-bottom: 10px;
}

.presskit-image-wide-reorder {
    max-width: 360px !important;
}

.presskit-image-container img {
    width: 100%;
}

.presskit-image-container,
.presskit-image-container-wide {
    position: relative;
    display: flex;
    flex-direction: column;
}

.presskit-image-container .image-wrapper {
    width: 97%;
    position: relative;
}

.presskit-image-container .delete-image-form,
.presskit-image-container-wide .delete-image-form {
    margin-top: auto;
}

.presskit-image-container::before,
.presskit-image-container-wide::before {
    content: "";
    z-index: -1;
    background-color: var(--tertiary-background-color);
    top: 0;
    position: absolute;
    border-radius: 3px;
    height: 100%;
}

.presskit-image-container-wide::before {
    right: 5px;
    left: 5px;
}

.presskit-image-container::before {
    left: 0;
    width: 97%;
}

.presskit-image-container .tags-container,
.presskit-image-container-wide .tags-container {
    position: absolute;
    inset: 0;
    background-color: var(--transparent-background-color);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.open-tags-button {
    position: absolute;
    z-index: 10;
    right: 10px;
    bottom: 5px;
    background: var(--transparent-background-color);
}

.open-tags-button.active {
    background: var(--primary-color);
}

.presskit-image-container .image-metadata-info,
.presskit-image-container-wide .image-metadata-info {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 6px;
    background-color: var(--transparent-background-color);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 5px;
}

.presskit-image-container-wide .image-metadata-info {
    left: 5px;
}

.tags-container > .tags-list {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 500px;
    margin-inline: auto;
}

.tags-container .image-tag {
    margin-bottom: 5px;
    margin-left: 5px;
    padding: 3px 12px;
    font-size: 0.9rem;
}

.presskit-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-gap: 10px
}

.video-card {
    background-color: var(--tertiary-background-color);
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.video-card h3 {
    flex: 1;
}

.video-card .video-frame {
    width: 100%;
    margin-top: auto;
    background-color: var(--secondary-background-color);
}

.button-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.delete-icon-button {
    width: 40px;
    height: 40px;
    background-color: var(--error-accent) !important;
    border-radius: 25px;
    border: none;
    cursor: pointer;
}

.delete-icon-button:hover,
.delete-icon-button:focus {
    transform: scale(0.9);
    opacity: 0.8;
}

.delete-video-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.main-navbar {
    background-color: var(--tertiary-background-color);
    padding: 10px 15px;
    display: flex;
    align-items: flex-end;
    align-content: center;
    gap: 15px;
}

.main-navigation {
    display: flex;
    padding: 8px;
    background: var(--secondary-background-color);
    border-radius: 10px;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.main-navigation > * {
    font-size: 1.1rem;
    font-weight: bolder;
    padding: 5px 15px;
    border-radius: 10px;
    text-decoration: none;
}

.main-navigation > a:hover {
    background: var(--label-color-hover);
}

.main-navigation > *.active {
    background: var(--label-color);
}

.main-navbar .heading {
    margin: 0 15px 0 15px;
}

.main-navbar .navbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-menu li {
    display: inline;
    padding: 0 5px;
}

.navbar-menu li > a {
    text-decoration: none;
    opacity: 0.7;
}

.navbar-menu li > a.active {
    opacity: 1;
    border-bottom: 2px solid var(--primary-color);
}

.navbar-menu li > a:hover {
    opacity: 1;
}

.presskit-file-list {
    list-style: none;
    padding: 0;
}

.presskit-file-list li {
    margin-bottom: 15px;
}

.presskit-file-list .file-size {
    font-size: 0.8rem;
}

.presskit-file-list .download-icon {
    width: 25px;
    height: 25px;
}

.explainer-container {
    border-radius: 3px;
    padding: 15px;
    max-width: 600px;
    background-color: var(--success-accent-darker);
}

.explainer-container ::selection {
    color: white;
    background-color: var(--success-accent-lighter);
}

.explainer-container p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
    color: #96d79a;
}

.explainer-container p + p {
    margin-top: 5px;
}

.explainer-container a {
    color: #96d79a;
    text-decoration-color: #96d79a;
}

.explainer-container a:hover {
    color: var(--success-accent-lighter);
    text-decoration: var(--success-accent-lighter);
}

.hint-box {
    max-width: 600px;
    padding: 15px;
    color: var(--label-color);
    background-color: var(--contact-background);
    border-radius: 3px;
}

.contact-box {
    margin-top: 50px;
    max-width: 600px;
    padding: 12px;
    color: var(--label-color);
    background-color: var(--contact-background);
    border-radius: 3px;
}

.contact-box a,
.hint-box a {
    color: var(--label-color);
}

.contact-box a:hover {
    color: var(--label-color-hover);
    text-decoration-color: var(--label-color-hover);
}

.hint-box ::selection {
    color: white;
    background-color: var(--label-color);
}

.contact-box > p {
    margin: 0;
    border-left: 3px solid var(--label-color);
    padding-left: 7px;
}

.error-explainer {
    background-color: var(--error-accent);
    color: white;
    margin: 20px 0;
    padding: 12px;
    border-radius: 5px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}


.form .errorlist {
    padding: 5px 10px;
    list-style: none;
    display: inline-block;
    background-color: var(--error-accent);
    border-radius: 4px;
    margin: 0;
}

.branding-header {
    margin: 0;
    font-weight: bolder;

}

.branding-header a {
    text-decoration: none !important;
}

.login-container, .error-container, .centered-container {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.login-container form {
    max-width: 450px;
    width: 100%;
}

.messages-container {
    display: flex;
    position: absolute;
    z-index: 100;
    right: 15px;
    top: 70px;
    flex-direction: column;
    width: 350px;
}

.messages-container .message {
    flex-basis: 100%;
    background-color: var(--secondary-background-color);
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

.messages-container .success {
    background-color: var(--success-accent);
    border: 2px solid var(--success-accent-lighter);
}

.messages-container .error {
    background-color: var(--error-accent);
}

.messages-container .warning {
    background-color: darkorange;
}

.presskit-file-list .file-item {
    display: flex;
    align-items: center;
}

.file-item > .file-name {
    flex: 4;
}

.delete-file-button {
    margin-top: 0;
    padding: 4px 8px;
    margin-left: 10px;
    color: white;
    border: none;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.1s;
}

.presskit-file-list > hr {
    color: transparent;
    border-top: 1px solid var(--label-color);
}

.delete-file-button:hover {
    text-decoration: none;
    opacity: 1;
}

.press-releases-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 15px;
}

.press-releases-list .press-release-container {
    height: 270px;
}

.press-release-card {
    background-color: var(--tertiary-background-color);
    height: 100%;
    border: 1px solid var(--secondary-background-color);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: 0.2s;
}

.press-release-card .card-content {
    margin: 10px;
    height: 100%;
}

.press-release-card a {
    text-decoration: none;
}

.press-release-card .send-via-email-button {
    background-color: var(--secondary-background-color);
    font-size: 0.9rem;
    padding: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.press-release-card .send-via-email-button:nth-child(even) {
    border-bottom: 1px solid var(--tertiary-background-color);
}

.press-release-card .send-via-email-button:hover {
    opacity: 0.8;
}

.new-press-release-card {
    border: 2px dashed var(--secondary-background-color);
    opacity: 0.6;
    background-color: transparent;
    align-items: center;
    justify-content: center;
}

.new-press-release-card:hover {
    opacity: 1;
    background-color: var(--secondary-background-color);
}

.new-press-release-card:hover .large-icon {
    transform: scale(1.1);
}

.document-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 20px;
    width: 20px;
}

.press-release-card h4 {
    flex-grow: 5;
}

.small-app-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--app-icon-border-radius);
}

.password-input-container {
    position: relative;
}

.password-input-container .forgot-link {
    position: absolute;
    right: 35px;
    top: 7px;
    bottom: 0;
    font-size: 0.9em;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}

.login-register-card {
    border-radius: 5px;
    max-width: 450px;
    width: 100%;
    padding: 5px 20px;
}

.compact-navbar-menu {
    display: none;
    background-color: var(--tertiary-background-color);
    padding: 10px;
    margin-top: 0;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.account-info > span {
    font-size: 0.8rem;
}

.account-info {
    margin-left: auto;
}

.compact-sidebar {
    gap: 10px;
    display: none;
}

.compact-sidebar > img {
    width: 60px;
    height: 60px;
    border-radius: var(--app-icon-border-radius);
}

.buttons-flex {
    gap: 8px;
    flex-wrap: wrap;
}

.theme-select button {
    padding: 5px 16px;
    font-size: 1.2rem;
    border: 1px solid whitesmoke;
    background-color: transparent;
    color: whitesmoke;
    opacity: 0.5;
    margin: 0;
}

.theme-select button.active {
    opacity: 1;
    cursor: default;
}

.theme-select button:first-child {
    border-top-left-radius: var(--standard-corner-radius);
    border-bottom-left-radius: var(--standard-corner-radius);;
}

.theme-select button:last-child {
    border-top-right-radius: var(--standard-corner-radius);
    border-bottom-right-radius: var(--standard-corner-radius);;
}

.create-first-presskit-banner {
    padding: 40px;
    text-align: center;
    max-width: 500px;
    margin-bottom: 50px;
    position: relative;
}

.create-first-presskit-banner-decoration {
    position: absolute;
    width: 70%;
    height: 50%;
    right: 0;
    top: 20px;
    z-index: -1;
    opacity: 0.4;
}

.create-first-presskit-banner h1 {
    font-size: 2.9rem;
    font-weight: 550;
}

.create-first-presskit-banner .neon-button {
    font-size: 1.2rem;
}

.patterned-background {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23f8208c' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.secondary-patterned-background {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23799ff6' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.account-card {
    border: 1px solid var(--tertiary-background-color);
    border-radius: 10px;
    max-width: 400px;
    padding: 20px;
    margin-top: 100px;
}

.account-card .account-info-header {
    margin: 0;
}

.account-info-header > svg {
    width: 15px;
    height: 15px;
    margin-top: -5px;
}

.info-banner {
    max-width: 500px;
    padding: 20px 15px 15px;
    border: 1px solid var(--label-color);
    border-radius: 5px;
    background: var(--tertiary-background-color);
}

#faqItems {
    margin-top: 50px;
}

.faq-item {
    border-left: 1px dashed var(--label-color);
    padding-left: 10px;
}

.faq-item p {
    margin-top: 5px;
}

.journalist-list {
    display: flex;
    max-width: 800px;
    gap: 10px;
    flex-direction: column;
}

.journalist-card {
    text-decoration: none;
    display: block;
}

.journalist-row {
    gap: 20px;
    border-bottom: 1px solid var(--faint-border);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
}

.journalist-row-info {
    gap: 20px;
    text-decoration: none;
}

.journalist-row-info:hover .journalist-avatar {
    box-shadow: 0px 0px 15px var(--primary-color);
}

.journalist-row-info:hover {
    opacity: 0.8;
}

.journalist-row .journalist-avatar {
    display: grid;
    place-content: center;
    --size: 90px;
}

.journalist-card .journalist-avatar, .journalist-row .journalist-avatar {
    --size: 120px;
    width: var(--size);
    height: var(--size);
    background-color: var(--tertiary-background-color);
    border-radius: 50%;
}

.journalist-card .journalist-avatar {

    position: absolute;
    left: 50%;
    top: 0;

    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid var(--background-color);
}

.journalist-avatar img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.journalist-avatar .initials-fallback {
    font-weight: bold;
    font-size: 2.5rem;
}

.journalist-card .card-content {
    padding: 15px;
    padding-top: 50px;
    background-color: var(--tertiary-background-color);
    margin-top: 70px;
    border-radius: 5px;
    min-height: 120px;
    border: 2px solid var(--tertiary-background-color)
}

.journalist-card.hover-effect:hover .card-content {
    border: 2px dashed var(--label-color);
}

.journalist-card .journalist-name {
    text-align: center;
    font-weight: normal;
}

.journalist-detail-container {
    display: grid;
    grid-template-columns: 200px 1fr;

    gap: 20px;
}

.journalist-notes-row {
    grid-column: span 2;
    padding: 30px;
    border-radius: 5px;
}

.journalist-detail-container .content-container {
    margin-top: 70px;
    background: var(--tertiary-background-color);
    padding: 30px;
    border-radius: 5px;
}

.media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.trial-expired-top-banner {
    background: var(--primary-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.trial-expired-top-banner * {
    margin: 0;
}

.small-locked-button .locked-button > .danger-button {
    padding: 4px 8px;
    font-size: 0.85rem;
}

.small-locked-button .locked-button > .lock-icon-container {
    margin-left: 0;
}

.small-locked-button .locked-button > .lock-icon-container > svg {
    width: 20px;
    height: 20px;
}

#imagesPicker {
    background-color: var(--transparent-background-color);
    inset: 20px;
    z-index: 10;
    max-width: 1200px;
    max-height: 95vh;
    position: relative;
    padding: 70px 20px 5px;
    border-radius: 10px;
}

#imagesPicker .images {
    overflow-y: scroll;
    max-height: 100%;
}

#imagesPicker .picker-header {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 50px;
    background-color: var(--secondary-background-color);
    padding-inline: 15px;
    border-radius: 10px;
}

#imagesPicker .picker-image .selection-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    display: none;
    background-color: var(--white);
    border-radius: 50%;
}

#imagesPicker .picker-image.selected-image .selection-indicator {
    display: block;
}


@media only screen and (max-width: 950px) {

    .compact-navbar-menu {
        display: flex;
    }

    .third-image {
        flex-basis: 50%;
    }

    .fourth-image {
        flex-basis: 50%;
    }

    .video-card-container {
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 950px) {
    .presskit-sidebar {
        display: none;
    }

    .detailed-presskit-card .presskit-sidebar {
        display: block;
    }

    .compact-sidebar {
        display: flex;
    }

    .presskit-content {
        width: 95%;
    }

}

@media (max-width: 768px) {
    .main-navigation {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .main-navigation a,
    .main-navigation .active {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
}

@media only screen and (max-width: 600px) {
    .overview-image {
        flex-basis: 100%;
    }

    .main-navbar > .navbar-menu {
        display: none;
    }

    .presskit-file-list > .file-item {
        flex-direction: column;
        align-items: start;
    }

    .journalist-detail-container {
        grid-template-columns: 1fr;
    }

    .journalist-detail-container .journalist-notes-row {
        grid-column: initial;
    }

    .journalist-detail-container .content-container {
        margin-top: 0px;
    }

    .journalist-row {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .journalist-row-info {
        gap: 10px;
    }
}

@media only screen and (max-width: 500px) {
    .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .main-navigation {
        padding: 5px;
        gap: 5px;
    }

    .main-navigation > * {
        font-size: 1rem;
        padding: 5px 10px;
    }

    .guide-detail .heading {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 450px) {
    .main-navigation > * {
        font-size: 0.85rem;
        padding: 5px 8px;
    }

    .login-container form {
        max-width: 90%;
    }

    .login-register-card {
        max-width: 90%;
    }

    .empty-view {
        margin-top: 40px;
    }

    .presskit-videos {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .presskit-card {
        padding: 10px;
    }

    .presskit-card img {
        width: 80px;
        height: 80px;
    }

    .hide-on-mobile {
        display: none;
    }
}