/* From Uiverse.io by Nawsome */
.continue-application {
    --color: #fff;
    --background: #404660;
    --background-hover: #3A4059;
    --background-left: #2B3044;
    --folder: #F3E9CB;
    --folder-inner: #BEB393;
    --paper: #FFFFFF;
    --paper-lines: #BBC1E1;
    --paper-behind: #E1E6F9;
    --pencil-cap: #fff;
    --pencil-top: #275EFE;
    --pencil-middle: #fff;
    --pencil-bottom: #5C86FF;
    --shadow: rgba(13, 15, 25, .2);
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    padding: 17px 29px 17px 69px;
    transition: background 0.3s;
    color: var(--color);
    background: var(--bg, var(--background));
}

    .continue-application > div {
        top: 0;
        left: 0;
        bottom: 0;
        width: 53px;
        position: absolute;
        overflow: hidden;
        border-radius: 5px 0 0 5px;
        background: var(--background-left);
    }

        .continue-application > div .folder {
            width: 23px;
            height: 27px;
            position: absolute;
            left: 15px;
            top: 13px;
        }

            .continue-application > div .folder .top {
                left: 0;
                top: 0;
                z-index: 2;
                position: absolute;
                transform: translateX(var(--fx, 0));
                transition: transform 0.4s ease var(--fd, 0.3s);
            }

                .continue-application > div .folder .top svg {
                    width: 24px;
                    height: 27px;
                    display: block;
                    fill: var(--folder);
                    transform-origin: 0 50%;
                    transition: transform 0.3s ease var(--fds, 0.45s);
                    transform: perspective(120px) rotateY(var(--fr, 0deg));
                }

            .continue-application > div .folder:before, .continue-application > div .folder:after,
            .continue-application > div .folder .paper {
                content: "";
                position: absolute;
                left: var(--l, 0);
                top: var(--t, 0);
                width: var(--w, 100%);
                height: var(--h, 100%);
                border-radius: 1px;
                background: var(--b, var(--folder-inner));
            }

            .continue-application > div .folder:before {
                box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
                transform: translateX(var(--fx, 0));
                transition: transform 0.4s ease var(--fd, 0.3s);
            }

            .continue-application > div .folder:after,
            .continue-application > div .folder .paper {
                --l: 1px;
                --t: 1px;
                --w: 21px;
                --h: 25px;
                --b: var(--paper-behind);
            }

            .continue-application > div .folder:after {
                transform: translate(var(--pbx, 0), var(--pby, 0));
                transition: transform 0.4s ease var(--pbd, 0s);
            }

            .continue-application > div .folder .paper {
                z-index: 1;
                --b: var(--paper);
            }

                .continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
                    content: "";
                    width: var(--wp, 14px);
                    height: 2px;
                    border-radius: 1px;
                    transform: scaleY(0.5);
                    left: 3px;
                    top: var(--tp, 3px);
                    position: absolute;
                    background: var(--paper-lines);
                    box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
                }

                .continue-application > div .folder .paper:after {
                    --tp: 6px;
                    --wp: 10px;
                }

        .continue-application > div .pencil {
            height: 2px;
            width: 3px;
            border-radius: 1px 1px 0 0;
            top: 8px;
            left: 105%;
            position: absolute;
            z-index: 3;
            transform-origin: 50% 19px;
            background: var(--pencil-cap);
            transform: translateX(var(--pex, 0)) rotate(35deg);
            transition: transform 0.4s ease var(--pbd, 0s);
        }

            .continue-application > div .pencil:before, .continue-application > div .pencil:after {
                content: "";
                position: absolute;
                display: block;
                background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
                width: var(--w, 5px);
                height: var(--h, 20px);
                border-radius: var(--br, 2px 2px 0 0);
                top: var(--t, 2px);
                left: var(--l, -1px);
            }

            .continue-application > div .pencil:before {
                -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
                clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
            }

            .continue-application > div .pencil:after {
                --b: none;
                --w: 3px;
                --h: 6px;
                --br: 0 2px 1px 0;
                --t: 3px;
                --l: 3px;
                border-top: 1px solid var(--pencil-top);
                border-right: 1px solid var(--pencil-top);
            }

    .continue-application:before, .continue-application:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: var(--color);
        transform-origin: 9px 1px;
        transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
        top: 26px;
        right: 16px;
        transition: transform 0.3s;
    }

    .continue-application:after {
        --r: 45deg;
    }

    .continue-application:hover {
        --cx: 2px;
        --bg: var(--background-hover);
        --fx: -40px;
        --fr: -60deg;
        --fd: .15s;
        --fds: 0s;
        --pbx: 3px;
        --pby: -3px;
        --pbd: .15s;
        --pex: -24px;
    }
.align-rightbutton {
    margin-left: auto; /* Empuja el botón hacia la derecha */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.expediente-info {
    display: flex;
    align-items: center; /* Alinea verticalmente el h2 y el botón */
    justify-content: space-between; /* Espacio entre el h2 y el botón */
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}


.cssbuttons-io-button {
    background: #611232;
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

    .cssbuttons-io-button .icon {
        background: white;
        margin-left: 1em;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.2em;
        width: 2.2em;
        border-radius: 0.7em;
        box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9;
        right: 0.3em;
        transition: all 0.3s;
    }

    .cssbuttons-io-button:hover .icon {
        width: calc(100% - 0.6em);
    }

    .cssbuttons-io-button .icon svg {
        width: 1.1em;
        transition: transform 0.3s;
        color: #7b52b9;
    }

    .cssbuttons-io-button:hover .icon svg {
        transform: translateX(0.1em);
    }

    .cssbuttons-io-button:active .icon {
        transform: scale(0.95);
    }
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.butonpadingcom {
    margin-top: 20px; /* Ajusta el valor según el espacio deseado */
}

/* From Uiverse.io */
.Btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #611232;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.svgIcon {
    fill: rgb(214, 178, 255);
}

.icon2 {
    width: 18px;
    height: 5px;
    border-bottom: 2px solid rgb(182, 143, 255);
    border-left: 2px solid rgb(182, 143, 255);
    border-right: 2px solid rgb(182, 143, 255);
}

.tooltip {
    position: absolute;
    right: -105px;
    opacity: 0;
    background-color: rgb(12, 12, 12);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: .2s;
    pointer-events: none;
    letter-spacing: 0.5px;
}

    .tooltip::before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        background-color: rgb(12, 12, 12);
        background-size: 1000%;
        background-position: center;
        transform: rotate(45deg);
        left: -5%;
        transition-duration: .3s;
    }

.Btn:hover .tooltip {
    opacity: 1;
    transition-duration: .3s;
}

.Btn:hover {
    background-color: rgb(150, 94, 255);
    transition-duration: .3s;
}

    .Btn:hover .icon2 {
        border-bottom: 2px solid rgb(235, 235, 235);
        border-left: 2px solid rgb(235, 235, 235);
        border-right: 2px solid rgb(235, 235, 235);
    }

    .Btn:hover .svgIcon {
        fill: rgb(255, 255, 255);
        animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

@keyframes slide-in-top {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}


/* From Uiverse.io by Pradeepsaranbishnoi */
.containerr {
    --s: 1em; /* control the size */
    --g: 10px; /* the gap */
    --c: #009688; /* the active color */

    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--g);
    position: relative;
}

    .containerr:before {
        content: "";
        position: absolute;
        height: calc(var(--s) / 2);
        left: calc(var(--s) / 4 + var(--_x, 0px));
        top: calc(var(--s) / 4);
        background: var(--c);
        border-radius: 50%;
        aspect-ratio: 1;
        transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;
    }

    .containerr label {
        display: inline-flex;
        line-height: var(--s);
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .containerr input {
        height: var(--s);
        aspect-ratio: 1;
        border: calc(var(--s) / 8) solid var(--_c, #939393);
        border-radius: 50%;
        outline-offset: calc(var(--s) / 10);
        padding: calc(var(--s) / 8);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        font-size: inherit;
        margin: 0;
        transition: 0.3s;
    }

        .containerr input:checked {
            --_c: var(--c);
        }

    .containerr:not(:has(input:checked)):before {
        --_i: -1;
        opacity: 0;
    }

    .containerr:has(input:checked):before {
        opacity: 1;
        transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));
    }

    .containerr:has(label:nth-child(1) input:checked):before {
        --_i: 0;
        --_x: 0.02px;
    }

    .containerr:has(label:nth-child(2) input:checked):before {
        --_i: 1;
        --_x: 0.04px;
    }

    .containerr:has(label:nth-child(3) input:checked):before {
        --_i: 2;
        --_x: 0.06px;
    }

    .containerr:has(label:nth-child(4) input:checked):before {
        --_i: 3;
        --_x: 0.08px;
    }

    .containerr:has(label:nth-child(5) input:checked):before {
        --_i: 4;
        --_x: 0.1px;
    }
    /* and so on ..*/

    .containerr input:disabled {
        background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
        opacity: 0.5;
        cursor: not-allowed;
    }

@media print {
    input[type="radio"] {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
        background: none;
    }
}

@supports not selector(:has(*)) {
    .containerr:before {
        display: none;
    }

    .containerr input:checked {
        --_c: var(--c);
        background: var(--c) content-box;
    }
}