@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --primary-color: #198754;
    font-family: "Inter", sans-serif;
}





@media only screen and (min-width:200px) and (max-width:399px) {
	 :root {
	--accent-900: #49a87d;
	--accent-800: #1b945b;
	--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");

	--notification-inset: 2rem;

	font-family: system-ui;
}

*,
:after,
:before {
	box-sizing: inherit;
}
.alert-container,.alert-container-true
{
   display: none;
}

.notification {
	color: rgba(0, 0, 0, 0.7);
	position: fixed;
	display: flex;
	font-size: 1rem;
	letter-spacing: 2px;
	gap: 1.75rem;
	top: 0;
	right: 0;
	margin: var(--notification-inset);
	width: 24rem;
	background-color: white;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.5rem;
	max-width: calc(100% - 6rem);
	 z-index: 1435435903539857235935678932562000000;
	padding: 1.75rem 1.25rem 1.25rem;
	overflow: clip;
	transform: translateX(calc(100% + var(--notification-inset)));
	animation: slideInOut 4s infinite cubic-bezier(0.33, 0, 0.66, 1.33);
	animation-play-state: var(--animation-play-state);

	&:hover {
		--animation-play-state: paused;
	}

	&:before {
		content: "";
		display: block;
		inset: 0 0 auto;
		height: 0.5rem;
		background-color: #49a87d;
		transform-origin: left;
		position: absolute;
		animation: countdown 4s infinite linear;
		animation-play-state: var(--animation-play-state);
	}

	&__text {
		margin: 0.3rem 0 0;
	}

	&__header {
		color: black;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	&__action {
		margin-left: auto;
	}

	&__icon {
		border-radius: 50%;
		display: block;
		aspect-ratio: 1;
		background-size: 3rem;
		background-color: #49a87d;
		background-image: var(--check-svg);
		background-repeat: no-repeat;
		background-position: 50% 100%;
		width: 3.2rem;
		margin-bottom: auto;
		flex-shrink: 0;
	}
}

.button {
	appearance: none;
	background: no-repeat;
	border: none;
	font: inherit;
	margin: 0;
	color: currentColor;
	padding: 0;
}

@keyframes slideInOut {
	15%,
	66% {
		transform: translateX(0);
	}
}

@keyframes countdown {
	66%,
	100% {
		transform: scaleX(0);
	}
}.notificatio {
        position: fixed;
        top: 0px;
        right: 20px;
        width: 300px;
        height: 80px;
        color: black;
        z-index: 1000;

    }

    .Toast {
        /* From https://css.glass */
        border-radius: 3px;
		--color:#49a87d;
        background-color: var(--color);
        position: relative;
        padding: 10px;
        color: #fff;
        display: grid;
        grid-template-columns: 60px 3fr 30px;
        align-content: center;
        --color:#49a87d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            -1px -1px 2px rgba(0, 0, 0, 0.1);
        animation: show 0.3s ease 1 forwards;
    }

    .Toast i {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .Toast span,
    .Toast i:nth-child(3) {
        color: #fff;
        opacity: 0.5;
    }

    .Toast .title {
        font-size: large;
        font-weight: 600;
        color: #fff;
    }

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

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

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

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

    .Toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color:#fff;
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px #fff;
        animation: timeOut 5s linear 1 forwards;
    }

    @keyframes timeOut {
        to {
            width: 0;
        }
    }

    .error {
        --color: #f24d4c;
        background-image: linear-gradient(to right, #d44a4aad, rgba(255, 255, 255, 0) 30%);
    }

}





/* lg mobiles */
@media only screen and (min-width:400px) and (max-width:767px) {

    :root {
	--accent-900: #49a87d;
	--accent-800: #1b945b;
	--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");

	--notification-inset: 2rem;

	font-family: system-ui;
}

*,
:after,
:before {
	box-sizing: inherit;
}
.alert-container,.alert-container-true
{
   display: none;
}

.notification {
	color: rgba(0, 0, 0, 0.7);
	position: fixed;
	display: flex;
	font-size: 12px;
	letter-spacing: 2px;
	gap: 1.75rem;
	top: 0;
	right: 0;
	margin: var(--notification-inset);
	width: 17rem;
	background-color: white;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.5rem;
	max-width: calc(100% - 6rem);
	 z-index: 1435435903539857235935678932562000000;
	padding: 1.75rem 1.25rem 1.25rem;
	overflow: clip;
	transform: translateX(calc(100% + var(--notification-inset)));
	animation: slideInOut 4s infinite cubic-bezier(0.33, 0, 0.66, 1.33);
	animation-play-state: var(--animation-play-state);

	&:hover {
		--animation-play-state: paused;
	}

	&:before {
		content: "";
		display: block;
		inset: 0 0 auto;
		height: 0.5rem;
		background-color: #49a87d;
		transform-origin: left;
		position: absolute;
		animation: countdown 4s infinite linear;
		animation-play-state: var(--animation-play-state);
	}

	&__text {
		margin: 0.3rem 0 0;
	}

	&__header {
		color: black;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	&__action {
		margin-left: auto;
	}

	&__icon {
		border-radius: 50%;
		display: block;
		aspect-ratio: 1;
		background-size: 3rem;
		background-color: #49a87d;
		background-image: var(--check-svg);
		background-repeat: no-repeat;
		background-position: 50% 100%;
		width: 3.2rem;
		margin-bottom: auto;
		flex-shrink: 0;
	}
}

.button {
	appearance: none;
	background: no-repeat;
	border: none;
	font: inherit;
	margin: 0;
	color: currentColor;
	padding: 0;
}

@keyframes slideInOut {
	15%,
	66% {
		transform: translateX(0);
	}
}

@keyframes countdown {
	66%,
	100% {
		transform: scaleX(0);
	}
}
.notificatio {
        position: fixed;
        top: 0px;
        right: 20px;
        width: 300px;
        height: 80px;
        color: black;
        z-index: 1000;

    }

    .Toast {
        /* From https://css.glass */
        border-radius: 3px;
		--color:#49a87d;
        background-color: var(--color);
        position: relative;
        padding: 10px;
        color: #fff;
        display: grid;
        grid-template-columns: 60px 3fr 30px;
        align-content: center;
        --color:#49a87d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            -1px -1px 2px rgba(0, 0, 0, 0.1);
        animation: show 0.3s ease 1 forwards;
    }

    .Toast i {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .Toast span,
    .Toast i:nth-child(3) {
        color: #fff;
        opacity: 0.5;
    }

    .Toast .title {
        font-size: large;
        font-weight: 600;
        color: #fff;
    }

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

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

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

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

    .Toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color:#fff;
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px #fff;
        animation: timeOut 5s linear 1 forwards;
    }

    @keyframes timeOut {
        to {
            width: 0;
        }
    }

    .error {
        --color: #f24d4c;
        background-image: linear-gradient(to right, #d44a4aad, rgba(255, 255, 255, 0) 30%);
    }


}







/*  tablets */
@media only screen and (min-width:768px) and (max-width:1023px) {
	 :root {
	--accent-900: #49a87d;
	--accent-800: #1b945b;
	--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");

	--notification-inset: 2rem;

	font-family: system-ui;
}

*,
:after,
:before {
	box-sizing: inherit;
}
.alert-container,.alert-container-true
{
   display: none;
}

.notification {
	color: rgba(0, 0, 0, 0.7);
	position: fixed;
	display: flex;
	font-size: 12px;
	letter-spacing: 2px;
	gap: 1.75rem;
	top: 0;
	right: 0;
	margin: var(--notification-inset);
	width: 17rem;
	background-color: white;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.5rem;
	max-width: calc(100% - 6rem);
	 z-index: 1435435903539857235935678932562000000;
	padding: 1.75rem 1.25rem 1.25rem;
	overflow: clip;
	transform: translateX(calc(100% + var(--notification-inset)));
	animation: slideInOut 4s infinite cubic-bezier(0.33, 0, 0.66, 1.33);
	animation-play-state: var(--animation-play-state);

	&:hover {
		--animation-play-state: paused;
	}

	&:before {
		content: "";
		display: block;
		inset: 0 0 auto;
		height: 0.5rem;
		background-color: #49a87d;
		transform-origin: left;
		position: absolute;
		animation: countdown 4s infinite linear;
		animation-play-state: var(--animation-play-state);
	}

	&__text {
		margin: 0.3rem 0 0;
	}

	&__header {
		color: black;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	&__action {
		margin-left: auto;
	}

	&__icon {
		border-radius: 50%;
		display: block;
		aspect-ratio: 1;
		background-size: 3rem;
		background-color: #49a87d;
		background-image: var(--check-svg);
		background-repeat: no-repeat;
		background-position: 50% 100%;
		width: 3.2rem;
		margin-bottom: auto;
		flex-shrink: 0;
	}
}

.button {
	appearance: none;
	background: no-repeat;
	border: none;
	font: inherit;
	margin: 0;
	color: currentColor;
	padding: 0;
}

@keyframes slideInOut {
	15%,
	66% {
		transform: translateX(0);
	}
}

@keyframes countdown {
	66%,
	100% {
		transform: scaleX(0);
	}
}.notificatio {
        position: fixed;
        top: 0px;
        right: 20px;
        width: 300px;
        height: 80px;
        color: black;
        z-index: 1000;

    }

    .Toast {
        /* From https://css.glass */
        border-radius: 3px;
		--color:#49a87d;
        background-color: var(--color);
        position: relative;
        padding: 10px;
        color: #fff;
        display: grid;
        grid-template-columns: 60px 3fr 30px;
        align-content: center;
        --color:#49a87d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            -1px -1px 2px rgba(0, 0, 0, 0.1);
        animation: show 0.3s ease 1 forwards;
    }

    .Toast i {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .Toast span,
    .Toast i:nth-child(3) {
        color: #fff;
        opacity: 0.5;
    }

    .Toast .title {
        font-size: large;
        font-weight: 600;
        color: #fff;
    }

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

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

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

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

    .Toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color:#fff;
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px #fff;
        animation: timeOut 5s linear 1 forwards;
    }

    @keyframes timeOut {
        to {
            width: 0;
        }
    }

    .error {
        --color: #f24d4c;
        background-image: linear-gradient(to right, #d44a4aad, rgba(255, 255, 255, 0) 30%);
    }
}





/* laptops */
@media only screen and (min-width:1024px) and (max-width:1439px) {
	 :root {
	--accent-900: #49a87d;
	--accent-800: #1b945b;
	--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");

	--notification-inset: 2rem;

	font-family: system-ui;
}

*,
:after,
:before {
	box-sizing: inherit;
}
.alert-container,.alert-container-true
{
   display: none;
}

.notification {
	color: rgba(0, 0, 0, 0.7);
	position: fixed;
	display: flex;
	font-size: 12px;
	letter-spacing: 2px;
	gap: 1.75rem;
	top: 0;
	right: 0;
	margin: var(--notification-inset);
	width: 17rem;
	background-color: white;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.5rem;
	max-width: calc(100% - 6rem);
	 z-index: 1435435903539857235935678932562000000;
	padding: 1.75rem 1.25rem 1.25rem;
	overflow: clip;
	transform: translateX(calc(100% + var(--notification-inset)));
	animation: slideInOut 4s infinite cubic-bezier(0.33, 0, 0.66, 1.33);
	animation-play-state: var(--animation-play-state);

	&:hover {
		--animation-play-state: paused;
	}

	&:before {
		content: "";
		display: block;
		inset: 0 0 auto;
		height: 0.5rem;
		background-color: #49a87d;
		transform-origin: left;
		position: absolute;
		animation: countdown 4s infinite linear;
		animation-play-state: var(--animation-play-state);
	}

	&__text {
		margin: 0.3rem 0 0;
	}

	&__header {
		color: black;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	&__action {
		margin-left: auto;
	}

	&__icon {
		border-radius: 50%;
		display: block;
		aspect-ratio: 1;
		background-size: 3rem;
		background-color: #49a87d;
		background-image: var(--check-svg);
		background-repeat: no-repeat;
		background-position: 50% 100%;
		width: 3.2rem;
		margin-bottom: auto;
		flex-shrink: 0;
	}
}

.button {
	appearance: none;
	background: no-repeat;
	border: none;
	font: inherit;
	margin: 0;
	color: currentColor;
	padding: 0;
}

@keyframes slideInOut {
	15%,
	66% {
		transform: translateX(0);
	}
}

@keyframes countdown {
	66%,
	100% {
		transform: scaleX(0);
	}
}.notificatio {
        position: fixed;
        top: 0px;
        right: 20px;
        width: 300px;
        height: 80px;
        color: black;
        z-index: 1000;

    }

    .Toast {
        /* From https://css.glass */
        border-radius: 3px;
		--color:#49a87d;
        background-color: var(--color);
        position: relative;
        padding: 10px;
        color: #fff;
        display: grid;
        grid-template-columns: 60px 3fr 30px;
        align-content: center;
        --color:#49a87d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            -1px -1px 2px rgba(0, 0, 0, 0.1);
        animation: show 0.3s ease 1 forwards;
    }

    .Toast i {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .Toast span,
    .Toast i:nth-child(3) {
        color: #fff;
        opacity: 0.5;
    }

    .Toast .title {
        font-size: large;
        font-weight: 600;
        color: #fff;
    }

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

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

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

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

    .Toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color:#fff;
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px #fff;
        animation: timeOut 5s linear 1 forwards;
    }

    @keyframes timeOut {
        to {
            width: 0;
        }
    }

    .error {
        --color: #f24d4c;
        background-image: linear-gradient(to right, #d44a4aad, rgba(255, 255, 255, 0) 30%);
    }

}






/* desktop */
@media only screen and (min-width:1440px) and (max-width:2159px) {
	 :root {
	--accent-900: #49a87d;
	--accent-800: #1b945b;
	--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");

	--notification-inset: 2rem;

	font-family: system-ui;
}

*,
:after,
:before {
	box-sizing: inherit;
}
.alert-container,.alert-container-true
{
   display: none;
}

.notification {
	color: rgba(0, 0, 0, 0.7);
	position: fixed;
	display: flex;
	font-size: 12px;
	letter-spacing: 2px;
	gap: 1.75rem;
	top: 0;
	right: 0;
	margin: var(--notification-inset);
	width: 17rem;
	background-color: white;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.5rem;
	max-width: calc(100% - 6rem);
	 z-index: 1435435903539857235935678932562000000;
	padding: 1.75rem 1.25rem 1.25rem;
	overflow: clip;
	transform: translateX(calc(100% + var(--notification-inset)));
	animation: slideInOut 4s infinite cubic-bezier(0.33, 0, 0.66, 1.33);
	animation-play-state: var(--animation-play-state);

	&:hover {
		--animation-play-state: paused;
	}

	&:before {
		content: "";
		display: block;
		inset: 0 0 auto;
		height: 0.5rem;
		background-color: #49a87d;
		transform-origin: left;
		position: absolute;
		animation: countdown 4s infinite linear;
		animation-play-state: var(--animation-play-state);
	}

	&__text {
		margin: 0.3rem 0 0;
	}

	&__header {
		color: black;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	&__action {
		margin-left: auto;
	}

	&__icon {
		border-radius: 50%;
		display: block;
		aspect-ratio: 1;
		background-size: 3rem;
		background-color: #49a87d;
		background-image: var(--check-svg);
		background-repeat: no-repeat;
		background-position: 50% 100%;
		width: 3.2rem;
		margin-bottom: auto;
		flex-shrink: 0;
	}
}

.button {
	appearance: none;
	background: no-repeat;
	border: none;
	font: inherit;
	margin: 0;
	color: currentColor;
	padding: 0;
}

@keyframes slideInOut {
	15%,
	66% {
		transform: translateX(0);
	}
}

@keyframes countdown {
	66%,
	100% {
		transform: scaleX(0);
	}
}.notificatio {
        position: fixed;
        top: 0px;
        right: 20px;
        width: 300px;
        height: 80px;
        color: black;
        z-index: 1000;

    }

    .Toast {
        /* From https://css.glass */
        border-radius: 3px;
		--color:#49a87d;
        background-color: var(--color);
        position: relative;
        padding: 10px;
        color: #fff;
        display: grid;
        grid-template-columns: 60px 3fr 30px;
        align-content: center;
        --color:#49a87d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
            -1px -1px 2px rgba(0, 0, 0, 0.1);
        animation: show 0.3s ease 1 forwards;
    }

    .Toast i {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .Toast span,
    .Toast i:nth-child(3) {
        color: #fff;
        opacity: 0.5;
    }

    .Toast .title {
        font-size: large;
        font-weight: 600;
        color: #fff;
    }

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

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

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

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

    .Toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color:#fff;
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px #fff;
        animation: timeOut 5s linear 1 forwards;
    }

    @keyframes timeOut {
        to {
            width: 0;
        }
    }

    .error {
        --color: #f24d4c;
        background-image: linear-gradient(to right, #d44a4aad, rgba(255, 255, 255, 0) 30%);
    }

}