.btn {
  border-radius: 10px;
}

.btn.btn-floating {
  border-radius: 50%;
}

.btn-default {
  color: #343434;
  background-color: #ffffff;
  border-color: #adadad;
  fill: #343434;
}

.btn-default:focus, .btn-default.focus, .btn-default:hover, .btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle {
  background-color: #e6e6e6;
  border-color: #8e8e8e;
  color: #343434;
}

.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus {
  background-color: #ffffff;
  border-color: #adadad;
}

.btn-primary {
  color: #ffffff;
  background-color: #29abe2;
  border-color: #29abe2;
  fill: #ffffff;
}

.btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  background-color: #1a8dbe;
  border-color: #1987b5;
  color: #ffffff;
}

.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #29abe2;
  border-color: #29abe2;
}

.btn-secondary {
  color: #ffffff;
  background-color: #1f80aa;
  border-color: #1f80aa;
  fill: #ffffff;
}

.btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
  background-color: #17607f;
  border-color: #165976;
  color: #ffffff;
}

.btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary.focus {
  background-color: #1f80aa;
  border-color: #1f80aa;
}

.btn-accent {
  color: #333333;
  background-color: #ffc142;
  border-color: #ffc142;
  fill: #333333;
  fill: #333333;
}

.btn-accent:focus, .btn-accent.focus, .btn-accent:hover, .btn-accent:active, .btn-accent.active,
.open > .btn-accent.dropdown-toggle {
  background-color: #ffb00f;
  border-color: #ffad05;
  color: #333333;
}

.btn-accent.disabled:hover, .btn-accent.disabled:focus, .btn-accent.disabled.focus, .btn-accent[disabled]:hover, .btn-accent[disabled]:focus, .btn-accent[disabled].focus,
fieldset[disabled] .btn-accent:hover,
fieldset[disabled] .btn-accent:focus,
fieldset[disabled] .btn-accent.focus {
  background-color: #ffc142;
  border-color: #ffc142;
}

.btn-flat {
  color: #29abe2;
  background-color: transparent;
  border-color: transparent;
  fill: #29abe2;
  fill: #29abe2;
  white-space: normal;
}

.btn-flat:focus, .btn-flat.focus, .btn-flat:hover, .btn-flat:active, .btn-flat.active,
.open > .btn-flat.dropdown-toggle {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #29abe2;
}

.btn-flat.disabled:hover, .btn-flat.disabled:focus, .btn-flat.disabled.focus, .btn-flat[disabled]:hover, .btn-flat[disabled]:focus, .btn-flat[disabled].focus,
fieldset[disabled] .btn-flat:hover,
fieldset[disabled] .btn-flat:focus,
fieldset[disabled] .btn-flat.focus {
  background-color: transparent;
  border-color: transparent;
}

.btn-flat:hover, .btn-flat:focus,
.open .dropdown-toggle .btn-flat {
  color: inherit;
  background-color: #ffffff;
  border-color: #adadad;
  fill: inherit;
  color: #1a8dbe;
  fill: #1a8dbe;
}

.btn-flat:hover:focus, .btn-flat:hover.focus, .btn-flat:hover:hover, .btn-flat:hover:active, .btn-flat:hover.active,
.open > .btn-flat:hover.dropdown-toggle, .btn-flat:focus:focus, .btn-flat:focus.focus, .btn-flat:focus:hover, .btn-flat:focus:active, .btn-flat:focus.active,
.open > .btn-flat:focus.dropdown-toggle,
.open .dropdown-toggle .btn-flat:focus,
.open .dropdown-toggle .btn-flat.focus,
.open .dropdown-toggle .btn-flat:hover,
.open .dropdown-toggle .btn-flat:active,
.open .dropdown-toggle .btn-flat.active,
.open >
.open .dropdown-toggle .btn-flat.dropdown-toggle {
  background-color: #e6e6e6;
  border-color: #8e8e8e;
  color: inherit;
}

.btn-flat:hover.disabled:hover, .btn-flat:hover.disabled:focus, .btn-flat:hover.disabled.focus, .btn-flat:hover[disabled]:hover, .btn-flat:hover[disabled]:focus, .btn-flat:hover[disabled].focus,
fieldset[disabled] .btn-flat:hover:hover,
fieldset[disabled] .btn-flat:hover:focus,
fieldset[disabled] .btn-flat:hover.focus, .btn-flat:focus.disabled:hover, .btn-flat:focus.disabled:focus, .btn-flat:focus.disabled.focus, .btn-flat:focus[disabled]:hover, .btn-flat:focus[disabled]:focus, .btn-flat:focus[disabled].focus,
fieldset[disabled] .btn-flat:focus:hover,
fieldset[disabled] .btn-flat:focus:focus,
fieldset[disabled] .btn-flat:focus.focus,
.open .dropdown-toggle .btn-flat.disabled:hover,
.open .dropdown-toggle .btn-flat.disabled:focus,
.open .dropdown-toggle .btn-flat.disabled.focus,
.open .dropdown-toggle .btn-flat[disabled]:hover,
.open .dropdown-toggle .btn-flat[disabled]:focus,
.open .dropdown-toggle .btn-flat[disabled].focus,
fieldset[disabled]
.open .dropdown-toggle .btn-flat:hover,
fieldset[disabled]
.open .dropdown-toggle .btn-flat:focus,
fieldset[disabled]
.open .dropdown-toggle .btn-flat.focus {
  background-color: #ffffff;
  border-color: #adadad;
}

.btn-flat:hover .icon-inline, .btn-flat:focus .icon-inline,
.open .dropdown-toggle .btn-flat .icon-inline {
  fill: #343434;
}

.btn-flat:active, .btn-flat.active {
  background-color: rgba(12, 12, 12, 0.25);
  border-color: transparent;
  color: white;
}

.btn-link {
  color: #29abe2;
  background-color: transparent;
  border-color: transparent;
  fill: #29abe2;
}

.btn-link:focus, .btn-link.focus, .btn-link:hover, .btn-link:active, .btn-link.active,
.open > .btn-link.dropdown-toggle {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #29abe2;
}

.btn-link.disabled:hover, .btn-link.disabled:focus, .btn-link.disabled.focus, .btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled].focus,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link.focus {
  background-color: transparent;
  border-color: transparent;
}

.btn-link:hover, .btn-link:focus {
  color: #178ab4;
  fill: #178ab4;
  text-decoration: none;
}

.btn-link[disabled]:hover, .btn-link[disabled]:focus {
  color: #777;
}

.btn--with-bgicon {
  color: #fff;
}

.btn--facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
  fill: #fff;
}

.btn--facebook:focus, .btn--facebook.focus, .btn--facebook:hover, .btn--facebook:active, .btn--facebook.active,
.open > .btn--facebook.dropdown-toggle {
  background-color: #2d4373;
  border-color: #2a3f6c;
  color: #fff;
}

.btn--facebook.disabled:hover, .btn--facebook.disabled:focus, .btn--facebook.disabled.focus, .btn--facebook[disabled]:hover, .btn--facebook[disabled]:focus, .btn--facebook[disabled].focus,
fieldset[disabled] .btn--facebook:hover,
fieldset[disabled] .btn--facebook:focus,
fieldset[disabled] .btn--facebook.focus {
  background-color: #3b5998;
  border-color: #3b5998;
}

.btn--linkedin {
  color: #fff;
  background-color: #0077b5;
  border-color: #0077b5;
  fill: #fff;
}

.btn--linkedin:focus, .btn--linkedin.focus, .btn--linkedin:hover, .btn--linkedin:active, .btn--linkedin.active,
.open > .btn--linkedin.dropdown-toggle {
  background-color: #005582;
  border-color: #004f78;
  color: #fff;
}

.btn--linkedin.disabled:hover, .btn--linkedin.disabled:focus, .btn--linkedin.disabled.focus, .btn--linkedin[disabled]:hover, .btn--linkedin[disabled]:focus, .btn--linkedin[disabled].focus,
fieldset[disabled] .btn--linkedin:hover,
fieldset[disabled] .btn--linkedin:focus,
fieldset[disabled] .btn--linkedin.focus {
  background-color: #0077b5;
  border-color: #0077b5;
}

.btn.btn--google {
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.54);
  background: url("../../components/02-atoms/button/icons/google_signin_buttons/google-sign-in.svg") no-repeat 9px center;
}

.btn.btn--google:hover, .btn.btn--google:focus {
  outline: 4px solid rgba(66, 133, 244, 0.3);
}

.btn.btn--google:active {
  background-color: #eee;
}

.btn.btn--google:disabled, .btn.btn--google[disabled] {
  color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.08);
  background-image: url("../../components/02-atoms/button/icons/google_signin_buttons/google-sign-in-disabled.svg");
}

.btn.btn--google:disabled:hover, .btn.btn--google:disabled:focus, .btn.btn--google[disabled]:hover, .btn.btn--google[disabled]:focus, .btn.btn--google:active:hover, .btn.btn--google:active:focus {
  outline: none;
}

.btn--twitter {
  color: #fff;
  background-color: #1da1f2;
  border-color: #1da1f2;
  fill: #fff;
}

.btn--twitter:focus, .btn--twitter.focus, .btn--twitter:hover, .btn--twitter:active, .btn--twitter.active,
.open > .btn--twitter.dropdown-toggle {
  background-color: #0c85d0;
  border-color: #0b7fc6;
  color: #fff;
}

.btn--twitter.disabled:hover, .btn--twitter.disabled:focus, .btn--twitter.disabled.focus, .btn--twitter[disabled]:hover, .btn--twitter[disabled]:focus, .btn--twitter[disabled].focus,
fieldset[disabled] .btn--twitter:hover,
fieldset[disabled] .btn--twitter:focus,
fieldset[disabled] .btn--twitter.focus {
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.btn-sm {
  border-radius: 8px;
}

.btn-xs {
  border-radius: 5px;
}

.shariff-button {
  border-radius: 10px;
}

body {
  font-family: "montserrat", sans-serif;
  font-weight: 400;
  color: #343434;
}

a:not(.btn) {
  font-weight: 400;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--link-color);
          text-decoration-color: var(--link-color);
  color: #343434;
}

a:not(.btn):hover, a:not(.btn):focus {
  cursor: pointer;
  color: var(--link-color);
}

:lang(ar) {
  font-family: "Almarai", "montserrat", sans-serif;
}

@media (max-width: 599px) {
  .social-auth-buttons > .card__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .social-auth-buttons > .card__block .btn {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .social-auth-buttons > .card__block .btn.btn--google {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}
