﻿.full-width {
    width: 100% !important;
}

.error-msg-custom {
    font-size: 21px;
    font-family: 'Saira' !important;
    color: #fff;
    text-transform: uppercase;
}

.custom-box {
    margin: 5% auto 5% auto;
    max-width: 60%;
}

.btn-back-custom {
    width: 200px;
    height: 40px;
    color: #ffffff; /* White text */
    background: #1f2127; /* Dark background */
    border: 1px solid #2a2d35;
    font-family: 'Saira' !important;
    transition: all 0.4s;
    font-weight: 600;
}

    .btn-back-custom:hover {
        background: #2a2d35; /* Slightly lighter on hover */
        color: #ffffff;
        transform: scale(1.02);
    }

.btn-add-thread {
    color: #ffffff; /* White text */
    background: #1f2127; /* Dark background */
    border: 1px solid #2a2d35;
    font-family: 'Saira' !important;
    transition: all 0.4s;
    font-weight: 600;
}

    .btn-add-thread:hover {
        background: #2a2d35; /* Slightly lighter on hover */
        color: #ffffff;
        transform: scale(1.02);
    }

.custom-info-dugme {
    color: #ffffff !important; /* White text */
    background: #1f2127; /* Dark background */
    border: 1px solid #2a2d35;
    width: 200px;
}

    .custom-info-dugme:hover {
        color: #ffffff !important;
        background: #2a2d35; /* Slightly lighter on hover */
        font-weight: 600;
    }

.custom-sacuvaj {
    background: #1f2127; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #2a2d35;
    width: 110px;
    margin-right: 20px;
}

    .custom-sacuvaj:hover {
        color: #ffffff !important;
        background: #2a2d35; /* Slightly lighter on hover */
        font-weight: 600;
    }

.btn-register {
    transition-duration: 0.4s;
    background: #1f2127; /* Dark background */
    color: #ffffff; /* White text */
    border: 1px solid #2a2d35;
    border-radius: 14px;
    font-weight: 700;
    height: 36px;
}

    .btn-register:hover {
        color: #ffffff;
        background: #2a2d35; /* Slightly lighter on hover */
        transform: scale(1.01);
    }

.btn-logout {
    transition-duration: 0.4s;
    background: #1f2127; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #2a2d35;
    border-radius: 14px;
    font-weight: 700;
    height: 36px;
}

    .btn-logout:hover {
        color: #ffffff !important;
        background: #2a2d35; /* Slightly lighter on hover */
        transform: scale(1.01);
    }

.btn-primary {
    color: #ffffff; /* White text */
    background: #1f2127; /* Dark background */
    border: 1px solid #2a2d35;
    padding: 5px 40px 10px;
}

    .btn-primary:hover {
        background: #2a2d35; /* Slightly lighter on hover */
    }

.userpage-card {
    flex-direction: row;
    border-radius: 12px;
    justify-content: space-between;
    max-width: 65%;
    width: 100%;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.register-card {
    flex-direction: column;
    width: 60rem;
    min-height: 24rem;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    color: white;
}

.toggle-icon {
    position: absolute;
    right: 12px;
    top: 55%;
    cursor: pointer;
    color: #737B87;
    z-index: 1;
}

.toggle-icon-register {
    position: absolute;
    left: 95%;
    top: 55%;
    cursor: pointer;
    color: #737B87;
    z-index: 1;
}

.btn-login {
    transition-duration: 0.4s;
    background: #1f2127; /* Dark background */
    color: #ffffff; /* White text */
    border: 1px solid #2a2d35;
    border-radius: 14px;
    font-weight: 700;
    height: 36px;
}

    .btn-login:hover {
        background: #2a2d35; /* Slightly lighter on hover */
        color: #ffffff;
        transform: scale(1.01);
    }

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
    padding: 1rem;
}

.rabbit-image {
    flex: 1.2;
    text-align: center;
    align-self: center;
    padding: 2rem;
}

.userpage-img {
    /*width: 14rem;*/
    max-width: 100%;
    border-radius: 0.5rem;
}

.userpage-form {
    flex: 1.8;
}