* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    direction: rtl;
    text-align: right;
    background-color: rgb(125, 159, 168);
    font-family: 'Cairo', sans-serif;
    overflow: hidden;
}

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

    40% {
        transform: translateX(-10%);
    }

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

    100% {
        transform: translateX(-10px);
    }
}

@keyframes hide_slide {
    0% {
        transform: translateX(-10px);
    }

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

    80% {
        transform: translateX(-10%);
    }

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

.hide {
    animation: hide_slide 1s ease forwards;
}

.show {
    animation: show_slide 1s ease forwards;
}

input:focus {
    outline-width: 0;
}