/*========================= LOADING ==================================*/

.loading-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.swords-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sword {
    position: absolute;
    width: 55px;
    height: 55px;
    transform-origin: center;
    transition: transform 0.1s;
}

.sword-1 {
    animation: sword1-move1 2s ease-in-out infinite;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transform: rotate(45deg);
    z-index: 2;
}

.sword-2 {
    animation: sword2-move2 2s ease-in-out infinite;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transform: rotate(315deg);
    z-index: 1;
}

.clash-spark {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd700 0%, #ff6b00 70%, transparent 100%);
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ff6b00;
    opacity: 0;
    z-index: 3;
}

.spark-1 {
    animation: spark1 zalternate ease-in-out infinite;
}

.spark-2 {
    animation: spark2 4.5s ease-in-out infinite;
}

@keyframes sword1-move1 {
    0% {
        /* right: 0px; */
        transform: translateX(30px) rotate(45deg);
    }

    100% {
        transform: translateX(0px) rotate(45deg);
    }
}

@keyframes sword2-move2 {
    0% {
        transform: translateX(-30px) rotate(315deg);
    }

    100% {
        transform: translateX(0px) rotate(315deg);
    }
}

@keyframes spark1 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    48% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1) translate(-5px, 5px);
    }

    52% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }
}

@keyframes spark2 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    48% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1) translate(5px, -5px);
    }

    52% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
    }
}

@keyframes vibrate {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

.vibrate {
    animation: vibrate 0.1s linear 3;
}
/*========================= LOADING ==================================*/

/*==========================AppMessageDialog================================*/

.appmsgdia-title {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 60px;
    padding: 0px 10px;
}

.appmsgdia-footer-box {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 60px;
    padding: 0px 10px;
}

.appmsgdia-t-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
}

.appmsgdia-content-box {
    padding: 10px;
}

.appmsgdia-t-icon.amd-info {
    background: #252575;
}

.appmsgdia-t-icon.amd-error {
    background: #754325ab;
}

.appmsgdia-t-icon.amd-warn {
    background: #6f7525ab;
}

.appmsgdia-t-icon.amd-success {
    background: #3d2575;
}


.appmsgdia-t-text {
    font-size: 19px;
    font-weight: bold;
}
/*==========================AppMessageDialog================================*/


/*========================== Form Section ================================*/
.entry-form-container {
    padding: 10px;
    overflow-y: auto;
}

.form-section {
    margin-bottom: 20px;
   /* background: var(--mud-palette-background-gray);*/
    border-radius: 15px;
    padding: 10px;
    transition: all 0.3s ease;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    gap: 10px;
}

.section-title svg {
    color: var(--mud-palette-secondary);
}

.form-info-btnbox {
    position: absolute;
    top: 10px;
    right: 15px;
}

    .form-info-btnbox button {
        position: relative;
        z-index: 1;
    }

.f-info-btn-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 20px;
    transform: translate(-50%,-50%);
    border: 1px solid var(--mud-palette-info);
    border-radius: 50%;
    animation: fibr-ani;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.validation-msg {
    margin-top: 10px;
    color: var(--mud-palette-error);
    font-size: 13px;
}

.validation-border {
    border-bottom: 1px solid var(--mud-palette-error);
}

.disable-btn {
    background: gray !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

@keyframes fibr-ani {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.3;
    }

    100% {
        height: 26px;
        width: 26px;
        opacity: 0.7;
    }
}
/*========================== Form Section ================================*/

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .logo-box .lb-mg {
        position: relative;
        font-size: 25px;
        padding: 5px 10px 5px 10px;
        border-radius: 15px;
        font-weight: bold;
        display: flex;
        gap: 5px;
    }

        .logo-box .lb-mg div {
            display: flex;
            align-items: center;
        }