#cookiesTerms {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    display: none;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;

    background-color: #0000001f;
    backdrop-filter: blur(2px);

    transition: var(--delay-default);
    
    #cookiesTermsContent {
        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;


        width: 500px;
        max-width: 80vw;
        
        font-size: 0.875rem;
        color: #1e1e1e;
        background-color: #fff;
        
        padding: 20px;
        border-radius: 20px;
        border: 4px solid #1e1e1e;
        
        &.aparecer-termos{
            animation: aparecer-termos 500ms ease 0s 1 normal forwards;
        }
        &.attention-shake{
            animation: attention-shake 750ms ease 0s 1 normal forwards;
        }
        &.recusar-termos{
            animation: recusar-termos 750ms ease 0s 1 normal forwards;
        }
        &.aceitar-termos{
            animation: aceitar-termos 500ms ease 0s 1 normal forwards;
        }
        
        .texto-termos-cookie{
            max-height: 70vh;
            overflow: scroll;
        }
        p {
            color: #1e1e1e;
            font-size: 1.25em;
            margin-bottom: 12px;
            margin-bottom: 12px;
    
            
            a {
                font-size: 0.875em;
                color: #007bff;
                text-decoration: none;
                background-color: transparent;
    
                &:hover {
                    color: #0056b3;
                    text-decoration: underline;
                }
            }
        }
        #cookiesTermsActions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;

            width: 100%;
        
            #cookiesBtnAccept,
            #cookiesBtnReject {
                all: unset;

                display: inline-block;

                font-size: 1.25em;
                font-weight: 400;
                line-height: 1.5;
                text-align: center;
                text-decoration: none;
                vertical-align: middle;

                width: 180px;

                padding: .6rem 1.1rem;
                border-radius: .4rem;
                border: 1px solid;

                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;

                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }
        
            #cookiesBtnAccept {
                color: #fff;
                background-color: #0d6efd;
                border-color: #0d6efd;
            
                &:hover {
                    color: #fff;
                    background-color: #0b5ed7;
                    border-color: #0a58ca;
                }
            }
            
            #cookiesBtnReject {
                color: #6c757d;
                background-color: #fff;
                border-color: #6c757d;
            
                &:hover {
                    color: #fff;
                    background-color: #5c636a;
                    border-color: #565e64;
                }
            }
        }
    }
}

@keyframes aparecer-termos {
	0% {
        opacity: 0;
	}
	100% {
        opacity: 1;
	}
}
@keyframes aceitar-termos {
	0% {
		transform: scale(1);
        opacity: 1;
	}
	100% {
        transform: scale(0.8);
        opacity: 0;
	}
}
@keyframes recusar-termos {
	0% {
		transform: rotate(0deg) scale(1) translateX(0%);
        opacity: 1;
        top: 0px;
	}
	40% {
        top: -20px;
	}
	100% {
        top: 50px;
		transform: rotate(-10deg) scale(0.8) translateX(-5%);
        opacity: 0;
	}
}
@keyframes attention-shake {
	0%, 100% {
		transform: rotate(0deg);
		transform-origin: 50% 100%;
	}
	20% {
		transform: rotate(1deg);
	}
	40% {
		transform: rotate(-2deg);
	}
    60%{
        transform: rotate(2deg);
    }
	80%{
		transform: rotate(-1deg);
	}
}


@media (max-width: 768px) {
    #cookiesTerms {

        #cookiesTermsContent{
            font-size: 0.625rem;
            padding-left: 10px;
            padding-right: 4px;
        }
    }
}