/* Minification failed. Returning unminified contents.
(1224,33): run-time error CSS1046: Expect comma, found '0'
(1224,37): run-time error CSS1046: Expect comma, found '/'
(3002,33): run-time error CSS1046: Expect comma, found '0'
(3002,37): run-time error CSS1046: Expect comma, found '/'
(3559,1): run-time error CSS1019: Unexpected token, found '@import'
(3559,9): run-time error CSS1019: Unexpected token, found 'url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap")'
(3560,1): run-time error CSS1019: Unexpected token, found '@import'
(3560,9): run-time error CSS1019: Unexpected token, found 'url("https://fonts.googleapis.com/css2?family=Dosis:wght@800&display=swap")'
(3574,26): run-time error CSS1034: 
(3574,26): run-time error CSS1042: Expected function, found ','
(3574,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3578,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3579,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3600,39): run-time error CSS1034: 
(3600,39): run-time error CSS1042: Expected function, found ','
(3600,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3626,21): run-time error CSS1034: 
(3626,21): run-time error CSS1042: Expected function, found ','
(3626,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3666,21): run-time error CSS1034: 
(3666,21): run-time error CSS1042: Expected function, found ','
(3666,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3771,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3772,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3796,35): run-time error CSS1034: 
(3796,35): run-time error CSS1042: Expected function, found ','
(3796,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3826,21): run-time error CSS1034: 
(3826,21): run-time error CSS1042: Expected function, found ','
(3826,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(3835,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3836,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3859,21): run-time error CSS1034: 
(3859,21): run-time error CSS1042: Expected function, found ','
(3859,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(4050,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(4051,9): run-time error CSS1035: Expected colon, found '{'
(4054,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(4055,9): run-time error CSS1035: Expected colon, found '{'
(4058,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4059,9): run-time error CSS1035: Expected colon, found '{'
 */
@font-face {
  font-family: Lato-Black;
  src: url(../fonts/Lato/Lato-Black.ttf);
}

@font-face {
  font-family: Lato-Bold;
  src: url(../fonts/Lato/Lato-Bold.ttf);
}

@font-face {
  font-family: Lato-Light;
  src: url(../fonts/Lato/Lato-Light.ttf);
}

@font-face {
  font-family: Lato-Regular;
  src: url(../fonts/Lato/Lato-Regular.ttf);
}

@font-face {
  font-family: Lato-Italic;
  src: url(../fonts/Lato/Lato-Italic.ttf);
}

html,
#root {
  height: 100%;
}

body {
  font-family: Lato-Regular;
  font-size: 14px;
  color: #000000;
  background-color: #f8f8fa;
}

.container {
  max-width: 1060px;
}

.clear-fix {
  clear: both;
}

h1 {
  font-size: 28px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h2 {
  font-size: 24px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h3 {
  font-size: 20px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h4 {
  font-size: 18px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
  margin: 0;
}

h5 {
  font-size: 15px;
  font-family: Lato-Bold;
}

h6 {
  font-size: 12px;
  color: #3f0a42;
  font-family: Lato-Regular;
}

@media screen and (max-width: 575.98px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h4 {
    font-size: 16px !important;
  }
}

a {
  color: #3f0a42;
  display: inline-block;
  text-decoration: underline;
}

a:hover {
  color: #3f0a42;
  text-decoration: none;
}

a.common-link-styled {
  color: #3f0a42;
  margin: 30px 0 0;
  display: block;
  text-align: center;
}

a.rounting-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}

a.back-to-link {
  text-decoration: none;
  cursor: pointer;
}

.form-control {
  height: auto;
}

.form-control:focus {
  box-shadow: none;
}

p {
  font-size: 14px;
  font-family: Lato-Regular;
}

b {
  font-family: Lato-Bold;
}

.text-primary {
  color: #3f0a42 !important;
}

.text-blue {
  color: #35b6a6 !important;
}

.text-red {
  color: #7e1818 !important;
}

.text-gray {
  color: #575757 !important;
}

.w-48 {
  width: 48% !important;
}

@media screen and (max-width: 575.98px) {
  .w-48 {
    width: 47% !important;
  }
}

hr {
  border-top: 1px solid #cacaca;
  opacity: 1;
  margin: 19px 0 15px;
}

.disable {
  opacity: 0.5;
}

.width-14 {
  width: 14px;
}

.width-9 {
  width: 9px;
}
@media screen and (max-width: 575.98px) {
  .mobile-center {
    text-align: center !important;
  }

  .mobile-left {
    text-align: left !important;
  }
}

button.modal-button.button-link {
  color: #3f0a42;
  text-decoration: underline;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

button.modal-button.button-link:focus {
  outline: none;
}

.modal-button.btn-link:focus {
  outline: 0;
}

#customerOverview {
  padding-right: 0 !important;
}

.modal-backdrop.show {
  opacity: 0.2;
}

.modal-dialog.customer-overview-modal {
  margin: 0rem 0 0rem auto;
}

.modal-dialog {
  max-width: 460px;
}

.modal-dialog.customer-overview-modal .modal-content {
  border-radius: 0;
}

.modal-dialog .modal-content {
  padding: 25px;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 4px;
}

.modal-dialog .modal-content .modal-header {
  position: relative;
  padding: 0 0 15px;
  display: block;
  border-bottom: 1px solid #cacaca;
}

.modal-dialog .modal-content .modal-header .close {
  color: #3f0a42;
  opacity: 1;
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 0;
}

.modal-dialog .modal-content .modal-header .d-block-400 {
  display: none;
}

@media screen and (max-width: 575.98px) {
  .modal-dialog.customer-overview-modal {
    margin: 0rem 0 0 auto;
    max-width: 400px;
  }
}

@media screen and (max-width: 450.98px) {
  .modal-dialog.customer-overview-modal {
    margin: 0rem 0 0 auto;
  }
}

@media screen and (max-width: 400.98px) {
  .modal-dialog .modal-content .modal-header .d-none-400 {
    display: none;
  }
  .modal-dialog .modal-content .modal-header .d-block-400 {
    display: block;
  }
}

.modal-dialog .modal-content .modal-body {
  padding: 25px 0 0;
}

.modal-dialog .modal-content .modal-footer {
  padding: 25px 0 0;
  border-top: 0;
}

@media screen and (max-width: 575.98px) {
  .modal-dialog {
    max-width: 96%;
    margin: 0.5rem auto;
  }

  .modal-dialog .modal-content {
    padding: 15px;
  }
}

@media screen and (max-width: 400.98px) {
  .modal-dialog {
    margin: 0.5rem;
  }
}

.body-container {
  margin: 50px 0;
}

@media screen and (max-width: 575.98px) {
  .body-container {
    margin: 30px 0;
  }
}

header {
  background-color: #3f0a42;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
}

header .logo {
  margin-top: 20px;
  width: 72px;
  cursor: pointer;
}

header .login-logo {
  margin: 17px 0;
  width: 72px;
}

header .profile-page-link {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

header .profile-initial {
  border-radius: 50%;
  border: 2px solid white;
  font-family: Lato-Light;
  font-size: 12px;
  width: 35px;
  height: 35px;
  margin: 15px 0 0 auto;
  text-align: center;
  padding-top: 7px;
  font-weight:900;
  text-transform: uppercase;
  cursor: pointer;
}

.reset-instruction-send {
  background-color: #ffffff;
  color: #35b6a6;
  padding: 15px 0;
  font-size: 14px;
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0px;
  right: 0;
  text-align: center;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.3);
}

ul.main-menu-list {
  list-style-type: none;
  margin: 0 0 0 10px;
  padding: 0;
}

ul.main-menu-list li {
  display: inline-block;
}

ul.main-menu-list li a.menu-list-item {
  border-bottom: 4px solid #3f0a42;
  font-family: Lato-Regular;
  color: #ffffff;
  padding: 20px 25px;
  display: block;
  letter-spacing: 0.5px;
  -webkit-text-decoration: none;
  text-decoration: none;
}

ul.main-menu-list li a.menu-list-item:hover {
  border-color: #ffffff;
}

ul.main-menu-list li a.menu-list-item.active {
  border-color: #ffffff;
}

@media screen and (max-width: 575.98px) {
  ul.main-menu-list {
    margin: 0 -15px;
  }

  ul.main-menu-list li {
    width: 32%;
  }

  ul.main-menu-list li a.menu-list-item {
    padding: 20px 0px;
    text-align: center;
  }
}

/* Table css */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.table {
  margin-bottom: 0;
}

table tr {
  position: relative;
}

table tr.note-row {
  background-color: #f8f8fa;
}

table tr.note-row td {
  padding: 0 20px !important;
}

table tr .checkbox-cell {
  padding: 15px 20px 10px;
  text-align: center;
  width: 50px;
}

table tr th {
  text-transform: uppercase;
  color: #3f0a42;
  border-bottom: 1px solid #bbbbbb;
  padding: 20px;
  text-align: left;
  font-size: 11px;
  width: 100px;
}

table tr th.no-border {
  border: 0;
  padding: 0 !important;
}

table tr th.width-large {
  width: 230px;
}

table tr th.width-medium {
  width: 170px;
}

table tr th.width-small {
  width: 80px;
}

table tr td,
.table td {
  color: #000000;
  padding: 20px !important;
  text-align: left;
  font-family: Lato-Regular;
  position: relative;
  border: 0;
}

table tr:nth-of-type(even) {
  background-color: #f8f8fa;
}

table tr td.width-100 {
  width: 100%;
}

table.dashboard-table th {
  width: 170px;
  padding: 11px 20px !important;
}

table.dashboard-table td {
  padding: 11px 20px !important;
}

.dashboard-recent-customer-table tr th:first-child {
  width: 45%;
}

.dashboard-recent-customer-table tr th:nth-child(2) {
  width: 30%;
}

.dashboard-recent-customer-table tr th:nth-child(3) {
  width: 25%;
}
table.modal-table th {
  padding: 15px 8px !important;
}

table.modal-table th:last-child {
  text-align: right;
}

table.modal-table th.width-medium {
  width: 120px;
}

table.modal-table th.width-70 {
  width: 70px;
}

table.modal-table td {
  padding: 15px 8px !important;
}

table.modal-table td:last-child {
  text-align: right;
}

@media screen and (max-width: 1110px) {
  table.dashboard-table td {
    padding: 11px 15px !important;
  }
}
/* Forms css*/
.form-group {
  margin-bottom: 18px;
  position: relative;
}

.form-group label {
  display: block;
  color: #3f0a42;
  margin-bottom: 0;
}

.form-group input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 8px 0 15px;
  width: 100%;
  border-radius: 0;
  color: #000000;
}

.form-group .input-condition {
  color: #3f0a42;
  font-size: 12px;
  padding: 7px 0 10px;
}

.form-group input::placeholder {
  color: #cacaca;
  font-size: 15px;
}

.form-group input:focus {
  outline: none;
  border-bottom: 1px solid #3f0a42;
  box-shadow: none;
}

.form-group input.with-icon {
  padding: 16px 0 16px 25px;
}

.form-group textarea.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 16px 0;
  width: 100%;
  border-radius: 0;
  color: #000000;
}

.form-group textarea.form-control::placeholder {
  color: #cacaca;
  font-size: 15px;
}

.form-group select.form-select {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 8px 0 15px;
  width: 100%;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
}

.form-group select.form-select:focus {
  outline: none;
  border-bottom: 1px solid #3f0a42;
  box-shadow: none;
}

.form-group select.form-select option {
  font-size: 15px;
  line-height: 3;
  padding: 10px;
  font-family: Lato-Regular;
}

.form-group select.form-select option:hover {
  background-color: #3f0a42;
}

/*.form-group select.dropdown-gray {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 13px 10px;
  outline: none;
  min-width: 110px;
}*/

.form-group select.dropdown-gray.width-135 {
  min-width: unset;
  width: 135px;
}

.form-group span.input-icon {
  display: block;
  position: absolute;
  top: 38px;
  left: 5px;
  color: #3f0a42;
}

.form-group span.input-icon.percent-icon {
  left: unset;
  right: 5px;
}

.form-group .input-value {
  padding: 12px 0;
  font-size: 15px;
}

.form-group .input-value .input-value-icon {
  padding-right: 10px;
}

/* Radio Button Css */

.input-radio-btn {
  margin-bottom: 15px;
}

.input-radio-btn [type="radio"] {
  display: inline-block;
}

.input-radio-btn [type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

.input-radio-btn [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.input-radio-btn [type="radio"]:checked + label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  display: inline-block;
  color: #000000;
  font-size: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}

.input-radio-btn [type="radio"]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

.input-radio-btn [type="radio"]:checked + label:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #3f0a42;
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 50%;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.input-radio-btn [type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.input-radio-btn [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  display: inline-block;
  color: #000000;
  font-size: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}

.input-radio-btn [type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

.input-radio-btn [type="radio"]:not(:checked) + label:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #3f0a42;
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 50%;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.input-radio-btn [type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Button Css */

.input-checkbox input[type="checkbox"] {
  display: none;
}

.input-checkbox input[type="checkbox"] ~ span.custom-check {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  border: 1px solid #cccccc;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  border-radius: 3px;
  background-color: #ffffff;
  cursor: pointer;
}

.input-checkbox input[type="checkbox"]:checked ~ span.custom-check {
  background-position: 4px 6px;
  background-size: 16px;
  background-repeat: no-repeat;
  border-color: #3f0a42;
  background-image: url("~/images/icons/checkbox-check.svg");
}

.input-checkbox input[type="checkbox"] .checkbox-text {
  display: inline;
  padding-left: 14px;
  margin-top: 3px;
}

.input-checkbox .checkbox-text {
  display: inline;
  padding-left: 14px;
  margin-top: 3px;
  cursor: pointer;
}
/* Button Css */

button.btn {
  cursor: pointer;
  font-size: 15px;
  font-family: Lato-Regular;

  border-radius: 4px;
  border: 0;
  font-weight: normal;
}

button.btn.form-button {
  padding: 14px 17px !important;
}

button.btn.align-left {
  text-align: left;
}

button.btn.align-left .right-arrow-icon {
  width: 14px;
  float: right;
  margin-top: 4px;
}
button.btn.align-left .left-arrow-icon {
  width: 14px;
  float: left;
  margin-top: 4px;
}
button.btn.sm {
  font-size: 14px;
  padding: 7px 0px !important;
  width: 60px;
}

button.btn.width-75 {
  width: 75px;
}

button.btn a {
  color: #ffffff;
  text-decoration: none;
}

button.btn.btn-primary {
  background-color: #3f0a42;
  color: #ffffff;
  padding: 10px 20px;
}

button.btn.btn-primary:hover {
  background-color: #792a7d;
}

button.btn.btn-primary:focus {
  box-shadow: none;
}

button.btn.btn-secondary {
  background-color: #e7e7e7;
  color: #000000;
  padding: 10px 20px;
}

button.btn.btn-secondary:hover {
  background-color: #dad7d7;
}

button.btn.btn-secondary:focus {
  box-shadow: none;
}

button.btn.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: #e7e7e7;
  color: #000000;
  box-shadow: none;
}

button.btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #3f0a42;
  color: #ffffff;
  box-shadow: none;
}

button.btn.btn-info {
  background-color: #35b6a6;
  color: #ffffff;
  padding: 10px 20px;
}

button.btn.btn-info:focus {
  box-shadow: none;
}

button.btn.btn-info:hover {
  background-color: #3ccbb9;
}

button.btn.btn-info:not(:disabled):not(.disabled):active {
  background-color: #35b6a6;
  color: #ffffff;
  box-shadow: none;
}

button.btn.btn-primary-transparent {
  background-color: #ffffff;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  padding: 7px 9px;
  font-size: 13px;
}

button.btn.btn-primary-transparent:hover {
  background-color: #3f0a42;
  color: #ffffff;
}

button.btn.btn-danger-transparent {
  background: transparent;
  color: #7e1818;
  text-decoration: underline;
  font-size: 14px;
  padding: 0;
}

/* Containers */
.body-container {
  margin: 110px 0 50px;
  padding-bottom: 60px;
}

.white-panel {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

.white-panel.user-details-panel {
  padding: 15px 20px;
  min-height: 305px;
}

.dropdown button {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px;
  outline: none;
  min-width: 110px;
  text-align: left;
}

.dropdown .dropdown-item {
  text-decoration: none;
}

@media screen and (max-width: 767.98px) {
  .body-container {
    margin: 150px 0 50px;
  }
}

@media screen and (max-width: 575.98px) {
  .white-panel {
    padding: 18px 15px;
  }
}

/* Pagination */

nav .pagination .page-item .page-link {
  background-color: #f9f9f9;
  border: 0;
  color: #575757;
  text-decoration: none;
  padding: 12px 15px;
  margin: 0 1px;
  border-radius: 2px 0 0 2px;
}

nav .pagination .page-item.active .page-link {
  background-color: #3f0a42;
  color: #ffffff;
}

nav .pagination .page-item:hover .page-link {
  background-color: #3f0a42;
  color: #ffffff;
}

nav .pagination .page-item:focus .page-link {
  background-color: #3f0a42;
  color: #ffffff;
  box-shadow: none;
}

/*-------PAGES CSS----------*/

/* Login Css */

.login-container {
  max-width: 460px;
  width: 100%;
  margin: 140px auto 30px;
  text-align: center;
}

.login-container h1 {
  margin: 5px 0;
}

.login-container .page-instruction {
  width: 90%;
  margin: 0 auto;
  line-height: 24px;
}

.small-white-panel {
  background-color: #ffffff;
  padding: 30px 25px;
  border-radius: 8px;
  max-width: 460px;
  width: 100%;
  margin-top: 50px;
  text-align: left;
}

@media screen and (max-width: 575.98px) {
  .login-container {
    margin: 100px auto 40px;
    width: 94%;
  }

  .page-instruction {
    width: 100%;
  }

  .small-white-panel {
    padding: 32px 15px;
    margin-top: 30px;
  }
}

/* Dashboard Container */
.dashboard-first-container {
  padding: 80px 0;
}

.dashboard-first-container .contract-icon {
  width: 50px;
}

.dashboard-first-container .btn-info {
  width: 200px;
}

@media screen and (max-width: 575.98px) {
  .dashboard-first-container {
    padding: 0;
  }

  .dashboard-first-container .btn-info {
    width: 100%;
  }

  .dashboard-first-container .contract-icon {
    width: 40px;
  }
}

.dashboard-container .small-white-box {
  background-color: #ffffff;
  padding: 30px 0 20px;
  text-align: center;
  min-height: 140px;
  border-radius: 8px;
}

.dashboard-container .small-white-box .count {
  font-size: 32px;
  color: #3f0a42;
}

.dashboard-container .small-white-box .count span {
  font-size: 20px;
}

.dashboard-container .small-white-box .count-label {
  font-size: 15px;
  padding: 10px 0;
}

.dashboard-container .line-graph {
  max-width: 1001px;
  width: 100%;
  margin: 20px auto 20px;
}

.dashboard-container .white-panel .view-all-btn {
  width: 100px;
  font-size: 14px;
  padding: 7px 0px !important;
}

@media screen and (max-width: 575.98px) {
  .dashboard-container .small-white-box {
    padding: 11px 15px;
    text-align: unset;
    height: 60px;
    margin-top: 5px;
    min-height: unset;
  }

  .dashboard-container .small-white-box .count {
    font-size: 24px;
    float: right;
  }

  .dashboard-container .small-white-box .count span {
    font-size: 14px;
  }

  .dashboard-container .small-white-box .count-label {
    padding: 5px 0 0 0;
    float: left;
  }

  .dashboard-container .white-panel .view-all-btn {
    width: 90px;
  }
}

/* Search Input Css */
.search-input {
  float: left;
  width: 70%;
  position: relative;
}

.search-input .search-icon {
  position: absolute;
  width: 16px;
  top: 19px;
  left: 16px;
}

.search-input .form-control {
  background-color: #e7e7e7;
  color: #999999;
  font-size: 15px;
  border: 0;
  padding: 13.5px 15px 13.5px 42px;
  border-radius: 6px;
  font-size: 16px;
}

/*  Payments css */

.payments-filter-row {
  margin-top: 30px;
}

.payments-filter-row .common-dropdown {
  float: left;
  margin-left: 12px;
  width: 13.5%;
  position: relative;
}

.payments-filter-row .common-dropdown .dropdown-label {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 15px 15px;
  width: 100%;
  margin-bottom: 0;
}

.payments-filter-row .common-dropdown .dropdown-label .down-arrow {
  width: 10px;
  float: right;
  margin-top: 5px;
}

.payments-filter-row .common-dropdown .display-dropdown {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 9px 9px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  width: 360px;
  z-index: 9;
}

.payments-filter-row .common-dropdown #checkDateDropdown,
.payments-filter-row .common-dropdown #checkAmountDropdown {
  display: none;
}

#checkDateDropdown:checked ~ .dropdown-label,
#checkAmountDropdown:checked ~ .dropdown-label {
  background-color: #ffffff;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
}

#checkDateDropdown:checked ~ .display-dropdown,
#checkAmountDropdown:checked ~ .display-dropdown {
  display: block;
}

#checkDateDropdown:checked ~ .dropdown-label .down-arrow,
#checkAmountDropdown:checked ~ .dropdown-label .down-arrow {
  transform: rotate(180deg);
}

.btn.btn-primary.sumbit-all {
  width: 135px;
}

.telephone-white {
  display: none;
}

.btn-primary-transparent:hover .telephone-white {
  display: inline-block;
}

.btn-primary-transparent:hover .telephone-purple {
  display: none;
}

@media screen and (max-width: 991.98px) {
  .payments-filter-row .common-dropdown {
    width: 20%;
  }

  .payments-filter-row .search-input {
    width: 56%;
  }
}
@media screen and (max-width: 640.98px) {
  .payments-filter-row .common-dropdown {
    float: left;
    margin-top: 12px;
    margin-left: 0;
    width: 48%;
  }

  .payments-filter-row .common-dropdown.all-amount {
    margin-left: 12px;
  }

  .payments-filter-row .search-input {
    float: none;
    width: 100%;
  }
}
@media screen and (max-width: 390.98px) {
  .payments-filter-row .common-dropdown {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .payments-filter-row .common-dropdown.all-amount {
    margin-left: 0px;
  }
}

/* Payment mobile screen css */

.table-row-mobile {
  background-color: #f8f8fa;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.tabs-for-mobile #accordion .card {
  border: 0;
}

.tabs-for-mobile #accordion .card-header {
  border-bottom: 1px solid #3f0a42;
  padding: 0;
  background-color: #ffffff;
  border-top: 0;
  border-right: 0;
  position: relative;
}

.tabs-for-mobile #accordion .card-body {
  padding: 0;
}

.tabs-for-mobile .card-header .btn-link {
  font-family: Lato-Bold;
  color: #000000;
  font-size: 14px;
  padding: 15px 0 15px;
  letter-spacing: 0;
  text-decoration: none;
}

.tabs-for-mobile .card-header .btn-link.less-padding {
  padding-top: 5px;
}

.tabs-for-mobile .card-header .btn-link img {
  position: absolute;
  right: 13px;
  top: 17px;
  width: 14px;
}

.tabs-for-mobile .card-header .btn-link.collapsed img {
  transform: rotate(180deg);
}

/* @media screen and (max-width: 417.98px) {
  .user-detail {
    margin: 20px auto 0 !important;
    text-align: center;
    float: none;
  }
} */

@media screen and (max-width: 575.98px) {
  .all-dates .display-dropdown {
    left: 0;
  }
}

@media screen and (max-width: 390.98px) {
  .display-dropdown {
    width: 100%;
  }
}

/* Tabs */

.nav.nav-tabs .nav-item {
  cursor: pointer;
  color: #000000;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  position: relative;
  text-align: center;
  width: 17%;
}

.nav.nav-tabs .nav-item .nav-link {
  text-decoration: none;
  padding: 5px 0 18px 0;
  border-bottom: 3px solid transparent;
  color: #000000;
}

.nav.nav-tabs .nav-item .nav-link.active {
  border-bottom: 3px solid #3f0a42;
  color: #3f0a42;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: Lato-Bold;
}

.nav.nav-tabs .nav-item .nav-link:hover {
  border-bottom: 3px solid #3f0a42;
  color: #3f0a42;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: Lato-Bold;
}

.record-count.yellow {
  padding: 3px 0 0;
  height: 25px;
  width: 25px;
  border-radius: 50px;
  background-color: #d5ad2f;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  top: -2px;
  right: 2px;
  text-align: center;
}

@media screen and (max-width: 1110px) {
  .nav.nav-tabs.payment-tabs li {
    width: 30.5%;
  }
}

@media screen and (max-width: 991px) {
  .nav.nav-tabs.payment-tabs li .record-count.yellow {
    top: 0px;
  }
}

@media screen and (max-width: 767.98px) {
  .record-count.yellow {
    right: unset;
    margin-left: 10px;
    top: 10px;
  }

  .nav.nav-tabs .nav-item .nav-link {
    padding: 18px 0;
  }
}

/* Inside Modal Css */

.modal-form-steps {
  color: #3f0a42;
  padding: 0;
  margin: 0;
}

.modal-form-steps li {
  display: inline-block;
}

.modal-form-steps li.modal-active {
  font-family: Lato-Bold;
}

.modal-form-steps li.modal-deactive {
  color: #cacaca;
}

.user-name-initials {
  border-radius: 50%;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  font-size: 22px;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 12px;
  text-transform: uppercase;
  cursor: pointer;
  float: left;
}

.user-detail {
  float: left;
}

label.details-label {
  color: #575757;
}

.modal-tabs li.width-50 {
  width: 50% !important;
}

.modal-tabs li.width-33 {
  width: 33% !important;
}
/* Customers Css */

.customer-filter-row {
  margin-top: 30px;
}

.customer-filter-row .search-input {
  float: left;
  width: 83%;
}

.nav.nav-tabs.payments-summary-tabs .nav-item {
  width: 160px;
}

@media screen and (max-width: 1130px) {
  .customer-filter-row .search-input {
    width: 80%;
  }
}

@media screen and (max-width: 991.98px) {
  .customer-filter-row .search-input {
    width: 70%;
  }

  .nav.nav-tabs.customers-tabs li {
    width: 30%;
  }
}

@media screen and (max-width: 767.98px) {
  .nav.nav-tabs.customers-tabs li {
    width: 40%;
  }
}

@media screen and (max-width: 585px) {
  .customer-filter-row .search-input {
    width: 100%;
    float: none;
  }

  .customer-filter-row .add-customer-btn {
    width: 100%;
    margin-top: 10px;
    margin-left: 0 !important;
  }
  .nav.nav-tabs.customers-tabs li {
    width: 50%;
  }
}

@media screen and (max-width: 575.98px) {
  .nav.nav-tabs.payments-summary-tabs .nav-item {
    width: 50%;
  }
}
/* User Profile css */
.user-profile-container .user-name-initials {
  border-radius: 50%;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  font-size: 22px;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 12px;
  text-transform: uppercase;
  cursor: pointer;
  float: left;
}

.user-profile-container .user-profile {
  padding: 30px;
}

.user-profile-container .user-detail {
  float: left;
}

@media screen and (max-width: 991.98px) {
  .user-profile-container .buttons-center {
    text-align: center !important;
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 417.98px) {
  .user-profile-container .user-detail {
    float: none;
    margin: 20px auto 0 !important;
    text-align: center;
  }

  .user-profile-container .user-name-initials {
    float: none;
    margin: 0px auto 10px;
  }
}

/* Customer Summary CSS */
@media screen and (max-width: 575.98px) {
  .customer-summary-container .tabs li {
    padding: 15px 0;
    width: 50%;
  }

  .customer-summary-container .btn.btn-info.add-payment-plan-btn {
    width: 100%;
  }
}

/* Customer Ledger CSS */

.customer-ledger-container .common-select {
  -webkit-appearance: button;
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 13px 10px;
  outline: none;
  min-width: 135px;
}

.customer-ledger-container .common-select option {
  padding: 12px 0;
}

.customer-ledger-container .common-select:focus {
  outline: none;
  box-shadow: none;
  /* background-color: #ffffff; */
}

.customer-ledger-container .view-note-btn.button-link {
  color: #3f0a42;
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
}

.customer-ledger-container .note-outer {
  background-color: #f8f8fa;
}

.customer-ledger-container .note-outer .note {
  text-align: center;
  font-family: Lato-Italic;
  background: #ffffff;
  padding: 7px 0;
}

.customer-ledger-container label.hide-note-label {
  text-align: center;
  padding: 10px 20px;
  width: 100%;
  background-color: #ffffff;
  color: #3f0a42;
  font-size: 15px;
}

.customer-ledger-container #hideNoteToggle {
  display: none;
}

.customer-ledger-container .hide-note {
  display: none;
}

.customer-ledger-container .hide-note img {
  transform: rotate(180deg);
}

.customer-ledger-container .note-text {
  display: none;
  background-color: #ffffff;
  font-family: Lato-Italic;
  text-align: center;
  padding: 7px 0;
}

.customer-ledger-container #hideNoteToggle:checked ~ .note-text {
  display: block;
}

.customer-ledger-container #hideNoteToggle:checked ~ .hide-note {
  display: block;
}

.customer-ledger-container #hideNoteToggle:checked ~ .view-note {
  display: none;
}

.invoice-table-row-mobile {
  background-color: #f8f8fa;
  border: 1px solid #cacaca;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.customer-ledger-container .current-balance {
  font-size: 16px;
}

.position-relative {
  position: relative;
}

.vertical-line {
  height: 100%;
  width: 1px;
  background-color: #cacaca;
  position: absolute;
  left: 30px;
  top: 6px;
}

.purple-circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #3f0a42;
  display: block;
  left: -5px;
  top: -7px;
  position: absolute;
}

@media screen and (max-width: 575.98px) {
  .customer-ledger-container .common-select {
    margin-top: 10px;
  }

  .customer-ledger-container .interest-accrued-para {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .customer-ledger-container .modals-buttons .btn {
    width: 100%;
  }

  .customer-ledger-container .modals-buttons .btn-info {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  .customer-ledger-container .w-mobile-40 {
    width: 38%;
  }

  .customer-ledger-container .w-mobile-57 {
    width: 57%;
  }

  .customer-ledger-container .w-mobile-100 {
    width: 100%;
  }
}

@media screen and (max-width: 409px) {
  .customer-ledger-container .w-mobile-40 {
    width: 100%;
  }

  .customer-ledger-container .w-mobile-57 {
    width: 100%;
    margin-left: 0 !important;
  }

  .customer-ledger-container .w-mobile-100 {
    width: 100%;
  }
}
@font-face {
  font-family: Lato-Black;
  src: url(../fonts/Lato/Lato-Black.ttf);
}

@font-face {
  font-family: Lato-Bold;
  src: url(../fonts/Lato/Lato-Bold.ttf);
}

@font-face {
  font-family: Lato-Light;
  src: url(../fonts/Lato/Lato-Light.ttf);
}

@font-face {
  font-family: Lato-Regular;
  src: url(../fonts/Lato/Lato-Regular.ttf);
}

@font-face {
  font-family: Lato-Italic;
  src: url(../fonts/Lato/Lato-Italic.ttf);
}

html,
#root {
  height: 100%;
}

body {
  font-family: Lato-Regular;
  font-size: 14px;
  color: #000000;
  background-color: #f8f8fa;
}

.container {
  max-width: 1060px;
}

.clear-fix {
  clear: both;
}

h1 {
  font-size: 28px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h2 {
  font-size: 24px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h3 {
  font-size: 20px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
}

h4 {
  font-size: 18px;
  font-family: Lato-Regular;
  color: #3f0a42;
  font-weight: normal;
  margin: 0;
}

h5 {
  font-size: 15px;
  font-family: Lato-Bold;
}

h6 {
  font-size: 12px;
  color: #3f0a42;
  font-family: Lato-Regular;
}

@media screen and (max-width: 575.98px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h4 {
    font-size: 16px !important;
  }
}

a {
  color: #3f0a42;
  display: inline-block;
  text-decoration: underline;
}

a:hover {
  color: #3f0a42;
  text-decoration: none;
}

a.common-link-styled {
  color: #3f0a42;
  margin: 30px 0 0;
  display: block;
  text-align: center;
}

a.rounting-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}

a.back-to-link {
  text-decoration: none;
  cursor: pointer;
}

.form-control {
  height: auto;
}

.form-control:focus {
  box-shadow: none;
}

p {
  font-size: 14px;
  font-family: Lato-Regular;
}

b {
  font-family: Lato-Bold;
}

.text-primary {
  color: #3f0a42 !important;
}

.text-blue {
  color: #35b6a6 !important;
}

.text-red {
  color: #7e1818 !important;
}

.text-gray {
  color: #575757 !important;
}

.w-48 {
  width: 48% !important;
}

@media screen and (max-width: 575.98px) {
  .w-48 {
    width: 47% !important;
  }
}

hr {
  border-top: 1px solid #cacaca;
  opacity: 1;
  margin: 19px 0 15px;
}

.disable {
  opacity: 0.5;
}

.width-14 {
  width: 14px;
}

.width-9 {
  width: 9px;
}
@media screen and (max-width: 575.98px) {
  .mobile-center {
    text-align: center !important;
  }

  .mobile-left {
    text-align: left !important;
  }
}

button.modal-button.button-link {
  color: #3f0a42;
  text-decoration: underline;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

button.modal-button.button-link:focus {
  outline: none;
}

.modal-button.btn-link:focus {
  outline: 0;
}

#customerOverview {
  padding-right: 0 !important;
}

.modal-backdrop.show {
  opacity: 0.2;
}

.modal-dialog.customer-overview-modal {
  margin: 0rem 0 0rem auto;
}

.modal-dialog {
  max-width: 460px;
}

.modal-dialog.customer-overview-modal .modal-content {
  border-radius: 0;
}

.modal-dialog .modal-content {
  padding: 25px;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 4px;
}

.modal-dialog .modal-content .modal-header {
  position: relative;
  padding: 0 0 15px;
  display: block;
  border-bottom: 1px solid #cacaca;
}

.modal-dialog .modal-content .modal-header .close {
  color: #3f0a42;
  opacity: 1;
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 0;
}

.modal-dialog .modal-content .modal-header .d-block-400 {
  display: none;
}

@media screen and (max-width: 575.98px) {
  .modal-dialog.customer-overview-modal {
    margin: 0rem 0 0 auto;
    max-width: 400px;
  }
}

@media screen and (max-width: 450.98px) {
  .modal-dialog.customer-overview-modal {
    margin: 0rem 0 0 auto;
  }
}

@media screen and (max-width: 400.98px) {
  .modal-dialog .modal-content .modal-header .d-none-400 {
    display: none;
  }
  .modal-dialog .modal-content .modal-header .d-block-400 {
    display: block;
  }
}

.modal-dialog .modal-content .modal-body {
  padding: 25px 0 0;
}

.modal-dialog .modal-content .modal-footer {
  padding: 25px 0 0;
  border-top: 0;
}

@media screen and (max-width: 575.98px) {
  .modal-dialog {
    max-width: 96%;
    margin: 0.5rem auto;
  }

  .modal-dialog .modal-content {
    padding: 15px;
  }
}

@media screen and (max-width: 400.98px) {
  .modal-dialog {
    margin: 0.5rem;
  }
}

.body-container {
  margin: 50px 0;
}

@media screen and (max-width: 575.98px) {
  .body-container {
    margin: 30px 0;
  }
}

header {
  background-color: #3f0a42;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
}

header .logo {
  margin-top: 20px;
  width: 72px;
  cursor: pointer;
}

header .login-logo {
  margin: 17px 0;
  width: 72px;
}

header .profile-page-link {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

header .profile-initial {
  border-radius: 50%;
  border: 2px solid white;
  font-family: Lato-Light;
  font-size: 12px;
  width: 35px;
  height: 35px;
  margin: 15px 0 0 auto;
  text-align: center;
  padding-top: 7px;
  font-weight:900;
  text-transform: uppercase;
  cursor: pointer;
}

.reset-instruction-send {
  background-color: #ffffff;
  color: #35b6a6;
  padding: 15px 0;
  font-size: 14px;
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0px;
  right: 0;
  text-align: center;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.3);
}

ul.main-menu-list {
  list-style-type: none;
  margin: 0 0 0 10px;
  padding: 0;
}

ul.main-menu-list li {
  display: inline-block;
}

ul.main-menu-list li a.menu-list-item {
  border-bottom: 4px solid #3f0a42;
  font-family: Lato-Regular;
  color: #ffffff;
  padding: 20px 25px;
  display: block;
  letter-spacing: 0.5px;
  -webkit-text-decoration: none;
  text-decoration: none;
}

ul.main-menu-list li a.menu-list-item:hover {
  border-color: #ffffff;
}

ul.main-menu-list li a.menu-list-item.active {
  border-color: #ffffff;
}

@media screen and (max-width: 575.98px) {
  ul.main-menu-list {
    margin: 0 -15px;
  }

  ul.main-menu-list li {
    width: 32%;
  }

  ul.main-menu-list li a.menu-list-item {
    padding: 20px 0px;
    text-align: center;
  }
}

/* Table css */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.table {
  margin-bottom: 0;
}

table tr {
  position: relative;
}

table tr.note-row {
  background-color: #f8f8fa;
}

table tr.note-row td {
  padding: 0 20px !important;
}

table tr .checkbox-cell {
  padding: 15px 20px 10px;
  text-align: center;
  width: 50px;
}

table tr th {
  text-transform: uppercase;
  color: #3f0a42;
  border-bottom: 1px solid #bbbbbb;
  padding: 20px;
  text-align: left;
  font-size: 11px;
  width: 100px;
}

table tr th.no-border {
  border: 0;
  padding: 0 !important;
}

table tr th.width-large {
  width: 230px;
}

table tr th.width-medium {
  width: 170px;
}

table tr th.width-small {
  width: 80px;
}

table tr td,
.table td {
  color: #000000;
  padding: 20px !important;
  text-align: left;
  font-family: Lato-Regular;
  position: relative;
  border: 0;
}

table tr:nth-of-type(even) {
  background-color: #f8f8fa;
}

table tr td.width-100 {
  width: 100%;
}

table.dashboard-table th {
  width: 170px;
  padding: 11px 20px !important;
}

table.dashboard-table td {
  padding: 11px 20px !important;
}

.dashboard-recent-customer-table tr th:first-child {
  width: 45%;
}

.dashboard-recent-customer-table tr th:nth-child(2) {
  width: 30%;
}

.dashboard-recent-customer-table tr th:nth-child(3) {
  width: 25%;
}
table.modal-table th {
  padding: 15px 8px !important;
}

table.modal-table th:last-child {
  text-align: right;
}

table.modal-table th.width-medium {
  width: 120px;
}

table.modal-table th.width-70 {
  width: 70px;
}

table.modal-table td {
  padding: 15px 8px !important;
}

table.modal-table td:last-child {
  text-align: right;
}

@media screen and (max-width: 1110px) {
  table.dashboard-table td {
    padding: 11px 15px !important;
  }
}
/* Forms css*/
.form-group {
  margin-bottom: 18px;
  position: relative;
}

.form-group label {
  display: block;
  color: #3f0a42;
  margin-bottom: 0;
}

.form-group input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 8px 0 15px;
  width: 100%;
  border-radius: 0;
  color: #000000;
}

.form-group .input-condition {
  color: #3f0a42;
  font-size: 12px;
  padding: 7px 0 10px;
}

.form-group input::placeholder {
  color: #cacaca;
  font-size: 15px;
}

.form-group input:focus {
  outline: none;
  border-bottom: 1px solid #3f0a42;
  box-shadow: none;
}

.form-group input.with-icon {
  padding: 16px 0 16px 25px;
}

.form-group textarea.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 16px 0;
  width: 100%;
  border-radius: 0;
  color: #000000;
}

.form-group textarea.form-control::placeholder {
  color: #cacaca;
  font-size: 15px;
}

.form-group select.form-select {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  font-size: 15px;
  font-family: Lato-Regular;
  padding: 8px 0 15px;
  width: 100%;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
}

.form-group select.form-select:focus {
  outline: none;
  border-bottom: 1px solid #3f0a42;
  box-shadow: none;
}

.form-group select.form-select option {
  font-size: 15px;
  line-height: 3;
  padding: 10px;
  font-family: Lato-Regular;
}

.form-group select.form-select option:hover {
  background-color: #3f0a42;
}

.form-group select.dropdown-gray {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 13px 10px;
  outline: none;
  min-width: 110px;
}

.form-group select.dropdown-gray.width-135 {
  min-width: unset;
  width: 135px;
}

.form-group span.input-icon {
  display: block;
  position: absolute;
  top: 38px;
  left: 5px;
  color: #3f0a42;
}

.form-group span.input-icon.percent-icon {
  left: unset;
  right: 5px;
}

.form-group .input-value {
  padding: 12px 0;
  font-size: 15px;
}

.form-group .input-value .input-value-icon {
  padding-right: 10px;
}

/* Radio Button Css */

.input-radio-btn {
  margin-bottom: 15px;
}

.input-radio-btn [type="radio"] {
  display: inline-block;
}

.input-radio-btn [type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

.input-radio-btn [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.input-radio-btn [type="radio"]:checked + label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  display: inline-block;
  color: #000000;
  font-size: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}

.input-radio-btn [type="radio"]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

.input-radio-btn [type="radio"]:checked + label:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #3f0a42;
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 50%;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.input-radio-btn [type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.input-radio-btn [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  display: inline-block;
  color: #000000;
  font-size: 15px;
  margin-bottom: 0;
  padding-top: 4px;
}

.input-radio-btn [type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

.input-radio-btn [type="radio"]:not(:checked) + label:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #3f0a42;
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 50%;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.input-radio-btn [type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Button Css */

.input-checkbox input[type="checkbox"] {
  display: none;
}

.input-checkbox input[type="checkbox"] ~ span.custom-check {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  border: 1px solid #cccccc;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  border-radius: 3px;
  background-color: #ffffff;
  cursor: pointer;
}

.input-checkbox input[type="checkbox"]:checked ~ span.custom-check {
  background-position: 4px 6px;
  background-size: 16px;
  background-repeat: no-repeat;
  border-color: #3f0a42;
  background-image: url("~/images/icons/checkbox-check.svg");
}

.input-checkbox input[type="checkbox"] .checkbox-text {
  display: inline;
  padding-left: 14px;
  margin-top: 3px;
}

.input-checkbox .checkbox-text {
  display: inline;
  padding-left: 14px;
  margin-top: 3px;
  cursor: pointer;
}
/* Button Css */

button.btn {
  cursor: pointer;
  font-size: 15px;
  font-family: Lato-Regular;

  border-radius: 4px;
  border: 0;
  font-weight: normal;
}

button.btn.form-button {
  padding: 14px 17px !important;
}

button.btn.align-left {
  text-align: left;
}

button.btn.align-left .right-arrow-icon {
  width: 14px;
  float: right;
  margin-top: 4px;
}
button.btn.align-left .left-arrow-icon {
  width: 14px;
  float: left;
  margin-top: 4px;
}
button.btn.sm {
  font-size: 14px;
  padding: 7px 0px !important;
  width: 60px;
}

button.btn.width-75 {
  width: 75px;
}

button.btn a {
  color: #ffffff;
  text-decoration: none;
}

button.btn.btn-primary {
  background-color: #3f0a42;
  color: #ffffff;
  padding: 10px 20px;
}

button.btn.btn-primary:hover {
  background-color: #792a7d;
}

button.btn.btn-primary:focus {
  box-shadow: none;
}

button.btn.btn-secondary {
  background-color: #e7e7e7;
  color: #000000;
  padding: 10px 20px;
}

button.btn.btn-secondary:hover {
  background-color: #dad7d7;
}

button.btn.btn-secondary:focus {
  box-shadow: none;
}

button.btn.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: #e7e7e7;
  color: #000000;
  box-shadow: none;
}

button.btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #3f0a42;
  color: #ffffff;
  box-shadow: none;
}

button.btn.btn-info {
  background-color: #35b6a6;
  color: #ffffff;
  padding: 10px 20px;
}

button.btn.btn-info:focus {
  box-shadow: none;
}

button.btn.btn-info:hover {
  background-color: #3ccbb9;
}

button.btn.btn-info:not(:disabled):not(.disabled):active {
  background-color: #35b6a6;
  color: #ffffff;
  box-shadow: none;
}

button.btn.btn-primary-transparent {
  background-color: #ffffff;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  padding: 7px 9px;
  font-size: 13px;
}

button.btn.btn-primary-transparent:hover {
  background-color: #3f0a42;
  color: #ffffff;
}

button.btn.btn-danger-transparent {
  background: transparent;
  color: #7e1818;
  text-decoration: underline;
  font-size: 14px;
  padding: 0;
}

/* Containers */
.body-container {
  margin: 110px 0 50px;
  padding-bottom: 60px;
}

.white-panel {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

.white-panel.user-details-panel {
  padding: 15px 20px;
  min-height: 305px;
}

.dropdown button {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px;
  outline: none;
  min-width: 110px;
  text-align: left;
}

.dropdown .dropdown-item {
  text-decoration: none;
}

@media screen and (max-width: 767.98px) {
  .body-container {
    margin: 150px 0 50px;
  }
}

@media screen and (max-width: 575.98px) {
  .white-panel {
    padding: 18px 15px;
  }
}

/* Pagination */

nav .pagination .page-item .page-link {
  background-color: #f9f9f9;
  border: 0;
  color: #575757;
  text-decoration: none;
  padding: 12px 15px;
  margin: 0 1px;
  border-radius: 2px 0 0 2px;
}

nav .pagination .page-item.active .page-link {
  background-color: #3f0a42;
  color: #ffffff;
}

nav .pagination .page-item:hover .page-link {
  background-color: #3f0a42;
  color: #ffffff;
}

nav .pagination .page-item:focus .page-link {
  background-color: #3f0a42;
  color: #ffffff;
  box-shadow: none;
}

/*-------PAGES CSS----------*/

/* Login Css */

.login-container {
  max-width: 460px;
  width: 100%;
  margin: 140px auto 30px;
  text-align: center;
}

.login-container h1 {
  margin: 5px 0;
}

.login-container .page-instruction {
  width: 90%;
  margin: 0 auto;
  line-height: 24px;
}

.small-white-panel {
  background-color: #ffffff;
  padding: 30px 25px;
  border-radius: 8px;
  max-width: 460px;
  width: 100%;
  margin-top: 50px;
  text-align: left;
}

@media screen and (max-width: 575.98px) {
  .login-container {
    margin: 100px auto 40px;
    width: 94%;
  }

  .page-instruction {
    width: 100%;
  }

  .small-white-panel {
    padding: 32px 15px;
    margin-top: 30px;
  }
}

/* Dashboard Container */
.dashboard-first-container {
  padding: 80px 0;
}

.dashboard-first-container .contract-icon {
  width: 50px;
}

.dashboard-first-container .btn-info {
  width: 200px;
}

@media screen and (max-width: 575.98px) {
  .dashboard-first-container {
    padding: 0;
  }

  .dashboard-first-container .btn-info {
    width: 100%;
  }

  .dashboard-first-container .contract-icon {
    width: 40px;
  }
}

.dashboard-container .small-white-box {
  background-color: #ffffff;
  padding: 30px 0 20px;
  text-align: center;
  min-height: 140px;
  border-radius: 8px;
}

.dashboard-container .small-white-box .count {
  font-size: 32px;
  color: #3f0a42;
}

.dashboard-container .small-white-box .count span {
  font-size: 20px;
}

.dashboard-container .small-white-box .count-label {
  font-size: 15px;
  padding: 10px 0;
}

.dashboard-container .line-graph {
  max-width: 1001px;
  width: 100%;
  margin: 20px auto 20px;
}

.dashboard-container .white-panel .view-all-btn {
  width: 100px;
  font-size: 14px;
  padding: 7px 0px !important;
}

@media screen and (max-width: 575.98px) {
  .dashboard-container .small-white-box {
    padding: 11px 15px;
    text-align: unset;
    height: 60px;
    margin-top: 5px;
    min-height: unset;
  }

  .dashboard-container .small-white-box .count {
    font-size: 24px;
    float: right;
  }

  .dashboard-container .small-white-box .count span {
    font-size: 14px;
  }

  .dashboard-container .small-white-box .count-label {
    padding: 5px 0 0 0;
    float: left;
  }

  .dashboard-container .white-panel .view-all-btn {
    width: 90px;
  }
}

/* Search Input Css */
.search-input {
  float: left;
  width: 70%;
  position: relative;
}

.search-input .search-icon {
  position: absolute;
  width: 16px;
  top: 19px;
  left: 16px;
}

.search-input .form-control {
  background-color: #e7e7e7;
  color: #999999;
  font-size: 15px;
  border: 0;
  padding: 13.5px 15px 13.5px 42px;
  border-radius: 6px;
  font-size: 16px;
}

/*  Payments css */

.payments-filter-row {
  margin-top: 30px;
}

.payments-filter-row .common-dropdown {
  float: left;
  margin-left: 12px;
  width: 13.5%;
  position: relative;
}

.payments-filter-row .common-dropdown .dropdown-label {
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 15px 15px;
  width: 100%;
  margin-bottom: 0;
}

.payments-filter-row .common-dropdown .dropdown-label .down-arrow {
  width: 10px;
  float: right;
  margin-top: 5px;
}

.payments-filter-row .common-dropdown .display-dropdown {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 9px 9px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  width: 360px;
  z-index: 9;
}

.payments-filter-row .common-dropdown #checkDateDropdown,
.payments-filter-row .common-dropdown #checkAmountDropdown {
  display: none;
}

#checkDateDropdown:checked ~ .dropdown-label,
#checkAmountDropdown:checked ~ .dropdown-label {
  background-color: #ffffff;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
}

#checkDateDropdown:checked ~ .display-dropdown,
#checkAmountDropdown:checked ~ .display-dropdown {
  display: block;
}

#checkDateDropdown:checked ~ .dropdown-label .down-arrow,
#checkAmountDropdown:checked ~ .dropdown-label .down-arrow {
  transform: rotate(180deg);
}

.btn.btn-primary.sumbit-all {
  width: 135px;
}

.telephone-white {
  display: none;
}

.btn-primary-transparent:hover .telephone-white {
  display: inline-block;
}

.btn-primary-transparent:hover .telephone-purple {
  display: none;
}

@media screen and (max-width: 991.98px) {
  .payments-filter-row .common-dropdown {
    width: 20%;
  }

  .payments-filter-row .search-input {
    width: 56%;
  }
}
@media screen and (max-width: 640.98px) {
  .payments-filter-row .common-dropdown {
    float: left;
    margin-top: 12px;
    margin-left: 0;
    width: 48%;
  }

  .payments-filter-row .common-dropdown.all-amount {
    margin-left: 12px;
  }

  .payments-filter-row .search-input {
    float: none;
    width: 100%;
  }
}
@media screen and (max-width: 390.98px) {
  .payments-filter-row .common-dropdown {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .payments-filter-row .common-dropdown.all-amount {
    margin-left: 0px;
  }
}

/* Payment mobile screen css */

.table-row-mobile {
  background-color: #f8f8fa;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.tabs-for-mobile #accordion .card {
  border: 0;
}

.tabs-for-mobile #accordion .card-header {
  border-bottom: 1px solid #3f0a42;
  padding: 0;
  background-color: #ffffff;
  border-top: 0;
  border-right: 0;
  position: relative;
}

.tabs-for-mobile #accordion .card-body {
  padding: 0;
}

.tabs-for-mobile .card-header .btn-link {
  font-family: Lato-Bold;
  color: #000000;
  font-size: 14px;
  padding: 15px 0 15px;
  letter-spacing: 0;
  text-decoration: none;
}

.tabs-for-mobile .card-header .btn-link.less-padding {
  padding-top: 5px;
}

.tabs-for-mobile .card-header .btn-link img {
  position: absolute;
  right: 13px;
  top: 17px;
  width: 14px;
}

.tabs-for-mobile .card-header .btn-link.collapsed img {
  transform: rotate(180deg);
}

/* @media screen and (max-width: 417.98px) {
  .user-detail {
    margin: 20px auto 0 !important;
    text-align: center;
    float: none;
  }
} */

@media screen and (max-width: 575.98px) {
  .all-dates .display-dropdown {
    left: 0;
  }
}

@media screen and (max-width: 390.98px) {
  .display-dropdown {
    width: 100%;
  }
}

/* Tabs */

.nav.nav-tabs .nav-item {
  cursor: pointer;
  color: #000000;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  position: relative;
  text-align: center;
  width: 17%;
}

.nav.nav-tabs .nav-item .nav-link {
  text-decoration: none;
  padding: 5px 0 18px 0;
  border-bottom: 3px solid transparent;
  color: #000000;
}

.nav.nav-tabs .nav-item .nav-link.active {
  border-bottom: 3px solid #3f0a42;
  color: #3f0a42;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: Lato-Bold;
}

.nav.nav-tabs .nav-item .nav-link:hover {
  border-bottom: 3px solid #3f0a42;
  color: #3f0a42;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: Lato-Bold;
}

.record-count.yellow {
  padding: 3px 0 0;
  height: 25px;
  width: 25px;
  border-radius: 50px;
  background-color: #d5ad2f;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  top: -2px;
  right: 2px;
  text-align: center;
}

@media screen and (max-width: 1110px) {
  .nav.nav-tabs.payment-tabs li {
    width: 30.5%;
  }
}

@media screen and (max-width: 991px) {
  .nav.nav-tabs.payment-tabs li .record-count.yellow {
    top: 0px;
  }
}

@media screen and (max-width: 767.98px) {
  .record-count.yellow {
    right: unset;
    margin-left: 10px;
    top: 10px;
  }

  .nav.nav-tabs .nav-item .nav-link {
    padding: 18px 0;
  }
}

/* Inside Modal Css */

.modal-form-steps {
  color: #3f0a42;
  padding: 0;
  margin: 0;
}

.modal-form-steps li {
  display: inline-block;
}

.modal-form-steps li.modal-active {
  font-family: Lato-Bold;
}

.modal-form-steps li.modal-deactive {
  color: #cacaca;
}

.user-name-initials {
  border-radius: 50%;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  font-size: 22px;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 12px;
  text-transform: uppercase;
  cursor: pointer;
  float: left;
}

.user-detail {
  float: left;
}

label.details-label {
  color: #575757;
}

.modal-tabs li.width-50 {
  width: 50% !important;
}

.modal-tabs li.width-33 {
  width: 33% !important;
}
/* Customers Css */

.customer-filter-row {
  margin-top: 30px;
}

.customer-filter-row .search-input {
  float: left;
  width: 83%;
}

.nav.nav-tabs.payments-summary-tabs .nav-item {
  width: 160px;
}

@media screen and (max-width: 1130px) {
  .customer-filter-row .search-input {
    width: 80%;
  }
}

@media screen and (max-width: 991.98px) {
  .customer-filter-row .search-input {
    width: 70%;
  }

  .nav.nav-tabs.customers-tabs li {
    width: 30%;
  }
}

@media screen and (max-width: 767.98px) {
  .nav.nav-tabs.customers-tabs li {
    width: 40%;
  }
}

@media screen and (max-width: 585px) {
  .customer-filter-row .search-input {
    width: 100%;
    float: none;
  }

  .customer-filter-row .add-customer-btn {
    width: 100%;
    margin-top: 10px;
    margin-left: 0 !important;
  }
  .nav.nav-tabs.customers-tabs li {
    width: 50%;
  }
}

@media screen and (max-width: 575.98px) {
  .nav.nav-tabs.payments-summary-tabs .nav-item {
    width: 50%;
  }
}
/* User Profile css */
.user-profile-container .user-name-initials {
  border-radius: 50%;
  color: #3f0a42;
  border: 1px solid #3f0a42;
  font-size: 22px;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 0px;
  text-transform: uppercase;
  cursor: pointer;
  float: left;
}

.user-profile-container .user-profile {
  padding: 30px;
}

.user-profile-container .user-detail {
  float: left;
}

@media screen and (max-width: 991.98px) {
  .user-profile-container .buttons-center {
    text-align: center !important;
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 417.98px) {
  .user-profile-container .user-detail {
    float: none;
    margin: 20px auto 0 !important;
    text-align: center;
  }

  .user-profile-container .user-name-initials {
    float: none;
    margin: 0px auto 10px;
  }
}

/* Customer Summary CSS */
@media screen and (max-width: 575.98px) {
  .customer-summary-container .tabs li {
    padding: 15px 0;
    width: 50%;
  }

  .customer-summary-container .btn.btn-info.add-payment-plan-btn {
    width: 100%;
  }
}

/* Customer Ledger CSS */

.customer-ledger-container .common-select {
  -webkit-appearance: button;
  background-color: #e7e7e7;
  color: #000000;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 13px 10px;
  outline: none;
  min-width: 135px;
}

.customer-ledger-container .common-select option {
  padding: 12px 0;
}

.customer-ledger-container .common-select:focus {
  outline: none;
  box-shadow: none;
  /* background-color: #ffffff; */
}

.customer-ledger-container .view-note-btn.button-link {
  color: #3f0a42;
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
}

.customer-ledger-container .note-outer {
  background-color: #f8f8fa;
}

.customer-ledger-container .note-outer .note {
  text-align: center;
  font-family: Lato-Italic;
  background: #ffffff;
  padding: 7px 0;
}

.customer-ledger-container label.hide-note-label {
  text-align: center;
  padding: 10px 20px;
  width: 100%;
  background-color: #ffffff;
  color: #3f0a42;
  font-size: 15px;
}

.customer-ledger-container #hideNoteToggle {
  display: none;
}

.customer-ledger-container .hide-note {
  display: none;
}

.customer-ledger-container .hide-note img {
  transform: rotate(180deg);
}

.customer-ledger-container .note-text {
  display: none;
  background-color: #ffffff;
  font-family: Lato-Italic;
  text-align: center;
  padding: 7px 0;
}

.customer-ledger-container #hideNoteToggle:checked ~ .note-text {
  display: block;
}

.customer-ledger-container #hideNoteToggle:checked ~ .hide-note {
  display: block;
}

.customer-ledger-container #hideNoteToggle:checked ~ .view-note {
  display: none;
}

.invoice-table-row-mobile {
  background-color: #f8f8fa;
  border: 1px solid #cacaca;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.customer-ledger-container .current-balance {
  font-size: 16px;
}

.position-relative {
  position: relative;
}

.vertical-line {
  height: 100%;
  width: 1px;
  background-color: #cacaca;
  position: absolute;
  left: 30px;
  top: 6px;
}

.purple-circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #3f0a42;
  display: block;
  left: -5px;
  top: -7px;
  position: absolute;
}

@media screen and (max-width: 575.98px) {
  .customer-ledger-container .common-select {
    margin-top: 10px;
  }

  .customer-ledger-container .interest-accrued-para {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .customer-ledger-container .modals-buttons .btn {
    width: 100%;
  }

  .customer-ledger-container .modals-buttons .btn-info {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  .customer-ledger-container .w-mobile-40 {
    width: 38%;
  }

  .customer-ledger-container .w-mobile-57 {
    width: 57%;
  }

  .customer-ledger-container .w-mobile-100 {
    width: 100%;
  }
}

@media screen and (max-width: 409px) {
  .customer-ledger-container .w-mobile-40 {
    width: 100%;
  }

  .customer-ledger-container .w-mobile-57 {
    width: 100%;
    margin-left: 0 !important;
  }

  .customer-ledger-container .w-mobile-100 {
    width: 100%;
  }
}


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@800&display=swap");

.alert-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0px auto;
  padding: 0px auto;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
  background: rgb(0, 0, 0, 0.3);
  z-index: 999999;
}

@keyframes open-frame {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(0.97);
  }
  75% {
    transform: scale(0.93);
  }
  100% {
    transform: scale(1);
  }
}

.alert-frame {
  background: #fff;
  min-height: 400px;
  width: 300px;
  box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.2);
  border-radius: 10px;
  animation: open-frame 0.3s linear;
}

.alert-header {
  display: flex;
  flex-direction: row;
  height: 175px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.alert-img {
  height: 80px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

.alert-close {
  width: 30px;
  height: 30px;
  color: rgb(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  line-height: 30px;
  transition: color 0.5s;
  margin-left: auto;
  margin-right: 5px;
  margin-top: 5px;
}

.alert-close-circle {
  width: 30px;
  height: 30px;
  background: #e4eae7;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17.5px;
  margin-top: -15px;
  margin-right: -15px;
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  line-height: 30px;
  transition: background 0.5s;
  margin-left: auto;
}

.alert-close-circle:hover {
  background: #fff;
}

.alert-close:hover {
  color: rgb(0, 0, 0, 0.5);
}

.alert-body {
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.alert-title {
  font-size: 18px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 35px;
  color: #222;
  align-self: center;
}

.alert-message {
  font-size: 15px !important;
  color: #666;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
  margin-bottom: 35px;
  line-height: 1.6;
  align-self: center;
}

.alert-button {
  min-width: 140px;
  height: 35px;
  border-radius: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.5s;
  padding: 0 15px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.alert-button:focus {
  outline: 0;
}

.question-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.confirm-button {
  min-width: 100px;
  height: 35px;
  border-radius: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.5s;
  padding: 0 15px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.confirm-button:focus {
  outline: 0;
}

.cancel-button {
  min-width: 100px;
  height: 35px;
  border-radius: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: white;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1.6;
  transition: background 0.5s;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cancel-button:focus {
  outline: 0;
}

@keyframes open-toast {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  20%,
  45% {
    transform: scaleX(1.35) scaleY(0.1);
  }
  65% {
    transform: scaleX(0.8) scaleY(1.7);
  }
  80% {
    transform: scaleX(0.6) scaleY(0.85);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

.toast-container {
  top: 15px;
  right: 15px;
  overflow: hidden;
  position: fixed;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.2);
  animation: open-toast 0.3s linear;
  z-index: 999999;
}

.toast-frame {
  padding: 5px 15px;
  display: flex;
  min-width: 100px;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.toast-img {
  height: 40px;
}

.toast-message {
  font-size: 14px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-left: 15px;
}

.toast-close {
  color: rgb(0, 0, 0, 0.2);
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.5s;
  margin-left: 25px;
}

@keyframes timer {
  0% {
    width: 100%;
  }
  25% {
    width: 75%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 25%;
  }
  100% {
    width: 1%;
  }
}

.toast-timer {
  width: 1%;
  height: 5px;
}

.toast-close:hover {
  color: rgb(0, 0, 0, 0.5);
}

.error-bg {
  background: #d85261;
}

.success-bg {
  background: #2dd284;
}

.warning-bg {
  background: #fada5e;
}

.question-bg {
  background: #779ecb;
}

.error-btn:hover {
  background: #e5a4b4;
}

.success-btn:hover {
  background: #6edaa4;
}

.warning-btn:hover {
  background: #fcecae;
}

.info-btn:hover {
  background: #c3e6fb;
}

.question-btn:hover {
  background: #bacee4;
}

.error-timer {
  background: #e5a4b4;
}

.success-timer {
  background: #6edaa4;
}

.warning-timer {
  background: #fcecae;
}

.info-timer {
  background: #c3e6fb;
}

.info-bg {
  background: #88cef7;
}


/*-----------------------------------------------------------------
	Notific - notifications
	Author: Amol bhosale;
-----------------------------------------------------------------*/

.Notific.wbModal {
	display: block;
	position: fixed;
	text-align: right;
	z-index: 2500;
}
.Notific.wbModal.vtop{top: 20px;}
.Notific.wbModal.vbottom{bottom: 20px;}
.Notific.wbModal.hleft{left: 20px;}
.Notific.wbModal.hright{right: 20px;}
.Notific.wbModal.vcenter{top: 50%;transform: translateY(-50%);}
.Notific.wbModal.hcenter {left: 50%;transform: translateX(-50%);}
.Notific.wbModal.vcenter.hcenter{top: 50%;left: 50%;transform: translate(-50%,-50%);}

.Notific.wbModal .notic{
	/*float: right;*/
	width: auto;
	max-width: 600px;
}
.notic{
	position: relative;
	background-color: #337ab7;
	border: 1px solid #2e6da4;
	color: white;
	clear: both;
	margin-bottom: 9px;
	padding: 5px 15px 5px 44px;	
	overflow: hidden;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
	font-weight: bold;
	text-align: left;
	font-size: 1rem;
	opacity: 0.95;
  line-height: 1.5;
  width: auto;
  height: auto;
	/*border-radius: 5px;*/
}
.Notific.wbModal.hleft .notic{
	float: left;
}
.Notific.wbModal.hright .notic{
	float: right;
}
.notic.close-event,.ni-loader{
	padding-right:15px;
}
.notic.close-event,.notic .close-event{
	cursor: pointer;
}
.notic:last-of-type {
	margin-bottom: 0;
}

.ni-success {
	background-color: #5cb85c;
	border-color: #4cae4c;
}

.ni-info {
	background-color: #5bc0de;
	border-color: #46b8da;
}

.ni-warning {
	background-color: #f0ad4e;
	border-color: #eea236;
}

.ni-error {
	background-color: #d9534f;
	border-color: #d43f3a;
}

.notic.ico:before{
	position: absolute;
	top: 50%;
	width: 70px;
	height: 70px;
	margin-top: -35px;
	background-repeat: no-repeat;
	background-position: 50%;
	content: "";
  background-size: 24px auto;
  left: -13px;
}

.ni-default.ico:before,.ni-info.ico:before{
  	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA/CAMAAABnwz74AAAAsVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+3mHKcAAAAOnRSTlMA7ftaCgT48um0r1Hf1cKgTSi6mIFeLBXQypySa0k1MQfk2kI+JB0ZvaViOXhmRsaHEFWqfHNwDCGNGwvgFgAAA81JREFUSMeVl+maqjAMhr9BUcF9FxHEfd9GZ5zD/V/YoUmZB6dF5f2jNm1I86UpIo3A33bqVs1xala90/UDZGJ1sD/CB0r2to93OVpGqKFgz/AO5WqYysDDK8anRNiOXW+369YgsZ1aD88w3d/Fw+44D8nd39ZLseWMdHrTkLEbpuK7bEljtYkUcpw7Y7ikFeNupON6HamY47h/6iFPKEPLt9zlAhGzYSVMUGnPKUSZoQM0fLHtGxHbaahQ7QrLnn+MoDAiw8QXQlZCLZVGZNxxNreK+jR8ugB9K0zFFvYBffX+5L8gBtdmtPmP8AmlHRBQIooLJKmJMSeIdh++IAfcB/Q0JLjR/peUiaewAguK8iuxASqAefz81zF4fzZxlSW6C9/CB/6Jzzokc/FrGuCiqj/Yb4rqYIA7KT1OBlAG2spUIbxZU4ZdIJcIYSy+tyIBlYkdPgIFxbBj3Qw+VmdZFy1NAITaYSyuPPkEsXOHAlDzLTAroSYEU7itUgcUAzdgo07bQNAIVYZAh6WX56uJpa6E68tL0C3qSroPPy6mtRCG0qqjaOjHyzCnnIz8hHW5hhkgBYei/E0WcUSpzsKAO1ihyXLMsFDFrm1s2964h1xRt7UlGiz/gfzoRJyDyWs7xI5j35IIH318aprgcPXEQRlLEdk3yVkK0NVNqprpDnK4iPE9OpzLQ6ijke6gi3uJKpAiyHME6qzXEaTmgGelO2jEOTjwsZxndSBV6LKaR/wUszn4WKHMK3sG32eDbA4GfBcWFjDFWWgD9WwO5IpKZLdERzVRzuaggUA82Y5v5TH6pSwOKnfM41t6LptbO4sDV14NPvVMLlpfncaX+F0jUA/5CqcSsrl9ArY6b8Y3r6ZZcunuyd4UQtaghGCEQ/CEvx4KPcARTeEHxFCW/VlRilFa/g04JGf06HK/AKfHTG+sdYu4PoZQQ6QZVxHDArj8nvKaYlMG7UIi74Qy3SGvOcoMlvp/XtGKPeDzxWJ+zthQXtQsekWIXHqFF/HPooDpsrSRZEmFXL1EmpE1jeoCWE0pxSskkQ1lGtmDdvp6N4ieMKEi8fGI3H3BA7Bz9MtP48hYNuRpVJC36z+68tfq8tYs8YfiEyqxAtM5lW/HSaSzcLo1yTEnyGhAy1weO4v3tzqOzsPNpn0eHVnxnYzrY4cUVnEtO4e+Yhs5cSWzTc+XEQfd2nsLE4S58G7rX8MIT1nZiZ1PnJZtt5yJkegEK7zCX4eptMZ4h167pFtdcpt4l3zDrRoP3WngegGysfQiFa+WdR2eR176zv8DbyksT0fy0GMAAAAASUVORK5CYII=');
}
.ni-success.ico:before{
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAsVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+3mHKcAAAAOnRSTlMA+7j3a0UnxtSzMvPvq6KNcBDr2jotIwflvJyIVQrW0MOBQB8D38qml5FdWlIbFnVmT66FYsCfS3sN3JshzAAABAJJREFUWMOVl+eaqjAQhj9EBAvYxbYW7L3u6ub+L+xAMmzgIYDn/aMmDEz5MoNI49cr1u3ZdNK2zPLu8jrjvygVC30Wo7Z+dz42v911psJ8/n5ivl+zVFaXrzxzYxZx2yo4w6FTXvc1FtLeZ5p/7RjR2jQ6zb/l7nW7YkS5lG5fmYYX7ZuJexsOZaZ6SI2ezG2R74VRrDv23dldbl2+0KvTLUZq+4bYXRu8kO9Bjf2hmfUOX90wzlBlfxF7jyWAV1lRxGuw86zyH07a8/vB470BUzIdB06s1T6M+bJVAppDlbGsgGur8tDVePhN/5vFMtADJ37413gtuFXbtzd0lk0DwJ0ndgHJg9e3B7w0lscbWHK9fEcC4DsvwNNYPhfgxEssVc2zXgd6VfYJY8p5KzxZBk/AEu4k37iq+5nsURrmEJgUQD3ffsvVPPODCD5rTXGEmFgr5dsXvyaMoh9RScKyGkA5z9zsoCC+9V2cg3xN4NOsBRIiRzLdX6Lx5wqwZT4egAMtbLLNVzegJxvTUjywThFoJ+5SBk6QL+o3FLJFMbSFqJ5Z5tpVHFjJkIpWQikQ3wOw6VKV/YB3pFN0qe3iyI+U0NQRLjVNfZ4sxkPKRVLBQuNaugSPLaEifTNsFsWiiVRkMZ4i+A12XNTCn/CcV4byUI9c+CRlNgIXxYxXz4reXz8Fl4/6Yjwc5IGLsxH1m6AsdDyXW3du0Gz4HpZPkZYZpyDK0EdB/pBBUNRPOa4TKpmJNtQKbzBiklbyZcBkqTeQIUhs9cxQh+DIJEqMuH1PV2ibkhiW8Rbb7X8hyjctK8tIQurGt3dkShJSsCchCQWNScqSjrT3JUsopdzThD92fH8ig1ir7NuuOEUH4YgJ7BMxqiVEbMGzp/WAoWgozWrCR86ZKfGAiagfxtReHRZnrZYQRQh0REujpjpVNNULfK5MyZV7TrkeknTuLALFt0jpsEvRQy05WEzecyU0fgep03EnmrkU2pGGfBTDUNsPSBwtevX1uFcujf0IrZZ6wJ5ojL1BFHhlaezn8yLVyBNT0iiIis7yKYYvEmMQ1A30rh9N9nwiybgWdQQJj351Bjp5UVx5yNR8JSXuu3X2vTOzzFt+/NhQKaNQQ2n7Ubj1dHt7AfyK0TVHHNJs7QY/jLLa3LzJvwRbJChSLwpq49l6Uj0HfpWW/rpOA9668T4a+99W+57z090ty46n4KhRxzbEbPL2863jbB9XYwFuvpUvq2q6ZujuNTFbmkdbo0rckMpy9Kf3+9s4L0PjTuOnH6lEFp1BJPLV991x7MIkIq7pEXkcZywVq7jEB3gbpZ61wsHFhyye9ipu3R80uvgv3Mpz/lMw11NzsBkVvV+k8A9TqSfvLSbHQQAAAABJRU5ErkJggg==');
}
.ni-error.ico:before{
 	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA/CAMAAABnwz74AAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOXRSTlMA+QUzm1hryhDh3NexRSXt6tG6QcZmSS8qIBTMvaSfhndhXlNMDAny5cG2rpWLek87GPaqkIFyNxta/dKiAAAEBElEQVRIx5VX6YKyMAwcDg8QDxAvVDxxvdbbVd7/xT4J7bYsAn7zR2ozMU2mCSILqja/+9tNpeJu/cnsoeK/4M2urTCBptV5fkxv75TwDZRt9yN61w4zUVsU0vsbKeyh5e/3vjWUjuNq+fwJN2z5My0Aw6o319d8Z5+Tz0aNGW2PKSt1uWObZi+Lv2S5Gzfi05TuuuU4ln+fx5SnzgxK7/kddkqyPu3NUIKhtynEUbz8yeFPo+eS/aYCs2inzK1SmMe5O0WFNMO3MKIiagY9l//y6/S1fQaq1zATW++179Lj4k/+m9GXlRWgtcIcNKNUUCKUZC0c+v0AKIUF6AAqxeDK/B/y3gBmRXw6/ZPycBf8wVf0xZL/fnEMJ3oQh9Cj5Q3Qwo9wYpLfcX6PahRAHUp3d6bLHGt2EQuzCpVE35YDmAPf8T5X61isNiqW0qYOHMktK6ESmQAPyWTBHRMc6hPSdh3YRp/x3T4whiXzCbrgJz04THk32rAjoatyAMdEdke/alXkENwoGypYSSYiYKonh0/nT3u4ssC7XEQavDVX6wkSrsNALITOvwboR58HALs4lCN3XkEO6Bqwotlx7mHEddFFzbLYIs8kolt0/QM0LnGHkUTkZrXNrdReWAfSUI/T/myGApXg7bBz5CnTRzsu+Jz8UBHzPaijhEk9FmAZZcqprNS4tWTlT2i92qQyTKPKeamLbFeT9GCTutTqmgREDqrpTnBP9exUX4kcfGdFcMUffGdEQDm4DNDN5ZOHjBzQT2u8GQmZFHlosyrwanqtJL/Iw6XBFUQNdQoME/EXerCBMmusZjSPSdkEWmThLhvtXx/rVdz6jBW6729jNamHncgh9VWHz9sTAlMUSOKbzTMEjryjtM7o8SlN+b/JZ/gR/FdmTOFBiMWn47DGXomnQj9MeVhV6OZ6SX4csUqtVAzGWWIOTAU/MovzMJfmDLAQeqdCDoH+RfJAfDGKiC/wAOhy9UHYs8txkEwOWNliZXiJuf1N7kTBBxfKa/LKT5xQgntQpGahIjD4YBIK84FGdJhCKD0WtC+qtWZ5bBfTaW4d2Wz4xYw8a7RThBLQp0h/UhI1Xi7bBadQloBXozc2yDibVK4nvS/nwOgDVZvEPEACGmV5/dpXb9l8fQUMTNZQ/mAp3gw09z19+ADQvWS9by+kvwNtJ03f1KWeMs952zfIsHFwJWVfKndS7amW874vpv/oREuv3pno47E+KXfjG/1gw/WrjQx4XMt2+Zza67hcyU9ko6zweo8Oy4YKgjroTp3fjSlycR5LolkPHctyhoYidfwnitDbhpkYPfAJ+rf1O3Zr38OnUOs3W5HJSm2/XOH/cK6XJ/rVsq7+q47ZJ/8H7ljT2l779VYAAAAASUVORK5CYII=');
}
.ni-warning.ico:before{
 	background-image: url('data:image/png;base64,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');
}
.ni-warning2.ico:before{
	background-image: url('data:image/png;base64,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');
}
.ni-loader.ico:before{
 	background-image:  url('data:image/png;base64,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');
  animation-name: spin;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.close-on{
	padding-right:29px;
}
.close-ico{
    position: absolute;
    right: 5px;
    top: 5px;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 16px auto;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8DizOFAAAALnRSTlMA8+/uSkA7Kdd1ThVTJSH348W3nJiTjWhaIw4sAebW09DAvJ+Jf2IbCAWvrjIw3t6pfQAAASpJREFUOMt1kdm2gjAMRQ+IFQUUkEnU6zzdIf//eXcVjkAF9lO6dpK2CVpeTnZ2w9A9Z84LfbzUkgYr9T79TT64meUH6XHoNJmxu4k1A1naMoi9ZMJRRjjW/iqjXLXf8jCfWe3tc0b6GRd64G9Vh6tfgBkXwGPdVDezKr8FoNjLQyFE6f/a/J0SUmBdB+yxEQkATOXNGpEYGUrRkwh7aXFQ4UjLHsYUC+0LY5pM6FyCqZkQdg4BKoKJNIQ4tX4D4H43t3dCKmSivVO/dNP0SOG//RLAQkcL3eOd4aNkqPg/ZiiWlUDGkbGeGRxwBuDBHSbaEz/hrh4ANzvMHBXxmI9R83SH/dcTpHQHfYmG3Xff/8DAt0098fHBLu/c4+Y7DBDkSRxFcZIHaPkHJPZ03MNmRksAAAAASUVORK5CYII=");
}

@-moz-keyframes spin {
    from{-moz-transform: rotate(0deg); }
    to 	{-moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from{-webkit-transform: rotate(0deg); }
    to 	{-webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from{transform:rotate(0deg);}
    to 	{transform:rotate(360deg);}
}

/* Скины уведомлений */
/* Большой размер */
.large.notic.ico{
	padding-top: 15px;
	padding-bottom: 15px;
}
/* Скины иконок */
/* Средняя иконка */
.ico-medium.notic.ico{
	padding-left: 54px;
}
.ico-medium.notic.ico:before{
	background-size: 30px auto;
	left: -7px;
}
/* icon-micro */
.ico-large.notic.ico{
	padding-left:96px;
}
.ico-large.notic.ico::before{
	background-size:70px auto;
	left: 13px;
}



/*.wojetooltip {
    display: inline;
    position: relative;

    
}

.wojetooltip:hover {
    color: #c00;
    text-decoration: none;
   
}

.wojetooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em; 
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;   
    padding: .3em 1em;   
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.wojetooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}*/

    .wojetooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.wojetooltip .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.wojetooltip:hover .top {
    display:block;
}

.wojetooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.wojetooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}