/* Begin: Estilos de Encabezado Principal */

.Logo {
    transition: height 1s,left 1s, top 1s;
    transition-timing-function: ease-in-out;
    z-index: 100;
    height: 4.5vw;
}
.HeaderDiv, .HeaderTable {
    transition: top 1s, width 1s, background-color 1s;
    transition-timing-function: ease-in-out;
    height: 5vw;
    top: 0.5vw;
    margin-right: auto;
    margin-left: auto;
    z-index: 100;
    opacity: 0.95;
}
.HeaderDiv {
    width: 100%;
    background-color: transparent;
    vertical-align: middle;
    position: fixed;
}
.HeaderTable {
    width: 90vw;
    background-color: ghostwhite;
    padding: 2px;
    text-align: center;
    position: relative;
    box-shadow: 4px 4px 4px gray;
}
.BodyTable {
    width: 90vw;
    background-color: ghostwhite;
    padding: 2px;
    text-align: center;
    position: absolute;
    box-shadow: 3px 3px 3px lightgray;
    left: 50%;
    margin-left: -45vw;
    margin-top: 15vh;
    min-height: 81vh;
    max-height: 81vh;
}

/* End: Estilos de Encabezado Principal */
/* ================================================================================================= */

.LeftMenuOff, .LeftMenuOver, .HeaderMenu, .LeftMenuOn {
    text-align: left;
    cursor: pointer;
    padding: 6px;
    border: solid 1px lightgray;
    text-decoration: none;
    font-size: 1.25vw;
    font-style:normal;
}
.LeftMenuOff {
    background-color: lightgrey;
    color: black;
}
.LeftMenuOver {
    background-color: cornflowerblue;
    color: white;
}
.LeftMenuOn {
    background-color: darkred;
    color: white;
    padding: 8px;
    box-shadow: 2px 2px 2px lightgray;
    font-size: 1.3vw;
}
.HeaderMenu {
    background-color: cadetblue;
    color: white;
    font-weight:normal;
    min-height:4vh;
    cursor:default;
}
.DropDownLeftMenu {
    background-color: white;
    color: black;
    font-weight: normal;
    min-height: 4vh;
    cursor: default;
    width:100%;
    font-size:1.25vw;
    min-width:18vw;
    max-width:18vw;
}

/* ================================================================================================= */
/* Begin: Estilos de Menú Lateral */

.MenuDivOff, .MenuDivOver {
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    text-decoration: none;
}
.MenuDivOff {
    color: black;
}
.MenuDivOver {
    color: cadetblue;
    font-style:italic;
}
.MenuText {
    font-family: Tahoma,'Segoe UI',Arial,Verdana;
    color: inherit;
    text-decoration: none;
    font-size: 1.4vw;
    width: 11vw;
}
.WelcomeUser {
    font-size: 2vw;
    font-family: 'Eurostile LT Std',Arial;
    padding-right: 0.5vw;
}

/* End: Estilos de Menú Lateral */
/* ================================================================================================= */
/* Begin: Estilos de Tabs */

.TabDivOver, .TabDivOff, .TabDivOn {
    text-align: left;
    cursor: pointer;
    padding: 6px;
    text-decoration: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: normal;
}
.TabDivOff {
    background-color: lightgrey;
    border: solid 1px lightgrey;
    color: black;
}
.TabDivOver {
    color: white;
    background-color: cornflowerblue;
    border: solid 1px lightgrey;
}
.TabDivOn {
    color: white;
    background-color: darkred;
    padding: 8px;
    font-size: 1.3vw;
    box-shadow: 2px 2px 2px gray;
}
.TitleProvider {
    font-size:xx-large;
    text-align: left;
    color:darkblue;
    padding-right:10px;
}
.DashboardTile {
    min-height: 10vw;
    border-radius: 8px;
    border-style: solid;
    border-width: thin;
    border-color: lightgrey;
    padding: 10px;
}
.DashboardMessage {
    font-size: 1.1vw;
    color: slategray;
    text-align:left;
    padding-top:8px;
    
}
.DashboardIndex {
    padding-top: 0px;
    font-size: 2.8vw;
    color: dodgerblue;
}
.CourseProviderInfo {
    position:absolute;
    top:0vw;
    right:0vw;
}
.rich-text-display {
    border: none;
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap; /* Preserve whitespace */
    word-wrap: break-word; /* Break words to fit */
    overflow: hidden; /* Hide overflow */
    text-align: left;
    vertical-align: top;
    color:gray;
    font-size:1.25vw;
}
.PriceDurationInfo {
    padding:3px;
    font-size: 1.2vw;
    color: dodgerblue;
    text-align:center;
    white-space:nowrap;
}

    /* End: Estilos de Menú Principal */
    /* ================================================================================================= */
    /* Beging: Estilos de Body Principal */

.Mainbody {
    width: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

/* End: Estilos de Body Principal */
/* ================================================================================================= */
/* Beging: Estilos del Carrusel de Banners */

.ActiveBanner, .InactiveBanner {
    position: fixed;
    text-align: center;
    transition: opacity 1.5s, visibility 1.5s, transform 1.5s;
    transition-timing-function: ease-in-out;
    width: 100vw;
    top: 0;
}
.ActiveBanner {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}
.InactiveBanner {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.98);
}
.LeftSlider, .RigthSlider, .LeftArrow, .RigthArrow {
    transition: opacity 0.7s, visibility 0.7s;
    transition-timing-function: ease-in-out;
    opacity: 0;
}
.LeftSlider, .RigthSlider {
    height: 5vw;
    background-color: ghostwhite;
    width: 2.5vw;
    box-shadow: 4px 4px 4px gray;
}
.LeftSlider {
    float: left;
}
.RigthSlider {
    float: right;
}
.LeftArrow, .RigthArrow {
    border-top: 1.5vw solid transparent;
    border-bottom: 1.5vw solid transparent;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    top: 1vw;
}
.LeftArrow {
    float: left;
    margin-left: 0.5vw;
    border-right: 3vw solid white;
    border-right-color: darkred;
}
.RigthArrow {
    float: right;
    margin-right: 0.5vw;
    border-left: 3vw solid white;
    border-left-color: darkred;
}
.TableBullets01, .TableBullets02, .TableBullets03, .TableBullets04 {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.TableBullets01 {
    margin-top: 42vw;
    position: absolute;
    width: 10%;
}
.TableBullets02 {
    height: 5.9vw;
}
.BulletOn, .BulletOff {
    border-radius: 50%;
    height: 1.5vw;
    width: 1.5vw;
    border-width: 2px;
    border-style: solid;
    border-color: darkred;
    opacity: 0.7;
    cursor: pointer;
}
.BulletOn {
    background-color: darkred;
}
.BulletOff {
    background-color: white;
    border-color: white;
}

.Quote01, .Quote02, .Quote03, .Quote04 {
    transition: opacity 1s, visibility 1s, top 1s, left 1s;
    transition-delay: 0.5s;
    opacity: 0;
    font-size: 3.4vw;
    text-align: left;
    position: absolute;
}
.Quote01 {
    top: 10vw;
    right: 5vw;
    width: 50vw;
}
.Quote02 {
    top: 12vw;
    left: 10vw;
    width: 50vw;
}
.Quote03 {
    top: 8vw;
    left: 10vw;
}
.Quote04 {
    top: 8vw;
    left: 8vw;
}

.Author01 {
    margin-top: 3.5vw;
    font-size: 2.3vw;
    font-style: italic;
    text-align:right;
}

.Highligth01 {
    font-family: 'Tahoma';
    color: darkred;
}

.ReadMore01, .ReadMoreOver01, .ReadMoreOut01, .ReadMore02, .ReadMoreOver02, .ReadMoreOut02, .ReadMore03, .ReadMoreOver03, .ReadMoreOut03, .ReadMore04, .ReadMoreOver04, .ReadMoreOut04 {
    transition: opacity 1.5s, visibility 1.5s, top 1.5s, left 1.5s, right 1.5s;
    position: absolute;
    opacity: 0;
    background-color: darkred;
    color: white;
    width: 10vw;
    height: 3vw;
    line-height: 3vw;
    text-align: center;
    box-shadow: 4px 4px 4px gray;
    border-radius: 3vw;
    padding: 10px;
    cursor: pointer;
    font-size: 1.5vw;
    z-index:80;
}
.ReadMore01, .ReadMoreOver01, .ReadMoreOut01, .ReadMoreOut04 {
    transition: opacity 1.5s, visibility 1.5s, top 1.5s, left 2.5s;
    top: 24vw;
    left: 0vw;
}
.ReadMore02, .ReadMoreOver02, .ReadMoreOut02 {
    top: 24vw;
}
.ReadMore03, .ReadMoreOver03, .ReadMoreOut03 {
    top: 24vw;
}
.ReadMore04, .ReadMoreOver04, .ReadMoreOut04 {
    top: 24vw;
}
.ReadMoreOver01, .ReadMoreOver02, .ReadMoreOver03, .ReadMoreOver04 {
    background-color: darkslategray;
}
.ReadMoreOut01, .ReadMoreOut02, .ReadMoreOut03, .ReadMoreOut04 {
    background-color: darkred;
}

/* End: Estilos del Carrusel de Banners */