/* Gombok */
button.btn.btn-dark {
    background: transparent;
    box-shadow: 2px 2px 5px 0px grey;
}

button.btn.btn-dark:hover {
    box-shadow: inset 1px 1px 5px 3px black;
}

button.btn.btn-dark.logout {
    border-radius: 0px 5px 5px 0px;
}

button[type="submit"] {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

button[type="submit"]:hover {
    background-color: #555;
    transform: translateY(-3px);
}

button.agree {
    color: #00ff1b !important;
}

button.my-tasks.btn.btn-dark.active {
    box-shadow: inset 2px 2px 5px 0px black;
}

button.status-filter.btn.btn-dark.active {
    box-shadow: inset 2px 2px 5px 0px black;
}

button.btn.btn-dark.view {
    margin: 5px;
}

button.btn.btn-dark.view.active {
    box-shadow: inset 2px 2px 5px 0px black;
}

/* Alapértelmezett stílusok az értesítésekhez */
.message-popup {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000; /* Fekete háttér */
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0.8;
    animation: slideDown 1s forwards, slideUp 1s 3s forwards; /* 1s beúszás, 4s megjelenítés, 1s kiúszás */
}

/* Sikeres értesítések árnyéka */
.message-popup.success {
    box-shadow: 1px 1px 3px 1px rgba(0, 255, 0, 0.7);
}

/* Sikertelen értesítések árnyéka */
.message-popup.error {
    box-shadow: 3px 3px 5px 1px rgba(255, 0, 0, 0.7);
}

/* Beúszó animáció */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0%);
    }
}

/* Kiúszó animáció */
@keyframes slideUp {
    from {
        opacity: 1;
        transform: translate(-50%, 0%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
}

/* Modal Container */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    max-width: max-content;
    max-height: 90%;
}

/* Navigation Buttons */
.modal-navigation .prev,
.modal-navigation .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
    user-select: none;
}

/* Position the "next button" to the right */
.modal-navigation .next {
    right: 0;
}

/* Position the "prev button" to the left */
.modal-navigation .prev {
    left: 0;
}

/* Hide the buttons when not hovering over the modal */
.modal-navigation .prev:hover,
.modal-navigation .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Animation for modal */
@keyframes zoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

.modal-content, .close {
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Gombok és linkek */
.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.back-link,
.agree {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.back-link:hover,
.agree:hover {
    background-color: #555;
    transform: translateY(-3px);
}

/* Láthatóság form */
#visibility-form {
    margin-bottom: 20px;
}

#visibility-form label {
    margin-right: 10px;
}

#visibility-form select {
    padding: 5px;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
}

/* Gombok konténere */
.button-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

/* Növelő és kisebbítő gomb stílusai */
.expand-button, .shrink-button {
    position: absolute;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

button.expand-button.vertical, button.shrink-button.vertical {
    width: 100px;
    bottom: 0;
    margin: 0px;
}

button.expand-button.horizontal, button.shrink-button.horizontal {
    transform: rotate(270deg);
    transform-origin: center center;
    top: 0;
    right: -25px;
    width: 100px;
    margin: 0px;
}

button.expand-button.vertical {
    right: 0;
}

button.shrink-button.vertical {
    left: 0;
}

button.expand-button.horizontal {
    top: 20%;
}

button.shrink-button.horizontal {
    top: 50%;
}

.expand-button:hover, .shrink-button:hover {
    background-color: #555;
}

/* Switch gomb stílusa */
:root {
    --hue: 223;
    --off-hue: 3;
    --on-hue1: 123;
    --on-hue2: 168;
    --fg: hsl(var(--hue),10%,90%);
    --primary: hsl(var(--hue),90%,50%);
    --trans-dur: 0.6s;
    --trans-timing: cubic-bezier(0.65,0,0.35,1);
}

.switch, .switch__input {
    -webkit-tap-highlight-color: #0000;
}

.switch {
    display: block;
    margin: auto;
    position: relative;
    width: 5em;
    height: 3em;
    cursor: pointer;
}

.switch__base-outer, .switch__base-inner {
    display: block;
    position: absolute;
}

.switch__base-outer {
    border-radius: 1.25em;
    box-shadow: -0.125em -0.125em 0.25em hsl(var(--hue),10%,30%), 0.125em 0.125em 0.125em hsl(var(--hue),10%,30%) inset, 0.125em 0.125em 0.25em hsl(0,0%,0%), -0.125em -0.125em 0.125em hsl(var(--hue),10%,5%) inset;
    top: 0.125em;
    left: 0.125em;
    width: 4.75em;
    height: 2.75em;
}

.switch__base-inner {
    border-radius: 1.125em;
    box-shadow: -0.25em -0.25em 0.25em hsl(var(--hue),10%,30%) inset, 0.0625em 0.0625em 0.125em hsla(var(--hue),10%,30%), 0.125em 0.25em 0.25em hsl(var(--hue),10%,5%) inset, -0.0625em -0.0625em 0.125em hsla(var(--hue),10%,5%);
    top: 0.375em;
    left: 0.375em;
    width: 4.25em;
    height: 2.25em;
}

.switch__base-neon {
    display: block;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.switch__base-neon path {
    stroke-dasharray: 0 104.26 0;
    transition: stroke-dasharray var(--trans-dur) var(--trans-timing);
}

.switch__input {
    outline: transparent;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.switch__input:before {
    border-radius: 0.125em;
    box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);
    content: "";
    display: block;
    position: absolute;
    inset: -0.125em;
    transition: box-shadow 0.15s linear;
}

.switch__input:focus-visible:before {
    box-shadow: 0 0 0 0.125em var(--primary);
}

.switch__knob, .switch__knob-container {
    border-radius: 1em;
    display: block;
    position: absolute;
}

.switch__knob {
    background-color: hsl(var(--hue),10%,15%);
    background-image: radial-gradient(88% 88% at 50% 50%,hsl(var(--hue),10%,20%) 47%,hsla(var(--hue),10%,20%,0) 50%), radial-gradient(88% 88% at 47% 47%,hsl(var(--hue),10%,85%) 45%,hsla(var(--hue),10%,85%,0) 50%), radial-gradient(65% 70% at 40% 60%,hsl(var(--hue),10%,20%) 46%,hsla(var(--hue),10%,20%,0) 50%);
    box-shadow: -0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,15%) inset, -0.125em -0.125em 0.0625em hsl(var(--hue),10%,5%) inset, 0.75em 0.25em 0.125em hsla(0,0%,0%,0.8);
    width: 2em;
    height: 2em;
    transition: transform var(--trans-dur) var(--trans-timing);
}

.switch__knob-container {
    overflow: hidden;
    top: 0.5em;
    left: 0.5em;
    width: 4em;
    height: 2em;
}

.switch__knob-neon {
    display: block;
    width: 2em;
    height: auto;
}

.switch__knob-neon circle {
    opacity: 0;
    stroke-dasharray: 0 90.32 0 54.19;
    transition: opacity var(--trans-dur) steps(1,end), stroke-dasharray var(--trans-dur) var(--trans-timing);
}

.switch__knob-shadow {
    border-radius: 50%;
    box-shadow: 0.125em 0.125em 0.125em hsla(0,0%,0%,0.9);
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 2em;
    height: 2em;
    transition: transform var(--trans-dur) var(--trans-timing);
}

.switch__led {
    background-color: hsl(var(--off-hue),90%,70%);
    border-radius: 50%;
    box-shadow: 0 -0.0625em 0.0625em hsl(var(--off-hue),90%,40%) inset, 0 0 0.125em hsla(var(--off-hue),90%,70%,0.3), 0 0 0.125em hsla(var(--off-hue),90%,70%,0.3), 0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.25em;
    height: 0.25em;
    transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);
}

.switch__text {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.switch__input:checked ~ .switch__led {
    background-color: hsl(var(--on-hue1),90%,70%);
    box-shadow: 0 -0.0625em 0.0625em hsl(var(--on-hue1),90%,40%) inset, 0 -0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3), 0 0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3), 0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);
}

.switch__input:checked ~ .switch__base-neon path {
    stroke-dasharray: 52.13 0 52.13;
}

.switch__input:checked ~ .switch__knob-shadow,
.switch__input:checked ~ .switch__knob-container .switch__knob {
    transform: translateX(100%);
}

.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {
    opacity: 1;
    stroke-dasharray: 45.16 0 45.16 54.19;
    transition-timing-function: steps(1,start), var(--trans-timing);
}