.error {
    color: rgb(248, 49, 14);
}

.disapear {
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

input[type="password"] {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAD2UlEQVRoge3YS2heRRQH8F9qXDXRpkm16StGa1FREBcK4mvjyoaAj2qwrYKI4Cs7EcRdFREf6K4gLlyoFEG0WpW0qVZFlGKpIKnvhUrV6iKJ0Ngk/VzMXOdLcm++m/g1urh/GLh3zmPOmZlz5sxQoUKFChUqVKhQ4VShpYm6zsC1uBIXYRO60B7p4/gdX2EEH+OD2P+fox13Yi8mUVtgm8QQ7pAcXlL04BmMzjLqAHbgRlyMDpweWwcuwU14HB9iqk5+FE9jw1I4sArP4S8zZ/ZRdC5CXxcemaVrAs9G2inBdvwRB5vGifj9WhN0vxR1TUXdNSGetjdB9z/owbvSjO3F9cKqTKK3QK4f7+PP2Pajr4C3G8cFJ/owXDfeO9GGf4VbMRYV/hL/4Z7Yt6tA7gnFAf5YgcyLkT4Y/wfwa+wbw5bFONAqBHM2+G4zY2BP7N+aI9s/jxNZ25wjd3OkDdX1deGt2H8ST0XbSqFD2BJZJnrI3PPmx0jfmCOfyc7XhnPkeiPtp1n9LXhYSu/DWNHIiTX4QtpKVxXwTUSethzaeAlHxnLklktZKw/XSFvtsBBXuejBD5HxG5xXxCjFTTMdaZ+HlmEjvo1838tJAt3R+BoO4qx5lBHKjBrOz6HtL+HIvhy5TZF2pMHYZ+NzacJnrMwnkXAIKxsoIqTEmpTF6tFXwpEbcuQGIu3tEuOvjLbWou2WzWJYplxWyAbrz6HtFkqQIuyQb2ymq4wjrebaDlbja8HDL+P/fFgvnMITig+rzUKGGY9tn/yVIGSsCSEzrWsw9upoYy3aPCfoNwgBlO3TohM7wwuR9+UGfGWwK+ra2YDvXMG2Gr4zT4HZLaS2Gn5TnH5hrZShHiht8lwMStVvYUrF1TgmxXKjXWOFsA2ynH6/4gtYv1AfTVqcM4NSoVhUh7XgQaniHsKZZQdoFcqBk1H4TcVl9aBUsb6Kc0ro75W207TiSVglJI+sRHkSp5XyYBa2SIffUWyTvzr9dXwTeAW34QLhxF4evwcEZ7PZHZVfd7UIJfxR6ZC8ZTEO1GMNXpfOgM9weQHfTuWuvNPCHSQvJi7FR3W8ezShjK/HVinYpvGG8NgwG+txXzRgREq/I8IZca/8FHudsIWzbXoMtzfTgXp0CuV9VjRmJc1dFnfV7YyyB+v0HRfic0H6FvsctE4I8rulDDKFT4UnnkPCYfWzsBotQoG5VqipLhOq2SukSmJU2JrPR7klRZsQlO9Jd/iFtBPCNXqb/Eq6NJr5QNcmPdBdKGSpTmnFRoXHiyPSA90B4T5foUKFChUqVKhQ4X+MvwFXZm65zFKkYQAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 16px 18px;
    background-position: 98% 50%;
}
.close {
    background-color: lavenderblush;
    border: inherit;
}

/* Adsense style popup */
svg {
    width: 1.2em;
    height: 1.2em;
}
div#ad_position_box button {
    /* background: transparent;
    border: unset; */
    font-size: 20px;
    cursor: pointer;
}
.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div#ad_position_box {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(50px);
    z-index: 9;
}
div#ad_position_box.active {
    display: flex;
}
div#ad_position_box .card {
    background: #fff;
    padding: 10px 24px 25px;
    border-radius: 6px;
    position: relative;
    box-shadow: 0px 8px 12px rgb(60 64 67 / 15%),
        0px 4px 4px rgb(60 64 67 / 30%);
}
.ad-content {
    display: block;
    box-shadow: 0px 10px 22px rgb(0 0 0 / 65%);
}
.ad-content img {
    display: block;
    width: 400px;
    height: 200px;
}

/* responsive designs */

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 280px) {
    .ad-content {
        width: 200px;
    }
    .ad-content img {
        width: 200px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 300px) {
    .ad-content {
        width: 250px;
    }
    .ad-content img {
        width: 250px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 600px) {
    .ad-content {
        width: 400px;
    }
    .ad-content img {
        width: 400px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .ad-content {
        width: 500px;
        height: 300px;
    }
    .ad-content img {
        width: 500px;
        height: 300px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .ad-content {
        width: 600px;
        height: 300px;
    }
    .ad-content img {
        width: 600px;
        height: 300px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {
        background: pink;
    }
}