/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.card .table th {
  padding: 0.72rem 1rem !important;
}
.card .table td {
  padding: 0.72rem 1rem !important;
}

.contact .form-select {
  display: inline-block;
  width: auto;
  padding: 0.571rem 2rem 0.571rem 1rem;
}

.btn-success {
  border-color: #f27121 !important;
  background-color: #f27121 !important;
  color: #ffffff !important;
}

.btn-add-payment {
  border-color: #f27121 !important;
  background-color: #f27121 !important;
  color: #ffffff !important;
}

.btn-success:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}
.btn-success:focus:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}
.btn-success:active:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}

.btn-add-payment:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}
.btn-add-payment:focus:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}
.btn-add-payment:active:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}

.btn-primary {
  border: 0 !important;
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0% !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  border: 0 !important;
  background: linear-gradient(90deg, #ffc30c 0%, #f27121 100%) 0% 0% !important;
  color: #ffffff !important;
}
.btn-primary:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f27121;
}

.btn-outline-primary {
  border: 1px solid #f27121 !important;
  background: none;
  color: #f27121;
}
.btn-outline-primary:hover:not(.disabled):not(:disabled) {
  background: linear-gradient(90deg, #ffc30c 0%, #f27121 100%) 0% 0%;
  color: #ffffff;
  border: 1px solid transparent !important;
}

.btn-outline-secondary {
  border: 1px solid #f27121 !important;
  background: none;
  color: #f27121;
  height: 44px;
}
.btn-outline-secondary:hover:not(.disabled):not(:disabled) {
  background: #f27121;
  color: #ffffff;
  border: 1px solid #f27121 !important;
}
.btn-outline-secondary:focus:not(.disabled):not(:disabled) {
  background: #f27121;
  color: #ffffff;
  border: 1px solid #f27121 !important;
}

.page-item.active .page-link {
  z-index: 3;
  border-radius: 5rem;
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0%;
  color: #ffffff !important;
  font-weight: 600;
  border: 0;
}

.page-item .page-link:hover {
  color: #f27121;
}

.main-menu.menu-light .navigation > li.active > a {
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0%;
  box-shadow: 0 0 2px 0px rgba(242, 113, 33, 0.7);
  color: #ffffff;
  font-weight: 400;
  border-radius: 4px;
}

.main-menu.menu-light .navigation > li ul .active {
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0%;
  box-shadow: 0 0 2px 0px rgba(242, 113, 33, 0.7);
  color: #ffffff;
  font-weight: 400;
  border-radius: 4px;
}

.form-check-input:checked {
  background-color: #f27121;
  border-color: #f27121;
}

a {
  color: #f27121;
}

.nav-tabs .nav-link.active {
  color: #f27121;
}

.nav-tabs .nav-link:after {
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0% !important;
}

.form-select:focus {
  border-color: #f27121;
}

.form-control:focus {
  border-color: #f27121;
}

.invoice-edit .invoice-preview-card .invoice-product-details {
  padding: 20px;
}

.invoice-add .invoice-preview-card .invoice-product-details {
  padding: 20px;
}

.dt-buttons button.dt-button {
  margin-left: 10px !important;
  margin-bottom: 5px;
  margin-top: 5px;
}
.dt-buttons .w24rem {
  max-width: 24rem !important;
}

.graphsummary {
  padding: 30px 10px 20px;
}
.graphsummary .unpaid-current {
  border-right: 1px solid #DDE0E3;
}
.graphsummary .overdue-amounts {
  padding-bottom: 20px;
}
.graphsummary .borderRT {
  border-right: #4dc0b5 1px solid;
}
.graphsummary .header {
  margin-bottom: 10px;
  color: #FD4E4E;
  font-size: 14px;
}
.graphsummary .amount {
  font-weight: 500;
  font-size: 13px;
  color: #FD4E4E;
}
.graphsummary .period-value {
  font-weight: 500;
  font-size: 13px;
  color: #FD4E4E;
  display: block;
  padding-top: 8px;
}
.graphsummary .period-label {
  font-size: 13px;
  color: #4E4E4E;
}
.graphsummary .avatar {
  border-radius: 50%;
  width: 11px;
  height: 11px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #28c76f;
}
.graphsummary .unpaid-overdue .a1to15 .avatar {
  background-color: #FFCA5D;
}
.graphsummary .unpaid-overdue .a16to30 .avatar {
  background-color: #FDA641;
}
.graphsummary .unpaid-overdue .a31plus .avatar {
  background-color: #F86B6B;
}

.graphsummary.unpaid-current i {
  background-color: #606060;
  color: #606060;
}

div.dataTables_wrapper div.dataTables_filter select {
  width: 100px;
  margin: 0;
}
div.dataTables_wrapper div.dataTables_length select {
  width: 100px;
  margin: 0;
}

.dataTables_paginate {
  width: auto;
  float: right;
}

.loginPage .brand-logo {
  justify-content: left;
  margin: 0;
  position: absolute;
  top: 2rem;
  z-index: 1;
}
.loginPage .brand-logo svg {
  width: auto;
  height: 50px;
  display: inline-block;
}
.loginPage .card-body {
  padding: 1.5rem 0rem;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}
.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}
.form-group input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #d8d6de;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-group label {
  position: relative;
  cursor: pointer;
}
.form-group label:before {
  content: "";
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #d8d6de;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 0.357rem;
}

.card-main {
  width: 100%;
  float: left;
  display: inherit;
  position: relative;
  padding: 15px 15px 25px;
}
.card-main .dlt {
  position: absolute;
  top: -10px;
  right: -10px;
}
.card-main .book-now {
  position: absolute;
  bottom: -10px;
  right: 20px;
}

.card-no {
  font-size: 16px;
  font-weight: 600;
  color: #b9b9c3;
  padding-top: 5px;
  width: 100%;
  float: left;
  margin-bottom: 15px;
}
.card-no img {
  width: auto;
  height: 14px;
  margin-right: 5px;
}
.card-no .last-no {
  font-size: 18px;
  color: #5e5873;
}

.card-holder {
  width: 50%;
  float: left;
  font-weight: 600;
  margin-bottom: 20px;
}
.card-holder label {
  font-size: 13px;
  color: #5e5873;
}
.card-holder span {
  width: 100%;
  float: left;
  font-size: 13px;
  color: #b9b9c3;
  padding-top: 5px;
}

.card-holder.expir {
  width: auto;
  float: right;
  font-weight: 600;
  margin-bottom: 20px;
}
.card-holder.expir label {
  font-size: 13px;
  color: #5e5873;
}
.card-holder.expir span {
  width: 100%;
  float: left;
  font-size: 13px;
  color: #b9b9c3;
  padding-top: 5px;
}

.border-rt {
  border-right: 1px solid #d6dce1;
}

.expiration-date {
  width: 100%;
  padding: 0.571rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6b7b;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d8d6de;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.357rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.expiration-date input.mm {
  border: 0px;
  width: 30px;
  height: 16px;
  font-size: 1rem;
  font-weight: 400;
}
.expiration-date input.mm:focus-visible {
  border: 0px;
  outline: none;
}
.expiration-date input.yyyy {
  border: 0px;
  width: 150px;
  height: 16px;
  font-size: 1rem;
  font-weight: 400;
}
.expiration-date input.yyyy:focus-visible {
  border: 0px;
  outline: none;
}

.comingsoon .brand-logo {
  justify-content: left;
  margin: 10px 0px 0px;
  position: relative;
  top: auto;
  z-index: 1;
  left: auto;
  display: inline-block;
}
.comingsoon .brand-logo h2 {
  width: auto;
  display: inline-block;
}
.comingsoon img.img-fluid {
  width: 60%;
  display: inline-block;
}
.comingsoon h1 {
  width: auto;
  font-weight: bold;
  font-size: 40px;
}

.registerPage .brand-logo svg {
  width: auto;
  height: 50px;
}

.main-menu .brand-logo svg {
  width: 100%;
  height: auto;
}

.dashboard-new .card .avatar {
  position: absolute;
  right: 0px;
  top: 12px;
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0% !important;
  width: 40px !important;
  height: 40px !important;
}
.dashboard-new .card .avatar svg {
  width: 24px;
}
.dashboard-new .card .avatar svg path {
  fill: #fff;
  stroke: none;
}
.dashboard-new .card .avatar svg g {
  fill: #fff;
  stroke: none;
}
.dashboard-new .card .avatar .avatar-content {
  color: #fff;
}
.dashboard-new .card .collection svg {
  width: 24px;
}
.dashboard-new .card .collection svg path {
  stroke: #fff;
  fill: none;
}
.dashboard-new .card .collection svg g {
  stroke: #fff;
  fill: none;
}

.app-user-view-account .user-info h4 {
  width: auto;
  float: left;
  margin-right: 10px;
}

.toggle {
  --width: 230px;
  --height: 30px;
  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  cursor: pointer;
}

.toggle input {
  display: none;
}

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #F2F2F2;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  color: #ADACAC;
}

.toggle .slider .right_label {
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0%;
  color: #FFF;
}

.toggle input:checked + .slider .left_label {
  background: linear-gradient(90deg, #f27121 0%, #ffc30c 100%) 0% 0%;
  color: #FFF;
}

.toggle input:checked + .slider .right_label {
  background: transparent;
  color: #ADACAC;
}

span.left_label,
span.right_label {
  width: 50%;
  float: left;
  text-align: center;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding-top: 5px;
  font-family: Helvetica Neue;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
}

@media only screen and (max-width: 576px) {
  .loginPage .brand-logo svg {
    width: 80%;
    height: auto;
  }
}
.card-input {
  display: block;
  width: 100%;
  padding: 0rem 1rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6b7b;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d8d6de;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.357rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.card-input iframe {
  height: 30px !important;
}

.form-control-card {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6b7b;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d8d6de;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.357rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

div.dataTables_wrapper div.dataTables_filter {
  width: 100%;
}
div.dataTables_wrapper div.dataTables_filter label {
  width: 100%;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: calc(100% - 60px);
}

.subscription_info .card {
  min-height: 780px;
  padding-top: 20px;
}

.alertify-notifier.ajs-right {
  color: #fff;
}

.pricing-badge.my-2.mx-1.text-end {
  position: absolute;
  right: 15px;
  padding: 0px;
  margin: 0px !important;
  top: 15px;
}

ul.list-group li {
  position: relative;
  padding-left: 20px;
}
ul.list-group li i.mdi {
  position: absolute;
  left: 0px;
  top: 0px;
}

.otp-input-fields input {
  width: 14.9%;
  float: left;
  margin: 0px 3px 20px;
}

@media only screen and (max-width: 992px) {
  div.dataTables_wrapper div.dataTables_filter {
    width: 100%;
  }
  div.dataTables_wrapper div.dataTables_filter label {
    width: 100%;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: calc(100% - 60px);
  }

  .invoice-preview .invoice-padding {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .invoice-edit .invoice-padding {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .invoice-add .invoice-padding {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .taxPage .text-start {
    width: 100%;
    text-align: right !important;
  }

  .subscription_info .card {
    min-height: 850px;
  }
}
@media only screen and (max-width: 767px) {
  .btn-outline-secondary {
    font-size: 12px;
    padding: 10px;
    height: 32px;
  }

  .btn-primary {
    font-size: 12px;
    padding: 10px;
  }

  div.dt-buttons {
    text-align: left !important;
  }

  div.table-responsive div.dataTables_wrapper div.row div[class^=col-]:last-child {
    padding: 0;
    display: inline-block !important;
    text-align: left;
  }

  div.dataTables_wrapper div.dataTables_filter {
    width: 100%;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0px;
    display: block;
    width: 100%;
  }
  div.dataTables_wrapper div.dataTables_filter label {
    width: 100%;
  }

  .taxPage .text-start {
    width: 100%;
    text-align: right !important;
  }
  .taxPage .text-start div.dt-buttons {
    text-align: right !important;
  }

  .registerPage {
    padding: 0px !important;
  }

  .subscription_info .card {
    min-height: 700px;
  }
}
@media only screen and (max-width: 575px) {
  .subscription_info .card {
    min-height: auto;
  }
  .otp-input-fields input {
    width: 14%;
}
}