/* Override this file for theming uMap easily */

@import url("hot.css");
@import url("hot-font-face.css");

:root {
    /* Colors. */
    --color-waterMint: var(--hot-color-cyan-50);
    --color-darkBlue: var(--hot-color-blue-700);
    --color-lightGray: var(--hot-color-gray-50);
    --color-mediumGray: var(--hot-color-gray-500);
    --color-darkGray: var(--hot-color-gray-900);
    --color-light: var(--hot-color-neutral-0);
    --color-limeGreen: var(--hot-color-cyan-50);
    --color-brightCyan: var(--hot-color-cyan-100);
    --color-lightCyan: var(--hot-color-cyan-50);
    --color-red: var(--hot-color-red-700);
    --color-darkRed: var(--hot-color-rose-700);

    --background-color: var(--color-light);
    --color-accent: var(--color-brightCyan);
    --text-color: black;

    /* Buttons. */
    --button-primary-background: var(--color-red);
    --button-primary-color: var(--color-light);
    --button-neutral-background: var(--color-lightGray);
    --button-neutral-color: var(--color-darkGray);
}


.umap-nav h1 a:not(.button) {
    background-image: url("./img/logo-hot.svg");
    color: var(--hot-color-neutral-950);
    font-family: var(--hot-font-sans-variant);
    font-weight: 700;
    font-size: var(--hot-font-size-x-large);
    padding-inline-start: 70px;
    padding-top: 0;
}

.umap-nav ul li a:not(.button) {
    color: var(--hot-color-neutral-950);
    font-size: var(--hot-font-size-small);
}

.umap-main-edit-toolbox .logo a {
    background-image: url("./img/logo-hot-grey.svg");
    background-size: 40px;
}

.button-bar {
    margin: var(--hot-spacing-2x-large);
    display: block;
    font-size: var(--hot-font-size-x-large);
}

.umap-nav a.button, .button-primary, input[type="submit"] {
    color: var(--color-light);
    background-color: var(--color-red);
    margin-inline-end: var(--hot-spacing-large);
}

body, div, ul, ol, li, a, section, nav,
h1, h2, h3, h4, h5, h6, label,
hr, input, textarea, select, button {
    font-family: var(--hot-font-sans)
}

a {
    color: var(--color-red);
}


.upload-form {
    width: 50%;
    min-width: 375px;
}

.upload-form .text-input {
    font-size: var(--hot-font-size-large);
}

.upload-form .button-primary {
    font-weight: bold;
    font-size: var(--hot-font-size-medium);
    padding-left: var(--hot-spacing-x-large);
    padding-right: var(--hot-spacing-x-large);
}

.upload-form input,
.upload-form select {
    margin-bottom: var(--hot-spacing-large);
}

.upload-form select {
    border: 2px solid var(--hot-color-neutral-1000);
}

.umap-permanent-credits-container {
  max-height: 23px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.wrapper {
    padding: var(--hot-spacing-small);
}

footer {
    width: 100%;
    background-color: var(--hot-color-neutral-900);
    font-size: var(--hot-font-size-small);
}

footer a, footer span {
    color: var(--hot-color-neutral-300)
}

footer a.branding {
    background-image: url("./img/logo-hot-grey.svg");
    font-size: var(--hot-font-size-x-large);
}

.umap-popup-content {
    text-align: center;
}

.umap-popup-container.text > * {
    text-align: left;
}

.umap-popup-content img {
    border-radius: var(--hot-border-radius-medium);
    max-height: 486px;
}

.search-form input[type="submit"] {
    color: var(--hot-color-neutral-50);
    background-color: var(--hot-color-neutral-900);
}

.grid-container, .pagination {
    padding-bottom: 150px;
}

.login form input {
    margin: var(--hot-spacing-medium) 0;
}