#nav-login a {
  background-color: #258800;
  color: white;
  display: none;
}

#nav-login a:hover {
  background-color: white;
  color: #258800;
  border: 1px solid #258800;
}

#nav-login a svg {
  fill: currentColor;
}

#nav-user a {
  background-color: #258800;
  color: white;
}

#nav-user a svg {
  fill: currentColor;
}

.nav-item-dropdown .common-user .common-user-wrap {
  position: relative;
  z-index: 1001;
  min-width: 15rem;
  padding: 0em;
  background-color: #fff;
  border-radius: 0.5em;
  box-shadow: 0 2px 15px 1px rgba(163, 163, 163, 0.2);
}


.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item {
  white-space: nowrap;
  overflow: hidden;
  padding: 0.75em 0.75em 0.25em 0.75em;
}
.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.first{
  padding-bottom: 0;
}
.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.second{
  padding-top:0;
}
.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.disabled {
  pointer-events:none;
  opacity:0.6; 
}

.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.logout {
  border-top: solid 1px #ccc;
  padding: 0;
}

.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.logout button {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 0;
  padding-top: 5px;
  padding-bottom: 10px;
}
.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item.logout button:hover {
  background-color: #f0f0f0;
}
.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item .mail-addr {
   display:inline-block; 
   text-overflow:ellipsis;
   overflow:hidden; 
   width:100%;
}

.nav-item-dropdown .common-user .common-user-wrap .dropdown-menu-item .mail-addr svg{
  margin-right:8px;
}

#modal-login {
  width: 50%;
  min-width: 620px;
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 4em 6em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#modal-login .modal-login-button {
  width: 100%;
  border: solid 1px #BEBEBE;
  border-radius: 2em;
  font-size: 22px;
  font-weight: 500;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  background-color: white;
}
#modal-login .modal-login-button img {
  width:20px;
  height:20px;
  margin-right: 10px;
}
.modal-login-or {
  display: table;
  width: 100%;
  white-space: nowrap;
  border-spacing: .2rem 0;
  color: #BEBEBE;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-login-or:before,
.modal-login-or:after {
  display:table-cell;
  content: '';
  width: 50%;
  background: -webkit-linear-gradient(#BEBEBE, #BEBEBE) repeat-x left center;
  background: linear-gradient(#BEBEBE, #BEBEBE) repeat-x left center;
  background-size: 0.1rem 0.1rem;
}

#modal-login .modal-login-title {
  width: 100%;
  font-size: 24px;
  font-weight: 500;
  padding-top: 10px;
}

#modal-login p {
  width: 100%;
  text-align: left;
}

#modal-login ul {
  width: 100%;
  text-align: left;
  padding: 0;
  list-style: none;
}

#modal-login ul li::before{
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGZpbGw9IiMyNTg4MDAiPjxwYXRoIGQ9Im0zNDQtNjAtNzYtMTI4LTE0NC0zMiAxNC0xNDgtOTgtMTEyIDk4LTExMi0xNC0xNDggMTQ0LTMyIDc2LTEyOCAxMzYgNTggMTM2LTU4IDc2IDEyOCAxNDQgMzItMTQgMTQ4IDk4IDExMi05OCAxMTIgMTQgMTQ4LTE0NCAzMi03NiAxMjgtMTM2LTU4LTEzNiA1OFptOTQtMjc4IDIyNi0yMjYtNTYtNTgtMTcwIDE3MC04Ni04NC01NiA1NiAxNDIgMTQyWiI+PC9wYXRoPjwvc3ZnPg==);
  display: inline-block;
  width: 16px; /* Adjust size as needed */
  height: 16px; /* Adjust size as needed */
  vertical-align: sub;
  margin-right: 5px; /* Adjust spacing as needed */
}
.vgp-turnward {
   transform: rotate( 180deg );
}