@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
:root{
    --color-principal:#27ce90;
    --color-secundario:#d1f3d4;
    --color-blanco:#fff;
    --color-gris:#666;
    --color-gris-claro:#f6f6f6}
    
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        list-style:none;
        font-family:Montserrat,sans-serif
    }
        
        .container{
            display:flex;
            flex-direction:column;
            justify-content:start;
            align-items:center;
            width:100%;
            margin-bottom:10px;
            position:relative;
            min-height:100vh;
            padding-bottom:8rem;
            padding-top:1.5rem
        }
        
        .cabecera,.principal{
            display:flex;
            flex-direction:column;
            justify-content:flex-start;
            width:80%
        }
        .cabecera{
            align-items:flex-start;
            margin-top:0.5%;
            padding-left:0.5%
        }
        
        .cabecera-container{
            display:flex;
            flex-direction:column;
            justify-content:start;
            align-items:left;
            width:100%;
            background-color:var(--color-blanco);
            margin-bottom:5px;
            padding-bottom:0.5%;
            box-shadow:5px 1px 5px #dcdcdc
        }
        
        .cabecera .logo{
            width:300px
        }
            .cabecera .logo img{
                width:100%}
                .cabecera .titulo{
                    width:100%;
                    margin-top:.5%; 
                    font-size:16px
                }
                .cuerpo{
                    display:flex;
                    flex-direction:column;
                    justify-content:flex-start
                }
                .cuerpo .aviso{
                    padding:20px;
                    color:#302e2b
                }
                .cuerpo .aviso p{
                    margin-bottom:10px
                }
                .cuerpo .aviso hr{
                    color:var(--color-gris)
                }
                .cuerpo .aviso li{
                    padding-left:50px
                }
                .cuerpo .opciones{
                    display:flex;
                    flex-direction:column;
                    justify-content:flex-start;
                    width:100%
                }
                .cuerpo .opciones .opc{
                    margin-bottom:20px
                }
                .cuerpo .botones{
                    display:flex;
                    flex-direction:row;
                    justify-content:center
                }
                .cuerpo .resultado{
                    display:flex;
                    flex-direction:column;
                    justify-content:space-between;
                    margin-top:20px;
                    width:100%
                }
                .cuerpo .resultado label{
                    width:100%;
                    display:flex;
                    flex-direction:row;
                    justify-content:flex-end;
                    align-items:left
                }
                .cuerpo .resultado label>span{
                    display:flex;
                    float:row;
                    justify-content:flex-start;
                    align-self:center;
                    align-items:center;
                    padding-left:10px;
                    font-size:20px
                }
                .cuerpo .resultado label>span:first-child{
                    flex:1
                }
                .cuerpo .resultado .result{
                    width:100%;
                    height:200px;
                    border-radius:5px;
                    border:3px solid var(--color-principal);
                    padding:5px;
                    font-size:15px;
                    color:var(--color-gris)
                }
                .footer{
                    position:fixed;
                    left:0;
                    bottom:0;
                    display:flex;
                    flex-direction:row;
                    justify-content:space-between;
                    align-items:center; 
                    background: rgba(102,102, 102, 0.45); 
                    box-shadow:5px 1px 5px #dcdcdc
                }
                .footer,.footer .left{
                    width:100%
                }
                .footer .left a{
                    color:var(--color-blanco);
                    padding-left:3%;
                    text-decoration:none
                }
                .footer .right{
                    padding:10px
                }
                .footer .right img{
                    width:120px
                }
                #comoseusa:hover,#info_acronimo:hover,#info_normativa:hover,#paraque:hover,#actinnovySawap:hover{
                    font-weight:700;
                    cursor:pointer
                }
                .swal-wide{
                    width:850px!important;
                    padding:50px!important
                }
                .tabla_info{
                    border-collapse:collapse;
                    width:100%
                }
                .tabla_info td,.tabla_info th{
                    border:1px solid var(--color-gris-claro);
                    padding:8px
                }
                .tabla_info tr:hover,.tabla_info tr:nth-child(2n){
                    background-color:var(--color-gris-claro)
                }
                .tabla_info th{
                    padding-top:12px;
                    padding-bottom:12px;
                    text-align:left;
                    background-color:var(--color-secundario);
                    color:#fff
                }