html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    form.ms-lg-auto {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    form.ms-lg-auto {
        width: 30%;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: montserrat, sans-serif;
    min-height: 100vh;
    color: #333333;
}

.divisortitle{
    font-size:34px;
}

.font-bold{
    font-weight: 600;
}

.h120{
    height:120px;
}

h2{
    font-size: 24px;
    font-weight: 600;
}

h3{
    font-size: 1.2em;
}

.w-45{
    width: 45%;
}

.w-45to100 {
    width: 45%;
}

.w-100{
    width: 100%;
}

.maxwidth768{
    max-width: 768px;
    margin: auto;
}

.btn-big .logo-application {
    max-width: 100%;
    margin-top: 30px;
    max-height: 300px;
}

.download-excel {
    position: relative;
    display: inline-flex; /* Use inline-flex to allow the button to expand with content */
    flex-direction:column;
    align-items: center; /* Center content vertically */
    border: 5px solid #14387f;
    padding: 10px; /* Adjust padding as needed */
    margin-right:50px;
}

.logo-application {
    width: 250px; /* Set the width of the SVG as needed */
    height: 250px; /* Set the height of the SVG as needed */
    margin-right: 10px; /* Adjust spacing between the SVG and text */
}

.mt50{
    margin-top:50px;
}

.text-application {
    flex-grow: 1; /* Allow the text to expand and fill available space */
}

/* Optional: Center the button horizontally */
.download-excel {
    margin: 0 auto;
    margin-right: 50px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .coursedescription {
        font-size: 18px;
    }
}

.selection{
    text-align:left !important;
}

.select2-container{
    display:block !important;
}

.select2-selection__rendered{
    margin-top:5px;
}

.select2-selection__arrow{
    margin-top:5px;
}

.select2-selection--single {
    height: 38.67px !important;
}

.no-border {
    border: none !important;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

/*Error message*/
.action-result-message.ErrorMessage {
    border: solid 1px #c90f0f;
    background-color: #f57c7c;
    color: #820a0a;
}

/*Success message*/
.action-result-message.SuccessMessage {
    border: solid 1px #5e9e51;
    background-color: #73c55d;
    color: #ffffff;
}

.action-result-message {
    font-size: 14px;
    text-align: center;
    padding: 7px;
    margin: 10px 0;
    border-radius: 4px;
    word-break: break-word;
}

.ml-auto {
    margin-left: auto;
}

.login-container {
    background-image: url("../images/login/loginbackground.png");
    background-size: cover;
    background-position: center;
}

.colorCesa-lightblue {
    background-color: #88bce7;
    border-color: #88bce7;
}

.colorCesa-blue {
    background-color: #14387f;
    border-color: #14387f;
}

.areas-list {
    color: #706f6f;
    font-weight:600;
}

.area-link{
    text-decoration: none;
    color: unset;
}

    .area-link:hover {
        text-decoration: none;
        color: #14387f;
    }

.area-link.active {
    font-weight:800;
}

    .area-link.active:hover {
        color:unset;
    }

.btn {
    padding: 0.375rem 0.6rem;
}

.btn-information {
    color: #706f6f;
    background-color: transparent;
    border-color: #ffffff;
    padding: 0.375rem 0.25rem;
    font-weight: 400;
}

    .btn-information:hover {
        color: #706f6f;
        background-color: transparent;
        border-color: #ffffff;
        text-decoration: underline;
    }
    .btn-information:hover .button-text {
        text-decoration: underline;
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2314387f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.fontcolorCesa-lightblue {
    color: #78b6e7;
}

.fontcolorCesa-white {
    color: white;
}

.colorCesa-blue h3 {
    color:white;
}

.route-button {
    height: 40px;
    border: none;
    display: flex;
    margin: 10px 30px 10px 30px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px; /* Adjust as needed */
    cursor: pointer;
    font-size: 22px;
}

.lSSlideWrapper .lSAction > .lSPrev {
    left: 0;
    filter: invert(1);
}

.lSSlideWrapper .lSAction > .lSNext {
    right: 0;
    filter: invert(1);
}

.leftslidericon {
    background-color: white;
    background-image: url("../images/svg/iconos-04.svg");
    display: block;
    height: 40px;
    width: 40px;
}

.moreinfo-button {
    position: relative;
    background-color: white; /* Set your desired background color */
    color: black;/* Set your desired text color */
    border: none;
    padding: 10px 20px;
    font-size: 16px; /* Adjust the font size as needed */
    cursor: pointer;
}

.careernamehome {
    width: 100%;
    text-align: left;
    margin-bottom: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.arrow {
    color: #91c4eb; /* Set your desired color for the arrow */
    position: relative;
    top: 1px; /* Adjust the vertical alignment */
    font-size: 24px; /* Adjust the font size of the arrow */
}

.pinkbutton {
    background-color: #ea277a;
    border-color: #ffffff;
    color: #ffffff;
}

    .pinkbutton:hover {
        background-color: #a3376d !important;
        border-color: #ffffff !important;
        color: #ffffff;
    }

    .pinkbutton:active {
        background-color: #a3376d !important;
        border-color: #a3376d !important;
        color: #ffffff;
    }

    .pinkbutton:focus {
        background-color: #a3376d !important;
        border-color: #a3376d !important;
        color: #ffffff;
        box-shadow: 0 0 0 0.25rem rgb(255 0 177 / 50%)!important;
    }

.lightbluebutton {
    background-color: #78b6e7;
    border-color: #ffffff;
}

    .lightbluebutton:hover {
        background-color: #14387f !important;
    }

.routebutton-border {
    border-left: 5px solid; /* Change the border color if needed */
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 10px; /* Adjust as needed */
}

.colorCesa-lightblue:hover {
    background-color: #88bce7;
    border-color: #14387f;
}

.colorCesa-lightblue:active {
    background-color: #88bce7 !important;
    border-color: #14387f !important;
}

.loginsubtitle{
    font-size:18px;
}

.basicpaddingbottom{
    padding-bottom:10px;
}

.fontcolorCesa-blue {
    color: #14387f !important;
}

.fontcolorCesa-light {
    color: #88bce7 !important;
}

.mons-bold{
    font-weight:700;
}

.rightauto{
    right:0 !important;
}

.nomarginright{
    margin-right: 0 !important;
}

.marginright15{
    margin-right: 15px !important;
}

.nomarginleft{
    margin-left: 0 !important;
}

.verticalalign-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.maxwidthnone{
    max-width:none !important;
}

.backgroundgrey {
    background-color: #ededed;
    min-height: 100vh;
}

.backgrounddualcolor {
    background-color: #ededed;
    min-height: 100vh;
}

.smallbackgroundgrey {
    background-color: #ededed;
}

.horizontal-flexcontainer{
    display:flex;
    flex-direction:row;
}

.horizontal-flexcontainer-courses {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 48px;
}

.vertical-flexcontainer {
    display: flex;
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
}

.cardcontainer:last-child{
    margin-bottom:80px;
}

.nodecoration{
    text-decoration:none;
    color:black !important;
}

.maxwidth100{
    max-width:100%;
}

.width100{
    width:100%;
}

.marginleft15 {
    margin-left: 15px !important;
}

.marginleft20 {
    margin-left: 20px !important;
}

.marginleft50{
    margin-left:50px !important;
}

@media (min-width: 992px) {
    .ml-md-50 {
        margin-left: 50px !important;
    }
}

.backgroundwhite {
    background-color: #ffffff;
}

.level3-font{
    font-weight:800 !important;
}

.level2-font{
    font-weight:700 !important;
}

.level1-font{
    font-weight:400 !important;
}

.verticalmargin{
    margin-top:10px;
    margin-bottom:10px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #ededed !important;
}

.margintop10{
    margin-top:10px !important;
}

.margintop30 {
    margin-top: 30px !important;
}

.margintop50 {
    margin-top: 50px !important;
}

.margintop100 {
    margin-top: 100px !important;
}

.marginbottom0 {
    margin-bottom: 0px !important;
}

.marginbottom10 {
    margin-bottom: 10px !important;
}

.marginbottom15 {
    margin-bottom: 15px !important;
}

.marginbottom30 {
    margin-bottom: 30px !important;
}

.marginbottom50 {
    margin-bottom: 50px !important;
}

.btn btn-primary dropdown-toggle option {
    background-color: #ededed;  
    color:black;
}

.inline-block{
    display: inline-block;
}

#ImageFile {
    background-color: #0d6efd; /* Change the background color to blue (you can replace this with your desired color) */
    color: white; /* Set text color to white or any desired color */
    border: none; /* Remove the border */
    padding: 10px 20px; /* Adjust padding as needed */
    cursor: pointer; /* Change cursor to pointer on hover */
}

    /* Hide the "No file selected" text */
    #ImageFile::after {
        content: none;
    }

.staybasiccolor {
    background-color: #a3376d !important;
    border-color: #a3376d;
}
.staybasiccolor:hover {
    background-color: #a3376d !important;
    border-color: #a3376d;
}
.staybasiccolor:active {
    background-color: #a3376d !important;
    border-color: #a3376d;
}
.staybasiccolor:focus {
    box-shadow: 0 0 0 0.25rem rgb(255 0 177 / 50%) !important;
    border-color: #a3376d;
}


.encapsulatedbutton {
    padding: 0.375rem 0.75rem; /* Button padding */
    border-radius: 0.25rem; /* Button border radius */
    cursor: default; /* Disable hover effect */
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.wrapper {
    height: 100%;
    width: 100%;
    padding-bottom: 50px; /* reserving bottom space for footer */
}

.container {
    display: inline-block; /* don't force it to 100%, just make it flexible  */
    float: left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
    clear: both;
    width: 100%;
}

footer {
    width: 100%;
    float: left;
    clear: both;
    margin-top: -60px; /*moving it into the padded bottom space of wrapper*/
    position: relative; /* Reset the positioning to relative or remove any positioning */
    clear: both; /* Clear any floated elements */
}

.container-fluid{
    padding-right:0px !important;
    padding-left:0px !important;

}

.abm-select {
    border: 1px solid !important;
    border-color: #14387f;
}

.abm-select option {
    background-color: white;
    color:black;
}
    .abm-select option:hover {
        background-color: white;
        color: black;
    }

.dropdown-menu{
    background-color:white !important;
}

.filters {
    margin-top: 1.3em;
    padding-bottom: 1em !important;
    border-color: #b96492;
    border-color: var(--secondary-color);
    justify-content: space-evenly;
    transition: all ease-in-out 2s;
}

.marginbot0{
    margin-bottom:0px !important;
}
.marginbot20 {
    margin-bottom: 20px !important;
}
.basicpadding{
     padding: 1rem 1rem;
 }


.banner-navbar {
    background-image: url("../images/banner_header.png");
    background-size: cover;
    background-position: left;
    height:120px;
}

@media (max-width: 800px) {

    .navbar-title {
        color: white;
        position: relative;
        left: 8%;
        align-items: center;
    }

    .flexdirection-sm{
        flex-direction:column;
    }
}

.login-button {
    font-weight: 600;
    border-radius: 50px;
    background-color: #14387f;
    color: #ffffff !important;
    display: block;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    border: none;
    transition: color .5s ease-in-out, border .5s ease-in-out, background-color .5s ease-in-out;
}

    .login-button:hover {
        background-color: #ffffff;
        color: #14387f !important;
        border: 1px solid #14387f;
    }

.navbar-title {
    color: white;
    position: relative;
    left: 8%;
    align-items: center;
     top: 30%;
}

.new-form-container {
    background-color: white;
    width: 75%;
    height: 66%;
    padding: 5vh 10vh 5vh 10vh;
    margin-top:50px;
}

.makeitflex {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.new-form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
}

.new-form-label {
    flex: 1;
    margin-right: 10px; /* Adjust as needed */
    text-align: left; /* Align label to the left */
}

.new-form-input {
    flex: 2;
    width: 40%;
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: center; /* Centra el input */
}

.marginpagetitle{
    margin-bottom:20px;
}

.lastforminput{
    margin-bottom:20px;
}

.marginright5{
    margin-right:5px;
}

.flexrowwithrightorientation{
    display:flex;
    flex-direction:row;
    justify-content:right;

}

.new-form-input.flexrowwithrightorientation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
.new-form-input.flexrowwithrightorientation {
    flex-direction: column-reverse;
    align-items: flex-start;
}

    .new-form-input.flexrowwithrightorientation button {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .backgrounddualcolor{
        background-color:white;
    }
    .new-form-container{
        width:100vw;
    }
    .new-form-group {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start for left alignment */
        margin-bottom: 20px;
    }

    .new-form-label {
        flex: none; /* Reset the flex property to allow auto width */
        margin-right: 0; /* Remove margin */
        margin-bottom: 5px; /* Add some space between label and input */
        text-align: left;
    }

    .new-form-input {
        flex: none; /* Reset the flex property to allow auto width */
        width: 100%; /* Full width for responsive layout */
        margin-top: 15px;
        margin-bottom: 20px;
        text-align: center; /* Center the input */
    }
}

.whitebutton {
    background-color: white;
    text-decoration: none;
    color: #78b6e7;
}

.whitebutton a{
    text-decoration: none;
}

.whitebutton a:hover{
    color:white;
}

whitebutton button:hover{
    color:white;
}

    .whitebutton:hover .header-highlight {
        text-decoration:underline;
    }

.underline-hover:hover a{
        text-decoration: underline;
}

.indexsvg{
    width:70px;
}

.flexbigscreen {
    display: flex;
    justify-content: center;
    gap: 4rem;
}

@media (max-width: 700px) {
    .flexbigscreen {
        display: block;
    }
}

.benefit_container {
    display: flex;
/*    justify-content: space-around;*/
    align-items: flex-start;
/*    flex-wrap: wrap;*/
}




.benefit_container_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    width: 30%;
}

hr{
    background-color:inherit;
}

.reason_container_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    width: 100%;
} 

.reason_title {
    text-align: left;
    font-size: 1.1em;
    margin-left: 10px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.reason_li {
    text-align: left;
    font-weight: 500;
}

.reason_image {
    width: 100%;
    max-width: 1300px;
    margin: auto;
}


.benefit_text {
    text-align: left;
    font-size: 1em;
    margin-left: 10px;
    margin-bottom: 0px;
}

.padding-0{
    padding: 0;
}

.padding-4 {
    padding: 0 4%;
}

.padding-50-4 {
    padding: 50px 4%;
}


@media (max-width: 900px) {
    .benefit_container_item {
        align-items: center;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .benefit_container {
        flex-direction:column;
    }
}



.design_program {
    background-color: #ededed;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

.design_program_text_container{
    width: 38%;
}

.design_program_number_container{
    display: flex;
    flex-direction: row;
}

.design_program_number_container_column{
    display:flex;
    flex-direction:column;
}

.design_program_number_container_each {
    width: 33.33%;
    padding: 20px;
}

.design_program_number_container_first {
    background-color: #3d9cdd;
}

.design_program_number_container_second {
    border-radius: 0 0 0 0;
    background-color: #2bac9d;
}

.design_program_number_container_third {
    background-color: #f7a751;
}

.design_program_number_container_forth {
    background-color: dimgrey;
    padding:20px;
}

.design_program_text_number {
    font-size: 73px;
    color: var(--bs-light);
}

.design_program_text {
    font-size: 1.2em;
    text-transform: uppercase;
    color: var(--bs-light);
}

@media (max-width: 950px) {
    .design_program{
        flex-direction: column;
    }

    .design_program_text_container {
        width: 100%;
        margin-bottom: 30px
    }

    .design_program_number_container {
        width: 100%;
        flex-direction: column;
    }
    .design_program_number_container_each{
        width: 100%;
    }
}

.logosvg {
    background-image: url("../images/logoCesa.png");
    width: 100px;
    height: 100px;
    position: absolute;
    top: 40px;
    left: 40px;
}

.icon1 {
    background-image: url("../images/icono1.png");
    width: 100px;
    height: 100px;
    position: absolute;
    top: 40px;
    left: 40px;
}

@media (max-width: 900px) {

    .logosvg{
        display:none !important;
    }
}

.width100{
    width:100%
}

.justifycontentstart{
    justify-content: start !important;
}

.width15vh{
    width : 20vh !important;
}

.width30vh {
    width: 30vh !important;
}

.paddingleft30{
    padding-left:30px !important;
}

.responsive-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.iti--allow-dropdown{
    width:100% !important;
}
btn.btn-success.btn-lg.text-body.colorCesa-lightblue:active {
    background-color: inherit; /* Use the button's default background color */
    color: inherit; /* Use the button's default text color */
}
.nohover:hover{
    color: white;
}

.whitehover:hover {
    color: blue;
    background-color: white !important;
    text-decoration: underline;
}

.flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    height: 300px;
}

.blue-box {
    background-color: blue;
    text-align: center;
    flex: 1;
    height: 100%;
    align-items: center;
}

.lp-bannerimage {
}

.white-button {
    background-color: white;
    color: blue;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.blue-box h2 {
    font-weight: 600;
    font-size: 30px;
    color: white;
    margin: 0;
}

.blue-box p {
    font-weight: 400;
    color: white;
    margin: 10px 0;
}

.button-container {
    margin-top: 20px;
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center the text vertically */
    margin-top: 10px; /* Adjust the top margin as needed */
}

.button-text {
    display: inline-block;
    vertical-align: middle;
}

.card-thumbnail {
    width: 100%;
    object-fit: cover;
    height: auto;
    background: #cdcdcd;
}

.card-thumbnail-slider {
    width: 100%;
    object-fit: cover;
    height: auto;
    background: #cdcdcd;
}

.card {
    border: 2px solid #ddd; /**/ /* Add a border with a color of your choice */
    border-color: #cdcdcd;
    border-radius: 5px; /* Rounded corners for the card */
    margin: 10px; /* Add spacing between cards */
}

/* Center align the card content */
.card-body {
    padding: 15px 10px;
}
.card-body-thankyou {
    padding: 15px 10px;
}

/* Center align the card title (name) */
.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #14387f;
    width: calc(100% - 30px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.card-area {
    font-weight: 400;
    margin-left: 30px;
    margin-top: -10px;
    font-size: 0.9em;
    color: #706f6f;
    width: calc(100% - 30px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Center align the card description */
.card-text {
    text-align: center;
}

/* Center align the button */
.card-button {
    text-align: center;
    margin-top: 10px; /* Add spacing between the text and button */
}

    /* Style the button as needed */
    .card-button button {
        background-color: #007bff; /* Button background color */
        color: #fff; /* Button text color */
        border: none; /* Remove button border */
        border-radius: 5px; /* Rounded button corners */
        padding: 5px 10px; /* Add padding to the button */
        cursor: pointer; /* Add pointer cursor on hover */
    }

        /* Style the button on hover */
        .card-button button:hover {
            background-color: #0056b3; /* Change background color on hover */
        }

.modal-header {
    padding: 20px; /* You can adjust the value as needed */
}

/* Increase the height of modal body */
.modal-body {
    padding: 20px; /* You can adjust the value as needed */
    overflow-wrap: break-word; /* Ensure long words wrap within the box */
    word-wrap: break-word; /* Additional support for older browsers */
}

/* Increase the padding and height of modal footer */
.modal-footer {
    padding: 20px; /* You can adjust the value as needed */
}

#content-to-hide{
    display:none;
}

#main-body-header {
    line-height: 26px;
    height: 130px;
    position: relative;
    transition: all ease-in-out .6s;
}

.main-header-banner {
    height: 160px;
    background-position: var(--banner-position) center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #f2f3f5;
    transition: all ease-in-out .6s;
    background-size: cover;
    background-image: url("../images/bannerbackground.png");
}

.index-header-banner {
    height: 340px;
    background-position: left center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #f2f3f5;
    transition: all ease-in-out .6s;
    background-size: cover;
    padding: 0% 4%;
    display: flex;
    align-items: center;
    position: relative;
}

.index-header-custom-banner {
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #f2f3f5;
    transition: all ease-in-out .6s;
    background-size: cover;
    padding: 0% 4%;
    display: flex;
    align-items: center;
    position: relative;
}
.image-thankyou {
    background-image: url("../images/thankyou.jpg");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    width: 100%;
    height: 400px;
}

@media (min-width: 768px) {
    /* For laptops */
    .image-thankyou {
        height: 400px; /* Adjust height for laptops */
        background-image: url("../images/thankyou-mobile.jpg");
    }
}

@media (min-width: 992px) {
    /* For desktops */
    .image-thankyou {
        background-image: url("../images/thankyou-mobile.jpg");
        height: 400px; /* Adjust height for desktops */
    }
}

@media (max-width: 576px) {
    /* For mobile devices */
    .image-thankyou {
        background-image: url("../images/thankyou-mobile-3.jpg");
        height: 400px; /* Adjust height for mobile devices */
    }
}
.index-header-banner-image {
    height: 340px;
    background-position: left center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #f2f3f5;
    transition: all ease-in-out .6s;
    background-size: cover;
    background-image: url("../images/banner_home-02.png");
    padding: 0% 4%;
    display: flex;
    align-items: center;
    position: relative;
}

/* Default styles for the banner */
.index-header-banner-image-resizable {
    width: 100%;
    position: relative;
    padding-top: 18%; /* Relación 16:9 -> (9/16) * 100 */
    border-bottom: 1px solid #f2f3f5;
    transition: all ease-in-out 0.3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-header-banner-image-resizable video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Media query for screens between 1900px and 1300px */
@media screen and (min-width: 1400px) {
    .index-header-banner-image-resizable {
        background: url("../images/videos/20241119-Gif 1 LLL 1900X340.mp4");
    }
}

/* Media query for screens between 1300px and 700px */
@media screen and (max-width: 1400px) and (min-width: 800px) {
    .index-header-banner-image-resizable {
        background: url("../images/videos/20241119-GIF LLL 1366X340.mp4");
        padding-top: 25%;
    }
}

/* Media query for screens between 700px and 300px */
@media screen and (max-width: 800px) and (min-width: 450px) {
    .index-header-banner-image-resizable {
        background: url("../images/videos/20241119-Gif 1 LLL 768X340.mp4");
        padding-top: 45%;
    }
}

/* Media query for screens below 300px */
@media screen and (max-width: 450px) {
    .index-header-banner-image-resizable {
        background-size: contain;
        background: url("../images/videos/20241119-Gif LLL 375X340.mp4") center center;
        padding-top: 90%;
    }
}

@media screen and (max-width: 387px) {
    .index-header-banner-image-resizable {
        background-size: contain;
        background: url("../images/videos/20241119-Gif LLL 375X340.mp4") center center;
        padding-top: 90%;
        margin-top: 20px;
    }
}

@media screen and (max-width: 495px) {
    .logoCesaBlue {
        display: none;
    }
}

.index-header-banner {
    position: relative;
}

.index-header-banner-image {
    position: relative;
}

.text-header-container {
    position: relative; /* Ensure text and button are positioned relative to the banner */
    z-index: 1; /* Ensure text and button are above the video */
}

    .index-header-banner video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the video covers the entire area */
        z-index: -1; /* Push the video behind the content */
    }

.text-header-container{
    width: 45%;
    border-left: 2px solid var(--bs-light);
}

.text-header {
    font-size: 36px;
    color: var(--bs-light);
    font-weight: 600;
    line-height: normal;
    padding: 10px 0 0 10px;
}

.header-highlight {
    padding: 10px;
    background: #ea277a;
    border: 2px solid var(--bs-light);
    border-left: none;
}

.text-header-highlight {
    font-size: 20px;
    color: var(--bs-light);
    margin-bottom: 0px;
    font-weight: 600;
}

.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    background-color: #10953f;
    filter: drop-shadow(0 0 3px black);
    transition: all ease-in-out 0.5s;
    padding: 20px;
    border-radius: 100%;
}

    .whatsapp-container.position20 {
        bottom: 20px;
    }

.whatsapp-container img {
    width: 40px;
}

.whatsapp-container:hover {
    filter: drop-shadow(0 0 0px #666666);
}


@media (max-width: 900px) {
    .text-header-container{
        width: 100%;
    }

    .whatsapp-container {
        position: fixed;
        bottom: 10px;
        right: 10px;
    }

    .whatsapp-container img {
        width: 30px;
    }
}

#main-logo-container {
    background-color: transparent;
    border: 0;
    border-radius: var(--btn-radius);
    box-shadow: none;
    height: 130px;
    width: 230px;
    background-repeat: no-repeat;
    float: left;
    background-position: center center;
    margin-top: 10px;
    margin-left: 30px;
    overflow: hidden;
    transition: all ease-in-out .6s;
    background-image: url("../images/transparentlogo.png");
}
.modal-body .card .p-3{
    font-size:18px;
    color:black;
}

.rowindex {
    display: flex;
    justify-content: space-around; /* Adjust as needed */
    margin-top:30px;
}

    .rowindex img {
        width: 50px; /* Adjust the width as needed */
        height: 50px; /* Adjust the height as needed */
        margin-bottom: 10px; /* Add margin between the image and text */
    }

    .rowindex p {
        text-align: center;
    }

.alliance_container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.alliance_container_logo {
    width: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 900px) and (max-width: 1300px) {
    .alliance_container_logo {
        width: 17%;
    }
}

@media (max-width: 900px) {
    .alliance_container_logo {
        width: 34%;
        margin-bottom: 15px;
    }
}

.next-event {
    background-color: #ededed;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
}

.footer_container_all {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #14387f;
    color: var(--bs-white);
    flex-direction: row;
    z-index: 2;
}

.footer_container {
    width: 31%;
}

.logo_footer {
    width: 100%;
    max-width: 295px;
}

.footer_title{
    font-weight:600;
    margin-bottom: 0;
}

.footer_list {
    padding-left: 20px;
}

.social_container{
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.social_footer{
    width: 20%;
    max-width: 50px;
    min-width: 20px;
}

.footer_list .footer_link {
    font-size: 0.9em;
    color: white;
    text-decoration: none;
    opacity: 1;
}

.footer_list .footer_link:hover {
    opacity: 0.5;
}

.display-none-cell {
    display: flex;
}

.display-cell {
    display: none;
}

.container-wrapper {
    height: 100%;
}

.banner-container {
    position: relative; 
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
}

.left-text {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Set the text color to be visible against the background */
}

.icon_button{
    width: 18px;
    margin-right: 10px;
}

.icon_button_medium {
    width: 40px;
    margin-right: 10px;
}

.course-container{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: -150px !important;
    z-index: 2;
}

.summernote-container-all {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    justify-content: space-between;
}

.summernote-container {
    width: 49%;
    text-align: left;
}

.first-container {
    width: 64%;
    height: 100%;
    padding-top: 200px;
    order: 1;
}

.second-container {
    width: 33%;
    height: 100%;
    background-color: #e5e5e5;
    padding: 20px;
    border-radius: 10px;
    position: sticky;
    top: 20px;
    order: 2;
}

.text-align-right{
    text-align: right;
}

.float-right{
    float: right;
}

.edit_link {
    text-decoration: none;
    font-weight: 600;
    color: #14387f;
}

.edit_link:hover {
    color: #14387f;
    text-decoration: underline;
}

#payment-widget .modalContainer-pw {
    width: unset !important;
    height: unset !important;
    display: none;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.course-information-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px 0px 10px 10px;
    justify-content: space-around;
    flex-wrap: wrap;
    border-left: 7px solid #c90f0f;
    gap: 1%;
}

.information-container{
    display: flex;
    align-items: flex-start;
    width: 18%;
    min-width: 145px;
    margin: 10px 0;
}

    .information-container p {
        width: calc(100% - 50px);
    }

.square-area {
    height: 20px;
    width: 20px;
    background: #c90f0f;
    margin-right: 10px;
}

.price-text {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
}

.price-text-linethrough {
    color: #6c757d;
    text-decoration: line-through;
}

.faq {
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq_link {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    text-decoration: none;
}

.faq_link:hover h2 {
    text-decoration: underline;
}

.courses-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: -65px !important;
}

.courses-first-container {
    width: 300px;
    height: 100%;
    order: 1;
    background-color: #e5e5e5;
    padding: 20px;
    border-radius: 10px;
    position: sticky;
    top: 20px;
}

.courses-second-container {
    width: calc(100% - 320px);
    padding-top: 85px;
    height: 100%;
    order: 2;
}

.plans-second-container {
    width: calc(100% - 310px);
    padding-top: 60px;
    height: 100%;
    order: 2;
}

.min-width-285{
    min-width:285px;
}

.courses-first-container h2 {
    border-bottom: 1px solid #ffffff;
    padding-bottom: 15px;
}

.careernamewidth {
    width: calc(100% - 40px);
}

@media (max-width: 800px) {
    .display-none-cell {
        display: none;
    }

    .display-cell {
        display: flex;
    }

    .footer_container_all {
        flex-direction: column;
    }

    .footer_container {
        width: 100%;
    }

    .course-information-container {
        justify-content: flex-start;
        flex-direction: column;
    }

    .information-container {
        width: 100%;
        align-items: center;
    }

    .w-45to100 {
        width: 100%;
    }

    .course-container {
        margin-top: 0px!important;
        flex-direction: column;
    }

    .first-container {
        order: 2;
        width: 100%;
        padding-top: 0;
        margin-top: 50px;
    }

    .second-container {
        order: 1;
        width: 100%;
        position: relative;
    }

    .summernote-container-all{
        flex-direction: column;
    }

    .summernote-container{
        width: 100%;
    }
}

@media (max-width: 650px) {
    .courses-container {
        flex-direction: column;
        margin-top: 20px !important;
    }
    .courses-first-container{
        width: 100%;
        position: relative;
    }
    .courses-second-container{
        width: 100%;
        padding-top: 45px;
    }
    .plans-second-container {
        width: 100%;
        padding-top: 40px;
    }
    .pw-hr100{
        display:none;
    }
}

.button-margin-horizontal {
    margin-left: 105px;
    margin-right: 20px;
}

@media (max-width: 768px) {
    .button-margin-horizontal {
        margin-left: 0; /* Elimina el margen a la izquierda en pantallas pequeñas */
        margin-bottom: 10px; /* Agrega un margen inferior para separar los elementos */
    }

    .new-form-input {
        width: 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
    }
}

.hiddeninput {
    opacity: 0;
    position: absolute;
}
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: 40px;
    max-width: 400px;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
    margin: 0;
    padding: 9px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}

/*Microsoft button*/
.ms-signin-btn {
    background-color: #FFFFFF;
    color: #FFFFFF;
    font-family: "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #dadce0;
    padding: 0 12px;
    height: 41px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.ms-logo {
    width: 18px;
    height: 18px;
}

.ms-text {
    line-height: 1;
}

.ms-signin-btn,
.ms-signin-btn:hover,
.ms-signin-btn:visited,
.ms-signin-btn:focus,
.ms-signin-btn:active {
    color: #FFFFFF;
    text-decoration: none;
}

.password-wrapper {
    position: relative;
}

.toggle-password-btn {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password-btn svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;
}
.SpellingErrorV2Themed,
[style*="urlSpellingError"] {
    background-image: none !important;
    border-bottom: none !important;
}
.materials-full {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    display: flow-root;
}

.materials-full .note-editor {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
}

.materials-full .note-editable {
    min-height: 300px;
}

/* =====================================================
   Summernote - Corrección de estilos para Bootstrap 4
   y compatibilidad con Tailwind CSS v4
   ===================================================== */

/* Ocultar la flecha ::after de Bootstrap 4 dentro de Summernote */
.note-editor .dropdown-toggle::after {
    display: none !important;
}

/* Mejorar espaciado de botones en la barra de herramientas */
.note-editor .note-btn-group {
    margin-right: 5px;
}

.note-editor .note-btn {
    padding: 5px 8px;
}

/* Corregir overflow en botones (Tailwind v4 aplica overflow:clip a buttons) */
.note-editor .note-btn,
.note-editor button {
    overflow: visible !important;
}

/* Asegurar que los dropdowns de Summernote se muestren y puedan hacer scroll */
.note-editor .note-dropdown-menu {
    min-width: 100px;
    max-height: 300px;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Espaciado para los items del dropdown */
.note-editor .note-dropdown-item {
    padding: 5px 10px;
}

/* Asegurar que el contenedor del dropdown permita overflow */
.note-editor .note-btn-group {
    overflow: visible !important;
}

.note-editor .note-toolbar {
    overflow: visible !important;
}

/* Estilos para los modales de Summernote (insertar link, imagen, etc.) */
.note-modal .note-modal-content {
    overflow: visible !important;
}

.note-modal .note-modal-body {
    overflow: visible !important;
    padding-bottom: 60px !important;
}

.note-modal .note-modal-footer {
    position: absolute !important;
    bottom: 15px !important;
    right: 20px !important;
}

.materials-section {
    padding: 16px 0;
    border-top: 1px solid #e9ecef;
}
.materials-section a {
    text-decoration: underline;
}
.live-dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    margin-right: .25rem;
    flex: 0 0 5px;
    line-height: 0;
    vertical-align: middle;
    position: relative;
    display: inline-block;
}
.live-dot::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-origin: center;
    box-shadow: 0 0 0 0 rgba(255,255,255,.55);
    animation: livePulseXS .9s ease-out infinite;
}
@keyframes livePulseXS{
     0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(255,255,255,.55); }
     70%  { transform: scale(1); box-shadow: 0 0 0 3px rgba(255,255,255,0); }
     100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(255,255,255,0); }
 }
.alert-message-link {
    width: 33%;
    height: 100%;
    position: sticky;
    margin-top: 100px;
    order: 2;
}
@media (max-width: 800px) {
    .alert-message-link {
        order: 1;
        width: 100%;
        position: relative;
        margin-top: 20px;
    }
}
#chatWidgetButton {
    background-color: #002f75 !important;
}

#chatWidget {
    border: none !important;
}

.bg-cesa-blue {
    background-color: #002f75 !important;
}

@media (max-width: 576px) {
    #chatWidget {
        width: calc(100vw - 100px) !important;
        height: calc(100vh - 400px) !important;
        right: 50px !important;
        bottom: 50px !important;
        left: 50px !important;
    }

    #chatWidgetButton {
        bottom: 15px !important;
        right: 15px !important;
    }
}

/* Smooth scrolling for messages */
#chatMessages {
    scroll-behavior: smooth;
}

/* Input focus styling */
#chatInput:focus {
    box-shadow: none;
    background-color: #fff;
}

/* Send button hover effect */
#chatSendButton:hover {
    opacity: 0.9;
}

.conversemos-button {
    transition: all 0.3s ease;
}

.conversemos-button:hover {
    transform: translateX(-5px);
    box-shadow: -5px 4px 31px 0px rgba(75, 122, 201, 0.5);
}

@keyframes conversemosGlow {
    0%, 100% {
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 0px 15px 2px rgba(0, 65, 242, 0.5),
        0px 0px 30px 5px rgba(0, 65, 242, 0.2);
    }
    50% {
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 0px 20px 3px rgba(0, 65, 242, 0.7),
        0px 0px 40px 8px rgba(0, 65, 242, 0.3);
    }
}

@keyframes conversemosGlowWhite {
    0%, 100% {
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 0px 15px 2px rgba(255, 255, 255, 0.5),
        0px 0px 30px 5px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 0px 20px 3px rgba(255, 255, 255, 0.7),
        0px 0px 40px 8px rgba(255, 255, 255, 0.3);
    }
}