/* Wrapping element */
/* Set some basic padding to keep content faom hitting the edges */
html {
    font-size: 17px;
}


.body-content {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3rem;
    box-sizing: border-box;
    height: 92vh;
    width: 100%;
    /*margin-right: auto;*/
    min-width: 100%;
}



.foto {
    padding: 1vh 0px 0px 1%;
}

.nombre {
    font-size: 1.2rem;
    color: white;
    font-weight: bold;
    vertical-align: middle;
}

.progreso {
    color: yellow;
    font-weight: bold;
    font-size: .8rem;
    text-align: right;
    vertical-align: bottom;
}



.boton_1 {
    background-image: url(/content/send_ts_4.png);
    height: 3.5vh;
    background-color: transparent;
}

.contenedor {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.principal {
    position: relative;
    width: 60%;
    height: 100vh;
    vertical-align: top;
    min-width: 200px;
    flex: 6;
}

.periferia {
    width: 40%;
    height: 100%;
    background-color: white;
    vertical-align: top;
    min-width: 200px;
    flex: 4;
}

.terciario {
    top: 0%;
    right: 60%;
    width: 100%;
    min-height: 35vh;
    background-color: white;
}

.terciario_titulo {
    text-align: center;
    border-width: 1px;
    border-radius: 8px;
    font-size: large;
    background-color: #bdb7b7;
    border-style: solid;
    border-color: black;
}

.terciario_imagen {
    border-color: black;
    width: 96%;
    border-style: solid;
    border-width: 1px;
    margin: 4% auto auto 1%;
    z-index: 2;
}

.secundario {
    top: 35%;
    right: 60%;
    width: 100%;
    height: 65%;
    min-height: 65%;
	min-height: 65%;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: black white;
	
	
}

.secundario_titulo {
    text-align: center;
    border-width: 1px;
    border-radius: 8px;
    font-size: large;
    background-color: #bdb7b7;
    border-style: solid;
    border-color: black;
    margin-bottom: 20px;
}

.secundario_texto {
    margin: 10% auto auto 0%;
    text-align: justify;
}

.cabezal {
    top: 0%;
    right: 0%;
    width: 100%;
    height: 14vh;
    background-color: #1253bc;
}

.fondo {
    top: 18%;
    right: 0%;
    width: 100%;
    min-height: 75vh;
    background-color: #403e3e;
}

.chat {
    position: absolute;
    top: 14%;
    max-height: 76vh;
    width: 100%;
    background-color: #403e3e;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
    scrollbar-width: thin;
    scrollbar-color: black white;
}

.chat_label {
    text-align: justify;
    padding: 3px 10px 3px 10px;
    margin-top: 3px;
    vertical-align: middle;
    border-radius: 10px;
}

.fondo_pie {
    top: 76%;
    right: 60%;
    width: 100%;
    height: 10%;
    margin-top: 0px;
    padding-top: .8vh;
    background-color: #403e3e;
    z-index: 2;
}

.barra {
    right: 63vh;
    width: 98%;
    height: 6.2vh;
    margin: 1%;
    margin-left: 1%;
    padding-top: 1.4vh;
    background-color: #b8dfe6;
    border-radius: 10px;
    z-index: 1;
}

.etiqueta {
    /*position: absolute;*/
    /*Left: 1.5rem;*/
    /*margin-top: 1vh;*/
    font-size: 1rem;
}

.combo {
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 1.4rem;*/
    /*margin-top: 1.1vh;*/
    font-size: .9rem;
}

.cuadro_texto {
    /*position: absolute;*/
    height: 1.1rem;
    font-size: .9rem;
    margin-top: 0vh;
}

.cuadro_texto_area {
    height: 1.1rem;
    font-size: .9rem;
    margin-top: .2rem;
    width: 5%;
    text-align: center;
}

.cuadro_texto_num_tel {
    height: 1.1rem;
    font-size: .9rem;
    margin-top: .2rem;
    width: 12%;
    text-align: center;
}

.dias {
    font-size: .6rem;
}

.cuadro_texto_nom {
    width: 20%;
    height: 1.1rem;
    /*margin-left: 1rem;*/
}

.raiz_dv {
    margin-top: .2rem;
    height: 1.1rem;
    font-size: .9rem;
    width: 4%;
    text-align: center;
}

.numero_cuit {
    margin-top: .2rem;
    height: 1.1rem;
    font-size: .9rem;
    width: 15%;
    text-align: center;
}

.cuadro_calle {
    Width: 5%;
    height: 1.1rem;
    font-size: .9rem;
}
.cuadro_num_calle {
    Width: 5%;
    height: 1.1rem;
    font-size: .9rem;
}

.boton_2 {
    background-image: url(/content/close_3.png);
}

.col_1 {
    width: 92%;
}

.col_2 {
    width: 4%;
}

.col_3 {
    width: 4%;
}

@media screen and (max-width: 3500px) {

    html {
        font-size: 30px;
    }

    .body-content {
        min-width: 2500px;
        max-width: 2500px;
        margin: 10vw;
    }
}

@media screen and (max-width: 2500px) {

    html {
        font-size: 25px;
    }

    .body-content {
        min-width: 100vw;
        max-width: 100vh;
        margin: 0;
    }

    @media screen and (max-width: 1600px) {

        html {
            font-size: 17px;
        }
    }

    @media screen and (max-width: 1300px) {

        html {
            font-size: 14px;
        }
    }

    @media screen and (max-width: 1000px) {

        html {
            font-size: 13px;
        }
    }


    @media screen and (max-width: 450px) and (orientation: portrait) {

        html {
            font-size: 17px;
        }

        .body-content {
            background-color: green;
            line-height: 1.1rem;
        }






        .periferia {
            position: absolute;
            /*width: 200px;*/
            width: 96%;
            height: 40vh;
            margin: 2%;
            max-height: 40vh;
            border-radius: 10px;
            /*min-width: 200px;
    flex: 4;*/
        }


        .terciario {
            display: none;
        }

        .secundario_titulo {
            text-align: center;
            border-width: 2px;
            border-radius: 8px;
            font-size: 1.5rem;
            padding: 1%;
            margin: 0% auto 1% 2%;
        }


        .secundario {
            position: absolute;
            top: 1%;
            right: 0%;
            margin: 1%;
            /*width: 200px;*/
            /*background-color: #d5f7f2;*/
            height: 98%;
            min-height: 65%;
        }


        .secundario_texto {
            position: absolute;
            margin: 1%;
            font-size: 0.9rem;
            /*text-align: justify;*/
            /*z-index: 2;*/
        }

        .principal {
            position: absolute;
            height: 12vh;
            width: 100vw;
            top: 42vh;
            vertical-align: top;
            min-width: 200px;
            /*background-color: yellow;*/
        }


        .cabezal {
            position: absolute;
            top: 0%;
            right: 0%;
            width: 100%;
            height: 100%;
        }

        .chat {
            position: absolute;
            margin-top: -6.8vh;
            max-height: 37vh;
            /*right: 1000px;*/
        }

        .chat_label {
            text-align: justify;
            padding: 5px 10px 5px 10px;
            margin-top: 3px;
            margin-right: 5px;
            /*vertical-align: middle;*/
            border-radius: 10px;
            font-size: .9rem;
        }

        .nombre {
            position: absolute;
            font-size: 1.1rem;
            top: 3vh;
        }

        .foto {
            padding: 2px 0px 0px 5px;
            width: 20%;
        }

        .progreso {
            font-size: .7rem;
            text-align: right;
            vertical-align: bottom;
        }

        .fondo {
            position: absolute;
            margin-top: 6.8vh;
            right: 0%;
            width: 100%;
            height: 35vh;
            min-height: 10vh;
            background-color: #403e3e;
        }

        .fondo_pie {
            position: absolute;
            margin-top: 34.5vh;
            right: 0%;
            height: 7vh;
            padding-top: .8vh;
            background-color: #403e3e;
            z-index: 2;
        }

        .barra {
            position: absolute;
            left: 0%;
            width: 98%;
            height: 5.8vh;
            margin-top: 1px;
            padding-top: .9vh;
            background-color: #b8dfe6;
            border-radius: 10px;
            z-index: 1;
        }

        .etiqueta {
            font-size: .85rem;
            margin-left: 0%;
        }

        .cuadro_texto {
            /*position: absolute;*/
            height: 2.5vh;
            font-size: .8rem;
            margin-top: 0vh;
        }

        .combo {
            /*position: absolute;*/
            height: 2.5vh;
            font-size: .8rem;
            margin-left: auto;
            /*margin-top: .2vh;*/
        }

        .etiqueta_nom {
            position: absolute;
            top: 1.2vh;
            left: 2%;
            font-size: .8rem;
        }

        .cuadro_texto_nom {
            width: 25%;
            height: 3vh;
            font-size: .8rem;
        }

        .etiqueta_ape {
            position: absolute;
            top: 1.8vh;
            margin-left: 18%;
            font-size: .8rem;
        }

        .cuadro_texto_ape {
            position: absolute;
            margin-left: 34%;
            width: 23%;
            height: 3vh;
            font-size: .8rem;
        }

        .cuadro_num_calle {
            height: 3vh;
            font-size: .8rem;
            Width: 15%;
        }

        .cuadro_texto_area {
            height: 3vh;
            font-size: .8rem;
            width: 10%;
        }

        .cuadro_texto_num_tel {
            height: 3vh;
            font-size: .8rem;
            width: 20%;
        }

        .raiz_dv {
            height: 3vh;
            font-size: .8rem;
            width: 8%;
        }

        .numero_cuit {
            height: 3vh;
            font-size: .8rem;
            width: 30%;
        }



        .boton_1 {
            background-image: url(/content/send_ts_4.png);
            height: 3.5vh;
            width: 50%;
        }

        .boton_2 {
            background-image: url(/content/close_2.png);
            /*position: absolute;
	height:100%;
	width: 100%;
	/*margin-top: 0%:*/
            /*max-width: 10%;
	max-height: 50%;*/
            /*z-index: 2;*/
        }

        .col_1 {
            width: 85%;
        }

        .col_2 {
            width: 8%;
        }

        .col_3 {
            width: 7%;
        }
    }


    @media screen and (max-width: 400px) and (orientation: portrait) {
        html {
            font-size: 16px;
        }
    }

    @media screen and (max-width: 385px) and (orientation: portrait) {
        html {
            font-size: 15px;
        }
    }

    @media screen and (max-width: 380px) and (orientation: portrait) {
        html {
            font-size: 14px;
        }
    }

    @media screen and (max-device-width: 393px) {

        .body-content {
            min-width: 393px;
            max-width: 393px;
            /*background-color: yellow;*/
        }

        .periferia {
            max-width: 377px;
            width: 96%;
            margin: 1%;
            max-height: 40vh;
        }

        .principal {
            position: relative;
            max-width: 377px;
            width: 60%;
        }
    }

    @media screen and (max-device-width: 390px) {

        .body-content {
            min-width: 390px;
            max-width: 390px;
        }

        .periferia {
            max-width: 374px;
            width: 96%;
            margin: 1%;
            max-height: 40vh;
        }

        .principal {
            position: relative;
            max-width: 374px;
            width: 60%;
        }
    }

    @media screen and (max-device-width: 375px) {

        .body-content {
            min-width: 375px;
            max-width: 375px;
        }

        .periferia {
            max-width: 360px;
            width: 96%;
            margin: 1%;
            max-height: 40vh;
        }

        .principal {
            position: relative;
            max-width: 360px;
            width: 60%;
        }
    }


    @media screen and (max-width: 1000px) and (orientation: landscape) {

        html {
            font-size: 17px;
        }

        .body-content {
            position: absolute;
            margin: 0px;
            padding: 0px;
            line-height: 1.1rem;
            box-sizing: border-box;
            height: 85vh;
            width: 100%;
            /*margin-right: auto;*/
            min-width: 100%;
            background-color: green;
        }

        .periferia {
            position: absolute;
            width: 49%;
            height: 82vh;
            margin: .8%;
            max-height: 85vh;
            border-radius: 10px;
            /*min-width: 200px;
    flex: 4;*/
        }


        .terciario {
            display: none;
        }

        .secundario {
            position: absolute;
            top: 15vh;
            right: 2%;
            left: .11%;
            width: 98%;
            height: 75vh;
            min-height: 65%;
        }

        .secundario_titulo {
            position: absolute;
            top: -13vh;
            left: 2%;
            border-width: 1px;
            border-radius: 8px;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .secundario_texto {
            position: absolute;
            margin: -5.8vh 0 0 -2%;
            font-size: 0.9rem;
            width: 99%;
            /*top: .5vh;*/
            left: 3%;
            /*text-align: justify;*/
            /*z-index: 2;*/
        }

        .cabezal {
            position: absolute;
            top: 0vh;
            right: 0%;
            width: 100%;
            height: 16vh;
        }

        .nombre {
            position: absolute;
            font-size: 1rem;
            top: 6vh;
        }

        .foto {
            padding: -2px 0px 0px 5px;
            width: 15%;
        }

        .progreso {
            position: absolute;
            top: 10vh;
            font-size: .5rem;
            text-align: right;
            vertical-align: bottom;
        }

        .chat {
            position: absolute;
            margin-top: -9vh;
            max-height: 57vh;
            /*right: 1000px;*/
        }

        .fondo {
            position: absolute;
            margin-top: 0vh;
            right: 0%;
            width: 100%;
            height: 60vh;
            min-height: 10vh;
            background-color: #403e3e;
        }



        .fondo_pie {
            position: absolute;
            margin-top: 10.5vh;
            right: 0%;
            height: 10vh;
            padding-top: .8vh;
            background-color: #403e3e;
            z-index: 2;
        }

        .principal {
            position: absolute;
            height: 85vh;
            width: 50%;
            top: 0vh;
            left: 50%;
            vertical-align: top;
            font-size: 0.9rem;
            min-width: 200px;
            background-color: yellow;
        }

        .barra {
            position: absolute;
            right: 0%;
            left: 0%;
            top: -3vh;
            width: 98%;
            height: 11.2vh;
            margin: 0 0 0 1%;
            /*margin-left: 1%;*/
            padding-top: .8%;
            background-color: #b8dfe6;
            border-radius: 4px;
            z-index: 1;
        }

        .etiqueta {
            margin-left: .2rem;
            font-size: .8rem;
        }

        .combo {
            /*position: absolute;*/
            height: 6vh;
            font-size: .8rem;
            margin-left: auto;
            /*margin-top: .2vh;*/
        }

        .etiqueta_nom {
            position: absolute;
            top: 1.8vh;
            left: 2%;
            font-size: .8rem;
        }

        .cuadro_texto_nom {
            width: 25%;
            height: 3vh;
            font-size: .8rem;
        }

        .etiqueta_ape {
            position: absolute;
            top: 1.8vh;
            margin-left: 18%;
            font-size: .8rem;
        }

        .cuadro_texto_ape {
            position: absolute;
            margin-left: 34%;
            width: 23%;
            height: 3vh;
            font-size: .8rem;
        }

        .cuadro_num_calle {
            height: 3vh;
            font-size: .8rem;
            Width: 15%;
        }

        .cuadro_texto_area {
            height: 3vh;
            font-size: .8rem;
            width: 10%;
        }

        .cuadro_texto_num_tel {
            height: 3vh;
            font-size: .8rem;
            width: 20%;
        }

        .raiz_dv {
            height: 3vh;
            font-size: .8rem;
            width: 8%;
        }

        .numero_cuit {
            height: 3vh;
            font-size: .8rem;
            width: 30%;
        }



        .boton_1 {
            background-image: url(/content/send_ts_4.png);
            height: 8vh;
            width: 120%;
        }

        .boton_2 {
            background-image: url(/content/close_2.png);
            /*position: absolute;
	height:100%;
	width: 100%;
	/*margin-top: 0%:*/
            /*max-width: 10%;
	max-height: 50%;*/
            /*z-index: 2;*/
        }

        .col_1 {
            width: 83%;
        }

        .col_2 {
            width: 10%;
        }

        .col_3 {
            width: 7%;
        }
    }

    @media screen and (max-width: 900px) and (orientation: landscape) {

        html {
            font-size: 17px;
        }
    }