/*
Copyright 2019-2023 by Swiss Federal Administration
All rights reserved.

This software is the confidential and proprietary information of the Swiss
Federal Administration. ("Confidential Information").  You shall not disclose
such Confidential Information and shall use it only in accordance with the
terms of the license agreement you entered into with the Swiss Federal
Administration.
*/

/* Banner für Test-System. An Oblique-Banner angelehnt. */
header {
    /* um den Banner abzuschneiden */
    overflow:hidden;
}

aside.test-system-banner {
    color: rgb(255, 255, 255);
    background-color: rgb(176, 0, 32);
    display: block;
    position: absolute;
    top: 1.5em;
    left: 1.5em;
    font-size: 1.25em;
    text-align: center;
    word-break: normal;
    transform: rotate(-45deg);
    transform-origin: center;
}

aside.test-system-banner:before {
    content: "";
    position: absolute;
    display: block;
    inset: 0 -100px;
    background-color: inherit;
    z-index: -1;
}

/* Don't display triangle for original tab dropdown, used when there is no submenu */
.nav-main.yamm .nav > .no-triangle > a:after {
    display: none;
}

/* show th edropzone for files */
#dropzone {
    width: 90%;
    height: 200px;
    padding: 2%;
    background: white;
    border: 1px solid #666;
}

#instructionTab a:focus, #downloadTab a:focus {
    background: #e8e8e8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(61%, #f7f7f7), color-stop(89%, #f7f7f7), color-stop(91%, #f5f5f5), color-stop(95%, #ececec), to(#d7d7d7));
    background: linear-gradient(to bottom, #e8e8e8 0, #f7f7f7 61%, #f7f7f7 89%, #f5f5f5 91%, #ececec 95%, #d7d7d7 100%);
    color: #454545;
}

#instructionTab a:focus:hover, #downloadTab a:focus:hover {
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(61%, #f7f7f7), color-stop(89%, #f7f7f7), color-stop(91%, #f5f5f5), color-stop(95%, #ececec), to(#d7d7d7));
    background: linear-gradient(to bottom, #e8e8e8 0, #f7f7f7 61%, #f7f7f7 89%, #f5f5f5 91%, #ececec 95%, #d7d7d7 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), color-stop(10%, #fff), color-stop(79%, #fff), color-stop(91%, #fff), to(#dbdbdb));
    background: linear-gradient(to bottom, #f4f4f4 0, #fff 10%, #fff 79%, #fff 91%, #dbdbdb 100%);
    border-top: 5px solid #dc0018;
    margin-top: -5px;
    height: 75px;
    max-width: 110px;
    color: #dc0018;
    font-size: .8em;
    line-height: 1.2;
    padding: 10px 9px;
}

img {
    height: 100px;
}

.dropzoneJQ {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
}

#basic_message {
    height: 3em;
    overflow-y: auto;
}

.simple-upload-dragover {
    background-color: #eef;
}

.simple-upload-filename {
    margin-right: 0.5em;
}

.clickable {
    display: block;
    width: 100%;
    height: 100%;
}

.upreg-table-sort thead th:hover, .table-sort thead th:hover:after {
    color: #DC0018
}

.upreg-table-sort thead th div {
    display: inline
}

.upreg-table-sort thead th a:hover {
    cursor: pointer
}

.upreg-table-sort thead th a:after {
    content: "";
    margin-left: .4em;
    color: #757575;
    font-family: 'Admin Icons'
}

.upreg-table-sort thead th a.tablesorter-headerAsc:after {
    content: "";
}

.upreg-table-sort thead th a.tablesorter-headerAsc div,
.upreg-table-sort thead th a.tablesorter-headerAsc:after,
.upreg-table-sort thead th a.tablesorter-headerDesc div,
.upreg-table-sort thead th a.tablesorter-headerDesc:after {
    color: #DC0018 !important
}

/* Vertically align value (control-value) to label (control-label) inside of form-group element */
.form-group .control-value {
    padding-top: 4px;
}

/* Full-screen wrapper for element with ID "spinner" */
#spinner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.67);
    transition: opacity 0.2s;
}

/* Center element with ID "spinner" */
#spinner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

/* Hidden spinner (element with ID "spinner" is invisible if it does not have class "show") */
#spinner {
    visibility: hidden;
    opacity: 0;
}

/* Visible spinner (element with ID "spinner" is visible if it has class "show") */
#spinner.show {
    visibility: visible;
    opacity: 1;
}

/* Prevent element from being selected like text */
.unselectable {
    user-select: none; /* Chrome, Opera, Chrome-based Edge */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer, old Edge */
}

.not-too-narrow {
    min-width: 10em !important;
}

/* Password strength bar */
.strength-bar-container {
    border-radius: 5px;
    width: 400px;
    width: 100%;
    border: solid rgb(117, 117, 117) 1px;
    height: 20px;
    margin-top: 5px;
}

.strength-bar {
    border-radius: 5px;
    height: 18px;
    white-space: nowrap;
    padding-left: 5px;
}

.password-conformity-item {
    white-space: nowrap;
}
.password_quality_check_mark {
    float:left;
    visibility: hidden;
    padding-right: 5px;
}

.tooltip-hover {
    display:inline-block;
    position:relative;
    text-align:left;
}

.tooltip-hover .bottom-text {
    min-width:200px;
    top:40px;
    left:50%;
    transform:translate(-50%, 0);
    padding:10px 20px;
    color:#000000;
    background-color:#FFFFFF;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip-hover:hover .bottom-text {
    display:block;
}

.tooltip-hover .bottom-text i {
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip-hover .bottom-text i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#FFFFFF;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.system-status-circle {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: grey;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
}

#system-status-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    color: inherit;
}

#system-status-link:visited {
    color: inherit;
}