.dismissButton {
      background-color: #fff;
      border: 1px solid #dadce0;
      color: #1a73e8;
      border-radius: 4px;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      height: 36px;
      cursor: pointer;
      padding: 0 24px;
    }

    .dismissButton:hover {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:focus {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:focus:not(:focus-visible) {
      background-color: #fff;
      border: 1px solid #dadce0;
      outline: none;
    }

    .dismissButton:focus-visible {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:hover:focus {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:hover:focus:not(:focus-visible) {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:hover:focus-visible {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:active {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
      box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .dismissButton:disabled {
      background-color: #fff;
      border: 1px solid #f1f3f4;
      color: #3c4043;
    }


    @keyframes beginBrowserAutofill {
      0% {}

      to {}
    }

    @keyframes endBrowserAutofill {
      0% {}

      to {}
    }

    .pac-container {
      background-color: #fff;
      position: absolute !important;
      z-index: 1000;
      border-radius: 2px;
      border-top: 1px solid #d9d9d9;
      font-family: Arial, sans-serif;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
    }

    .pac-logo:after {
      content: "";
      padding: 1px 1px 1px 0;
      height: 18px;
      box-sizing: border-box;
      text-align: right;
      display: block;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: 120px 14px;
    }

    .hdpi.pac-logo:after {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png);
    }

    .pac-item {
      cursor: default;
      padding: 0 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 30px;
      text-align: left;
      border-top: 1px solid #e6e6e6;
      font-size: 11px;
      color: #515151;
    }

    .pac-item:hover {
      background-color: #fafafa;
    }

    .pac-item-selected {
      background-color: #ebf2fe;
    }

    .pac-item-selected:hover {
      background-color: #ebf2fe;
    }

    .pac-matched {
      font-weight: 700;
    }

    .pac-item-query {
      font-size: 13px;
      padding-right: 3px;
      color: #000;
    }

    .pac-icon {
      width: 15px;
      height: 20px;
      margin-right: 7px;
      margin-top: 6px;
      display: inline-block;
      vertical-align: top;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
      background-size: 34px;
    }

    .hdpi .pac-icon {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png);
    }

    .pac-icon-search {
      background-position: -1px -1px;
    }

    .pac-item-selected .pac-icon-search {
      background-position: -18px -1px;
    }

    .pac-icon-marker {
      background-position: -1px -161px;
    }

    .pac-item-selected .pac-icon-marker {
      background-position: -18px -161px;
    }

    .pac-placeholder {
      color: gray;
    }

    .pac-target-input:-webkit-autofill {
      animation-name: beginBrowserAutofill;
    }

    .pac-target-input:not(:-webkit-autofill) {
      animation-name: endBrowserAutofill;
    }


    .dismissButton {
      background-color: #fff;
      border: 1px solid #dadce0;
      color: #1a73e8;
      border-radius: 4px;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      height: 36px;
      cursor: pointer;
      padding: 0 24px;
    }

    .dismissButton:hover {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:focus {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:focus:not(:focus-visible) {
      background-color: #fff;
      border: 1px solid #dadce0;
      outline: none;
    }

    .dismissButton:focus-visible {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:hover:focus {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:hover:focus:not(:focus-visible) {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:hover:focus-visible {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:active {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
      box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .dismissButton:disabled {
      background-color: #fff;
      border: 1px solid #f1f3f4;
      color: #3c4043;
    }


    @keyframes beginBrowserAutofill {
      0% {}

      to {}
    }

    @keyframes endBrowserAutofill {
      0% {}

      to {}
    }

    .pac-container {
      background-color: #fff;
      position: absolute !important;
      z-index: 1000;
      border-radius: 2px;
      border-top: 1px solid #d9d9d9;
      font-family: Arial, sans-serif;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
    }

    .pac-logo:after {
      content: "";
      padding: 1px 1px 1px 0;
      height: 18px;
      box-sizing: border-box;
      text-align: right;
      display: block;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: 120px 14px;
    }

    .hdpi.pac-logo:after {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png);
    }

    .pac-item {
      cursor: default;
      padding: 0 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 30px;
      text-align: left;
      border-top: 1px solid #e6e6e6;
      font-size: 11px;
      color: #515151;
    }

    .pac-item:hover {
      background-color: #fafafa;
    }

    .pac-item-selected {
      background-color: #ebf2fe;
    }

    .pac-item-selected:hover {
      background-color: #ebf2fe;
    }

    .pac-matched {
      font-weight: 700;
    }

    .pac-item-query {
      font-size: 13px;
      padding-right: 3px;
      color: #000;
    }

    .pac-icon {
      width: 15px;
      height: 20px;
      margin-right: 7px;
      margin-top: 6px;
      display: inline-block;
      vertical-align: top;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
      background-size: 34px;
    }

    .hdpi .pac-icon {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png);
    }

    .pac-icon-search {
      background-position: -1px -1px;
    }

    .pac-item-selected .pac-icon-search {
      background-position: -18px -1px;
    }

    .pac-icon-marker {
      background-position: -1px -161px;
    }

    .pac-item-selected .pac-icon-marker {
      background-position: -18px -161px;
    }

    .pac-placeholder {
      color: gray;
    }

    .pac-target-input:-webkit-autofill {
      animation-name: beginBrowserAutofill;
    }

    .pac-target-input:not(:-webkit-autofill) {
      animation-name: endBrowserAutofill;
    }


    .gm-control-active>img {
      box-sizing: content-box;
      display: none;
      left: 50%;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .gm-control-active>img:nth-child(1) {
      display: block;
    }

    .gm-control-active:hover>img:nth-child(1) {
      display: none;
    }

    .gm-control-active:active>img:nth-child(1) {
      display: none;
    }

    .gm-control-active:disabled>img:nth-child(1) {
      display: none;
    }

    .gm-control-active:hover>img:nth-child(2) {
      display: block;
    }

    .gm-control-active:active>img:nth-child(3) {
      display: block;
    }

    .gm-control-active:disabled>img:nth-child(4) {
      display: block;
    }


    .gm-ui-hover-effect {
      opacity: 0.6;
    }

    .gm-ui-hover-effect:hover {
      opacity: 1;
    }

    .gm-ui-hover-effect>span {
      background-color: #000;
    }

    @media (forced-colors: active),
    (prefers-contrast: more) {
      .gm-ui-hover-effect>span {
        background-color: ButtonText;
      }
    }


    .gm-style .gm-style-cc a,
    .gm-style .gm-style-cc button,
    .gm-style .gm-style-cc span,
    .gm-style .gm-style-mtc div {
      font-size: 10px;
      box-sizing: border-box;
    }

    .gm-style .gm-style-cc a,
    .gm-style .gm-style-cc button,
    .gm-style .gm-style-cc span {
      outline-offset: 3px;
    }


    @media print {

      .gm-style .gmnoprint,
      .gmnoprint {
        display: none;
      }
    }

    @media screen {

      .gm-style .gmnoscreen,
      .gmnoscreen {
        display: none;
      }
    }


    .dismissButton {
      background-color: #fff;
      border: 1px solid #dadce0;
      color: #1a73e8;
      border-radius: 4px;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      height: 36px;
      cursor: pointer;
      padding: 0 24px;
    }

    .dismissButton:hover {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:focus {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:focus:not(:focus-visible) {
      background-color: #fff;
      border: 1px solid #dadce0;
      outline: none;
    }

    .dismissButton:focus-visible {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:hover:focus {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:hover:focus:not(:focus-visible) {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:hover:focus-visible {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:active {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
      box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .dismissButton:disabled {
      background-color: #fff;
      border: 1px solid #f1f3f4;
      color: #3c4043;
    }


    .dismissButton {
      background-color: #fff;
      border: 1px solid #dadce0;
      color: #1a73e8;
      border-radius: 4px;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      height: 36px;
      cursor: pointer;
      padding: 0 24px;
    }

    .dismissButton:hover {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:focus {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:focus:not(:focus-visible) {
      background-color: #fff;
      border: 1px solid #dadce0;
      outline: none;
    }

    .dismissButton:focus-visible {
      background-color: rgba(66, 133, 244, 0.12);
      border: 1px solid #d2e3fc;
      outline: 0;
    }

    .dismissButton:hover:focus {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:hover:focus:not(:focus-visible) {
      background-color: rgba(66, 133, 244, 0.04);
      border: 1px solid #d2e3fc;
    }

    .dismissButton:hover:focus-visible {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
    }

    .dismissButton:active {
      background-color: rgba(66, 133, 244, 0.16);
      border: 1px solid #d2e2fd;
      box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .dismissButton:disabled {
      background-color: #fff;
      border: 1px solid #f1f3f4;
      color: #3c4043;
    }


    @keyframes beginBrowserAutofill {
      0% {}

      to {}
    }

    @keyframes endBrowserAutofill {
      0% {}

      to {}
    }

    .pac-container {
      background-color: #fff;
      position: absolute !important;
      z-index: 1000;
      border-radius: 2px;
      border-top: 1px solid #d9d9d9;
      font-family: Arial, sans-serif;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
    }

    .pac-logo:after {
      content: "";
      padding: 1px 1px 1px 0;
      height: 18px;
      box-sizing: border-box;
      text-align: right;
      display: block;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: 120px 14px;
    }

    .hdpi.pac-logo:after {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png);
    }

    .pac-item {
      cursor: default;
      padding: 0 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 30px;
      text-align: left;
      border-top: 1px solid #e6e6e6;
      font-size: 11px;
      color: #515151;
    }

    .pac-item:hover {
      background-color: #fafafa;
    }

    .pac-item-selected {
      background-color: #ebf2fe;
    }

    .pac-item-selected:hover {
      background-color: #ebf2fe;
    }

    .pac-matched {
      font-weight: 700;
    }

    .pac-item-query {
      font-size: 13px;
      padding-right: 3px;
      color: #000;
    }

    .pac-icon {
      width: 15px;
      height: 20px;
      margin-right: 7px;
      margin-top: 6px;
      display: inline-block;
      vertical-align: top;
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
      background-size: 34px;
    }

    .hdpi .pac-icon {
      background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png);
    }

    .pac-icon-search {
      background-position: -1px -1px;
    }

    .pac-item-selected .pac-icon-search {
      background-position: -18px -1px;
    }

    .pac-icon-marker {
      background-position: -1px -161px;
    }

    .pac-item-selected .pac-icon-marker {
      background-position: -18px -161px;
    }

    .pac-placeholder {
      color: gray;
    }

    .pac-target-input:-webkit-autofill {
      animation-name: beginBrowserAutofill;
    }

    .pac-target-input:not(:-webkit-autofill) {
      animation-name: endBrowserAutofill;
    }


    .gm-style-moc {
      background-color: rgba(0, 0, 0, 0.45);
      pointer-events: none;
      text-align: center;
      transition: opacity ease-in-out;
    }

    .gm-style-mot {
      color: white;
      font-family: Roboto, Arial, sans-serif;
      font-size: 22px;
      margin: 0;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }


    .gm-style img {
      max-width: none;
    }

    .gm-style {
      font: 400 11px Roboto, Arial, sans-serif;
      text-decoration: none;
    }

  <style type="text/css">
    .swal-icon--error {
      border-color: #f27474;
      -webkit-animation: animateErrorIcon 0.5s;
      animation: animateErrorIcon 0.5s;
    }

    .swal-icon--error__x-mark {
      position: relative;
      display: block;
      -webkit-animation: animateXMark 0.5s;
      animation: animateXMark 0.5s;
    }

    .swal-icon--error__line {
      position: absolute;
      height: 5px;
      width: 47px;
      background-color: #f27474;
      display: block;
      top: 37px;
      border-radius: 2px;
    }

    .swal-icon--error__line--left {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      left: 17px;
    }

    .swal-icon--error__line--right {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      right: 16px;
    }

    @-webkit-keyframes animateErrorIcon {
      0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
      }

      to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
      }
    }

    @keyframes animateErrorIcon {
      0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
      }

      to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
      }
    }

    @-webkit-keyframes animateXMark {
      0% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
      }

      50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
      }

      80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
      }
    }

    @keyframes animateXMark {
      0% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
      }

      50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
      }

      80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px;
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1;
      }
    }

    .swal-icon--warning {
      border-color: #f8bb86;
      -webkit-animation: pulseWarning 0.75s infinite alternate;
      animation: pulseWarning 0.75s infinite alternate;
    }

    .swal-icon--warning__body {
      width: 5px;
      height: 47px;
      top: 10px;
      border-radius: 2px;
      margin-left: -2px;
    }

    .swal-icon--warning__body,
    .swal-icon--warning__dot {
      position: absolute;
      left: 50%;
      background-color: #f8bb86;
    }

    .swal-icon--warning__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: -4px;
      bottom: -11px;
    }

    @-webkit-keyframes pulseWarning {
      0% {
        border-color: #f8d486;
      }

      to {
        border-color: #f8bb86;
      }
    }

    @keyframes pulseWarning {
      0% {
        border-color: #f8d486;
      }

      to {
        border-color: #f8bb86;
      }
    }

    .swal-icon--success {
      border-color: #a5dc86;
    }

    .swal-icon--success:after,
    .swal-icon--success:before {
      content: "";
      border-radius: 50%;
      position: absolute;
      width: 60px;
      height: 120px;
      background: #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .swal-icon--success:before {
      border-radius: 120px 0 0 120px;
      top: -7px;
      left: -33px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 60px 60px;
      transform-origin: 60px 60px;
    }

    .swal-icon--success:after {
      border-radius: 0 120px 120px 0;
      top: -11px;
      left: 30px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 0 60px;
      transform-origin: 0 60px;
      -webkit-animation: rotatePlaceholder 4.25s ease-in;
      animation: rotatePlaceholder 4.25s ease-in;
    }

    .swal-icon--success__ring {
      width: 80px;
      height: 80px;
      border: 4px solid hsla(98, 55%, 69%, 0.2);
      border-radius: 50%;
      box-sizing: content-box;
      position: absolute;
      left: -4px;
      top: -4px;
      z-index: 2;
    }

    .swal-icon--success__hide-corners {
      width: 5px;
      height: 90px;
      background-color: #fff;
      padding: 1px;
      position: absolute;
      left: 28px;
      top: 8px;
      z-index: 1;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    .swal-icon--success__line {
      height: 5px;
      background-color: #a5dc86;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 2;
    }

    .swal-icon--success__line--tip {
      width: 25px;
      left: 14px;
      top: 46px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation: animateSuccessTip 0.75s;
      animation: animateSuccessTip 0.75s;
    }

    .swal-icon--success__line--long {
      width: 47px;
      right: 8px;
      top: 38px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: animateSuccessLong 0.75s;
      animation: animateSuccessLong 0.75s;
    }

    @-webkit-keyframes rotatePlaceholder {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
      }

      to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
      }
    }

    @keyframes rotatePlaceholder {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
      }

      to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
      }
    }

    @-webkit-keyframes animateSuccessTip {
      0% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px;
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px;
      }

      to {
        width: 25px;
        left: 14px;
        top: 45px;
      }
    }

    @keyframes animateSuccessTip {
      0% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px;
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px;
      }

      to {
        width: 25px;
        left: 14px;
        top: 45px;
      }
    }

    @-webkit-keyframes animateSuccessLong {
      0% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px;
      }

      to {
        width: 47px;
        right: 8px;
        top: 38px;
      }
    }

    @keyframes animateSuccessLong {
      0% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px;
      }

      to {
        width: 47px;
        right: 8px;
        top: 38px;
      }
    }

    .swal-icon--info {
      border-color: #c9dae1;
    }

    .swal-icon--info:before {
      width: 5px;
      height: 29px;
      bottom: 17px;
      border-radius: 2px;
      margin-left: -2px;
    }

    .swal-icon--info:after,
    .swal-icon--info:before {
      content: "";
      position: absolute;
      left: 50%;
      background-color: #c9dae1;
    }

    .swal-icon--info:after {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: -3px;
      top: 19px;
    }

    .swal-icon {
      width: 80px;
      height: 80px;
      border-width: 4px;
      border-style: solid;
      border-radius: 50%;
      padding: 0;
      position: relative;
      box-sizing: content-box;
      margin: 20px auto;
    }

    .swal-icon:first-child {
      margin-top: 32px;
    }

    .swal-icon--custom {
      width: auto;
      height: auto;
      max-width: 100%;
      border: none;
      border-radius: 0;
    }

    .swal-icon img {
      max-width: 100%;
      max-height: 100%;
    }

    .swal-title {
      color: rgba(0, 0, 0, 0.65);
      font-weight: 600;
      text-transform: none;
      position: relative;
      display: block;
      padding: 13px 16px;
      font-size: 27px;
      line-height: normal;
      text-align: center;
      margin-bottom: 0;
    }

    .swal-title:first-child {
      margin-top: 26px;
    }

    .swal-title:not(:first-child) {
      padding-bottom: 0;
    }

    .swal-title:not(:last-child) {
      margin-bottom: 13px;
    }

    .swal-text {
      font-size: 16px;
      position: relative;
      float: none;
      line-height: normal;
      vertical-align: top;
      text-align: left;
      display: inline-block;
      margin: 0;
      padding: 0 10px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.64);
      max-width: calc(100% - 20px);
      overflow-wrap: break-word;
      box-sizing: border-box;
    }

    .swal-text:first-child {
      margin-top: 45px;
    }

    .swal-text:last-child {
      margin-bottom: 45px;
    }

    .swal-footer {
      text-align: right;
      padding-top: 13px;
      margin-top: 13px;
      padding: 13px 16px;
      border-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .swal-button-container {
      margin: 5px;
      display: inline-block;
      position: relative;
    }

    .swal-button {
      background-color: #7cd1f9;
      color: #fff;
      border: none;
      box-shadow: none;
      border-radius: 5px;
      font-weight: 600;
      font-size: 14px;
      padding: 10px 24px;
      margin: 0;
      cursor: pointer;
    }

    .swal-button:not([disabled]):hover {
      background-color: #78cbf2;
    }

    .swal-button:active {
      background-color: #70bce0;
    }

    .swal-button:focus {
      outline: none;
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, 0.29);
    }

    .swal-button[disabled] {
      opacity: 0.5;
      cursor: default;
    }

    .swal-button::-moz-focus-inner {
      border: 0;
    }

    .swal-button--cancel {
      color: #555;
      background-color: #efefef;
    }

    .swal-button--cancel:not([disabled]):hover {
      background-color: #e8e8e8;
    }

    .swal-button--cancel:active {
      background-color: #d7d7d7;
    }

    .swal-button--cancel:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(116, 136, 150, 0.29);
    }

    .swal-button--danger {
      background-color: #e64942;
    }

    .swal-button--danger:not([disabled]):hover {
      background-color: #df4740;
    }

    .swal-button--danger:active {
      background-color: #cf423b;
    }

    .swal-button--danger:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(165, 43, 43, 0.29);
    }

    .swal-content {
      padding: 0 20px;
      margin-top: 20px;
      font-size: medium;
    }

    .swal-content:last-child {
      margin-bottom: 20px;
    }

    .swal-content__input,
    .swal-content__textarea {
      -webkit-appearance: none;
      background-color: #fff;
      border: none;
      font-size: 14px;
      display: block;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.14);
      padding: 10px 13px;
      border-radius: 2px;
      transition: border-color 0.2s;
    }

    .swal-content__input:focus,
    .swal-content__textarea:focus {
      outline: none;
      border-color: #6db8ff;
    }

    .swal-content__textarea {
      resize: vertical;
    }

    .swal-button--loading {
      color: transparent;
    }

    .swal-button--loading~.swal-button__loader {
      opacity: 1;
    }

    .swal-button__loader {
      position: absolute;
      height: auto;
      width: 43px;
      z-index: 2;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      pointer-events: none;
      opacity: 0;
    }

    .swal-button__loader div {
      display: inline-block;
      float: none;
      vertical-align: baseline;
      width: 9px;
      height: 9px;
      padding: 0;
      border: none;
      margin: 2px;
      opacity: 0.4;
      border-radius: 7px;
      background-color: hsla(0, 0%, 100%, 0.9);
      transition: background 0.2s;
      -webkit-animation: swal-loading-anim 1s infinite;
      animation: swal-loading-anim 1s infinite;
    }

    .swal-button__loader div:nth-child(3n + 2) {
      -webkit-animation-delay: 0.15s;
      animation-delay: 0.15s;
    }

    .swal-button__loader div:nth-child(3n + 3) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    @-webkit-keyframes swal-loading-anim {
      0% {
        opacity: 0.4;
      }

      20% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }

      to {
        opacity: 0.4;
      }
    }

    @keyframes swal-loading-anim {
      0% {
        opacity: 0.4;
      }

      20% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }

      to {
        opacity: 0.4;
      }
    }

    .swal-overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0;
      overflow-y: auto;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .swal-overlay:before {
      content: " ";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }

    .swal-overlay--show-modal {
      opacity: 1;
      pointer-events: auto;
    }

    .swal-overlay--show-modal .swal-modal {
      opacity: 1;
      pointer-events: auto;
      box-sizing: border-box;
      -webkit-animation: showSweetAlert 0.3s;
      animation: showSweetAlert 0.3s;
      will-change: transform;
    }

    .swal-modal {
      width: 478px;
      opacity: 0;
      pointer-events: none;
      background-color: #fff;
      text-align: center;
      border-radius: 5px;
      position: static;
      margin: 20px auto;
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      z-index: 10001;
      transition: opacity 0.2s, -webkit-transform 0.3s;
      transition: transform 0.3s, opacity 0.2s;
      transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
    }

    @media (max-width: 500px) {
      .swal-modal {
        width: calc(100% - 20px);
      }
    }

    @-webkit-keyframes showSweetAlert {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      1% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }

      45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }

      80% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes showSweetAlert {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      1% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }

      45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }

      80% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }


    /* cairo bold */
    @font-face {
      src: url("assets/fonts/arabic/cairo/Cairo-Bold.ttf");
      font-family: "cairo-bold";
    }

    /* cairo light */
    @font-face {
      src: url("assets/fonts/arabic/cairo/Cairo-Light.ttf");
      font-family: "cairo-light";
    }

    /* cairo regular */
    @font-face {
      src: url("assets/fonts/arabic/cairo/Cairo-Regular.ttf");
      font-family: "cairo";
    }

    /* cairo semi Bold */
    @font-face {
      src: url("assets/fonts/arabic/cairo/Cairo-SemiBold.ttf");
      font-family: "cairo-semi-bold";
    }

    /* jannat Bold */
    @font-face {
      src: url("assets/fonts/arabic/jannat/a-jannat-Bold.ttf");
      font-family: "jannat-bold";
    }

    /* jannat regular */
    @font-face {
      src: url("assets/fonts/arabic/jannat/a-jannat-Regular.ttf");
      font-family: "jannat";
    }

    /* nexa Bold */
    @font-face {
      src: url("assets/fonts/arabic/nexa/NexaBold.otf");
      font-family: "nexa-bold";
    }

    /* nexa light */
    @font-face {
      src: url("assets/fonts/arabic/nexa/NexaLight.otf");
      font-family: "nexa-light";
    }

    /* nexa Heavy Italic */
    @font-face {
      src: url("assets/fonts/arabic/nexa/NexaHeavyItalic.otf");
      font-family: "nexa-heavy-italic";
    }

    /* nexa regular */
    @font-face {
      src: url("assets/fonts/arabic/nexa/NexaRegular.otf");
      font-family: "nexa";
    }

  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <style type="text/css">
    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+1F00-1FFF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0370-03FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+1F00-1FFF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+0370-03FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format("woff2");
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+1F00-1FFF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0370-03FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format("woff2");
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

  <style type="text/css">
    @font-face {
      font-family: "Material Icons";
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v107/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format("woff2");
    }

    .material-icons {
      font-family: "Material Icons";
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: "liga";
      -webkit-font-smoothing: antialiased;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .window {
      height: 100vh;
      z-index: 200;
      overflow: hidden;
    }

    .window,
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 80px;
      z-index: 20;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      transition: 0.5s;
      animation: fadeDown 1s;
    }

    nav:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: #E54059;
      opacity: 1;
      transition: 0.5s;
    }

    nav.transparant {
      box-shadow: unset;
    }

    nav.transparant:before {
      opacity: 0;
    }

    @media (max-width: 1000px) {
      nav {
        padding: 0 20px;
      }
    }

    @media (max-width: 500px) {
      nav {
        padding: 0 10px;
      }
    }

    nav .logo {
      display: flex;
      align-items: center;
      width: 200px;
      height: 100%;
      outline: none;
      z-index: 2;
      cursor: pointer;
    }

    nav .logo app-logo-svg {
      display: flex;
      height: 100%;
      padding: 10px 0;
    }

    @media (max-width: 992px) {
      nav .logo app-logo-svg {
        padding: 10px 0;
      }
    }

    @media (max-width: 500px) {
      nav .logo {
        width: 100px;
      }
    }

    nav .links {
      width: calc(100% - 200px);
      justify-content: flex-end;
      z-index: 2;
    }

    nav .links,
    nav .links ul {
      height: 100%;
      display: flex;
      align-items: center;
    }

    nav .links ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    nav .links ul li {
      height: 100%;
      display: flex;
      align-items: center;
    }

    nav .links ul li span {
      color: #fff;
      font-family: nexa;
      display: inline-block;
      position: relative;
      text-transform: capitalize;
      font-size: 16px !important;
      padding: 15px;
      cursor: pointer;
      outline: none;
	  font-weight: bold;
    }

    @media (max-width: 1200px) {
      nav .links ul li span {
        font-size: 14px;
        transition: 0.3s;
      }

      nav .links ul li span:hover {
        background-color: #ffca39;
        color: #fff;
      }
    }

    nav .links ul li span:after {
      content: "";
      position: absolute;
      top: calc(100% - 8px);
      left: 15px;
      height: 3px;
      width: calc(100% - 30px);
      background-color: #ffca39;
      transition: 0.2s;
      transform: scaleX(0);
    }

    @media (max-width: 1200px) {
      nav .links ul li span:after {
        content: unset;
      }
    }

    nav .links ul li span.active:after,
    nav .links ul li span:hover:after {
      transform: scaleX(1);
    }

    @media (max-width: 767px) {
      nav .links {
        position: absolute;
        width: 100%;
        left: 0;
        top: 70px;
        background-color: #fff;
        height: unset;
        transition: 0.3s;
        transform: scaleX(1);
        transform-origin: left;
        opacity: 1;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
      }

      nav .links.hidden {
        transform: scaleX(0);
        opacity: 0;
      }

      nav .links ul {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
      }

      nav .links ul li {
        width: 100%;
      }

      nav .links ul li span {
        color: #E54059;
        width: 100%;
      }
    }

    nav .buttons-wrap {
      display: flex;
      z-index: 2;
    }

    nav .buttons-wrap .language-button {
      margin: 0 15px;
    }

    nav .buttons-wrap .language-button button {
      border: 2px solid #fff;
      background-color: initial;
      color: #fff;
      padding: 0 10px 1px;
      display: block;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
      font-weight: 700;
      font-family: cairo;
      transition: 0.3s;
    }

    nav .buttons-wrap .language-button button:hover {
      background-color: #fff;
      color: #E54059;
    }

    nav .buttons-wrap .nav-toggler {
      display: none;
    }

    @media (max-width: 1200px) {
      nav .buttons-wrap .nav-toggler {
        display: block;
      }
    }

    nav .buttons-wrap .nav-toggler button {
      border: 0;
      background-color: initial;
      display: block;
      width: 40px;
      cursor: pointer;
    }

    nav .buttons-wrap .nav-toggler button span {
      display: block;
      background-color: #fff;
      height: 2px;
      margin: 5px 0;
    }

    footer {
      background: #E54059;
      padding-bottom: 15px;
      overflow: hidden;
    }

    footer .links {
      display: flex;
      flex-wrap: wrap;
    }

    footer .links .part {
      width: 50%;
      padding: 40px 75px;
    }

    @media (max-width: 900px) {
      footer .links .part {
        padding: 40px 50px;
      }
    }

    @media (max-width: 750px) {
      footer .links .part {
        padding: 40px 35px;
      }
    }

    @media (max-width: 700px) {
      footer .links .part {
        width: 100%;
        padding: 0 35px;
      }
    }

    footer .links .part h3 {
      text-transform: capitalize;
      font-family: nexa-bold;
      font-size: 28px;
      color: #ffca39;
    }

    footer .links .part ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    footer .links .part ul li {
      display: block;
    }

    footer .links .part ul li a {
      padding: 15px 0 15px 25px;
      color: #fff;
      font-family: nexa-light;
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      text-decoration: none;
    }

    footer .links .part ul li a:before {
      content: "";
      position: absolute;
      left: 5px;
      border-radius: 50%;
      width: 5px;
      height: 5px;
      background-color: #ffca39;
    }

    footer .links .part ul li a:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      bottom: 10px;
      left: 25px;
      height: 3px;
      width: 0;
      transition: 0.3s;
    }

    footer .links .part ul li a:hover:after {
      width: calc(100% - 22px);
    }

    footer .links .part ul li a.active {
      zoom: 1;
    }

    footer .links .part ul li a.active:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      bottom: 10px;
      left: 25px;
      height: 3px;
      width: calc(100% - 22px);
    }

    footer .copyright-div {
      height: 70px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 0 75px;
      position: relative;
    }

    @media (max-width: 900px) {
      footer .copyright-div {
        padding: 0 50px;
      }
    }

    @media (max-width: 750px) {
      footer .copyright-div {
        padding: 0 35px;
      }
    }

    @media (max-width: 450px) {
      footer .copyright-div {
        padding: 0 5px;
      }
    }

    footer .copyright-div:after {
      content: "";
      background-color: #ffca39;
      width: 90%;
      height: 0.5px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    footer .copyright-div .copyright {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
    }

    @media (max-width: 700px) {
      footer .copyright-div .copyright {
        width: 100%;
        padding: 0 35px;
        height: 50%;
        justify-content: center;
      }
    }

    @media (max-width: 450px) {
      footer .copyright-div .copyright {
        padding: 0;
      }
    }

    footer .copyright-div .copyright p {
      margin: 0;
      font-size: 12px;
      color: #fff;
    }

    footer .copyright-div .copyright p span {
      text-transform: uppercase;
      font-family: nexa-heavy-italic;
      font-size: 14px;
    }

    footer .copyright-div .icons {
      width: 50%;
      display: flex;
      height: 100%;
      justify-content: flex-end;
    }

    @media (max-width: 700px) {
      footer .copyright-div .icons {
        width: 100%;
        padding: 0 35px;
        height: 50%;
        justify-content: center;
      }
    }

    footer .copyright-div .icons ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      display: flex;
      align-items: center;
    }

    footer .copyright-div .icons ul li {
      display: block;
    }

    footer .copyright-div .icons ul li a {
      text-decoration: none;
      display: flex;
      align-items: center;
    }

    footer .copyright-div .icons ul li a svg {
      width: 35px;
      padding: 5px;
      transition: 0.1s;
    }

    footer .copyright-div .icons ul li a svg:hover {
      transform: scale(1.1);
    }

    footer .copyright-div .icons ul li a svg path {
      fill: #fff;
    }

    footer .copyright-div .icons ul li a app-insta-svg,
    footer .copyright-div .icons ul li a app-twitter-svg {
      display: flex;
    }

    footer .copyright-div .icons ul li a.policy {
      color: #fff;
    }

    body.rtl nav .links ul li span {
      font-family: jannat-bold;
    }

    body.rtl footer .links .part h3 {
      font-family: cairo-semi-bold;
    }

    body.rtl footer .links .part ul li a {
      padding: 15px 25px 15px 0;
      font-family: jannat;
    }

    body.rtl footer .links .part ul li a:before {
      right: 5px;
      left: unset;
    }

    body.rtl footer .links .part ul li a:after {
      left: unset;
      right: 25px;
    }


    *[_ngcontent-wdg-c31] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c31]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c31]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c31]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c31]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c31],
    html[_ngcontent-wdg-c31] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c31] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c31] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c31] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c31] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c31]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c31] .sender[_ngcontent-wdg-c31] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c31] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c31] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c31]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c31] .sender[_ngcontent-wdg-c31] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c31] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c31] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c31] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c31] {
      height: 100%;
    }

    svg[_ngcontent-wdg-c31] .aaa[_ngcontent-wdg-c31] {
      fill: #fff;
    }

    svg[_ngcontent-wdg-c31] .bbb[_ngcontent-wdg-c31] {
      fill: #fff;
    }


    svg[_ngcontent-wdg-c32] {
      width: 35px;
      padding: 5px;
      transition: 0.3s;
    }

    svg[_ngcontent-wdg-c32]:hover {
      transform: scale(1.1);
    }

    svg[_ngcontent-wdg-c32] path[_ngcontent-wdg-c32] {
      fill: #fff;
    }


    svg[_ngcontent-wdg-c33] {
      width: 35px;
      padding: 5px;
      transition: 0.3s;
    }

    svg[_ngcontent-wdg-c33]:hover {
      transform: scale(1.1);
    }

    svg[_ngcontent-wdg-c33] path[_ngcontent-wdg-c33] {
      fill: #fff;
    }


    .backdrop[_ngcontent-wdg-c30] {
      z-index: 1999;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .spinner-circle[_ngcontent-wdg-c30],
    .spinner-circle[_ngcontent-wdg-c30]:after {
      border-radius: 50%;
      width: 10em;
      height: 10em;
    }

    .spinner-circle[_ngcontent-wdg-c30] {
      font-size: 6px;
      border-top: 1.1em solid rgba(255, 255, 255, 0.2);
      border-right: 1.1em solid rgba(255, 255, 255, 0.2);
      border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
      border-left: 1.1em solid #ffffff;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
    }

    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .spinner-circle-swish[_ngcontent-wdg-c30] {
      font-size: 60px;
      overflow: hidden;
      width: 1em;
      height: 1em;
      z-index: 2000;
      border-radius: 50%;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
      animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    }

    @-webkit-keyframes load6 {
      0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }

      5%,
      95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }

      10%,
      59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
      }

      20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
      }

      38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
      }

      100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }
    }

    @keyframes load6 {
      0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }

      5%,
      95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }

      10%,
      59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
      }

      20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
      }

      38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
      }

      100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
      }
    }

    @-webkit-keyframes round {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes round {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .sk-cube-grid[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube[_ngcontent-wdg-c30] {
      width: 33%;
      height: 33%;
      background-color: #333;
      float: left;
      -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
      animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube1[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube2[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube3[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube4[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube5[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube6[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube7[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube8[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }

    .sk-cube-grid[_ngcontent-wdg-c30] .sk-cube9[_ngcontent-wdg-c30] {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    @-webkit-keyframes sk-cubeGridScaleDelay {

      0%,
      70%,
      100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    @keyframes sk-cubeGridScaleDelay {

      0%,
      70%,
      100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    .spinner-double-bounce[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
    }

    .double-bounce1[_ngcontent-wdg-c30],
    .double-bounce2[_ngcontent-wdg-c30] {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: sk-bounce 2s infinite ease-in-out;
      animation: sk-bounce 2s infinite ease-in-out;
    }

    .double-bounce2[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    @-webkit-keyframes sk-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes sk-bounce {

      0%,
      100% {
        transform: scale(0);
        -webkit-transform: scale(0);
      }

      50% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }

    .spinner-pulse[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;
      background-color: #333;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
      border-radius: 100%;
      -webkit-animation: sk-scaleout 1s infinite ease-in-out;
      animation: sk-scaleout 1s infinite ease-in-out;
    }

    @-webkit-keyframes sk-scaleout {
      0% {
        -webkit-transform: scale(0);
      }

      100% {
        -webkit-transform: scale(1);
        opacity: 0;
      }
    }

    @keyframes sk-scaleout {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
      }
    }

    .spinner-three-bounce[_ngcontent-wdg-c30] {
      width: 70px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      margin: auto;
      z-index: 2000;
    }

    .spinner-three-bounce[_ngcontent-wdg-c30]>div[_ngcontent-wdg-c30] {
      width: 18px;
      height: 18px;
      background-color: #ffffff;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner-three-bounce[_ngcontent-wdg-c30] .bounce1[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner-three-bounce[_ngcontent-wdg-c30] .bounce2[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes sk-bouncedelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes sk-bouncedelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .spinner-sk-rotateplane[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;
      background-color: #ffffff;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
      -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
      animation: sk-rotateplane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes sk-rotateplane {
      0% {
        -webkit-transform: perspective(120px);
      }

      50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
      }

      100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
      }
    }

    @keyframes sk-rotateplane {
      0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      }

      50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      }

      100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30] {
      width: 50px;
      height: 40px;
      font-size: 10px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30]>div[_ngcontent-wdg-c30] {
      background-color: #ffffff;
      height: 100%;
      width: 6px;
      display: inline-block;
      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
      animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30] .rect2[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30] .rect3[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30] .rect4[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .spinner-rectangle-bounce[_ngcontent-wdg-c30] .rect5[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
      }

      20% {
        -webkit-transform: scaleY(1);
      }
    }

    @keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }

      20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
      }
    }

    .spinner-wandering-cubes[_ngcontent-wdg-c30] {
      width: 60px;
      height: 58px;
      font-size: 10px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
    }

    .cube1[_ngcontent-wdg-c30],
    .cube2[_ngcontent-wdg-c30] {
      background-color: #ffffff;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
      animation: sk-cubemove 1.8s infinite ease-in-out;
    }

    .cube2[_ngcontent-wdg-c30] {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    @-webkit-keyframes sk-cubemove {
      25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
      }

      50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
      }

      75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      }

      100% {
        -webkit-transform: rotate(-360deg);
      }
    }

    @keyframes sk-cubemove {
      25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
      }

      50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
      }

      50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
      }

      75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      }

      100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
      }
    }

    .sk-circle[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-child[_ngcontent-wdg-c30] {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-child[_ngcontent-wdg-c30]:before {
      content: "";
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      background-color: #333;
      border-radius: 100%;
      -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
      animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle2[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle3[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      transform: rotate(60deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle4[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle5[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
      transform: rotate(120deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle6[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
      transform: rotate(150deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle7[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle8[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
      transform: rotate(210deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle9[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
      transform: rotate(240deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle10[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle11[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
      transform: rotate(300deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle12[_ngcontent-wdg-c30] {
      -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
      transform: rotate(330deg);
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle2[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle3[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle4[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle5[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle6[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle7[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle8[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle9[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle10[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle11[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .sk-circle[_ngcontent-wdg-c30] .sk-circle12[_ngcontent-wdg-c30]:before {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }

    @-webkit-keyframes sk-circleBounceDelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes sk-circleBounceDelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .spinner-chasing-dots[_ngcontent-wdg-c30] {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2000;
      text-align: center;
      -webkit-animation: sk-rotate 2s infinite linear;
      animation: sk-rotate 2s infinite linear;
    }

    .dot1[_ngcontent-wdg-c30],
    .dot2[_ngcontent-wdg-c30] {
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #333;
      border-radius: 100%;
      -webkit-animation: sk-bounce 2s infinite ease-in-out;
      animation: sk-bounce 2s infinite ease-in-out;
    }

    .dot2[_ngcontent-wdg-c30] {
      top: auto;
      bottom: 0;
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    @-webkit-keyframes sk-rotate {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes sk-rotate {
      100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }
    }

    @-webkit-keyframes sk-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes sk-bounce {

      0%,
      100% {
        transform: scale(0);
        -webkit-transform: scale(0);
      }

      50% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }

    .full-screen[_ngcontent-wdg-c30] {
      position: fixed;
      position: -ms-page;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .home {
      margin-top: -70px;
    }

    .home header {
      height: 100vh;
      background: url(assets/img/delivery-man.57fa1d8368aac8ad0355.png), #E54059;
      /* background-image: url(assets/img/delivery-man.57fa1d8368aac8ad0355.png), linear-gradient(180deg, #0b3d5e 65%, transparent); */
      background-blend-mode: multiply;
      background-size: cover;
      background-position: top;
      background-attachment: fixed;
      direction: rtl;
      overflow: hidden;
    }

    .home header .overlayed {
      height: 100%;
      display: flex;
      overflow: hidden;
      padding-top: 30vh;
    }

    .home header .overlayed .sender-mark {
      width: 50%;
      height: 150px;
      align-self: center;
    }

    @media (max-width: 700px) {
      .home header .overlayed .sender-mark {
        display: none;
      }
    }

    .home header .overlayed .sender-mark app-sender-mark-svg {
      zoom: 1;
    }

    .home header .overlayed .download {
      width: 50%;
      text-align: center;
    }

    @media (max-width: 700px) {
      .home header .overlayed .download {
        width: 100%;
      }
    }

    .home header .overlayed .download h3 {
      margin: 0;
      font-family: nexa-heavy-italic;
      color: #ffca39;
      text-transform: uppercase;
      font-size: 60px;
    }

    .home header .overlayed .download p {
      color: #fff;
      font-family: nexa-light;
      direction: ltr;
      font-size: 40px;
      margin: 0 0 20px;
      text-transform: capitalize;
    }

    .home header .overlayed .download img {
      width: 250px;
    }

    .home .about {
      text-align: center;
      padding: 110px 50px;
      overflow: hidden;
    }

    .home .about p {
        color:#333;
        width: 70%;
        margin:0 auto;
      font-size: 18px;
    }

    @media (max-width: 500px) {
      .home .about p {
        font-size: 14px;
        line-height: 22px;
      }
    }

    .home .how-it-works {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }

    .home .how-it-works>div {
      width: 50%;
      padding: 75px;
      height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .home .how-it-works>div {
        width: 100%;
        height: unset;
      }
    }

    .home .how-it-works>div.primary-part {
      background-color: #E54059;
    }

    .home .how-it-works>div.primary-part h3 {
      color: #ffca39;
    }

    .home .how-it-works>div.primary-part p {

      color: #fff;
    }

    .home .how-it-works>div.secondry-part {
      position: relative;
      background-color: white;
    }

    .home .how-it-works>div.secondry-part:nth-of-type(2n-1):after {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(100% - 1px);
      background-color: #E54059;
      height: 300px;
      width: 1px;
      transform: translateY(-50%);
    }

    @media (max-width: 850px) {
      .home .how-it-works>div.secondry-part:nth-of-type(2n-1):after {
        top: calc(100% - 1px);
        left: 50%;
        height: 1px;
        width: 280px;
        transform: translateX(-50%);
      }
    }

    .home .how-it-works>div h3 {
      font-size: 40px;
      position: relative;
      color: #E54059;
      margin-top: 0;
    }

    .home .how-it-works>div h3:after {
      content: "";
      background-color: #E54059;
      position: absolute;
      top: calc(100% + 10px);
      height: 4px;
      width: 130px;
      display: flex;
    }

    .home .how-it-works>div p {
        color:black;
        margin-top: 20px;
      font-size: 16px;
      line-height: 22px;
    }

    .home .how-it-works .image-part {
      background-image: url(assets/img/send.cd9b5415509223f68d33.png);
      background-size: cover;
    }

    @media (max-width: 850px) {
      .home .how-it-works .image-part {
        display: none;
      }
    }

    .home .download {
      padding: 50px;
      text-align: center;
      overflow: hidden;
    }

    @media (max-width: 500px) {
      .home .download {
        padding: 30px 0;
      }
    }

    .home .download h3 {
      font-family: cairo-bold;
      font-size: 28px;
      margin: 0 0 10px;
      color: #E54059;
    }

    @media (max-width: 500px) {
      .home .download h3 {
        font-size: 25px;
      }
    }

    .home .download h4 {
      color: #333;
      margin: 0;
      font-size: 22px;
      font-family: nexa-light;
    }

    @media (max-width: 500px) {
      .home .download h4 {
        font-size: 18px;
      }
    }

    .home .download hr {
      margin: 25px auto;
      width: 138px;
      height: 2px;
      border: 0;
      background-color: #ffca39;
    }

    .home .download .parts {
      display: flex;
      flex-wrap: wrap;
    }

    .home .download .parts .part {
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 1300px) {
      .home .download .parts .part {
        height: 350px;
      }
    }

    @media (max-width: 1100px) {
      .home .download .parts .part {
        height: 350px;
      }
    }

    @media (max-width: 950px) {
      .home .download .parts .part {
        height: 250px;
      }
    }

    .home .download .parts .part:first-of-type {
      width: 60%;
    }

    @media (max-width: 750px) {
      .home .download .parts .part:first-of-type {
        width: 100%;
        /* display: none; */
      }
    }

    .home .download .parts .part:last-of-type {
      width: 40%;
    }

    @media (max-width: 750px) {
      .home .download .parts .part:last-of-type {
        width: 100%;
      }
    }

    .home .download .parts .part app-download-driver-svg {
      display: block;
      height: 100%;
    }

    .home .download .parts .part a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .home .download .parts .part a:before {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      z-index: -1;
      background-color: #E54059;
      animation: lighting 6s infinite;
    }

    @media (max-width: 950px) {
      .home .download .parts .part a:before {
        width: 120px;
        height: 120px;
      }
    }

    @media (max-width: 750px) {
      .home .download .parts .part a:before {
        width: 150px;
        height: 150px;
      }
    }

    .home .download .parts .part a:after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      z-index: -1;
      background-color: #E54059;
      animation: lighting 6s infinite;
      animation-delay: 3s;
    }

    @media (max-width: 950px) {
      .home .download .parts .part a:after {
        width: 120px;
        height: 120px;
      }
    }

    @media (max-width: 750px) {
      .home .download .parts .part a:after {
        width: 150px;
        height: 150px;
      }
    }

    .home .download .parts .part a img {
      width: 220px;
    }

    @media (max-width: 950px) {
      .home .download .parts .part a img {
        width: 170px;
      }
    }

    @media (max-width: 750px) {
      .home .download .parts .part a img {
        width: 220px;
      }
    }

    body.rtl .home header .overlayed .download p {
      direction: rtl;
      font-family: cairo-light;
      margin-top: -20px;
    }

    body.rtl .home .about h2,
    body.rtl .home .how-it-works>div h3 {
      font-family: cairo-bold;
    }

    body.rtl .home .how-it-works>div.secondry-part:nth-of-type(2n-1):after {
      left: unset;
      right: calc(100% - 1px);
    }

    @media (max-width: 850px) {
      body.rtl .home .how-it-works>div.secondry-part:nth-of-type(2n-1):after {
        top: calc(100% - 1px);
        left: 50%;
        right: unset;
      }
    }

    body.rtl .home .download h4 {
      font-family: cairo;
    }

    @keyframes lighting {
      0% {
        opacity: 0;
        transform: scale(0.4);
      }

      50% {
        opacity: 1;
        transform: scale(1);
      }

      to {
        opacity: 0;
        transform: scale(1);
      }
    }


    *[_ngcontent-wdg-c59] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c59]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c59]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c59]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c59]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c59],
    html[_ngcontent-wdg-c59] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c59] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c59] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c59] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c59] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c59]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c59] .sender[_ngcontent-wdg-c59] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c59] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c59] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c59]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c59] .sender[_ngcontent-wdg-c59] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c59] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c59] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c59] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c59] {
      height: 100%;
      transform: rotate(1deg) translateX(6px);
    }

    svg[_ngcontent-wdg-c59] .st0[_ngcontent-wdg-c59] {
      fill: #fff;
    }

    svg[_ngcontent-wdg-c59] .st1[_ngcontent-wdg-c59] {
      fill: #F16939;
    }


    svg[_ngcontent-wdg-c60] {
      height: 100%;
    }

    svg[_ngcontent-wdg-c60] .st0[_ngcontent-wdg-c60] {
      display: none;
    }

    svg[_ngcontent-wdg-c60] .st1[_ngcontent-wdg-c60] {
      display: inline;
      fill: #ebebeb;
    }

    svg[_ngcontent-wdg-c60] .st2[_ngcontent-wdg-c60] {
      fill: #f0c74a;
    }

    svg[_ngcontent-wdg-c60] .st3[_ngcontent-wdg-c60] {
      fill: #263238;
    }

    svg[_ngcontent-wdg-c60] .st4[_ngcontent-wdg-c60] {
      fill: #f5f5f5;
    }

    svg[_ngcontent-wdg-c60] .st5[_ngcontent-wdg-c60] {
      fill: #ebebeb;
    }

    svg[_ngcontent-wdg-c60] .st6[_ngcontent-wdg-c60] {
      fill: #fafafa;
    }

    svg[_ngcontent-wdg-c60] .st7[_ngcontent-wdg-c60] {
      fill: #e0e0e0;
    }

    svg[_ngcontent-wdg-c60] .st8[_ngcontent-wdg-c60] {
      fill: #69b2b4;
    }

    svg[_ngcontent-wdg-c60] .st9[_ngcontent-wdg-c60] {
      fill: #eec549;
    }

    svg[_ngcontent-wdg-c60] .st10[_ngcontent-wdg-c60] {
      fill: #fff;
    }

    svg[_ngcontent-wdg-c60] .st11[_ngcontent-wdg-c60] {
      opacity: 0.6;
    }

    svg[_ngcontent-wdg-c60] .st12[_ngcontent-wdg-c60] {
      fill: #304e77;
    }

    svg[_ngcontent-wdg-c60] .st13[_ngcontent-wdg-c60] {
      fill: #e8505b;
    }

    svg[_ngcontent-wdg-c60] .st14[_ngcontent-wdg-c60] {
      fill: #ffbe9d;
    }

    svg[_ngcontent-wdg-c60] .st15[_ngcontent-wdg-c60] {
      fill: #d8a934;
    }

    svg[_ngcontent-wdg-c60] .st16[_ngcontent-wdg-c60] {
      opacity: 0.2;
    }

    svg[_ngcontent-wdg-c60] .st17[_ngcontent-wdg-c60] {
      opacity: 0.4;
    }

    svg[_ngcontent-wdg-c60] .st18[_ngcontent-wdg-c60] {
      opacity: 0.3;
    }

    svg[_ngcontent-wdg-c60] .st19[_ngcontent-wdg-c60] {
      fill: #455a64;
    }

    svg[_ngcontent-wdg-c60] .st20[_ngcontent-wdg-c60] {
      fill: #eb996e;
    }

    svg[_ngcontent-wdg-c60] .st21[_ngcontent-wdg-c60] {
      fill: #253d59;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .container {
      height: calc(100vh - 70px);
      display: flex;
      flex-wrap: wrap;
    }

    @media (max-width: 850px) {
      .container {
        height: unset;
      }
    }

    .container .header {
      position: relative;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 6%;
      color: #fff;
      background-color: #0a3a5a;
    }

    @media (max-width: 850px) {
      .container .header {
        display: none;
      }
    }

    .container .header h2 {
      font-size: 24px;
      margin: 20px 0 22px;
      text-transform: capitalize;
    }

    .container .header h2:after {
      height: 2px;
    }

    .container .header p {
      text-align: center;
      text-transform: capitalize;
      line-height: 20px;
    }

    @media (max-width: 850px) {
      .container .header p {
        display: none;
      }
    }

    .container .form {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      padding: 25px 60px 0;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    @media (max-width: 1000px) {
      .container .form {
        padding: 40px 25px 0;
      }
    }

    @media (max-width: 850px) {
      .container .form {
        padding: 0;
        width: 100%;
        overflow-y: unset;
      }
    }

    .container .form form {
      width: 100%;
    }

    .container .form form .driver-info,
    .container .form form .vehicle-info {
      padding: 20px;
    }

    .container .form form h2 {
      font-size: 22px;
      font-family: nexa-bold;
    }

    .container .form form .form-group {
      margin-bottom: 18px;
      position: relative;
    }

    .container .form form .form-group label {
      text-transform: capitalize;
      display: block;
      margin-bottom: 8px;
      font-family: nexa-bold;
    }

    .container .form form .form-group input[type="number"],
    .container .form form .form-group input[type="text"],
    .container .form form .form-group select {
      border-radius: 10px;
      display: block;
      width: 100%;
      background-color: #fff;
      border: 2px solid #e6e6e6;
      font-family: jannat;
      padding: 0 15px;
      height: 45px;
      font-size: 14px;
      outline: 1px solid rgba(199, 0, 255, 0);
      outline-offset: 25px;
      transition: 0.5s ease;
    }

    .container .form form .form-group input[type="number"]:focus,
    .container .form form .form-group input[type="text"]:focus,
    .container .form form .form-group select:focus {
      border: 2px solid #E54059;
    }

    .container .form form .form-group input[type="number"] option,
    .container .form form .form-group input[type="text"] option,
    .container .form form .form-group select option {
      font-size: 16px;
    }

    .container .form form .form-group input[type="file"] {
      outline: none;
      display: block;
      width: 100%;
      display: none;
    }

    .container .form form .form-group .radio-buttons {
      display: flex;
      margin: 18px 0 22px;
    }

    .container .form form .form-group .radio-buttons .part {
      display: flex;
    }

    .container .form form .form-group .radio-buttons .part input[type="radio"] {
      margin: 0;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }

    .container .form form .form-group .radio-buttons .part span {
      margin: 0 8px;
      pointer-events: none;
    }

    .container .form form .form-group .hint {
      position: absolute;
      top: 4px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
      animation: hintFadeIn 0.3s;
    }

    .container .form form .form-group .hint .message {
      display: inline-block;
      padding: 6px 10px;
      font-size: 12px;
      text-transform: capitalize;
      color: #fff;
      font-weight: 700;
    }

    .container .form form .form-group .hint .message.danger {
      color: #f44336;
    }

    .container .form form .form-group .hint .message.success {
      color: #43d149;
      padding: 0 30px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 32px;
    }

    .container .form form .form-group.company-logo img {
      display: block;
      max-width: 100%;
      max-height: 300px;
      margin: 10px auto;
      border-radius: 50%;
      box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.3);
    }

    .container .form form .back,
    .container .form form .next {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .container .form form .back button,
    .container .form form .next button {
      border: 0;
      color: #fff;
      padding: 8px 35px;
      font-size: 14px;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      transition: 0.3s;
    }

    .container .form form .back button.dest,
    .container .form form .next button.dest {
      background-color: #00bcd4;
    }

    .container .form form .back button.dest:hover,
    .container .form form .next button.dest:hover {
      background-color: #00a5bb;
    }

    .container .form form .back button.dest[disabled],
    .container .form form .next button.dest[disabled] {
      cursor: not-allowed;
      background-color: #88f1ff;
    }

    .container .form form .back button.submit,
    .container .form form .next button.submit {
      background-color: #43d149;
      display: flex;
      align-items: center;
    }

    .container .form form .back button.submit:hover,
    .container .form form .next button.submit:hover {
      background-color: #2cb532;
    }

    .container .form form .back button.submit[disabled],
    .container .form form .next button.submit[disabled] {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .container .form form .back button.submit app-loading-svg,
    .container .form form .next button.submit app-loading-svg {
      width: 24px;
      margin: 0 5px;
      display: none;
    }

    .container .form form .back button.submit.loading app-loading-svg,
    .container .form form .next button.submit.loading app-loading-svg {
      display: block;
      width: 20px;
      height: 20px;
      animation: loading 3s linear infinite;
    }

    .google-maps-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 80px 0;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
    }

    @media (max-width: 850px) {
      .google-maps-modal {
        padding: 70px 0;
      }
    }

    @media (max-width: 500px) {
      .google-maps-modal {
        padding: 70px 0;
      }
    }

    .google-maps-modal google-map {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .google-maps-modal google-map input {
      position: absolute;
      top: 10px;
      font-size: 14px;
      padding: 6px 10px;
      width: 30vw;
      text-align: center;
    }

    @media (max-width: 700px) {
      .google-maps-modal google-map input {
        top: unset;
        bottom: 10px;
        width: 50vw;
      }
    }

    .google-maps-modal h2 {
      text-align: center;
      color: #fff;
    }

    .google-maps-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .google-maps-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .google-maps-modal .buttons button.select {
      background-color: #2cb532;
    }

    .google-maps-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .google-maps-modal .buttons button.reset {
      background-color: #09314d;
    }

    .google-maps-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .cropp-modal {
        padding: 35px 20px;
      }
    }

    .cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .cropp-modal image-cropper {
      max-height: 50vh;
    }

    .cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .hidden {
      display: none;
    }

    body.rtl .container .header h2,
    body.rtl .container .header p {
      font-family: cairo-semi-bold;
    }

    body.rtl .container .form form h2 {
      font-family: cairo-bold;
    }

    body.rtl .container .form form .form-group label {
      font-family: jannat-bold;
    }

    body.rtl .container .form form .form-group .hint {
      top: 11px;
    }


    svg[_ngcontent-wdg-c70] {
      width: 100%;
      display: block;
    }


    *[_ngcontent-wdg-c66] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c66],
    html[_ngcontent-wdg-c66] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c66] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c66] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c66] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c66] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c66]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c66] .sender[_ngcontent-wdg-c66] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c66] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c66] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c66]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c66] .sender[_ngcontent-wdg-c66] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c66] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c66] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c66] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c66] {
      width: 100%;
      fill: #fff;
    }


    [_nghost-wdg-c67] {
      display: flex;
      position: relative;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      padding: 5px;
      text-align: center;
    }

    [_nghost-wdg-c67]>div[_ngcontent-wdg-c67] {
      width: 100%;
      position: relative;
    }

    [_nghost-wdg-c67]>div[_ngcontent-wdg-c67] img.source-image[_ngcontent-wdg-c67] {
      max-width: 100%;
      max-height: 100%;
      transform-origin: center;
    }

    [_nghost-wdg-c67] .overlay[_ngcontent-wdg-c67] {
      position: absolute;
      pointer-events: none;
      touch-action: none;
      outline: var(--cropper-overlay-color, #fff) solid 100vw;
      top: 0;
      left: 0;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] {
      position: absolute;
      display: flex;
      color: #53535c;
      background: 0 0;
      outline: rgba(255, 255, 255, 0.3) solid 100vw;
      outline: var(--cropper-outline-color, rgba(255, 255, 255, 0.3)) solid 100vw;
      touch-action: none;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67]:after {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      border: 1px dashed;
      opacity: 0.75;
      color: inherit;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67] {
      width: 100%;
      cursor: move;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67]:focus .move[_ngcontent-wdg-c67] {
      border-color: #1e90ff;
      border-width: 2px;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67] {
      position: absolute;
      display: inline-block;
      line-height: 6px;
      padding: 8px;
      opacity: 0.85;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67] .square[_ngcontent-wdg-c67] {
      display: inline-block;
      background: #53535c;
      width: 6px;
      height: 6px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-sizing: content-box;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.topleft[_ngcontent-wdg-c67] {
      top: -12px;
      left: -12px;
      cursor: nwse-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.top[_ngcontent-wdg-c67] {
      top: -12px;
      left: calc(50% - 12px);
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.topright[_ngcontent-wdg-c67] {
      top: -12px;
      right: -12px;
      cursor: nesw-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.right[_ngcontent-wdg-c67] {
      top: calc(50% - 12px);
      right: -12px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottomright[_ngcontent-wdg-c67] {
      bottom: -12px;
      right: -12px;
      cursor: nwse-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottom[_ngcontent-wdg-c67] {
      bottom: -12px;
      left: calc(50% - 12px);
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottomleft[_ngcontent-wdg-c67] {
      bottom: -12px;
      left: -12px;
      cursor: nesw-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.left[_ngcontent-wdg-c67] {
      top: calc(50% - 12px);
      left: -12px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar[_ngcontent-wdg-c67] {
      position: absolute;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.top[_ngcontent-wdg-c67] {
      top: -11px;
      left: 11px;
      width: calc(100% - 22px);
      height: 22px;
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.right[_ngcontent-wdg-c67] {
      top: 11px;
      right: -11px;
      height: calc(100% - 22px);
      width: 22px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.bottom[_ngcontent-wdg-c67] {
      bottom: -11px;
      left: 11px;
      width: calc(100% - 22px);
      height: 22px;
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.left[_ngcontent-wdg-c67] {
      top: 11px;
      left: -11px;
      height: calc(100% - 22px);
      width: 22px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67] {
      outline-color: transparent;
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67]:after {
      border-radius: 100%;
      box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
    }

    @media (orientation: portrait) {
      [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] {
        outline-width: 100vh;
      }

      [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67]:after {
        box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
      }
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67] {
      border-radius: 100%;
    }

    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67],
    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67],
    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar[_ngcontent-wdg-c67] {
      display: none;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .container {
      height: calc(100vh - 70px);
      display: flex;
      flex-wrap: wrap;
    }

    @media (max-width: 850px) {
      .container {
        height: unset;
      }
    }

    .container .header {
      position: relative;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 6%;
      color: #fff;
      background-color: #0a3a5a;
    }

    @media (max-width: 850px) {
      .container .header {
        display: none;
      }
    }

    .container .header h2 {
      font-size: 24px;
      margin: 20px 0 22px;
      text-transform: capitalize;
    }

    .container .header h2:after {
      height: 2px;
    }

    .container .header p {
      text-align: center;
      text-transform: capitalize;
      line-height: 20px;
    }

    @media (max-width: 850px) {
      .container .header p {
        display: none;
      }
    }

    .container .form {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      padding: 25px 60px 0;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    @media (max-width: 1000px) {
      .container .form {
        padding: 40px 25px 0;
      }
    }

    @media (max-width: 850px) {
      .container .form {
        padding: 0;
        width: 100%;
        overflow-y: unset;
      }
    }

    .container .form form {
      width: 100%;
    }

    .container .form form .driver-info,
    .container .form form .vehicle-info {
      padding: 20px;
    }

    .container .form form h2 {
      font-size: 22px;
      font-family: nexa-bold;
    }

    .container .form form .form-group {
      margin-bottom: 18px;
      position: relative;
    }

    .container .form form .form-group label {
      text-transform: capitalize;
      display: block;
      margin-bottom: 8px;
      font-family: nexa-bold;
    }

    .container .form form .form-group input[type="number"],
    .container .form form .form-group input[type="text"],
    .container .form form .form-group select {
      border-radius: 10px;
      display: block;
      width: 100%;
      background-color: #fff;
      border: 2px solid #e6e6e6;
      font-family: jannat;
      padding: 0 15px;
      height: 45px;
      font-size: 14px;
      outline: 1px solid rgba(199, 0, 255, 0);
      outline-offset: 25px;
      transition: 0.5s ease;
    }

    .container .form form .form-group input[type="number"]:focus,
    .container .form form .form-group input[type="text"]:focus,
    .container .form form .form-group select:focus {
      border: 2px solid #E54059;
    }

    .container .form form .form-group input[type="number"] option,
    .container .form form .form-group input[type="text"] option,
    .container .form form .form-group select option {
      font-size: 16px;
    }

    .container .form form .form-group input[type="file"] {
      outline: none;
      display: block;
      width: 100%;
      display: none;
    }

    .container .form form .form-group .radio-buttons {
      display: flex;
      margin: 18px 0 22px;
    }

    .container .form form .form-group .radio-buttons .part {
      display: flex;
    }

    .container .form form .form-group .radio-buttons .part input[type="radio"] {
      margin: 0;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }

    .container .form form .form-group .radio-buttons .part span {
      margin: 0 8px;
      pointer-events: none;
    }

    .container .form form .form-group .hint {
      position: absolute;
      top: 4px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
      animation: hintFadeIn 0.3s;
    }

    .container .form form .form-group .hint .message {
      display: inline-block;
      padding: 6px 10px;
      font-size: 12px;
      text-transform: capitalize;
      color: #fff;
      font-weight: 700;
    }

    .container .form form .form-group .hint .message.danger {
      color: #f44336;
    }

    .container .form form .form-group .hint .message.success {
      color: #43d149;
      padding: 0 30px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 32px;
    }

    .container .form form .form-group.company-logo img {
      display: block;
      max-width: 100%;
      max-height: 300px;
      margin: 10px auto;
      border-radius: 50%;
      box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.3);
    }

    .container .form form .back,
    .container .form form .next {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .container .form form .back button,
    .container .form form .next button {
      border: 0;
      color: #fff;
      padding: 8px 35px;
      font-size: 14px;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      transition: 0.3s;
    }

    .container .form form .back button.dest,
    .container .form form .next button.dest {
      background-color: #00bcd4;
    }

    .container .form form .back button.dest:hover,
    .container .form form .next button.dest:hover {
      background-color: #00a5bb;
    }

    .container .form form .back button.dest[disabled],
    .container .form form .next button.dest[disabled] {
      cursor: not-allowed;
      background-color: #88f1ff;
    }

    .container .form form .back button.submit,
    .container .form form .next button.submit {
      background-color: #43d149;
      display: flex;
      align-items: center;
    }

    .container .form form .back button.submit:hover,
    .container .form form .next button.submit:hover {
      background-color: #2cb532;
    }

    .container .form form .back button.submit[disabled],
    .container .form form .next button.submit[disabled] {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .container .form form .back button.submit app-loading-svg,
    .container .form form .next button.submit app-loading-svg {
      width: 24px;
      margin: 0 5px;
      display: none;
    }

    .container .form form .back button.submit.loading app-loading-svg,
    .container .form form .next button.submit.loading app-loading-svg {
      display: block;
      width: 20px;
      height: 20px;
      animation: loading 3s linear infinite;
    }

    .google-maps-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 80px 0;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
    }

    @media (max-width: 850px) {
      .google-maps-modal {
        padding: 70px 0;
      }
    }

    @media (max-width: 500px) {
      .google-maps-modal {
        padding: 70px 0;
      }
    }

    .google-maps-modal google-map {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .google-maps-modal google-map input {
      position: absolute;
      top: 10px;
      font-size: 14px;
      padding: 6px 10px;
      width: 30vw;
      text-align: center;
    }

    @media (max-width: 700px) {
      .google-maps-modal google-map input {
        top: unset;
        bottom: 10px;
        width: 50vw;
      }
    }

    .google-maps-modal h2 {
      text-align: center;
      color: #fff;
    }

    .google-maps-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .google-maps-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .google-maps-modal .buttons button.select {
      background-color: #2cb532;
    }

    .google-maps-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .google-maps-modal .buttons button.reset {
      background-color: #09314d;
    }

    .google-maps-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .cropp-modal {
        padding: 35px 20px;
      }
    }

    .cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .cropp-modal image-cropper {
      max-height: 50vh;
    }

    .cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .hidden {
      display: none;
    }

    body.rtl .container .header h2,
    body.rtl .container .header p {
      font-family: cairo-semi-bold;
    }

    body.rtl .container .form form h2 {
      font-family: cairo-bold;
    }

    body.rtl .container .form form .form-group label {
      font-family: jannat-bold;
    }

    body.rtl .container .form form .form-group .hint {
      top: 11px;
    }


    svg[_ngcontent-wdg-c70] {
      width: 100%;
      display: block;
    }


    *[_ngcontent-wdg-c66] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c66]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c66],
    html[_ngcontent-wdg-c66] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c66] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c66] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c66] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c66] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c66]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c66] .sender[_ngcontent-wdg-c66] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c66] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c66] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c66]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c66] .sender[_ngcontent-wdg-c66] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c66] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c66] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c66] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c66] {
      width: 100%;
      fill: #fff;
    }


    [_nghost-wdg-c67] {
      display: flex;
      position: relative;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      padding: 5px;
      text-align: center;
    }

    [_nghost-wdg-c67]>div[_ngcontent-wdg-c67] {
      width: 100%;
      position: relative;
    }

    [_nghost-wdg-c67]>div[_ngcontent-wdg-c67] img.source-image[_ngcontent-wdg-c67] {
      max-width: 100%;
      max-height: 100%;
      transform-origin: center;
    }

    [_nghost-wdg-c67] .overlay[_ngcontent-wdg-c67] {
      position: absolute;
      pointer-events: none;
      touch-action: none;
      outline: var(--cropper-overlay-color, #fff) solid 100vw;
      top: 0;
      left: 0;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] {
      position: absolute;
      display: flex;
      color: #53535c;
      background: 0 0;
      outline: rgba(255, 255, 255, 0.3) solid 100vw;
      outline: var(--cropper-outline-color, rgba(255, 255, 255, 0.3)) solid 100vw;
      touch-action: none;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67]:after {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      border: 1px dashed;
      opacity: 0.75;
      color: inherit;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67] {
      width: 100%;
      cursor: move;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67]:focus .move[_ngcontent-wdg-c67] {
      border-color: #1e90ff;
      border-width: 2px;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67] {
      position: absolute;
      display: inline-block;
      line-height: 6px;
      padding: 8px;
      opacity: 0.85;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67] .square[_ngcontent-wdg-c67] {
      display: inline-block;
      background: #53535c;
      width: 6px;
      height: 6px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-sizing: content-box;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.topleft[_ngcontent-wdg-c67] {
      top: -12px;
      left: -12px;
      cursor: nwse-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.top[_ngcontent-wdg-c67] {
      top: -12px;
      left: calc(50% - 12px);
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.topright[_ngcontent-wdg-c67] {
      top: -12px;
      right: -12px;
      cursor: nesw-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.right[_ngcontent-wdg-c67] {
      top: calc(50% - 12px);
      right: -12px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottomright[_ngcontent-wdg-c67] {
      bottom: -12px;
      right: -12px;
      cursor: nwse-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottom[_ngcontent-wdg-c67] {
      bottom: -12px;
      left: calc(50% - 12px);
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.bottomleft[_ngcontent-wdg-c67] {
      bottom: -12px;
      left: -12px;
      cursor: nesw-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize.left[_ngcontent-wdg-c67] {
      top: calc(50% - 12px);
      left: -12px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar[_ngcontent-wdg-c67] {
      position: absolute;
      z-index: 1;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.top[_ngcontent-wdg-c67] {
      top: -11px;
      left: 11px;
      width: calc(100% - 22px);
      height: 22px;
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.right[_ngcontent-wdg-c67] {
      top: 11px;
      right: -11px;
      height: calc(100% - 22px);
      width: 22px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.bottom[_ngcontent-wdg-c67] {
      bottom: -11px;
      left: 11px;
      width: calc(100% - 22px);
      height: 22px;
      cursor: ns-resize;
    }

    [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar.left[_ngcontent-wdg-c67] {
      top: 11px;
      left: -11px;
      height: calc(100% - 22px);
      width: 22px;
      cursor: ew-resize;
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67] {
      outline-color: transparent;
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67]:after {
      border-radius: 100%;
      box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
    }

    @media (orientation: portrait) {
      [_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] {
        outline-width: 100vh;
      }

      [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67]:after {
        box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
      }
    }

    [_nghost-wdg-c67] .cropper.rounded[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67] {
      border-radius: 100%;
    }

    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .move[_ngcontent-wdg-c67],
    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize[_ngcontent-wdg-c67],
    .disabled[_nghost-wdg-c67] .cropper[_ngcontent-wdg-c67] .resize-bar[_ngcontent-wdg-c67] {
      display: none;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .container {
      height: calc(100vh - 70px);
      display: flex;
      flex-wrap: wrap;
    }

    @media (max-width: 850px) {
      .container {
        height: unset;
      }
    }

    .container .header {
      position: relative;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 6%;
      color: #fff;
      background-color: #0a3a5a;
    }

    @media (max-width: 850px) {
      .container .header {
        display: none;
      }
    }

    .container .header h2 {
      font-size: 24px;
      margin: 20px 0 22px;
      text-transform: capitalize;
    }

    .container .header h2:after {
      height: 2px;
    }

    .container .header p {
      text-align: center;
      text-transform: capitalize;
      line-height: 20px;
    }

    @media (max-width: 850px) {
      .container .header p {
        display: none;
      }
    }

    .container .form {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      padding: 25px 60px 0;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    @media (max-width: 1200px) {
      .container .form {
        padding: 10px 20px 0;
      }
    }

    @media (max-width: 850px) {
      .container .form {
        padding: 0;
        width: 100%;
        overflow-y: unset;
      }
    }

    .container .form form {
      width: 100%;
    }

    .container .form form .driver-info {
      padding: 20px;
    }

    .container .form form .driver-info p {
      font-weight: 700;
    }

    .container .form form .driver-info ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    .container .form form .driver-info ul li {
      padding: 5px 0 5px 25px;
      font-family: nexa-light;
      position: relative;
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .container .form form .driver-info ul li:before {
      content: "";
      position: absolute;
      left: 5px;
      border-radius: 50%;
      width: 7px;
      height: 7px;
      background-color: #ffca39;
    }

    .container .form form .driver-info ul:last-of-type li {
      padding: 5px 0 5px 55px;
    }

    .container .form form .driver-info ul:last-of-type li:before {
      left: 35px;
      border-radius: unset;
      width: 10px;
      height: 2px;
      background-color: #999;
    }

    .container .form form .vehicle-info {
      padding: 20px;
    }

    .container .form form h2 {
      font-size: 22px;
      font-family: nexa-bold;
    }

    .container .form form .form-group {
      margin-bottom: 18px;
      position: relative;
    }

    .container .form form .form-group label {
      text-transform: capitalize;
      display: block;
      margin-bottom: 8px;
      font-family: nexa-bold;
    }

    .container .form form .form-group .input-container {
      position: relative;
    }

    .container .form form .form-group .input-container input[type="number"],
    .container .form form .form-group .input-container input[type="text"],
    .container .form form .form-group .input-container select {
      border-radius: 10px;
      display: block;
      width: 100%;
      background-color: #fff;
      border: 2px solid #e6e6e6;
      font-family: jannat;
      padding: 0 15px;
      height: 45px;
      font-size: 14px;
      outline: 1px solid rgba(199, 0, 255, 0);
      outline-offset: 25px;
      transition: 0.5s ease;
    }

    .container .form form .form-group .input-container input[type="number"]:focus,
    .container .form form .form-group .input-container input[type="text"]:focus,
    .container .form form .form-group .input-container select:focus {
      border: 2px solid #E54059;
    }

    .container .form form .form-group .input-container input[type="number"] option,
    .container .form form .form-group .input-container input[type="text"] option,
    .container .form form .form-group .input-container select option {
      font-size: 16px;
    }

    .container .form form .form-group .input-container input[type="file"] {
      outline: none;
      display: block;
      width: 100%;
      display: none;
    }

    .container .form form .form-group .input-container .radio-buttons {
      display: flex;
      margin: 18px 0 22px;
    }

    .container .form form .form-group .input-container .radio-buttons .part {
      display: flex;
    }

    .container .form form .form-group .input-container .radio-buttons .part input[type="radio"] {
      margin: 0;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }

    .container .form form .form-group .input-container .radio-buttons .part span {
      margin: 0 8px;
      pointer-events: none;
    }

    .container .form form .form-group .input-container .hint {
      position: absolute;
      top: -23px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
      animation: hintFadeIn 0.3s;
    }

    .container .form form .form-group .input-container .hint .message {
      display: inline-block;
      padding: 6px 10px;
      font-size: 12px;
      text-transform: capitalize;
      color: #fff;
      font-weight: 700;
    }

    .container .form form .form-group .input-container .hint .message.danger {
      color: #f44336;
    }

    .container .form form .form-group .input-container .hint .message.success {
      color: #43d149;
      padding: 0 30px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 32px;
    }

    @media (max-width: 370px) {
      .container .form form .form-group.personal-image label {
        white-space: pre;
      }
    }

    .container .form form .form-group.personal-image img {
      border-radius: 50%;
      box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.302);
    }

    .container .form form .form-group img {
      display: block;
      margin: 10px auto;
      max-width: 100%;
      max-height: 300px;
      box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
    }

    .container .form form .back,
    .container .form form .next {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .container .form form .back button,
    .container .form form .next button {
      border: 0;
      color: #fff;
      padding: 10px 20px;
      font-size: 14px;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      transition: 0.3s;
    }

    .container .form form .back button.dest,
    .container .form form .next button.dest {
      background-color: #ffca39;
    }

    .container .form form .back button.dest:hover,
    .container .form form .next button.dest:hover {
      background-color: #1b8c8e;
    }

    .container .form form .back button.dest[disabled],
    .container .form form .next button.dest[disabled] {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .container .form form .back button.submit,
    .container .form form .next button.submit {
      background-color: #43d149;
      display: flex;
      align-items: center;
    }

    .container .form form .back button.submit:hover,
    .container .form form .next button.submit:hover {
      background-color: #2cb532;
    }

    .container .form form .back button.submit.disabled,
    .container .form form .next button.submit.disabled {
      background-color: #ccc;
      pointer-events: none;
    }

    .container .form form .back button.submit app-loading-svg,
    .container .form form .next button.submit app-loading-svg {
      width: 24px;
      margin: 0 5px;
      display: none;
    }

    .container .form form .back button.submit.loading app-loading-svg,
    .container .form form .next button.submit.loading app-loading-svg {
      display: block;
      width: 20px;
      height: 20px;
      animation: loading 3s linear infinite;
    }

    .personal-cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .personal-cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .personal-cropp-modal {
        padding: 35px 20px;
      }
    }

    .personal-cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .personal-cropp-modal image-cropper {
      max-height: 50vh;
    }

    .personal-cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .personal-cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .personal-cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .personal-cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .personal-cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .personal-cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .national-number-cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .national-number-cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .national-number-cropp-modal {
        padding: 35px 20px;
      }
    }

    .national-number-cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .national-number-cropp-modal image-cropper {
      max-height: 50vh;
    }

    .national-number-cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .national-number-cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .national-number-cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .national-number-cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .national-number-cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .national-number-cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .absher-cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .absher-cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .absher-cropp-modal {
        padding: 35px 20px;
      }
    }

    .absher-cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .absher-cropp-modal image-cropper {
      max-height: 50vh;
    }

    .absher-cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .absher-cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .absher-cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .absher-cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .absher-cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .absher-cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .license-cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .license-cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .license-cropp-modal {
        padding: 35px 20px;
      }
    }

    .license-cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .license-cropp-modal image-cropper {
      max-height: 50vh;
    }

    .license-cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .license-cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .license-cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .license-cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .license-cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .license-cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .registered-vehicle-cropp-modal {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 35px 100px;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (max-width: 850px) {
      .registered-vehicle-cropp-modal {
        padding: 35px 50px;
      }
    }

    @media (max-width: 500px) {
      .registered-vehicle-cropp-modal {
        padding: 35px 20px;
      }
    }

    .registered-vehicle-cropp-modal h2 {
      text-align: center;
      color: #fff;
    }

    .registered-vehicle-cropp-modal image-cropper {
      max-height: 50vh;
    }

    .registered-vehicle-cropp-modal .buttons {
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }

    .registered-vehicle-cropp-modal .buttons button {
      border: 0;
      margin: 5px;
      width: 150px;
      height: 40px;
      font-size: 15px;
      text-transform: capitalize;
      font-family: inherit;
      color: #fff;
      transition: 0.3s;
      cursor: pointer;
    }

    .registered-vehicle-cropp-modal .buttons button.select {
      background-color: #2cb532;
    }

    .registered-vehicle-cropp-modal .buttons button.select:hover {
      background-color: #43d149;
    }

    .registered-vehicle-cropp-modal .buttons button.reset {
      background-color: #09314d;
    }

    .registered-vehicle-cropp-modal .buttons button.reset:hover {
      background-color: #E54059;
    }

    .hidden {
      display: none;
    }

    .info {
      color: #00bcd4;
    }

    .capitalize {
      text-transform: capitalize;
    }

    .fs-12 {
      font-size: 12px;
    }

    body.rtl .container .form form .driver-info ul li {
      padding: 5px 15px 5px 0;
      font-family: jannat;
    }

    body.rtl .container .form form .driver-info ul li:before {
      right: 0;
      left: unset;
    }

    body.rtl .container .form form .driver-info ul:last-of-type li {
      padding: 5px 45px 5px 0;
    }

    body.rtl .container .form form .driver-info ul:last-of-type li:before {
      left: unset;
      right: 25px;
    }

    body.rtl .container .header h2,
    body.rtl .container .header p {
      font-family: cairo-semi-bold;
    }

    body.rtl .container .form form h2 {
      font-family: cairo-bold;
    }

    body.rtl .container .form form .form-group label {
      font-family: jannat-bold;
    }

    body.rtl .container .form form .form-group .hint {
      top: -25px;
    }


    svg[_ngcontent-wdg-c65] {
      width: 100%;
      display: block;
    }


    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    ::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading {
        font-size: 25px;
      }
    }

    .heading:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start {
        font-size: 25px;
      }
    }

    .heading-at-start:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start .sender {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar {
      font-family: inherit;
    }

    .swal-text {
      text-align: center !important;
    }

    ng-progress {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    .home .contact {
      min-height: 100vh;
      display: flex;
      overflow: hidden;
    }

    .home .contact .form-section {
      width: 50%;
      display: flex;
      flex-direction: column;
      padding: 90px 50px 50px;
    }

    .home .contact .form-section h3 {
      text-transform: capitalize;
      text-align: center;
      font-size: 16px;
      font-family: cairo-bold;
    }

    .home .contact .form-section .form {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .home .contact .form-section .form .form-group {
      margin-bottom: 12px;
      width: 100%;
      position: relative;
    }

    .home .contact .form-section .form .form-group input,
    .home .contact .form-section .form .form-group textarea {
      border-radius: 10px;
      display: block;
      width: 100%;
      background-color: #fff;
      border: 2px solid #e6e6e6;
      font-family: jannat;
      padding: 0 15px;
      height: 45px;
      font-size: 14px;
      outline: 1px solid rgba(199, 0, 255, 0);
      outline-offset: 25px;
      transition: 0.5s ease;
    }

    .home .contact .form-section .form .form-group input:focus,
    .home .contact .form-section .form .form-group textarea:focus {
      border: 2px solid #E54059;
    }

    .home .contact .form-section .form .form-group input.ng-touched.ng-invalid,
    .home .contact .form-section .form .form-group textarea.ng-touched.ng-invalid {
      border: 2px solid #f44336;
    }

    .home .contact .form-section .form .form-group textarea {
      height: 150px;
      resize: vertical;
    }

    .home .contact .form-section .form .form-errors {
      margin-top: 5px;
    }

    .home .contact .form-section .form .form-errors span {
      color: #f44336;
      font-size: 14px;
    }

    .home .contact .form-section .submit {
      zoom: 1;
      align-self: flex-start;
    }

    .home .contact .form-section .submit button {
      border: 0;
      border-radius: 10px;
      background-color: #ccc;
      color: #fff;
      padding: 10px 30px;
      font-size: 14px;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      transition: 0.3s;
    }

    .home .contact .form-section .submit button:enabled {
      background-color: #ffca39;
    }

    .home .contact .form-section .submit button:hover:enabled {
      background-color: #1b9092;
    }

    @media (max-width: 800px) {
      .home .contact .form-section {
        padding: 40px;
      }
    }

    .home .contact .get-in-touch {
      width: 50%;
      background-color: #0a3a5a;
      padding: 115px 50px;
      position: relative;
      overflow: hidden;
    }

    .home .contact .get-in-touch h2 {
      text-transform: capitalize;
      font-size: 26px;
    }

    .home .contact .get-in-touch .details {
      display: flex;
    }

    .home .contact .get-in-touch .details .icon {
      width: 50px;
      padding: 10px;
    }

    .home .contact .get-in-touch .details .data {
      color: #fff;
      font-size: 14px;
      font-family: nexa;
      padding-top: 5px;
    }

    .home .contact .get-in-touch app-sender-mark-svg {
      position: absolute;
      height: 150px;
      right: 0;
      bottom: 100px;
    }

    @media (max-width: 500px) {
      .home .contact .get-in-touch app-sender-mark-svg {
        opacity: 0.4;
        pointer-events: none;
      }
    }

    @media (max-width: 800px) {
      .home .contact {
        flex-direction: column;
      }

      .home .contact .form-section,
      .home .contact .get-in-touch {
        width: 100%;
      }
    }

    body.rtl .home .contact .get-in-touch app-sender-mark-svg {
      left: 0;
      right: unset;
      transform: rotateY(180deg);
    }

    body.rtl .home .contact .get-in-touch h2 {
      font-family: cairo-bold;
    }


    *[_ngcontent-wdg-c62] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c62]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c62]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c62]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c62]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c62],
    html[_ngcontent-wdg-c62] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c62] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c62] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c62] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c62] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c62]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c62] .sender[_ngcontent-wdg-c62] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c62] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c62] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c62]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c62] .sender[_ngcontent-wdg-c62] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c62] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c62] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c62] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c62] {
      width: 100%;
    }

    svg[_ngcontent-wdg-c62] circle[_ngcontent-wdg-c62],
    svg[_ngcontent-wdg-c62] path[_ngcontent-wdg-c62] {
      fill: #ffca39;
    }


    *[_ngcontent-wdg-c63] {
      box-sizing: border-box;
    }

    [_ngcontent-wdg-c63]::-webkit-scrollbar {
      width: 8px;
    }

    [_ngcontent-wdg-c63]::-webkit-scrollbar-track {
      background: #f2f2f2;
      background: #fff;
    }

    [_ngcontent-wdg-c63]::-webkit-scrollbar-thumb {
      background: #ffca39;
    }

    [_ngcontent-wdg-c63]::-webkit-scrollbar-thumb:hover {
      background: #ffca39;
    }

    body[_ngcontent-wdg-c63],
    html[_ngcontent-wdg-c63] {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      height: 100%;
    }

    body[_ngcontent-wdg-c63] {
      position: relative;
      min-height: 100vh;
      font-family: nexa;
      color: #124d79;
      padding-top: 70px;
    }

    body.rtl[_ngcontent-wdg-c63] {
      direction: rtl;
      letter-spacing: 0;
      font-family: jannat;
    }

    .heading[_ngcontent-wdg-c63] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading[_ngcontent-wdg-c63] {
        font-size: 25px;
      }
    }

    .heading[_ngcontent-wdg-c63]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading[_ngcontent-wdg-c63] .sender[_ngcontent-wdg-c63] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .heading-at-start[_ngcontent-wdg-c63] {
      font-family: nexa-bold;
      font-size: 42px;
      color: #ffca39;
      margin-top: 0;
      margin-bottom: 50px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-transform: capitalize;
    }

    @media (max-width: 500px) {
      .heading-at-start[_ngcontent-wdg-c63] {
        font-size: 25px;
      }
    }

    .heading-at-start[_ngcontent-wdg-c63]:after {
      content: "";
      background-color: #ffca39;
      position: absolute;
      top: calc(100% + 10px);
      height: 3px;
      width: 200px;
    }

    .heading-at-start[_ngcontent-wdg-c63] .sender[_ngcontent-wdg-c63] {
      margin: 0 12px;
      text-transform: uppercase;
    }

    .mat-calendar[_ngcontent-wdg-c63] {
      font-family: inherit;
    }

    .swal-text[_ngcontent-wdg-c63] {
      text-align: center !important;
    }

    ng-progress[_ngcontent-wdg-c63] {
      direction: ltr;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(1turn);
      }
    }

    svg[_ngcontent-wdg-c63] {
      width: 100%;
    }

    svg[_ngcontent-wdg-c63] path[_ngcontent-wdg-c63] {
      fill: #ffca39;
    }

	@media (max-width: 400px) {
	.btns-container{
	flex-direction: column;
	align-items: center;
	justify-content: center;
		}
}