.elementor-18993 .elementor-element.elementor-element-033ef23{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-18993 .elementor-element.elementor-element-f821464.elementor-element{--align-self:center;}.elementor-18993 .elementor-element.elementor-element-75b243a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-75b243a */#header-right-container {
    /* Variables */
    --desp-background-color: #0D1527;
    --desp-font-color: #FFFFFF;
    --desp-hover-color: #7A7A7A;
    --desp-purple-color: #EF2B89;
    --desp-violet-color: #7B34DB;
    --desp-frame-grey-color: #B7B7B7;
    --desp-darkgrey-color: #3C3C3C;
    --desp-frame-hover-color: #1E2637;
    --desp-frame-background-color: #0D1527BB;
    --desp-font-size: 16px;
    --desp-frame-font-size: 16px;
    --header-username-max-width: 200px;
    --header-height: 64px;
    --header-logo-width: 72px;
    --header-logo-height: 36px;
    --header-icon-height: 24px;
    --header-user-icon-height: 18px;
    --header-padding: 20px;
    --link-padding: 16px;
    position: relative;
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--header-padding);
}



.wnbell-dropdown, .wnbell-dropdown-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#notification-dropdown-box {
    position: fixed;
    right: -480px;
    top: 64px;
    border-radius: 5px 0 0 5px;
    width: 480px;
    max-width: 480px;
    max-height: 100vh;
    height: 100vh;
    background-color: #0d1527;
    box-shadow: -30px 0px 150px 10px #0008;
    z-index: 999999;
    transition: right 250ms ease-in-out;
    
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
#notification-dropdown-box::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
#notification-dropdown-box .wnbell_header {
    margin-left: 16px;
    font-size: 18px;
    color: white;
}
.notification-item-container {
    height: auto;
}
.notification-item-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: white;
}
.notification-item-container img {
    max-width: 100%;
    width: 100%;
    margin: 0;
    z-index: 999999;
    transition: transform 250ms ease-in-out;
}
.notification-item-container img:hover {
    transform: scale(1.1);
}
.notification-item-container .notification-post-title {
    margin-top: -20px;
    width: 90%;
    background-color: #0c1529;
    padding: 10px 16px;
    font-size: 18px;
    color: white;
    line-height: 20px;
    z-index: 1000000;
    
    transition: color 250ms ease-in-out;
}
.notification-item-container .notification-post-title:hover {
    color: #ef2b89;
}
.notification-item-container .notification-post-excerpt {
    width: 90%;
    background-color: #0c1529;
    padding: 5px 16px 20px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    line-height: 20px;
    z-index: 1000000;
}

#wnbell_empty_box_id {
    color: white;
}

#header-right-container .elementor-widget-html {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#header-right-container .elementor-widget-html .elementor-widget-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: calc(var(--header-padding) + 10px);
}


#login-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
}


#login-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--header-padding) * 2);
    border-radius: calc(var(--header-logo-height) / 2);
    height: var(--header-logo-height);
    background: linear-gradient(90deg, var(--desp-purple-color) 0%, var(--desp-purple-color) 40%, var(--desp-violet-color) 60%, var(--desp-violet-color) 100%);
    background-size: 400% 100%;
    animation: violet-to-mix 250ms ease-in-out forwards;
    cursor: pointer;
}
#login-div:hover {
    animation: mix-to-violet 250ms ease-in-out forwards;
}
.login-a {
    display: flex;
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--header-padding);
}
.login-icon {
    width: var(--header-user-icon-height);
    height: var(--header-user-icon-height);
    color: var(--desp-font-color);
    padding: 0;
    margin: 0;
}
.login-text {
    max-width: var(--header-username-max-width);
    font-size: var(--desp-font-size);
    color: var(--desp-font-color);
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



#header-user-frame {
  position: absolute;
  display: none;
  top: var(--header-height);
  flex-direction: column;
  width: 200px;
  left: 0px;
  padding: 0;
  margin: 0;
  background-color: var(--desp-frame-background-color);
  gap: 0px;
  font-size: var(--desp-frame-font-size);
}
#header-user-frame.visible {
    display: flex;
}

.frame-link {
    text-decoration: none;
    padding: 11px var(--link-padding);
    margin: 0;
    transition: color 250ms ease-in-out;
    cursor: pointer;
}
.frame-link:link {
    color: var(--desp-frame-grey-color);
}
.frame-link:visited {
    color: var(--desp-frame-grey-color);
}
.frame-link:hover {
    background-color: var(--desp-frame-hover-color);
    color: var(--desp-hover-color);
}




#menu-icon-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#menu-icon {
    width: var(--header-logo-height);
    height: var(--header-logo-height);
    transition: color 250ms ease-in-out;
}
#menu-icon:hover {
    color: var(--desp-hover-color);
}
body.logged-in .not-logged {
    display: none;
}
body:not(.logged-in) .logged {
    display: none;
}

@keyframes mix-to-violet {
    0% {
		background-position: 50% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}
@keyframes violet-to-mix {
    0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 50% 50%;
	}
}

@media only screen and (max-width: 1024px) {
    #header-menu {
        display: none;
    }
    #notification-bell-icon {
        display: none;
    }
}
@media only screen and (min-width: 1025px) {
    #menu-icon-container {
        display: none;
    }
}
@media only screen and (max-width: 1339px) {
    .login-text {
        display: none;
    }
    #login-div {
        padding: 0 9px;
    }
    #header-user-frame {
        left: auto;
        right: -20px;
    }
    
    #header-menu {
        max-width: 640px;
    }
    #header-menu .elementor-widget-container {
        width: 640px;
        max-width: 640px;
    }
}
@media only screen and (min-width: 1340px) {
    body.logged-in .login-text.logged {
        display: flex;
    }
    body:not(.logged-in) .login-text.not-logged {
        display: flex;
    }
}/* End custom CSS */