.btn {
  min-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border: thin solid transparent;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #ffffff;
}

.btn-primary:disabled {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #ffffff;
}

.btn-primary-light {
  background: #f6f6f6;
  border-color: #f6f6f6;
  color: #ffffff;
}

.btn-primary-light:hover, .btn-primary-light:active, .btn-primary-light:focus {
  background: rgb(220.5, 220.5, 220.5);
  border-color: rgb(220.5, 220.5, 220.5);
  color: #ffffff;
}

.btn-primary-outline {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-primary-outline svg path {
  fill: var(--primary-color);
  transition: all 0.3s ease;
}

.btn-primary-outline:hover, .btn-primary-outline:active, .btn-primary-outline:focus {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

.btn-primary-outline:hover svg path, .btn-primary-outline:active svg path, .btn-primary-outline:focus svg path {
  fill: #ffffff;
}

.btn-secondary {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background: var(--secondary-light);
  border-color: var(--secondary-light);
  color: #ffffff;
}

.btn-secondary-outline {
  background: transparent;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.btn-secondary-outline svg path {
  fill: var(--secondary-color);
  transition: all 0.3s ease;
}

.btn-secondary-outline:hover, .btn-secondary-outline:active, .btn-secondary-outline:focus {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
}

.btn-secondary-outline:hover svg path, .btn-secondary-outline:active svg path, .btn-secondary-outline:focus svg path {
  fill: #ffffff;
}

.btn-secondary-light {
  background: var(--secondary-light);
  border-color: var(--secondary-light);
  color: #ffffff;
}

.btn-secondary-light:hover, .btn-secondary-light:active, .btn-secondary-light:focus {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
}

.btn-secondary-light-outline {
  background: transparent;
  border-color: var(--secondary-light);
  color: var(--secondary-light);
}

.btn-secondary-light-outline svg path {
  fill: var(--secondary-light);
  transition: all 0.3s ease;
}

.btn-secondary-light-outline:hover, .btn-secondary-light-outline:active, .btn-secondary-light-outline:focus {
  background: var(--secondary-light);
  border-color: var(--secondary-light);
  color: #ffffff;
}

.btn-secondary-light-outline:hover svg path, .btn-secondary-light-outline:active svg path, .btn-secondary-light-outline:focus svg path {
  fill: #ffffff;
}

.btn-success {
  background: #05822c;
  border-color: #05822c;
  color: #ffffff;
}

.btn-success:hover, .btn-success:active, .btn-success:focus {
  background: rgb(6.8888888889, 179.1111111111, 60.6222222222);
  border-color: rgb(6.8888888889, 179.1111111111, 60.6222222222);
  color: #ffffff;
}

.btn-success-light {
  background: #065920;
  border-color: #065920;
  color: #ffffff;
}

.btn-success-light:hover, .btn-success-light:active, .btn-success-light:focus {
  background: rgb(2.7789473684, 41.2210526316, 14.8210526316);
  border-color: rgb(2.7789473684, 41.2210526316, 14.8210526316);
  color: #ffffff;
}

.btn-success-outline {
  background: transparent;
  border-color: #05822c;
  color: #05822c;
}

.btn-success-outline svg path {
  fill: #05822c;
  transition: all 0.3s ease;
}

.btn-success-outline:hover, .btn-success-outline:active, .btn-success-outline:focus {
  background: #05822c;
  border-color: #05822c;
  color: #ffffff;
}

.btn-success-outline:hover svg path, .btn-success-outline:active svg path, .btn-success-outline:focus svg path {
  fill: #ffffff;
}

.btn-info {
  background: #1565c0;
  border-color: #1565c0;
  color: #ffffff;
}

.btn-info:hover, .btn-info:active, .btn-info:focus {
  background: rgb(33.2535211268, 125.6478873239, 230.7464788732);
  border-color: rgb(33.2535211268, 125.6478873239, 230.7464788732);
  color: #ffffff;
}

.btn-info-light {
  background: #519ed3;
  border-color: #519ed3;
  color: #ffffff;
}

.btn-info-light:hover, .btn-info-light:active, .btn-info-light:focus {
  background: rgb(48.6422018349, 133.7660550459, 192.3577981651);
  border-color: rgb(48.6422018349, 133.7660550459, 192.3577981651);
  color: #ffffff;
}

.btn-info-outline {
  background: transparent;
  border-color: #1565c0;
  color: #1565c0;
}

.btn-info-outline svg path {
  fill: #1565c0;
  transition: all 0.3s ease;
}

.btn-info-outline:hover, .btn-info-outline:active, .btn-info-outline:focus {
  background: #1565c0;
  border-color: #1565c0;
  color: #ffffff;
}

.btn-info-outline:hover svg path, .btn-info-outline:active svg path, .btn-info-outline:focus svg path {
  fill: #ffffff;
}

.btn-danger {
  background: #dd0417;
  border-color: #dd0417;
  color: #ffffff;
}

.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
  background: rgb(250.84, 25.16, 44.92);
  border-color: rgb(250.84, 25.16, 44.92);
  color: #ffffff;
}

.btn-danger-light {
  background: #d13340;
  border-color: #d13340;
  color: #ffffff;
}

.btn-danger-light:hover, .btn-danger-light:active, .btn-danger-light:focus {
  background: rgb(170.544, 38.456, 49.324);
  border-color: rgb(170.544, 38.456, 49.324);
  color: #ffffff;
}

.btn-danger-outline {
  background: transparent;
  border-color: #dd0417;
  color: #dd0417;
}

.btn-danger-outline svg path {
  fill: #dd0417;
  transition: all 0.3s ease;
}

.btn-danger-outline:hover, .btn-danger-outline:active, .btn-danger-outline:focus {
  background: #dd0417;
  border-color: #dd0417;
  color: #ffffff;
}

.btn-danger-outline:hover svg path, .btn-danger-outline:active svg path, .btn-danger-outline:focus svg path {
  fill: #ffffff;
}

.btn-light {
  background: #e1e1e1;
  border-color: #e1e1e1;
  color: #000000;
}

.btn-light:hover, .btn-light:active, .btn-light:focus {
  background: rgb(199.5, 199.5, 199.5);
  border-color: rgb(199.5, 199.5, 199.5);
  color: #000000;
}

.btn-light-outline, .btn-light-outline:hover, .btn-light-outline:active, .btn-light-outline:focus {
  background: transparent;
  border-color: #000000 !important;
  color: #000000;
}

body {
  background: url("../images/login/login_bg.png") no-repeat;
  background-position: top;
  background-size: 100%;
  font-family: "Almarai", sans-serif;
  font-style: normal;
}

.dir-ar {
  direction: rtl;
}

.dir-en {
  direction: ltr;
}

input.is-invalid {
  padding-left: 2.5rem !important;
}

.form-group {
  margin-bottom: 16px;
}
.form-group .forgot-pass a {
  font-size: 14px;
  text-decoration: none;
  color: var(--primary-dark);
  cursor: pointer;
}
.form-group .forgot-pass a:hover,
.form-group .forgot-pass a:active,
.form-group .forgot-pass a:focus {
  color: var(--primary-light);
}

.register-link {
  font-size: 14px;
  color: var(--primary-dark);
  text-decoration: none;
  text-align: center;
}

.register-link:hover,
.register-link:active,
.register-link:focus {
  color: var(--primary-light);
}

label {
  width: 100%;
}
label p {
  margin-bottom: 0.5rem;
}

label[for=password] blockquote,
label[for=password_confirmation] blockquote {
  cursor: pointer;
  margin-bottom: 0;
  position: relative;
}
label[for=password] blockquote i,
label[for=password_confirmation] blockquote i {
  color: #6f6f6f;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0%, -50%);
}

blockquote {
  margin-bottom: 0;
}

input,
.form-control {
  box-shadow: none;
  border-color: #dedede;
  direction: rtl;
  padding: 0.7rem;
  border-radius: 0.7rem;
  color: #000000;
}
input:focus, input:hover,
.form-control:focus,
.form-control:hover {
  box-shadow: none;
  border-color: var(--primary-dark);
  color: #000000;
}

/**************************************/
/*************** Login ****************/
/**************************************/
.login,
.forgot_pass,
.otp_code,
.reset_pass {
  min-height: 100vh;
  max-width: 94%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  overflow-x: hidden;
}
.login .card,
.forgot_pass .card,
.otp_code .card,
.reset_pass .card {
  box-shadow: 0px 0px 3rem -38px #332600 !important;
  border-radius: 1rem;
  padding: 2rem;
  background: url("../images/login/login_card.png") no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}
.login .card .slider,
.forgot_pass .card .slider,
.otp_code .card .slider,
.reset_pass .card .slider {
  align-items: center;
}
.login .card .slider .owl-carousel .owl-stage-outer,
.forgot_pass .card .slider .owl-carousel .owl-stage-outer,
.otp_code .card .slider .owl-carousel .owl-stage-outer,
.reset_pass .card .slider .owl-carousel .owl-stage-outer {
  height: auto;
}
.login .card .slider .owl-carousel .item,
.forgot_pass .card .slider .owl-carousel .item,
.otp_code .card .slider .owl-carousel .item,
.reset_pass .card .slider .owl-carousel .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
}
.login .card .slider .owl-carousel .item h4,
.forgot_pass .card .slider .owl-carousel .item h4,
.otp_code .card .slider .owl-carousel .item h4,
.reset_pass .card .slider .owl-carousel .item h4 {
  margin-bottom: 0rem;
  font-weight: bold;
}
.login .card .slider .owl-carousel .item img,
.forgot_pass .card .slider .owl-carousel .item img,
.otp_code .card .slider .owl-carousel .item img,
.reset_pass .card .slider .owl-carousel .item img {
  width: 100%;
  height: 250px;
}
.login .card .slider .owl-carousel .owl-dots,
.forgot_pass .card .slider .owl-carousel .owl-dots,
.otp_code .card .slider .owl-carousel .owl-dots,
.reset_pass .card .slider .owl-carousel .owl-dots {
  direction: rtl;
}
.login .card .slider .owl-carousel .owl-dots .owl-dot.active span,
.login .card .slider .owl-carousel .owl-dot:hover span,
.forgot_pass .card .slider .owl-carousel .owl-dots .owl-dot.active span,
.forgot_pass .card .slider .owl-carousel .owl-dot:hover span,
.otp_code .card .slider .owl-carousel .owl-dots .owl-dot.active span,
.otp_code .card .slider .owl-carousel .owl-dot:hover span,
.reset_pass .card .slider .owl-carousel .owl-dots .owl-dot.active span,
.reset_pass .card .slider .owl-carousel .owl-dot:hover span {
  background-color: var(--primary-color);
}
.login .card .form_cont,
.forgot_pass .card .form_cont,
.otp_code .card .form_cont,
.reset_pass .card .form_cont {
  height: auto;
  border: thin solid #d5d5d5;
  border-radius: 1rem;
  box-shadow: 0px 6px 12px 0px rgba(96, 96, 96, 0.1215686275);
}
.login .card .form_cont form,
.forgot_pass .card .form_cont form,
.otp_code .card .form_cont form,
.reset_pass .card .form_cont form {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.login .card .form_cont form .logo,
.forgot_pass .card .form_cont form .logo,
.otp_code .card .form_cont form .logo,
.reset_pass .card .form_cont form .logo {
  width: 50%;
  max-width: 250px;
  margin: 10px auto;
}
.login .card .form_cont form .btn-submit,
.forgot_pass .card .form_cont form .btn-submit,
.otp_code .card .form_cont form .btn-submit,
.reset_pass .card .form_cont form .btn-submit {
  width: 100%;
}

/*************** forgot ***************/
.forgot_pass .card .slider img,
.otp_code .card .slider img,
.reset_pass .card .slider img {
  width: 100%;
  height: 480px;
}
.forgot_pass .card .form_cont form,
.otp_code .card .form_cont form,
.reset_pass .card .form_cont form {
  justify-content: space-evenly;
}

/*************** forgot ***************/
.otp_code .card .form_cont form {
  justify-content: space-evenly;
}
.otp_code h2 {
  text-align: center;
  margin-top: 0;
  color: #333;
}
.otp_code .code-inputs {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}
.otp_code .input-box {
  width: 60px;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.otp_code .input-box.active {
  border-color: #1b5e20;
  outline: none;
}
.otp_code .input-box.filled {
  background-color: #fff;
  border-color: #1b5e20;
  color: #1b5e20;
}
.otp_code #resendCode {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--primary-dark);
  text-decoration: underline;
}
.otp_code #resendCode:disabled {
  text-decoration: none;
  color: #6f6f6f;
  cursor: not-allowed;
}

/*# sourceMappingURL=login.css.map */