@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap);
:root {
  --body-font-family: "Tajawal", sans-serif;
  --main-color: #e31e27;
  --main-color-opacity: #e31e2721;
  --main-color-white: #fff;
  --second-color: #ec8f56;
  --bg-header: #eaeaea80;
}
#app.v-application .text-h1,
#app.v-application .text-h2,
#app.v-application .text-h3,
#app.v-application .text-h4,
#app.v-application .text-h5,
#app.v-application .text-h6,
#app.v-application .subtitle-1,
#app.v-application .subtitle-2,
#app.v-application .title,
#app.v-application .body-1,
#app.v-application .body-2,
#app.v-application .button,
#app.v-application .caption,
#app.v-application .overline {
  font-family: var(--body-font-family) !important;
  letter-spacing: 0px !important;
}
#app.v-application .bg-red {
  background-color: var(--main-color) !important;
  color: var(--main-color-white) !important;
}
#app.v-application .text-red {
  color: var(--main-color) !important;
}
.v-application--is-rtl .country-code-phone-input .v-select.v-text-field.v-text-field--enclosed > .v-input__control > .v-input__slot {
  padding: 0 12px !important;
}
.v-application--is-rtl .country-code-phone-input .phone-field .v-input__slot {
  border-radius: 14px !important;
}
.v-application--is-rtl .country-code-phone-input .country-field .v-input__slot {
  border-radius: 14px !important;
}
.country-code-phone-input {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.country-code-phone-input .v-select.v-text-field.v-text-field--enclosed > .v-input__control > .v-input__slot {
  padding-left: 0 !important;
  padding-right: 12px !important;
}
.country-code-phone-input .country-field {
  flex: 1;
}
.country-code-phone-input .phone-field {
  flex: 1;
}
.country-code-phone-input .country-field .v-input__slot,
.country-code-phone-input .phone-field .v-input__slot {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid #e7e7e7 !important;
  box-shadow: none !important;
  transition: 0.25s;
}
.country-code-phone-input .country-field.v-input--is-focused .v-input__slot,
.country-code-phone-input .phone-field.v-input--is-focused .v-input__slot {
  border-color: var(--main-color) !important;
  box-shadow: 0 0 0 4px var(--main-color-opacity) !important;
}
.country-code-phone-input .country-field .v-icon,
.country-code-phone-input .phone-field .v-icon {
  color: var(--main-color) !important;
}
.country-code-phone-input .country-field input,
.country-code-phone-input .phone-field input {
  color: #222 !important;
  font-weight: 600;
}
.country-code-phone-input .country-field .v-label,
.country-code-phone-input .phone-field .v-label {
  color: #888 !important;
  font-weight: 600;
}
.v-autocomplete:not(.v-input--is-disabled).v-select.v-text-field input {
  padding: 0 10px !important;
}
@media (max-width: 600px) {
.country-code-phone-input {
    gap: 8px;
}
.country-code-phone-input .country-field {
    flex: 0 0 110px;
}
}