/*Navigationsleiste*/

.dropbtn{
    height: 40px;
    width: 40px;
    padding: 0;
    margin-left: 12px;
    border-radius: 50%;
    border: 0;
    color: #ffffff;
    background-color: #adadad;
    display: block;

}

.dropbtn:hover, .dropbtn:focus {
    border: 2px solid #ffffff;
    color: #ffffff;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content{
    right: 10px;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    border-radius: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a, .dropdown-content p{
    color: black;
    padding: 12px 16px;
    margin: 1px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    border-radius: 10px;
    background-color: #ddd;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}






.user-popup{
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}




.user-button_container{
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}

.burger-menu {
    display: none;
}


.image-container {
    position: relative;
    text-align: center;
    color: white;
}

.loadButton{
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #101010;
    padding:14px 24px 14px 24px;
    border-radius: 1px;
    opacity: 0.9;
    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #fff 50%, #101010 50%) right;
    background-size: 200%;
    transition: 0.4s ease-out;
    cursor: pointer;
}

.loadButton:hover{
    background-position: left;
    color:#fff;
    border:2px solid #101010;
}

.load {
    display: block;
    margin: 30px 0 30px 0;
    width: 100%;
    text-align: center;
}


/* Drag and Drop wird nur angezeigt wenn vom Browser unterstützt */
.is-dragover .drop-zone{
    background: #cacaca;
}

form.droppable .advanced{
    display: none;
}

form.can-drop .advanced{
    display: inline;
}


.drop-zone{
    width: 100%;
    min-height: 300px;
    height: calc(1.5em + 0.75rem + 2px);
    text-align: center;
    background-color: #fff;
    background-clip: padding-box;
}

.drop-zone label{
    top: 30%;
    position: relative;
    cursor: pointer;
}

.drop-zone input{
    display: none;
}

#ajaxLoader{
    position: relative;
    text-align: center;
}

.ajax-dot{
    width: 2em;
    height: 2em;
    border: 2px solid #101010;
    background-color: #a1a1a1;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .5em;
    transform: scale(0);
    animation: dotanimation 1000ms ease infinite 0ms;
}
.ajax-dot:nth-child(2){
    animation: dotanimation 1000ms ease infinite 200ms;
}
.ajax-dot:nth-child(3){
    animation: dotanimation 1000ms ease infinite 400ms;
}
.ajax-dot:nth-child(4){
    animation: dotanimation 1000ms ease infinite 600ms;
}
.ajax-dot:nth-child(5){
    animation: dotanimation 1000ms ease infinite 200ms;
}






/* Upload */
.upload-progress{
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}
.upload-progress-item-unselected, .upload-progress-item-selected{
    padding: 10px 20px;
}
.upload-progress-item-selected{
    background-color: #bbbbbb;
}