.header-logo {
    height: 152px;
    width: auto;
    margin-bottom: -56px;
    margin-top: -32px;
}

.userformsgroup {
    border: 1px solid #aebace;
    border-radius: 4px;
    padding: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}


.nav--mobile {
    z-index:1100;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    position:relative;
}

.collapsible::before {
    content:'\002B';
    color:#000;
    font-weight:bold;
    margin-left:5px;
    position:absolute;
    right:8px;
    top:calc(50% - 9px);
}

.collapsible::after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

.collapsible.active::before {
    content:'\2212';
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
    padding: 0 18px;
    display: none;
    /*overflow: hidden;*/
    /*background-color: #f1f1f1;*/
}


.remove-player-btn, #duplicate-form-btn {
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    margin-top: 10px;
}

.remove-player-btn:hover, #duplicate-form-btn:hover {
    background-color: var(--color-line-grey);
}



/* ajax select field */
.level51-ajaxSelectFieldBase input[type=text] {
    padding: 0.4em 0.333em !important;
    transition: initial !important;
    font-size: 1.5rem;
}
.level51-ajaxSelectFieldBase input[type=text]:focus {
    border-color:var(--color-line-grey) !important;
}
.level51-ajaxSelectFieldBase input[type=text]:focus-visible {
    outline: currentcolor dashed 0.1rem;
    outline-offset: 0.2rem;
    border-radius: 0.2rem;
}
.level51-ajaxSelectFieldBase .vue-simple-suggest .suggestions .suggest-item.hover, .level51-ajaxSelectFieldBase .vue-simple-suggest .suggestions .suggest-item.selected {
    margin-left:0;
}
.level51-ajaxSelectFieldBase .vue-simple-suggest .suggestions .misc-item, .level51-ajaxSelectFieldBase .vue-simple-suggest .suggestions .suggest-item {
    margin-left:0;
}



.green-tick {
    color: green;
    font-weight: bold;
    margin-left: 5px;
}

.validation-icon {
    margin-left: 10px;
    font-weight: bold;
}



/* Messages */
.message {
    margin: 0.556em 0;
    display: block;
    max-width: var(--max-width);
    clear: left;
}

.message,
.error-container {
    padding: 0.278em 0.556em;
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning-dark);
    border-radius: 3px;

    &.good {
        background-color: var(--color-good-light);
        border-color: var(--color-good-dark);
    }

    &.bad,
    &.required,
    &.error,
    &.error-container {
        background-color: var(--color-error-light);
        border-color: var(--color-error-dark);
    }
}

form .description {
    font-size: 1.2rem;
    font-style: italic;
}

.form-select {
    position:relative;
}

.form-select {
    width: 100% !important;
    max-width: var(--max-width) !important;
    padding: 0.4em 0.333em !important;
    font-size: 1.5rem !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-line-grey) !important;
}

.form-select.form-control-focus {
    outline: currentcolor dashed 0.1rem !important;
    outline-offset: 0.2rem !important;
    border-radius: 0.2rem !important;
}

.form-select .tags-badge {
    background-color:var(--color-line-grey);
}

.form-select .tags-badge .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
}

.dropdown-menu {
    display:none;
    border:1px solid;
    border-radius: 4px;
    background-color:white;
    position:absolute;
    z-index:999;
}

.dropdown-menu.show {
    display:block;
}

.dropdown-menu ul {
    list-style: none;
}

.dropdown-menu li {
    margin:0;
}

.dropdown-menu li a {
    padding:4px 8px;
    display:block;
}

.dropdown-menu li a:hover {
    background-color: var(--color-line-grey)
}



/*body*/

.flex-container {
    display:flex;
    flex-wrap:wrap;
}

.flex-container > .column {
    width:auto;
    flex-basis: 480px;
    flex-grow:1;
    padding: 0 1rem;
}

.sticky {
    position:sticky;
    top: 12px;
}


.obfuscated-text {
    display: block;
}
.obfuscated-text::before, .obfuscated-text::after {
    content: '';
    display:inline-block;
    background-color:var(--color-line-grey);
    border-radius: 4px;
    height:16px;
    width: 56px;
    margin-right:0.8rem
}

.obfuscate:nth-child(even) .obfuscated-text:before {
    width:48px;
}

.obfuscate:nth-child(even) .obfuscated-text:after {
    width:64px;
}