.alert-danger {
    background-color: black !important;
}
button#save-btn {
    background: #5c47de;
}
#save-btn {
  position: relative;
  overflow: hidden;
  padding: 10px 10px !important;  /* center text vertically */
  font-family: "Merriweather Sans", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--e-global-color-0ae1c84);
  background-color: #5C47DE; /* from your last update */
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center; /* center text horizontally */
  z-index: 1;
  padding: 0; 
  line-height: 24px !important;  

  /* clip-path shape */
  clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  --path: 0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%;
  --path-radius: 5;
  margin: 0.5em;
  transition: color 0.5s;
}
#save-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% + 130px);
  width: 100%;
  padding: 12px 30px !important;
  background: linear-gradient(to top left, #1D164A 50%, transparent 50.1%) bottom right,
              linear-gradient(to bottom right, #1D164A 50%, transparent 50.1%) top left;
  background-size: 0 0;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: -1;
}
#save-btn:hover:before {
  background-size: 100% 100%;
}
.profile-card {
    border: none;
    border-radius: 10px;
    padding: 40px 50px !important;
    max-width: 1200px !important;
    margin: 100px auto 370px;
    background-color: #141A23;
}
@media screen and (min-width: 550px) and (max-width:800px) {
.account-btns {
    margin-top: 25px;
}
 .row.vercenter {
        flex-direction: column;
    }
}
.row.vercenter .col-md-2{
	Width :0px !important
}
.row.vercenter {
  display: flex !important;
 /* justify-content: center !important;  centers horizontally */
  align-items: center !important;     /* centers vertically */
}
.img_tag {
  width: 200px !important;
  height: 200px!important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px #15f4eeaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.img_tag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s ease-in-out;
}
.opzpoints input {
    font-weight: bold;
    color: #00ffff;
}
@media (max-width: 500px) {
	.account-btns {
		margin-top: 25px;
	}
    .profile-card {
        padding: 20px;
    }
    .row.vercenter, .row.second {
        flex-direction: column;
    }
	.account-btns {
		flex-wrap: wrap !important;
	}
}
.img_tag {
  width: 200px !important;
  height: 200px!important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px #15f4eeaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.img_tag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s ease-in-out;
}
/* Optional hover effect */
.img_tag img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #00eaffcc;
}
.form-group input.form-control,
.form-group input.form-control[disabled],
.form-group input.form-control[readonly] {
  width: 100% !important;
  background-color: #1F2730 !important;
  color: #eee !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  cursor: text !important;
}
/* Disabled inputs */
.form-group.uneditable input.form-control[disabled] {
  background-color: #1F2730 !important;
  color: #777 !important;
  border-color: #333 !important;
  cursor: not-allowed !important;
}
.form-group.editable input.form-control:focus {
    border-color: #5c47de !important;
    outline: none !important;
    background-color: #292929 !important;
    box-shadow: 0 0 8px #5c47de !important;
    color: #eee !important;
}
/* Placeholder color */
.form-group input.form-control::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}
/* Editable small text */
.form-text.editable {
  font-size: 12px !important;
  color: #4caf50 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}
.profile-card {
    border: none;
    border-radius: 10px;
    padding: 40px 50px !important;
    max-width: 1200px !important;
    margin: 100px auto 370px;
    background-color: #141A23;
}
 .myaccountbutton,
.chagepass.button {
  position: relative;
  overflow: hidden;
  padding: 10px 10px !important;  /* center text vertically */
  font-family: "Merriweather Sans", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--e-global-color-0ae1c84);
  background-color: #5C47DE; /* from your last update */
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center; /* center text horizontally */
  z-index: 1; /* changed to 1 to match .btn-ug a */
  padding: 0; 
  line-height: 24px !important;  
  /* Added clip-path and related styles */
  clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  --path: 0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%;
  --path-radius: 5;
  width: 100% !important;
  margin: 0.5em;
  transition: color 0.5s;
}
.myaccountbutton:before,
.chagepass.button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% + 130px);
  width: 100%;
  padding: 12px 30px !important;
  background: linear-gradient(to top left, #1D164A 50%, transparent 50.1%) bottom right,
              linear-gradient(to bottom right, #1D164A 50%, transparent 50.1%) top left;
  background-size: 0 0;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.myaccountbutton:hover:before,
.chagepass.button:hover:before {
  background-size: 100% 100%;
}
a.chagepass{
    background-color: #5c47de !important;
   
}
#myconvertpoints {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    font-family: "Merriweather Sans", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--e-global-color-0ae1c84, #5C47DE);
    background-color: #5C47DE !important;
    border: none;
    cursor: pointer;
    display: block;
    text-align: center;
    z-index: 1;
    line-height: 24px !important;
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    width: 170px !important;
    margin: 36px 0px  !important;
    transition: color 0.5s;
    padding: 15px 20px !important;
}
/* Gradient hover background effect */
#myconvertpoints::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(100% + 130px);
    width: 100%;
    background: linear-gradient(to top left, #1D164A 50%, transparent 50.1%) bottom right,
                linear-gradient(to bottom right, #1D164A 50%, transparent 50.1%) top left;
    background-size: 0 0;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: -1;
}
/* On hover, fill the background */
#myconvertpoints:hover::before {
    background-size: 100% 100%;
}
/* Responsive fix for mobile */
@media screen and (max-width: 800px) {
    #myconvertpoints {
        width: 100% !important;
        margin: 0.5em 0 !important;   
    }
}