
	#LoginDropdownPage{
		display:none;
		overFlow:auto !important;
		background:rgb(249, 249, 249) !important;
	}
	#loginDropdownPreviewWrapper {
		display:none;
		width:100%;
		height:100%;
		position:absolute;
		justify-content: center;
		align-items: center;
	}
	
	#loginDropdownPreviewWrapper .dropdown-menu{
		background:none;
		background-color: #ffffff;
		position: absolute;
	}
	
	#loginDropdownPreviewWrapper #dropdownMenuButton{
		/* the default value from user agent stylesheet */
		width: 241px;
		height: 47px;
		padding: 10px 15px 10px 15px;
		border-radius: 4px !important;
		border: 1px solid #6F6F6F;
		font-size: 15px !important;
		font-weight: 400 !important;
		color: #4D4D4D;
	}
	
	#loginDropdownPreviewWrapper #loginDropdownPreview{
		background-color: white;
	    padding: 55px 50px;
	    box-shadow: 0px 4px 4px 0px #00000026;
	    width: 550px;
	    height: auto;
	    min-height: 425px;
	    max-width: 550px;
	    min-width: 550px;
	    border-radius: 3px !important;
	}

	#authenticationIcon{
		margin-top: 30px;
		content: url(/Dashboard/icons/AuthenticateIcon.svg);
		width: 274px;
		height: 135.56px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	#authenticationTitle{
    	font-size: 20px;
		margin-top: 20px;
    	font-weight: 600;
   		line-height: 23.87px;
    	color: black;
    	display: flex;
		justify-content: center;
	}

	#loginDropdownPreviewWrapper ul.nav{
   		position:relative;
   		margin:auto;
   		width:100%;
   		text-align:center;
   		margin-top:-4%;
	}
	
	#loginDropdownPreviewWrapper a#loginBtn{
		margin:auto !important;
	}
	
	#loginDropdownPreviewWrapper #authenticationRequiredMessage {
		color: black;
	    position: relative;
	    width: 100%;
	    font-size: 16px;
	    font-weight: 400;
	    line-height: 17.9px;
	    margin-bottom: 21px;
	    margin-top: 16px;
	    overflow: visible;
	    display: flex;
		justify-content: center;
		text-align: center;
    }
    
    #loginDropdownPreviewWrapper .dropdown-item {
	    text-align: left;
		padding: 10px 15px 10px 15px;
		border-bottom: 1px solid #6F6F6F;
		color: #4D4D4D;
		font-size: 15px;
		font-weight: 400;
		cursor: pointer;
    }
	#loginDropdownPreviewWrapper .dropdown-item:hover {
		background-color: #F5F5F5;
    }
    /* Styles from default button that should be applied when viewing from Portal Auth*/
    #loginDropdownPreviewWrapper a#loginBtn {
		min-height: 30px;
		max-width: 200px;
    }
    
    #loginDropdownPreviewWrapper a#loginBtn span {
		line-height: 32px;
    }

    #loginDropdownPreviewWrapper ul.nav{
		display: flex;
	    align-items: center;
	    justify-content: center;

	}

	@media (max-width: 500px) {
		#loginDropdownPreviewWrapper #authenticationRequiredMessage {
			padding-right: 30px;
			padding-left: 30px;
    	}

		#loginDropdownPreviewWrapper ul.nav{
			flex-direction: column;
		}
	}

	#loginDropdownPreviewWrapper .dropdown-menu
	{
		border: 1px solid #6F6F6F;
		z-index: 10000;
	    max-width: 241px;
	    overflow: visible;
		margin-top: 0px;
		border-top-left-radius: 0px !important;
		border-top-right-radius: 0px !important;
		padding: 0px !important;
	}

	#loginDropdownPreviewWrapper .dropdown-menu:last-child
	{
		border-bottom: none;
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	#loginDropdownPreviewWrapper ul.nav button{
		text-overflow: ellipsis;
		overflow: hidden;
		border-radius: 4px !important;
		margin: auto 10px;
		width: 120px;
		height: 47px;
		padding: 10px;
		border: 2px solid #42296E;
		font-size: 15px;
		font-weight: 600;
		color: #42296E;
	}

	#loginDropdownPreviewWrapper .dropdown-item {
	     width: 100%; 
	   }

.textOverFlowAuthTooltip {
  color: white;
  text-wrap-mode: nowrap;
  position: absolute;
  background: rgba(0, 0, 0, 0.89);
  border-radius: 5px !important;
  padding: 10px;
  z-index: 1;
  display: none;  /* Initially hidden */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  left: 100%;
  top: auto;
  transform: translateX(-50%) translateY(-16px);
  transition: opacity 0.3s ease;
}

/* Arrow for the attempts tooltip */
.textOverFlowAuthTooltip::after {
  content: "";
  position: absolute;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #4C4C4C transparent;
  top: 15px; /* Center the arrow vertically */
  left: -4px; /* Position the arrow on the left side */
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(0, 0, 0, 0.89) transparent transparent;
}
.dropdown-item:hover .textOverFlowAuthTooltip {
  display: block;  /* Show tooltip */
  visibility: visible;
  opacity: 1;
}

#loginDropdownPreviewWrapper ul.nav button:focus-visible {
    color: var(--btn-default-background-color, #fff) !important;
    background-color: var(--btn-default-color, #42296E) !important;
}
