:root{--bg: #f5f6fa;--white: #ffffff;--blue: #1240e4;--red: #ff5858;--green: #30c75a;--blue-dark: #0e172c;--grey-ligth: #d6d6d6;--grey-dark: #888888;--h1: 700 1.625rem/2rem Inter;--subtitle: 700 1.25rem/1.5rem Inter;--body1-regular: 400 1rem/1.5rem Inter;--body1-bold: 700 1rem/1.5rem Inter}body{margin:0;padding:0}h1,h2,p{padding:0;margin:0}.main{background-color:var(--bg);position:relative;height:100vh;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0}.container{inline-size:655px;padding:1rem}@media screen and (min-width: 768px){.container{padding:0}}.card-content{text-align:center;display:flex;flex-direction:column;gap:1rem}.card-content .title{font:var(--subtitle)}@media screen and (min-width: 500px){.card-content{gap:1.5rem}}.card{background-color:var(--white);border-radius:1rem;padding:1rem;box-shadow:0 7px 11px #172a5824,0 1.4px 1.7875px #172a5812}@media screen and (min-width: 500px){.card{padding:1rem;padding-inline:2.5rem;padding-block:1.5rem}}.form{display:flex;align-items:center;flex-flow:row;block-size:3.5rem;padding-inline:1rem;gap:1rem;background-color:var(--bg)}.form input{flex:1;border:none;font:var(--body1-regular);background-color:transparent;color:var( --blue-dark);outline:none}.form .copy{border:none;background-color:transparent;color:var(--blue)}.longitud-txt{display:flex;justify-content:space-between;align-items:center}.longitud-txt h2{font:var(--body1-bold);color:var(--blue-dark)}.longitud-txt span{color:var(--blue);font:var(--subtitle)}.playerPlayback-slider{flex:1;flex-basis:0%}.slider{block-size:.5rem;background-color:var(--bg)}.slider-progress{block-size:inherit;border-radius:inherit;background-color:var(--blue);inline-size:20%;position:relative}.slider-button{background-color:var(--blue);border-radius:50%;block-size:250%;aspect-ratio:1/1;padding:0;border:0;position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);display:block}.slider:hover .slider-progress{background-color:var(--blue)}input[type=range]{-webkit-appearance:none;height:8px;background:var(--bg);background-image:linear-gradient(var(--blue),var(--blue));background-size:0% 100%;background-repeat:no-repeat}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--blue);cursor:ew-resize;box-shadow:0 0 2px 0 var(--blue);transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--blue);cursor:ew-resize;box-shadow:0 0 2px 0 var(--blue);transition:background .3s ease-in-out}input[type=range]::-ms-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--blue);cursor:ew-resize;box-shadow:0 0 2px 0 var(--blue);transition:background .3s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{background:var(--blue)}input[type=range]::-moz-range-thumb:hover{background:var(--blue)}input[type=range]::-ms-thumb:hover{background:var(--blue)}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.form-options{display:flex;flex-direction:column;gap:.75rem}.option-item{display:flex;justify-content:flex-start;align-items:center;gap:1rem;cursor:pointer}.option-item p{font:var(--body1-regular)}.security{display:flex;justify-content:space-between;padding:1rem;background-color:var(--bg)}.security p{font:var(--body1-regular)}.levels{block-size:1.5rem;inline-size:1.5rem;display:flex;gap:2px;justify-content:center;align-items:flex-end}.levels .block{inline-size:4px;block-size:1.5rem;background-color:var(--grey-dark)}.levels .block.level-1{background-color:var(--grey-dark);block-size:.375rem}.levels .block.level-2{block-size:.75rem}.levels .block.level-3{block-size:1.125rem}.levels .block.level-4{block-size:1.5rem}.add-segurity{background-color:var(--green)!important}.btn-submit{border:none;block-size:3rem;background-color:var(--blue);color:#fff;font:var(--body1-bold);cursor:pointer;opacity:.9}.btn-submit:hover{opacity:1}.notification-alert{transition:all 1s ease-out;display:none;position:absolute;inset-block-start:1.5rem;inset-inline-end:-100%;border:1px solid var(--green);border-radius:.25rem;box-sizing:border-box;inline-size:21rem;block-size:5rem;background-color:var(--white);box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px #0003}.notification-content{box-sizing:border-box;box-shadow:inset 8px 0 #30c75a66;padding:1rem;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.notification-content p{font:var(--body1-bold)}