/* estilos */
html, body 
{
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 100%;
    color: #d9d9d9;
    background-color: #0d0d0d; /*#1a1a1a;*/ /*#262626;*/
}

@font-face
{
    font-family: MTCVHG;
    src: url("MTCORSVA.TTF");
}

#bigwrapper 
{
    clear: both;
    width: 100%;
    display: block;
}

p
{
    text-align: justify;
}

/* Header */

#headerwrapper 
{
    display: block;
    width: 100%;
    background-color: #ff8000; /* #ffd700 #ffbf00 #ff8000 */
    color: white;
}

.sitenamelogo 
{
    display: inline-block;
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    /*font-weight: bold; */
    font-size: 275%;
    color: white;
    padding: 7px;
    text-shadow: 2px 2px 4px #000000;
}

.linklogo 
{
    color: #ffc800;
    text-decoration: none;
}

.linklogo a:link 
{
    color: #ffc800;
}

.linklogo a:visited 
{
    color: #ffc800;
}

#headertools 
{
    display: block;
    padding: 0px 10px 10px 10px;
}

h2 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-size: 175%;
    color: #ffc800;
}

h4 
{
    text-align: center;
}

/* Contenido - Estructura */

#container 
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#leftcolumn 
{
    width: 15.92%;
    float: left;
    text-align: center;
}

#contenido 
{
    width: 67.8%;
    background-color: white;
    display: inline-block;
}

#innercontenido 
{
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: #262626; /*#333333;*/ /*#404040;*/
}

#rightcolumn 
{
    width: 15.92%;
    float: right;
    text-align: center;
}

/* Contenido */

.pagebody 
{
    margin: auto;
    padding: 10px;
    width: 95%;
    text-align: left;
    margin-bottom: 15px;
    display: inline-block;
    font-size: 105%;
    line-height: 27px;
}

.pagebodyparrafo 
{
    width: 85%;
    margin: auto;
    line-height: 27px;
}

.pagebodyhead 
{
    width: 100%;
    display: inline-block;
}

.pagebodyheaduser 
{
    width: 49%;
    float: left;
}

.pagebodyheadclass 
{
    width: 49%;
    float: left;
}

.userpicture 
{
    width: 100px;
    height: 100px;
    float: left;
    object-fit: cover;
}

.userpictureprofile 
{
    width: 300px;
    float: right;
    position: relative;
    padding: 5px 5px 0px 0px;
}

.usersalutation 
{
    padding-left: 10px;
    float: left;
}

.usersalutationtitle 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-weight: bold;
    font-size: 165%;
    color: #ffc800;
    padding: 10px 0px 10px 0px;
}

.ohrasbannercontainer
{
    width: 100%;
}

.ohrasbanner
{
    width: 100%;
}

.linkbookhome 
{
    color: #ffc800;
    text-decoration: none;
    font-size: 130%;
}

.linkbookhome a:link 
{
    color: #ffc800;
}

.linkbookhome a:visited 
{
    color: #ffc800;
}

.pagebodycontentwrap
{
    clear: both;
    width: 98%;
    display: block;
    padding-top: 25px;
    margin: auto;
}

.hometext 
{
    width: 48%;
    float: left;
}

.homepicture 
{
    width: 48%;
    float: right;
    padding-bottom: 10px;
}

.homepictureimage
{
    width: 100%;
}

.divformatoportada 
{
    width: 94%;
    margin: auto;
    display: block;
}

#divformato 
{
    width: 99%;
    margin: auto;
    display: inline-block;
}

#divformato a:link 
{
    color: #d9d9d9;
    text-decoration: none;
}

#divformato a:visited 
{
    color: #d9d9d9;
    text-decoration: none;
}

#divformato a:hover 
{
    color: #d9d9d9;
    text-decoration: none;
}

.bookthumbwrapper 
{
    width: 31%;
    float: left;
    padding: 1.1%;
    text-align: center;
    font-weight: bold;
}

.bookthumb 
{
    width: 100%;
}

.isbn 
{
    width: 60%;
    padding: 2%;
    text-align: left;
    margin: auto;
    font-weight: bold;
    font-size: 110%;
    line-height: 160%;
}

#libropanelleft 
{
    width: 49%;
    float: left;
}

#libropanelright p 
{
    margin: auto;
    width: 90%;
    text-align: justify;
    padding: 5px;
}

#libropanelright 
{
    width: 50%;
    float: right;
    text-align: center;
}

.sieteplanetas 
{
    width: 70%;
}

.librolista 
{
    margin: auto;
    text-align: left;
    display: block;
}

.librolista ul 
{
    text-align: left;
}

/* Footer */

footer 
{
    /*position: fixed;
    bottom: 0;*/
    display: block;
    clear: both;
    color: White;
    background-color: #330000;
    text-align: center;
    width: 100%;
}

.footercopyright
{
    display: inline-block;
    margin-top: 5px;
    padding: 5px;
}

#footerlinks 
{
    display: block;
    padding: 15px;
}

#footerlinks a:link
{
    color: white;
    text-decoration: none;
    padding: 10px;
}

#footerlinks a:visited
{
    color: white;
    text-decoration: none;
}

#footerlinks a:hover 
{
    background-color: #660000;
}

input[type=text] 
{
    display: inline-block;
    padding: 4px 12px;
}

input[type=password] 
{
    display: inline-block;
    padding: 4px 12px;
}

input[type=submit], input[type=button] 
{
    background-color: #003366;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

.profileactualbutton 
{
    background-color: #003366;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    width: 90%;
    cursor: pointer;
}

input[type=submit]:hover, input[type=button]:hover 
{
    background-color: #4997d0;
}

input[type=checkbox] 
{
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

input[type=radio] 
{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
}

.examtext 
{
    font-size: 105%;
    line-height: 1cm;
}

.radiotest 
{
    line-height: 1cm;
}

textarea 
{
    resize: none;
    padding: 4px 12px;
}

select 
{
    display: inline-block;
    padding: 4px 12px;
}

.errorlabel 
{
    font-weight: bold;
    color: red;
}

.txtNombre 
{
    width: 600px;
}

/* Form */

.TFForm 
{
    width: 100%;
    font-size: 90%;
    border: 1px solid #595959; /*#bfbfbf;*/
    background-color: #333333; /*gray;*/ /*#f2f2f2;*/
    color: white;
}

.tableform, .tableformmodal 
{
    width: 90%;
    font-size: 100%;
    border: 1px solid #bfbfbf;
    background-color: #333333;  /*#f2f2f2;*/
    padding: 15px;
    margin: auto;
    color: white;
}

.tableformproleftcolum
{
    display: block;
    width: 25%;
    float: left;
    text-align: right;
    font-weight: bold;
}

.tableformprorightcolumn
{
    display: block;
    width: 70%;
    float: left;
    padding-left: 10px;
}

.tableformleftcolumn
{
    display: block;
    width: 90%;
}

.TFFormRow 
{
    line-height: 0.7cm;
}

.TFFormLeftColumn 
{
    width: 25%;
    vertical-align: top;
    text-align: right;
    padding-right: 10px;
}

.TFFormRightColumn 
{
    width: 75%;
    vertical-align: top;
    text-align: left;
    padding-left: 10px;
}

.TFFormColumnMobile 
{
    width: 100%;
    vertical-align: top;
    text-align: left;
}

.mobiletextlabel 
{
    width: 90%;
    display: block;
}

.textboxwide
{
    width: 200px;
}

.mobiletext
{
    width: 300px;
}

/* Login and Quick create Account */

.loginform 
{
    width: 50%;
    margin: auto;
    margin-bottom: 30px;
    border: 1px solid #c2c2d6;
    text-align: center;
    background-color: #333333;
}

.createaccountform 
{
    width: 60%;
    margin: auto;
    margin-bottom: 30px;
    border: 1px solid #c2c2d6;
    text-align: center;
}

.TFFormlogin 
{
    width: 90%;
    font-size: 90%;
    margin: auto;
    background-color: #333333;
}

.loginpageformtitle 
{
    font-size: 125%;
    text-align: center;
    padding: 20px;
    color: #d9d9d9; /*#003366;*/
}

.loginpageforgotpassword 
{
    width: 90%;
    margin: auto;
    padding-bottom: 15px;
    font-size: 90%;
}

/* Login buttons */

.userpanelloginbuttons 
{
    width: 50%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.loginbutton 
{
    background-color: #003366;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
}

.loginbutton:hover 
{
    background-color: #4997d0;
}

.logoutbutton 
{
    margin: auto;
    background-color: #003366;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 14px;
    cursor: pointer;
    width: 40%;
}

.logoutbutton:hover 
{
    background-color: #4997d0;
}

/*  Grid View and Forms */

.GridViewDisplay {
    font-size: 90%;
}

    .GridViewDisplay tr {
        height: 0.7cm;
        font-size: 90%;
    }

        .GridViewDisplay tr th {
            Height: 0.7cm;
            font-weight: bold;
            background-color: #ff0000; /*#ffff99;*/ /*#ffffcc;*/
            color: white; /*black;*/
            text-align: center;
        }

        .GridViewDisplay tr:nth-child(even) {
            background-color: #333333; /*#404040;*/ /*#FFFFFF;*/
            color: #d9d9d9; /*white;*/
        }

        .GridViewDisplay tr:nth-child(odd) {
            background-color: #1a1a1a; /*#666666;*/ /*#8c8c8c;*/ /*#e6e6e6;*/
            color: #d9d9d9; /*white;*/
        }

        .GridViewDisplay tr:hover {
            color: #d9d9d9; /*black;*/
            background-color: #666666; /*#c6d9ec;*/ /*#ffcc66;*/
        }

            .GridViewDisplay tr:hover a:link a:visited {
                color: yellow; /*black;*/
                background-color: #666666; /*#c6d9ec;*/ /*#ffcc66;*/
            }

    .GridViewDisplay td {
        padding-left: 5px;
        padding-right: 5px;
    }

    .GridViewDisplay a:link {
        color: yellow;
    }

    .GridViewDisplay a:visited {
        color: yellow;
    }

.GridViewDisplayPager td {
    background-color: #808080; /*#ebebe0;*/
}

.GridViewDisplayPager :first-child {
    margin: auto;
}

.GridViewDisplayPager span {
    color: red;
    font-weight: bold;
    font-size: 150%;
}

.GridViewDisplayPager a:link {
    font-weight: bold;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #6b6b47;
}

.GridInactivo {
    color: red;
}

.lnkReportes
{
    color: white;
}

.lnkReportes a:visited
{
    color: white;
}

.curriculumgradowrapper 
{
    width: 100%;
}

.curriculumgradoname 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-size: 175%;
    font-weight: bold;
    color: #ffc800;
    padding-top: 20px;
    padding-bottom: 10px;
}

.curriculumgradoname a:link 
{
    color: #ffc800;
}

.curriculumgradoname a:visited 
{
    color: #ffc800;
}

.curriculumlessons 
{
    width: 90%;
    margin: auto;
}

.curriculumlessondescripcion 
{
    padding-left: 30px;
}

.curriculumtipo
{
    padding-top: 7px;
    font-weight: bold;
}

.exampanel 
{
    border: 1px solid red;
    width: 94%;
    margin: auto;
    padding: 10px 10px 10px 10px; /* top right bottom left */
    background-color: #ffffcc;
    color: blue;
}

.curriculumrecursowrapper 
{
    width: 100%;
    padding: 5px 0px 5px 0px;
    display: inline-block;
}

.curriculumrecursoname 
{
    width: 100%;
    padding-bottom: 10px;
}

.curriculumrecursovideowrapper 
{
    width: 100%;
}

.curriculumrecursovideo 
{
    width: 100%;
}

.curriculumvideo 
{
    width: 50%;
    display: block;
    margin: auto;
}

.textboxtitle 
{
    float: left;
}

.countdownchar 
{
    float: left;
    font-size: 75%;
}

.clasesvideo 
{
    width: 95%;
    display: block;
    margin: auto;
}

.anunciocomments 
{
    width: 98%;
}

.anunciocommentwrapper 
{
    display: inline-block;
    width: 98.5%;
    background-color: #333333; /* dark box */
    padding: 10px 5px 5px 5px;
    margin-bottom: 5px;
    border: 1px solid #d9d9d9;
}

.classcommentswrapper 
{
    width: 100%;
    padding: 10px;
}

.classcommentstextboxwrapper 
{
    padding: 20px 0px 15px 0;
}

.classcommentslabelwrapper 
{
    padding-bottom: 10px;
}

.commentwrapper 
{
    display: inline-block;
    width: 100%;
    background-color: #333333; /* dark box */
    padding: 10px 5px 5px 5px;
    margin-bottom: 5px;
    border: 1px solid #737373;
}

.commentfotowrapper
{
    width: 5%;
    aspect-ratio: 1 / 1;
    float: left;
    overflow: hidden;
}

.activityfotowrapper 
{
    width: 100%;
    float: left;
}

.commenttextwrapper 
{
    float: left;
    width: 92%;
    padding-left: 10px;
}

.commentfoto 
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.actualcomment 
{
    font-size: 90%;
}

.Commentfecha 
{
    font-size: 80%;
    color: #ffffcc;
}

.commentalias 
{
    font-weight: bold;
}

.commentlabel 
{
    float: left;
    font-weight: bold;
}

.fotopostscenario 
{
    width: 70%;
    /*height: 350px;*/
    background-color: black;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 10px;
}

.fotopostscenariofoto 
{
    display: block;
    /*height: 100%;*/
    width: 100%;
    margin: auto;
}

/* Modal handling */

/* The Modal background */
.modal 
{
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-inner 
{
    width: 50%;
    display: block;
    margin: 150px auto;
    background-color: gray;
    top: 100px;
    overflow: hidden;
    border: 1px solid #bfbfbf;
}

/* The Close Button */

.linksalirmodal 
{
    float: right;
    padding: 7px;
}

.linksalirmodal input[type=button] 
{
    background-color: red;
    border: none;
    color: white;
    padding: 0px 10px 0px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 200%;
    cursor: pointer;
}

/* Modal Content/Box */

.modal-content 
{
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.modalparagraph 
{
    width: 97%;
}

.foromasterwrapper 
{
    display: inline-block;
    width: 100%;
    background-color: #333333;
    margin-bottom: 15px;
    border: 1px solid #d9d9d9;
}

.foromastergradoname 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-size: 175%;
    color: white;
    background-color: #ff8000;
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow: 2px 2px 4px #000000;
}

.foromastergradoname a:link 
{
    color: white;
    text-decoration: none;
}

.foromastergradoname a:visited 
{
    color: white;
    text-decoration: none;
}

.foromasterdescripcion 
{
    padding: 10px 5px 10px 5px;
}

.forocommentlastupdate 
{
    font-weight: bold;
    font-size: 90%;
    padding-top: 10px;
}

.forotopicgradoname 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-size: 155%;
    color: white;
    background-color: #994d00;
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow: 2px 2px 4px #000000;
}

.forotopicgradoname a:link 
{
    color: white;
    text-decoration: none;
}

.forotopicgradoname a:visited 
{
    color: white;
    text-decoration: none;
}

.forotopicgradonametopfive 
{
    font-family: MTCVHG; /*'Monotype Corsiva';*/
    font-size: 145%;
    font-weight: bold;
    color: #d9d9d9;
    padding-top: 5px;
    padding-bottom: 10px;
}

.forotopicgradonametopfive a:link 
{
    color: #d9d9d9;
    text-decoration: none;
}

.forotopicgradonametopfive a:visited 
{
    color: #d9d9d9;
    text-decoration: none;
}
    
.profilebuttoncontainer 
{
    display: block;
    width: 90%;
    margin: auto;
    text-align: center;
}

.profilesinglebutton 
{
    width: 33.1%;
    float: left;
    padding: 5px 0px 5px 0px;
}

.panelrenovacion 
{
    text-align: center;
    width: 90%;
    margin: auto;
}

.reglamento1, .reglamento2 
{
    font-size: 115%;
}

.reglamento1 
{
    padding-bottom: 5px;
}

.reglamentolink 
{
    color: yellow;
    text-decoration: none;
}

.reglamentolink hover 
{
    color: white;
    text-decoration: none;
}

.reglamentolink visited 
{
    color: yellow;
    text-decoration: none;
}

.itempendiente
{
    color: white;
    background-color: red;
    font-size: 70%;
    vertical-align: top;
    padding-left: 2px;
    padding-right: 2px;
}

.thumbnaildescarga
{
    width: 15%;
    height: 15%;
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
}

.thumbnaildescargadescription 
{
    padding: 10px 5px 10px 5px;
}

.paneldni 
{
    display: flex;
    width: 80%;
    margin: 16px auto;
    justify-content: center;
    align-items: flex-start;
    gap: 12px; /* “margen” entre hijos */
    box-sizing: border-box;
}

.dnicontainer 
{
    width: 60%;
    box-sizing: border-box;
}

.dni 
{
    display: block;
    margin-top: 5px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.panelstack 
{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pnlinfotransito
{
    display: inline-block;
    /*border: 1px solid green;*/
    width: 100%;
    margin-bottom: 5px;
    font-size: 90%;
}

.pnlimagentransito
{
    /*border: 1px solid red;*/
    margin-top: 5px;
    display: block;
    width: 100%;
}

.transitoimagecontainer 
{
    margin: auto;
    display: block;
    width: 80%;
    /*border: 1px solid yellow;*/
}

.transitographic
{
    width: 100%;
    height: auto;
}

.titulografico
{
    font-size: 105%;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.gvPlanets
{
    margin: auto;
    margin-top: 10px;
}

.transitosresult 
{
    margin-top: 16px;
    padding: 12px;
    background: black;
    border: 1px solid #eee;
    width: 90%;
    margin: auto;
}

.watermark-container 
{
    position: fixed;
    top: 220px;
    bottom: 0;
    width: 1170px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 999999;
}

.user-watermark 
{
    position: absolute;
    transform: rotate(-30deg);
    font-size: 42px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.150);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/********************************************************************************************************************/
/*                                          Tablet Landscape to small laptop                                        */
/********************************************************************************************************************/
@media only screen and (max-width: 1280px) 
{
    #leftcolumn 
    {
        width: 4.92%;
        float: left;
        text-align: center;
    }

    #contenido 
    {
        width: 90%;
        background-color: white;
        display: inline-block;
    }

    #rightcolumn 
    {
        width: 4.92%;
        float: right;
        text-align: center;
    }

    .pagebody 
    {
        margin: auto;
        padding: 2.5%;
        width: 96%;
        margin-bottom: 10px;
        font-size: 100%;
        line-height: 25px;
    }

    .pagebodyparrafo 
    {
        width: 95%;
        margin: auto;
        line-height: 25px;
    }
}

/********************************************************************************************************************/
/*                                    Smartphone Landscape, Tablet portrait                                         */
/********************************************************************************************************************/
@media only screen and (max-width: 800px) 
{
    #leftcolumn 
    {
        display: none;
    }

    #contenido 
    {
        display: block;
        width: 100%;
        border: none;
    }

    #rightcolumn 
    {
        display: none;
    }

    .pagebody 
    {
        margin: auto;
        padding: 2%;
        width: 95%;
        margin-bottom: 10px;
        font-size: 100%;
        line-height: 25px;
    }

    .pagebodyparrafo 
    {
        width: 95%;
        margin: auto;
        line-height: 25px;
    }
}

/********************************************************************************************************************/
/*                                                Smartphone portrait                                               */
/********************************************************************************************************************/
@media only screen and (max-width: 479px) 
{
    #bigwrapper 
    {
        clear: both;
        width: 100%;
        display: block;
    }

    #headerwrapper 
    {
        display: block;
        width: 100%;
        background-color: #ff8000;
        color: white;
    }

    .sitenamelogo 
    {
        display: inline-block;
        font-family: MTCVHG; /*'Monotype Corsiva';*/
        font-size: 140%;
        color: White;
        padding: 7px;
        text-shadow: 2px 2px 4px #000000;
    }

    #headertools 
    {
        display: block;
        padding: 0px 0px 10px 10px;
        font-size: 85%;
    }

    #leftcolumn 
    {
        display: none;
    }

    #container 
    {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    #contenido 
    {
        width: 100%;
        display: inline-block;
    }

    #innercontenido 
    {
        display: inline-block;
        width: 100%;
        text-align: left;
        padding: 0px;
    }
    
    #rightcolumn 
    {
        display: none;
    }

    /* Contenido */

    .pagebody 
    {
        display: inline-block;
        padding: 0;
        margin: auto;
        width: 100%;
        margin-bottom: 10px;
        font-size: 100%;
        line-height: 130%;
    }

    .pagebodyparrafo 
    {
        display: block;
        width: 97%;
        padding: 0;
        margin: auto;
        line-height: 130%;
        /*border: 1px solid green;*/
    }

    .pagebodyhead 
    {
        width: 98%;
        display: inline-block;
    }

    .userpicture {
        width: 90px;
        height: auto;
    }

    .pagebodyheaduser 
    {
        width: 100%;
        float: left;
        margin-top: 10px;
        margin-left: 5px;
    }

    .pagebodyheadclass 
    {
        width: 100%;
        float: left;
    }

    .pagebodycontentwrap 
    {
        clear: both;
        width: 98%;
        display: block;
        padding-top: 5px;
        margin: auto;
    }

    .divformatoportada 
    {
        width: 100%;
        margin: auto;
        display: block;
    }

    .bookthumbwrapper 
    {
        width: 31%;
        float: left;
        padding: 1%;
        text-align: center;
        font-weight: bold;
    }

    .hometext 
    {
        width: 98%;
        float: left;
        margin: auto;
    }

    .homepicture 
    {
        width: 98%;
        float: left;
        margin: auto;
        padding-bottom: 10px;
    }

    .homepictureimage 
    {
        width: 100%;
    }
    
    /* Footer */

    footer 
    {
        /*display: block;
        clear: both;*/
        color: White;
        background-color: #330000;
        text-align: center;
        width: 100%;
        font-size: 85%;
    }

    .TFFormLeftColumn 
    {
        width: 27%;
        vertical-align: top;
        text-align: right;
        padding-right: 5px;
    }

    .TFFormRightColumn 
    {
        width: 73%;
        vertical-align: top;
        text-align: left;
        padding-left: 5px;
    }

    .textboxwide 
    {
        width: 175px;
    }

    .tableform 
    {
        width: 100%;
        font-size: 100%;
        border: 1px solid #bfbfbf;
        background-color: #333333; /*#f2f2f2;*/
        padding: 5px;
        margin: auto;
        color: white;
    }

    .tableformmodal 
    {
        width: 94%;
        font-size: 100%;
        border: 1px solid #bfbfbf;
        background-color: #333333; /*#f2f2f2;*/
        padding: 5px;
        margin: auto;
        color: white;
    }
                   
    .txtNombre 
    {
        width: 92%;
    }

    #libropanelleft 
    {
        width: 99%;
        float: left;
    }

    #libropanelright p 
    {
        margin: auto;
        width: 98%;
        text-align: justify;
        padding: 5px;
    }

    #libropanelright 
    {
        width: 99%;
        float: left;
    }

    /* login form */

    .loginform, .createaccountform 
    {
        width: 97%;
        margin: auto;
        margin-bottom: 30px;
        border: 1px solid #c2c2d6;
        text-align: center;
    }

    .TFFormlogin 
    {
        width: 98%;
        font-size: 90%;
        margin: auto;
    }

    .loginpageformtitle 
    {
        font-size: 110%;
        text-align: center;
        padding: 15px;
        color: #d9d9d9; /*#003366;*/
    }

    .logoutbutton 
    {
        margin: auto;
        background-color: #003366;
        border: none;
        color: white;
        padding: 10px 25px;
        text-align: center;
        text-decoration: none;
        display: block;
        font-size: 14px;
        cursor: pointer;
        width: 30%;
    }

    .loginpageforgotpassword 
    {
        width: 96%;
        margin: auto;
        padding-bottom: 15px;
        font-size: 90%;
    }

    .isbn 
    {
        width: 85%;
        padding: 2%;
        text-align: left;
        margin: auto;
        font-weight: bold;
        font-size: 105%;
        line-height: 160%;
    }

    .sieteplanetas 
    {
        width: 90%;
    }

    h4
    {
        text-align: center;
    }

    .linkbookhome 
    {
        color: #ffc800;
        text-decoration: none;
        font-size: 100%;
    }

    .linkbookhome a:link 
    {
        color: #ffc800;
    }

    .linkbookhome a:visited 
    {
        color: #ffc800;
    }

    .curriculumlessons 
    {
        width: 100%;
        margin: auto;
    }

    .curriculumlessondescripcion 
    {
        padding-left: 30px;
    }

    .exampanel 
    {
        border: 1px solid red;
        width: 94%;
        margin: auto;
        padding: 10px 5px 5px 10px; /* top right bottom left */
        background-color: #ffffcc;
        color: blue;
    }

    .curriculumrecursowrapper 
    {
        width: 100%;
        padding: 5px 0px 5px 0px;
    }

    .curriculumrecursoname 
    {
        width: 100%;
        padding-bottom: 10px;
    }

    .curriculumrecursovideowrapper 
    {
        width: 100%;
    }

    .curriculumrecursovideo 
    {
        width: 100%;
    }

    .curriculumvideo 
    {
        width: 100%
    }

    .clasesvideo 
    {
        width: 100%;
        display: block;
        margin: auto;
    }

    .classcommentswrapper 
    {
        width: 100%;
        padding: 0px;
    }

    .commentwrapper 
    {
        display: inline-block;
        width: 98%;
        background-color: #333333; /* dark box */
        padding: 5px 2px 5px 5px;
        margin-bottom: 5px;
        margin: auto;
        border: 1px solid #737373;
    }

    .commentfotowrapper 
    {
        width: 8%;
        float: left;
    }

    .commenttextwrapper 
    {
        float: left;
        width: 90%;
        padding-left: 5px;
    }

    .commentfoto 
    {
        width: 100%;
    }

    .actualcomment 
    {
        font-size: 90%;
    }

    .commentalias 
    {
        font-weight: bold;
    }

    .Commentfecha 
    {
        font-size: 80%;
    }

    .commentlabel 
    {
        float: left;
        font-weight: bold;
    }

    /* Modal handling */

    /* The Modal background */
    .modal 
    {
        display: none;
        position: fixed;
        z-index: 5;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .modal-inner 
    {
        width: 95%;
        display: block;
        margin: 150px auto;
        background-color: gray;
        top: 100px;
        overflow: hidden;
        border: 1px solid #bfbfbf;
    }

    /* The Close Button */

    .linksalirmodal 
    {
        float: right;
        padding: 7px;
    }

        .linksalirmodal input[type=button] 
        {
            background-color: red;
            border: none;
            color: white;
            padding: 0px 10px 0px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 200%;
            cursor: pointer;
        }

    /* Modal Content/Box */

    .modal-content 
    {
        position: relative;
        width: 100%;
        margin-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 10px;
        text-align: left;
    }
    .tableformproleftcolum 
    {
        display: block;
        width: 90%;
        float: left;
        text-align: left;
        font-weight: bold;
    }

    .tableformprorightcolumn 
    {
        display: block;
        width: 90%;
        float: left;
        padding-left: 10px;
    }

    .profilebuttoncontainer 
    {
        display: block;
        width: 95%;
        margin: auto;
        text-align: center;
    }

    .profilesinglebutton 
    {
        width: 49.1%;
        float: left;
        padding: 5px 0px 5px 0px;
    }

    .fotopostscenario 
    {
        width: 100%;
        /*height: 350px;*/
        background-color: black;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .fotopostscenariofoto 
    {
        display: block;
        /*height: 100%;*/
        width: 100%;
        margin: auto;
    }

    .reglamento1, .reglamento2 {
        font-size: 110%;
    }

    .reglamento1 {
        padding-bottom: 5px;
    }

    .reglamentolink {
        color: yellow;
        text-decoration: none;
    }

        .reglamentolink hover {
            color: white;
            text-decoration: none;
        }

        .reglamentolink visited {
            color: yellow;
            text-decoration: none;
        }

    .thumbnaildescargadescription {
        padding: 10px 5px 10px 5px;
        line-height: 110%;
    }

    .paneldni 
    {
        display: flex;
        width: 90%;
        margin: 16px auto;
        justify-content: center;
        align-items: flex-start;
        gap: 12px; /* “margen” entre hijos */
        box-sizing: border-box;
    }

    .dnicontainer 
    {
        width: 100%;
        box-sizing: border-box;
    }

    .dni 
    {
        display: block;
        margin-top: 5px;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    .transitoimagecontainer 
    {
        margin: auto;
        display: block;
        width: 100%;
        /*border: 1px solid yellow;*/
    }
}