.carnetHorizontal {
  
    width: 720px;
    height: 380px;
    padding: 20px;
    border: 3px solid #CCCCCC;
    text-align: center;
    margin: 0 auto;
    color: #000000;
}


    .carnetHorizontal .contentHorizontal {
        border: 3px solid #CCCCCC;
        background-color: #94b5ce;
        border-radius: 20px;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        margin: auto;
        padding: 6px;
    }
        .carnetHorizontal .contentHorizontal .barralogoHorizontal {
            width: 100%;
            height: 20%;
            margin-bottom: 10px;
            margin: 0;
            /* border: 3px solid #CCCCCC;*/
            text-align: start;
            color: black;
            /* background-color: rgba(255, 255, 255, 0.5); */

            font-weight: bold;
            border-radius: 15px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
        }
            .carnetHorizontal .contentHorizontal .barralogoHorizontal #logout {
                width: 50px;
                height: 50px;
                /* Por ejemplo */
                height: auto; /* Para mantener la proporción */
                margin-right: 20px;
                margin-top: 0px;
            }
   .carnetHorizontal .contentHorizontal #perfilimgHorizontal {
            width: 150px;
            height: 150px;
            border-radius: 10%;
            margin-bottom: 30px;
            justify-content: justify;
            border: 5px solid #CCCCCC;
            position: relative;
            right: 240px;
            top: 5px;
        }
        .carnetHorizontal .contentHorizontal h1 {
            font-size: 17px;
            margin-top: 10px;
            color: #000000;
       
            /*border: 3px solid #CCCCCC; */
            width: 100%;
            margin: 0;
            text-align:justify;
        }
        .carnetHorizontal .contentHorizontal h2 {
            font-size: 15px;
            margin-top: 5px;
            margin-bottom: 5px;
            color: #000000;
      
            /*   border: 3px solid #CCCCCC;*/
            width: 100%;
            margin: 0;
            text-align:justify;
        }
        .carnetHorizontal .contentHorizontal .datosHorizontal {
            text-align: justify;
            font-size: 17px;
            width: 60%;
          
            /*border: 3px solid #CCCCCC;*/
            position: relative;
            top: -250px;
            left: 170px;
            border-radius:10px;
            padding:5px;

        }
            .carnetHorizontal .contentHorizontal .datosHorizontal p {
                margin: 1px 0;
                margin: 0;
                color: black;
            }

            .carnetHorizontal .contentHorizontal .datosHorizontal .tiposangreHorizontal {
                background-color: red;
                font-size: 18px;
                width: 15%;
                border-radius: 2px;
            }

        .carnetHorizontal .contentHorizontal #qrcodeimgHorizontal {
            width: 20%;
            height: 20%;
            position: relative;
            left: 250px;
            top: -300px;
            border-radius: 10px;
            border: 3px solid #d2f8eb66;
        }

        .carnetHorizontal .contentHorizontal #qrcodeimgHorizontaldc {
            width: 20%;
            height: 20%;
            position: relative;
            left: 250px;
            top: -300px;
            border-radius: 10px;
            border: 3px solid #d2f8eb66;
        }

        .carnetHorizontal .contentHorizontal #linkHorizontal {
            border: 2px solid #CCCCCC;
            background-color: rgb(100 226 170 / 57%);
            border-radius: 10px;
            width: 60%;
            position: relative;
            top: -340px;
        }
        .carnetHorizontal .contentHorizontal #linkHorizontaldc {
            border: 2px solid #CCCCCC;
            background-color: rgb(100 226 170 / 57%);
            border-radius: 10px;
            width: 60%;
            position: relative;
            top: -340px;
        }

    .carnetHorizontal .contentHorizontal .fondo_docente {
        background-image: url(/modelo\\DOCENTE.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
    }
@media (orientation: portrait) {
    .carnetHorizontal {
   
        width: 720px;
        height: 380px;
        padding: 20px;
        border: 3px solid #CCCCCC;
        text-align: center;
        margin: 0 auto;
        color: #000000;
        display: none;
    }
}
@media (orientation: landscape) {
    .carnetHorizontal {
       
        width: 580px;
        height: 340px;
        padding: 20px;
        border: 3px solid #CCCCCC;
        text-align: center;
        margin: 0 auto;
        color: #000000;
        display: block;
    }
        .carnetHorizontal .contentHorizontal .datosHorizontal {
            text-align: justify;
            font-size: 15px;
            width: 65%;
            /* border: 3px solid #CCCCCC; */
            position: relative;
            top: -215px;
            left: 150px;
            border-radius: 10px;
            padding: 5px;
        }
        .carnetHorizontal .contentHorizontal #perfilimgHorizontal {
            width: 120px;
            height: 120px;
            border-radius: 10%;
            margin-bottom: 30px;
            justify-content: justify;
            border: 5px solid #CCCCCC;
            position: relative;
            right: 180px;
            top: 5px;
        }
        .carnetHorizontal .contentHorizontal #qrcodeimgHorizontal {
            width: 20%;
            height: 20%;
            position: relative;
            left: 210px;
            top: -220px;
            border-radius: 10px;
            border: 3px solid #d2f8eb66;
        }
        .carnetHorizontal .contentHorizontal #qrcodeimgHorizontaldc {
            width: 20%;
            height: 20%;
            position: relative;
            left: 415px;
            top: -200px;
            border-radius: 10px;
            border: 3px solid #d2f8eb66;
        }
        .carnetHorizontal .contentHorizontal #linkHorizontal {
            border: 2px solid #CCCCCC;
            background-color: rgb(100 226 170 / 57%);
            border-radius: 10px;
            width: 60%;
            position: relative;
            top: -260px;
        }
        .carnetHorizontal .contentHorizontal #linkHorizontaldc {
            border: 2px solid #CCCCCC;
            background-color: rgb(100 226 170 / 57%);
            border-radius: 10px;
            width: 60%;
            position: relative;
            top: -245px;
            text-align: center;
            padding:5px;
        }
        .carnetHorizontal .contentHorizontal h1 {
            font-size: 15px;
            margin-top: 10px;
            color: #000000;
       
            /* border: 3px solid #CCCCCC; */
            width: 100%;
            margin: 0;
            text-align: justify;
        }
        .carnetHorizontal .contentHorizontal h2 {
            font-size: 13px;
            margin-top: 5px;
            margin-bottom: 5px;
            color: #000000;
   
            /* border: 3px solid #CCCCCC; */
            width: 100%;
            margin: 0;
            text-align: justify;
        }
}