:root{
    --color-btn: #2973B2;
    --btn-gradient: linear-gradient(45deg, #68a5e6, #135186);
    --status-active: #DDEB9D;
    --base-400: rgb(238, 237, 237);
    
}

@keyframes shine {
	0% {
		transform: translate(-100%, -100%);
	}
	100% {
		transform: translate(100%, 100%);
	}
}

@keyframes show-up {
	100% {
        opacity: 1;
		transform: translate(0px);
	}
}

p, li{
    color: black !important;
}

.show-up{
    opacity: 0;
    transform: translateY(10px);
    animation: show-up 400ms forwards;
}

.settings-form{
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
    margin-block: 1rem;
    width: fit-content;
}

.settings-form header{
    padding-bottom: .1rem;
    margin-bottom: 1rem;
    position: relative;
}

.settings-form header::after{
    content: '';
    position: absolute;
    height: .2rem;
    width: 5rem;
    border-radius: 10px;
    background-color: rgba(187, 184, 184, 0.342);
    bottom: 0;
    left: 0;
}

.settings-form header .subheader{
   font-style: italic;
}

.settings-form .description{
    width: 95%;
    max-width: 30rem;
}

.settings-form strong{
    font-weight: bolder;
}

.settings-form .mybtn{
    text-decoration: none !important;
    all: unset;
    padding: .5rem 1rem;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: 200ms;
}

.settings-form .mybtn.btn-integrate{
    background: var(--btn-gradient);
    color: white;
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-block: 1rem;
    position: relative;
    overflow: hidden;
}

.settings-form .mybtn.btn-integrate::after{
    content: "";
	position: absolute;
	top: 0%;
	left: 0%;
	width: 300%;
	height: 300%;
	background: linear-gradient(-75deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
	animation: shine 3.5s infinite;
	pointer-events: none;
}



.settings-form .success-wrapper{
    padding-top: .1rem;
    position: relative;
    margin-top: 1rem;
}

.settings-form .success-wrapper::after{
    content: '';
    position: absolute;
    height: .2rem;
    width: 2.5rem;
    border-radius: 10px;
    background-color: rgba(187, 184, 184, 0.342);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.settings-form .success-wrapper h2, .settings-form .success-wrapper p{
    text-align: center;
}

.badge{
    padding: .1rem .5rem;
    border-radius: 10px;
    font-size: .7rem;
}

.integrated-wrapper .status-badge{
    background-color: var(--status-active);
}

.mybtn.btn-disconect{
    background-color: var(--base-400);
}

.mybtn.btn-disconect:hover{
    background-color: var(--color-btn);
    color: white;
}

.info-badge{
    background-color: var(--base-400);
    cursor: text;
}

.overview-wrapper{
    padding: .5rem;
    border-radius: 6px;
    margin-block: 1rem;
    border: 1px solid var(--base-400);
}