:root {
    --mapna-border-color: #9e9e9e;
    --mapna-loading-background: #ffffffcc;
    --mapna-submit-background: #03B962;
    --mapna-submit-text-color: #ffffff;
    --mapna-alert-color-error: #dc2626;
    --mapna-alert-color-success: #03B962;
}

.mapna-shortcode-login {max-width: 450px;margin-inline: auto;}
.mapna-login-logo {text-align: center;}
.mapna-login-container {border: 1px solid var(--mapna-border-color);border-radius: 7px;position: relative; margin: 0px 12px;}
.mapna-login-loading {width: 100%;position: absolute;inset: 0;justify-content: center;align-items: center;background: var(--mapna-loading-background);display: none;border-radius: 7px;z-index: 1}
.mapna-login-loading svg {width: 50px;}
.mapna-login-loading.active {display: flex;}
.mapna-login-form {padding: 20px 20px; font-family:inherit;}
.mapna-login-form .mapna-form-heading {text-align: center;}
.mapna-form-field {margin-bottom: 20px;position: relative;}
.mapna-field-mobile button {position: absolute;inset: 5px auto 5px 5px;line-height: 0;width: 80px;}
.mapna-form-field.hide,.mapna-form-field .hide, .hide {display: none}
.mapna-form-field.mapna-field-honeypot {display: none;}
.mapna-field-submit button {width: 100%;background-color: var(--mapna-submit-background);cursor: pointer;border: none;color: var(--mapna-submit-text-color);}
.mapna-field-submit button:is(:hover,:focus){background-color: var(--mapna-submit-background);}
.mapna-field-submit button.invalid {opacity:0.7;cursor: no-drop;background-color: rgb(109 110 113);}
.mapna-field-code .reset-code {position: absolute;inset: 5px auto 5px 5px;line-height: 0;}
.mapna-field-code .reset-code .reset-button {padding: 3px 5px;width: 80px;}
.mapna-login-alert {margin-bottom: 15px;font-weight: 500}
.mapna-login-alert.error {color: var(--mapna-alert-color-error);}
.mapna-login-alert.success {color: var(--mapna-alert-color-success);}.mapna-form-field.mapna-field-code input {
    font-size: 14px;
}
.alert-box {
  display: flex; 
  align-items: flex-start;
  background-color: #fff5c4; 
  border: 1px solid #ffe59a; 
  color: #5a5a5a; 
  padding: 15px;
  border-radius: 5px; 
  font-size: 14px; 
  line-height: 1.7;
  margin: 10px 0;
}

.alert-icon {
  font-size: 14px;
  color: #5a5a5a;
  margin-right: 10px; 
  width: 25px;
  height: 18px;
  border: 1px solid #5a5a5a;
  border-radius: 50%; 
  display: flex;
  align-items: center; 
  justify-content: center;
  text-align: center;
}


.alert-message {
  text-align: center; 
  direction: rtl;
}

.alert-message strong {
  color: #333;
  font-weight: bold;
}