.header-dropdown-menu {
    float: left;
    background-color: #0a4977 !important;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); /*Adds a drop shadow*/
    z-index: 999;
    top: auto !important;
    -webkit-user-select: none; /* Safari */
    right: 2vw;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    position: fixed !important;
}

.header-dropdown-content-inner {
    width: 80%;
    margin: auto auto;
    padding-top: 10%;
    padding-bottom: 10%;
}

.header-dropdown-content:after {
    content: ''; /* Required to display content */
    position: absolute; /* Sets the position absolute to the top div */
    bottom: 100%;
    left: 187px; /* position the little arrow */
    margin-left: -15px;
    margin-top: -15px; /* Set margin equal to border px */
    width: 0;
    z-index: 1;
    height: 0;
    border-bottom: solid 15px #0a4977; /* Creates the arrow pointing up, to change to a notch instead user border-top */
    border-left: solid 15px transparent; /* Creates triangle effect */
    border-right: solid 15px transparent; /* Creates triangle effect */
}

/* Style the links inside the dropdown */
.header-dropdown-content a {
    float: none;
    color: #ffff !important;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: Poppins;
    font-weight: normal;
    font-size: large;
}

.header-dropdown-header {
    font-weight: 600 !important;
}
/* Change the opacity of the topnav links on hover, do whatever styling you want. */
.topnav a:hover, .dropdown:hover .dropbtn {
    opacity: .7;
}

/* Change the opacity of the drop down menu links on hover, do whatever styling you want. */
.header-dropdown-content a:hover {
    color: #94d0ff !important;
}

/* Keep the opacity same of the drop down menu header on hover*/
.header-dropdown-content .dropdown-header:hover {
    opacity: 1;
    color: #fff !important;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.header-dropdown:hover .header-dropdown-content {
    display: block;
}

.avatar-img {
    width: 35px;
    border-radius: 50%;
    vertical-align: middle;
    background: white;
}

.dropdown-toggle::after {
    content: none;
}

.profile-image {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50px;
}

.hamburger-image {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50%;
}

.profile-image-div {
    margin-left: 10px;
    position: relative;
    width: 55px;
    height: 55px;
}

    .profile-image-div::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 68px;
        padding: 2px;
        background: linear-gradient(90deg,rgb(255, 255, 255),#0a58ca);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.hamburger-image-div {
    position: relative;
    width: 55px;
    height: 55px;
}

    .hamburger-image-div::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 68px;
        padding: 6px;
        background: linear-gradient(90deg,rgb(255, 255, 255),#0a58ca);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.large-screen-header-left-margin {
    margin-left: 1.5vw;
    padding: 0px;
}

.course-header-logout-button {
    background-color: grey !important;
    border-radius: 50%;
    padding: 14px !important;
    width: 49px;
    height: 49px
}

.course-header-videolecciones-button {
    font-family: 'Poppins', sans-serif;
    color: #ffff !important;
    font-weight: 400 !important;
    background-color: #0064b2 !important;
    border-radius: 30px;
    padding: 7px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 22px;
}

.course-header-login-button {
    font-family: 'Poppins', sans-serif;
    color: #ffff !important;
    font-weight: 400 !important;
    background-color: #080404 !important;
    border-radius: 30px;
    padding: 7px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    font-size: 22px;
}

.videolecciones-icon {
    width: 25px;
    height: 20px;
    margin-right: 5px;
}

.logout-icon {
    width: 21px;
}

.whatsapp-icon {
    height: 49px;
    width: 49px;
}

.hamburger-display-center {
    margin: 0px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.hamburger-button-prop {
    width: 50%;
    font-size: 20px;
}

.hamburger-cross {
    font-size: 34px;
    display: flex;
    align-items: center;
}

.name-text {
    color: black;
    margin-right: -15px;
    z-index: 0;
}

.welcome-text-tablet {
    white-space: nowrap;
    display: none;
}

.dynamic-width {
    width: 4.5vw !important;
}

.dynamic-padding {
    padding-right: 5vw;
}

@media (min-width: 991.98px) and (max-width:1165px) {
    .course-header-logout-button {
        background-color: grey !important;
        border-radius: 50%;
        padding: 9px !important;
        width: 40px;
        height: 40px
    }

    .course-header-videolecciones-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 400 !important;
        background-color: #0064b2 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 16px;
    }

    .course-header-login-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 400 !important;
        background-color: #080404 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        font-size: 16px;
    }

    .whatsapp-icon {
        height: 40px;
        width: 40px;
    }
}

@media (max-width: 575.98px) {
    .welcome-text {
        display: none;
    }

    .welcome-text-select-profile {
        display: none;
    }

    .white-logo {
        width: 50vw;
    }

    .white-logo-no-login {
    }

    .profile-image {
        width: 40px !important;
        height: 40px !important;
    }

    .profile-image-div {
        position: relative;
        width: 40px;
        height: 40px;
    }

    .hamburger-image-div {
        position: relative;
        width: 22vw;
        height: 22vw;
        padding-left: 0px;
    }

    .hamburger-image {
        width: 22vw !important;
        height: 22vw !important;
    }

    .course-header-logout-button {
        font-family: 'Poppins', sans-serif;
        color: #fff !important;
        font-weight: 500 !important;
        background-color: grey !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 3.5vw !important;
    }

    .course-header-videolecciones-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 500 !important;
        background-color: #0064b2 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 3.5vw !important;
    }

    .course-header-login-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 500 !important;
        background-color: #080404 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        font-size: 3.5vw !important;
    }    

    .course-header-whatsapp-button {
        font-family: 'Poppins', sans-serif;
        color: #fff !important;
        font-weight: 500 !important;
        background-color: #69BF60ff;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 3.5vw !important;
    }

    .whatsapp-icon-burger {
        width: 5.8vw;
        height: 5.3vw;
        float: left;
    }    
}

@media (min-width: 575.98px) and (max-width: 991.98px) {
    img.watermark {
        opacity: 0.1;
        width: 76% !important;
        margin-right: 0%;
        top: -52vw !important;
        z-index: -1;
    }

    .white-logo {
    }

    .white-logo-no-login {
    }

    .header-profile-image {
        flex: auto;
    }

    .course-header-logout-button {
        background-color: grey !important;
        border-radius: 50%;
        padding: 7px !important;
        width: 36px;
        height: 36px
    }

    .course-header-videolecciones-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 400 !important;
        background-color: #0064b2 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 8px !important;
    }

    .course-header-login-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 400 !important;
        background-color: #080404 !important;
        border-radius: 30px;
        padding: 11.5px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        font-size: 8px !important;
    }

    .name-text {
        color: black;
        margin-right: -15px;
        z-index: 0;
        font-size: 9px;
    }

    .welcome-text-tablet {
        white-space: nowrap;
        display: inline-block;
    }

    .welcome-text {
        display: none;
    }

    .whatsapp-icon {
        height: 36px;
        width: 36px;
    }
}

@media (max-width: 575.98px) {
    .mobile-font-size-larger {
        font-size: larger;
    }

    .mobile-font-size-medium {
        font-size: medium;
    }

    .mobile-font-size-small {
        font-size: small;
    }

    img.watermark {
        opacity: 0.1;
        width: 100% !important;
        top: -78vw !important;
        z-index: -1;
    }

    .welcome-text-tablet {
        white-space: nowrap;
        display: none;
    }

    .whatsapp-icon {
        height: 40px;
        width: 40px;        
    }

    .header-profile-image-course {        
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .large-screen-header {
        display: none !important;
    }

    .navbar-parent {
        display: flex !important;
    }

    .mobile-header-hamburger {
        padding-bottom: 500%;
    }

    .profile-image-hamburger {
    }

    .logout-icon {
        width: 5.8vw;
        height: 5.3vw;
        float: left;
    }

    .videolecciones-icon {
        width: 6vw;
        height: 5vw;
        float: left;
    }

    .welcome-text-mobile {
        font-size: 5.5vw;
    }
}

@media (min-width: 575.98px) {
    .mobile-screen-header {
        display: none !important;
    }

    .navbar-parent {
        display: none !important;
    }
}

@media (max-width: 1230px) {
    .dynamic-padding {
        padding-right: 7.5vw;
    }
}

@media (max-width: 850px) {
    .dynamic-padding {
        padding-right: 9.5vw;
    }
}

@media (max-width: 575px) {
    .dynamic-padding {
        padding-right: 10.5vw;
    }
}

@media (max-width: 400px) {
    .dynamic-padding {
        padding-right: 14vw;
    }

    .course-header-login-button {
        font-family: 'Poppins', sans-serif;
        color: #ffff !important;
        font-weight: 500 !important;
        background-color: #080404 !important;
        border-radius: 30px;
        padding: 7px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 3.5vw !important;
    }
}
@media (max-width: 300.98px) {
    .mobil-logo {
        margin-right: 0.3rem;
    }
}