@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");

body {
  background: #ecf1f6;
  font-family: "Roboto", sans-serif;
  margin: 0;
  font-size: 14px;
  overflow-x: hidden;
  font-weight: 400;
  color: #16171a;
}

html {
  position: relative;
  min-height: 100%;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}

a.link {
  color: #455a64;
}

a.link:hover,
a.link:focus {
  color: #009efb;
}
.cursor {
  cursor: pointer;
}
.height-auto {
  height: auto !important;
}
.img-full {
  width: 100%;
  height: 100%;
}
.img-responsive {
  width: 100%;
  height: auto;
  display: inline-block;
}
.img-rounded {
  border-radius: 4px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.white-box {
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  padding: 16px;
}
.bs {
  box-shadow: none !important;
}
.overflow-hidden {
  overflow: hidden;
}

.mdi:before,
.mdi-set {
  line-height: initial;
}
button {
  font-family: "Roboto", sans-serif;
}
.container {
  width: 100%;
  margin: auto;
}
.main-center-bx {
  width: 92%;
  margin: auto;
  padding: 0px;
  height: auto;
}

/*******************
 Line Height
*******************/
.line-height-20 {
  line-height: 20px;
}
.line-height-25 {
  line-height: 25px;
}
.line-height-30 {
  line-height: 30px;
}
.line-height-35 {
  line-height: 35px;
}
/*******************
 Width
*******************/
.w-auto {
  width: auto !important;
}
.w-0 {
  width: 0% !important;
}
.w-10 {
  width: 10% !important;
}
.w-20 {
  width: 20% !important;
}
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}
.w-50 {
  width: 50% !important;
}
.w-60 {
  width: 60% !important;
}
.w-70 {
  width: 70% !important;
}
.w-80 {
  width: 80% !important;
}
.w-90 {
  width: 90% !important;
}
.w-95 {
  width: 95% !important;
}
.w-100 {
  width: 100% !important;
}

/*******************
Headings
*******************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
}

h1 {
  line-height: 40px;
  font-size: 36px;
}

h2 {
  line-height: 36px;
  font-size: 24px;
}

h3 {
  line-height: 30px;
  font-size: 21px;
}

h4 {
  line-height: 22px;
  font-size: 18px;
}

h5 {
  line-height: 18px;
  font-size: 16px;
  font-weight: 400;
}

h6 {
  line-height: 16px;
  font-size: 14px;
  font-weight: 400;
}

.dn {
  display: none;
}
.dl {
  display: inline-block;
}

.db {
  display: block;
}

.no-wrap td,
.no-wrap th {
  white-space: nowrap;
}

.clear {
  clear: both;
}

ol li {
  margin: 5px 0;
}

/*******************
 Position
*******************/
.ps {
  position: static !important;
}
.pr {
  position: relative !important;
}
.pa {
  position: absolute !important;
}
.pf {
  position: fixed !important;
}

/*******************
Placeholder
*******************/
::-webkit-input-placeholder {
  /* Edge */
  color: #878787;
  font-size: 12px;
  font-weight: 300;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #878787;
  font-size: 12px;
  font-weight: 300;
}
input::placeholder {
  color: #878787;
  font-size: 12px;
  font-weight: 300;
}

/*******************
Paddings
*******************/
.p-0 {
  padding: 0px !important;
}
.p-5 {
  padding: 5px !important;
}
.p-10 {
  padding: 10px !important;
}
.p-15 {
  padding: 15px !important;
}
.p-20 {
  padding: 20px !important;
}
.p-25 {
  padding: 25px !important;
}
.p-30 {
  padding: 30px !important;
}
.p-35 {
  padding: 35px !important;
}
.p-40 {
  padding: 40px !important;
}

.p-l-0 {
  padding-left: 0px !important;
}
.p-l-5 {
  padding-left: 5px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-l-15 {
  padding-left: 15px !important;
}
.p-l-20 {
  padding-left: 20px !important;
}
.p-l-25 {
  padding-left: 25px !important;
}
.p-l-30 {
  padding-left: 30px !important;
}
.p-l-35 {
  padding-left: 35px !important;
}
.p-l-40 {
  padding-left: 40px !important;
}

.p-r-0 {
  padding-right: 0px !important;
}
.p-r-5 {
  padding-right: 5px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.p-r-15 {
  padding-right: 15px !important;
}
.p-r-20 {
  padding-right: 20px !important;
}
.p-r-25 {
  padding-right: 25px !important;
}
.p-r-30 {
  padding-right: 30px !important;
}
.p-r-35 {
  padding-right: 35px !important;
}
.p-r-40 {
  padding-right: 40px !important;
}
.p-t-0 {
  padding-top: 0px !important;
}
.p-t-5 {
  padding-top: 5px !important;
}
.p-t-10 {
  padding-top: 10px !important;
}
.p-t-15 {
  padding-top: 15px !important;
}
.p-t-20 {
  padding-top: 20px !important;
}
.p-t-25 {
  padding-top: 25px !important;
}
.p-t-30 {
  padding-top: 30px !important;
}
.p-t-35 {
  padding-top: 35px !important;
}
.p-t-40 {
  padding-top: 40px !important;
}

.p-b-0 {
  padding-bottom: 0px !important;
}
.p-b-5 {
  padding-bottom: 5px !important;
}
.p-b-10 {
  padding-bottom: 10px !important;
}
.p-b-15 {
  padding-bottom: 15px !important;
}
.p-b-20 {
  padding-bottom: 20px !important;
}
.p-b-25 {
  padding-bottom: 25px !important;
}
.p-b-30 {
  padding-bottom: 30px !important;
}
.p-b-35 {
  padding-bottom: 35px !important;
}
.p-b-40 {
  padding-bottom: 40px !important;
}

/*******************
Margin
*******************/

.m-auto {
  margin: auto !important;
}

.m-0 {
  margin: 0px !important;
}
.m-5 {
  margin: 5px !important;
}
.m-10 {
  margin: 10px !important;
}
.m-15 {
  margin: 15px !important;
}
.m-20 {
  margin: 20px !important;
}
.m-25 {
  margin: 25px !important;
}
.m-30 {
  margin: 30px !important;
}
.m-35 {
  margin: 35px !important;
}
.m-40 {
  margin: 40px !important;
}

.m-l-0 {
  margin-left: 0px !important;
}
.m-l-5 {
  margin-left: 5px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-l-15 {
  margin-left: 15px !important;
}
.m-l-20 {
  margin-left: 20px !important;
}
.m-l-25 {
  margin-left: 20px !important;
}
.m-l-30 {
  margin-left: 30px !important;
}
.m-l-35 {
  margin-left: 35px !important;
}
.m-l-40 {
  margin-left: 40px !important;
}
.m-r-0 {
  margin-right: 0px !important;
}
.m-r-5 {
  margin-right: 5px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.m-r-20 {
  margin-right: 20px !important;
}
.m-r-25 {
  margin-right: 25px !important;
}
.m-r-30 {
  margin-right: 30px !important;
}
.m-r-35 {
  margin-right: 35px !important;
}
.m-r-40 {
  margin-right: 40px !important;
}
.m-t-0 {
  margin-top: 0px !important;
}
.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-t-15 {
  margin-top: 15px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-t-25 {
  margin-top: 25px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.m-t-35 {
  margin-top: 35px !important;
}
.m-t-40 {
  margin-top: 40px !important;
}
.m-b-0 {
  margin-bottom: 0px !important;
}
.m-b-5 {
  margin-bottom: 5px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-b-20 {
  margin-bottom: 20px !important;
}
.m-b-25 {
  margin-bottom: 25px !important;
}
.m-b-30 {
  margin-bottom: 30px !important;
}
.m-b-35 {
  margin-bottom: 35px !important;
}
.m-b-40 {
  margin-bottom: 40px !important;
}

/*******************
vertical alignment
*******************/
.vt {
  vertical-align: top;
}

.vm {
  vertical-align: middle;
}

.vb {
  vertical-align: bottom;
}

/*******************
Opacity
*******************/
.op-5 {
  opacity: 0.5;
}
.op-8 {
  opacity: 0.8;
}

/*******************
font weight
*******************/
.font-bold {
  font-weight: 700 !important;
}
.font-Semi-Bold {
  font-weight: 600 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-normal {
  font-weight: 400 !important;
}
.font-light {
  font-weight: 300 !important;
}

/*******************
font size
*******************/

.font-8 {
  font-size: 8px !important;
}
.font-10 {
  font-size: 10px !important;
}
.font-12 {
  font-size: 12px !important;
}
.font-14 {
  font-size: 14px !important;
}
.font-16 {
  font-size: 16px !important;
}
.font-18 {
  font-size: 18px !important;
}
.font-20 {
  font-size: 20px !important;
}
.font-22 {
  font-size: 23px !important;
}
.font-24 {
  font-size: 24px !important;
}
.font-26 {
  font-size: 26px !important;
}
.font-28 {
  font-size: 28px !important;
}
.font-30 {
  font-size: 30px !important;
}

/*******************
Border
*******************/
.b-0 {
  border: none !important;
}

.b-r {
  border-right: 1px solid rgba(120, 130, 140, 0.21) !important;
}

.b-l {
  border-left: 1px solid rgba(120, 130, 140, 0.21) !important;
}

.b-b {
  border-bottom: 1px solid rgba(120, 130, 140, 0.21) !important;
}

.b-t {
  border-top: 1px solid rgba(120, 130, 140, 0.21) !important;
}

.b-all {
  border: 1px solid rgba(120, 130, 140, 0.21) !important;
}

/*******************
Thumb size
*******************/
.thumb-sm {
  height: 32px;
  width: 32px;
}
.thumb-md {
  height: 48px;
  width: 48px;
}
.thumb-lg {
  height: 88px;
  width: 88px;
}
.hide {
  display: none;
}
.img-circle {
  border-radius: 100%;
}
.radius {
  border-radius: 5px;
}

/*******************
Text Colors
*******************/
.text-white {
  color: #ffffff !important;
}
.text-black {
  color: #232323 !important;
}
.text-danger {
  color: #f35a5a !important;
}
.text-oragne {
  color: #dc7b31 !important;
}
.text-muted {
  color: #a7a7a7 !important;
}
.text-info {
  color: #1e88e5 !important;
}
.text-blue {
  color: #102850 !important;
}
.text-warning {
  color: #f3a945 !important;
}
.text-success {
  color: #2f886b !important;
}
.text-success-light {
  color: #0ea740 !important;
}
.text-inverse {
  color: #656c71 !important;
}
.text-light {
  color: #ebebeb !important;
}
.text-purple {
  color: #7460ee;
}

.text-primary {
  color: #a79ada;
}

.text-megna {
  color: #00897b;
}
.text-dark {
  color: #67757c;
}

.text-themecolor {
  color: #009efb;
}

/*******************
Background Colors
*******************/
.bg-primary {
  background-color: #a79ada !important;
}

.bg-success {
  background-color: #2f886b !important;
}

.bg-info {
  background-color: #1e88e5 !important;
}

.bg-warning {
  background-color: #f3a945 !important;
}

.bg-danger {
  background-color: #f35a5a !important;
}
.bg-blue {
  background-color: #102850 !important;
}
.bg-megna {
  background-color: #00897b !important;
}

.bg-theme {
  background-color: #009efb !important;
}
.bg-inverse {
  background-color: #656c71 !important;
}
.bg-inverse-light {
  background-color: #e4e4e4 !important;
}
.bg-sky-light {
  background-color: #eef0f4 !important;
}

.bg-purple {
  background-color: #7460ee;
}

.bg-light-primary {
  background-color: #f1effd;
}

.bg-light-success {
  background-color: #e8fdeb;
}

.bg-light-info {
  background-color: #cfecfe;
}

.bg-light-extra {
  background-color: #ebf3f5;
}

.bg-light-warning {
  background-color: #fff8ec;
}

.bg-light-danger {
  background-color: #f9e7eb;
}

.bg-light-inverse {
  background-color: #f6f6f6;
}

.bg-light {
  background-color: #f2f4f8;
}

.bg-white {
  background-color: #ffffff !important;
}

/*******************
Rounds
*******************/
.round {
  line-height: 48px;
  color: #ffffff;
  width: 45px;
  height: 45px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  border-radius: 100%;
}

.round img {
  border-radius: 100%;
}

.round-lg {
  line-height: 65px;
  width: 60px;
  height: 60px;
  font-size: 30px;
}

.round.round-info {
  background: #1e88e5;
}

.round.round-warning {
  background: #ffb22b;
}

.round.round-danger {
  background: #f35a5a;
}

.round.round-success {
  background: #218a2f;
}

.round.round-primary {
  background: #7460ee;
}
.round.round-blue {
  background: #7460ee;
}

/*******************
Labels
*******************/
.label {
  padding: 3px 10px;
  line-height: 13px;
  color: #ffffff;
  font-weight: 400;
  border-radius: 4px;
  font-size: 75%;
}

.label-rounded {
  border-radius: 60px;
}

.label-custom {
  background-color: #00897b;
}

.label-success {
  background-color: #26c6da;
}

.label-info {
  background-color: #1e88e5;
}

.label-warning {
  background-color: #ffb22b;
}

.label-danger {
  background-color: #fc4b6c;
}

.label-megna {
  background-color: #00897b;
}
.label-megna {
  background-color: #102850;
}

.label-primary {
  background-color: #7460ee;
}

.label-purple {
  background-color: #7460ee;
}

.label-red {
  background-color: #fb3a3a;
}

.label-inverse {
  background-color: #2f3d4a;
}

.label-default {
  background-color: #f2f4f8;
}

.label-white {
  background-color: #ffffff;
}

.label-light-success {
  background-color: #e8fdeb;
  color: #218a2f;
}

.label-light-info {
  background-color: #cfecfe;
  color: #1e88e5;
}

.label-light-warning {
  background-color: #fff8ec;
  color: #ffb22b;
}

.label-light-danger {
  background-color: #f9e7eb;
  color: #fc4b6c;
}

.label-light-megna {
  background-color: #e0f2f4;
  color: #00897b;
}

.label-light-primary {
  background-color: #f1effd;
  color: #7460ee;
}

.label-light-inverse {
  background-color: #f6f6f6;
  color: #2f3d4a;
}

/*******************
Table Cell
*******************/
.table {
  width: 100%;
  border: 1px solid #d6d8da;
  border-collapse: inherit;
  box-sizing: border-box;
  border-spacing: 0px;
}
table.table tr th {
  background: #edeff4;
  padding: 22px 22px;
  font-size: 16px;
  font-weight: 500;
}
table.table tr th:first-child {
  border-radius: 5px 0 0 0;
}
table.table tr th:last-child {
  border-radius: 0px 0 0 5px;
}
table.table tr td {
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 500;
}
.table tr:nth-child(odd) {
  background: #fff;
}
.table tr:nth-child(even) {
  background: #eff5fc;
}
.table.no-border tbody td {
  border: 0px;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}

.table td,
.table th {
  border-color: #f3f1f1;
}

.table thead th,
.table th {
  font-weight: 500;
}

.table-hover tbody tr:hover {
  background: #f2f4f8;
}

.v-middle td,
.v-middle th {
  vertical-align: middle;
}

/*Badge*/
.badge {
  font-weight: 400;
}

.badge-xs {
  font-size: 9px;
}

.badge-xs,
.badge-sm {
  -webkit-transform: translate(0, -2px);
  -ms-transform: translate(0, -2px);
  -o-transform: translate(0, -2px);
  transform: translate(0, -2px);
}

.badge-success {
  background-color: #26c6da;
}

.badge-info {
  background-color: #1e88e5;
}

.badge-primary {
  background-color: #7460ee;
}

.badge-warning {
  background-color: #ffb22b;
}

.badge-danger {
  background-color: #fc4b6c;
}

.badge-purple {
  background-color: #7460ee;
}

.badge-red {
  background-color: #fb3a3a;
}

.badge-inverse {
  background-color: #2f3d4a;
}

/*******************
Buttons
******************/

.view-btn {
  background: #dddddd;
  border-radius: 4px;
}
.btn {
  padding: 7px 12px;
  font-size: 14px;
  cursor: pointer;
}

.btn-group label {
  color: #ffffff !important;
  margin-bottom: 0px;
}

.btn-group label.btn-secondary {
  color: #67757c !important;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}

.btn-md {
  padding: 12px 55px;
  font-size: 16px;
}

.btn-circle {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  padding: 10px;
}

.btn-circle.btn-sm {
  width: 35px;
  height: 35px;
  padding: 8px 10px;
  font-size: 14px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 14px 15px;
  font-size: 18px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 14px 15px;
  font-size: 24px;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 12px;
}

.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 10px;
}

.button-list button,
.button-list a {
  margin: 5px 12px 5px 0;
}

.btn-outline {
  color: inherit;
  background-color: transparent;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.btn-rounded {
  border-radius: 60px;
  padding: 7px 18px;
}

.btn-rounded.btn-lg {
  padding: 0.75rem 1.5rem;
}

.btn-rounded.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 12px;
}

.btn-rounded.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 10px;
}

.btn-rounded.btn-md {
  padding: 12px 35px;
  font-size: 16px;
}

.btn-secondary,
.btn-secondary.disabled {
  -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14),
    0 3px 1px -2px rgba(169, 169, 169, 0.2),
    0 1px 5px 0 rgba(169, 169, 169, 0.12);
  box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14),
    0 3px 1px -2px rgba(169, 169, 169, 0.2),
    0 1px 5px 0 rgba(169, 169, 169, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-secondary:hover,
.btn-secondary.disabled:hover {
  -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
  box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-secondary.active,
.btn-secondary:focus,
.btn-secondary.disabled.active,
.btn-secondary.disabled:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
  box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-primary,
.btn-primary.disabled {
  background: #7460ee;
  border: 1px solid #7460ee;
  -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14),
    0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
  box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14),
    0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-primary:hover,
.btn-primary.disabled:hover {
  background: #7460ee;
  -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  border: 1px solid #7460ee;
}

.btn-primary.active,
.btn-primary:focus,
.btn-primary.disabled.active,
.btn-primary.disabled:focus {
  background: #6352ce;
  -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
}

.btn-themecolor {
  background: #5eafc8;
}
.btn-themecolor,
.btn-themecolor.disabled {
  background: #5eafc8;
  color: #ffffff;
  border: 1px solid #5eafc8;
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
  background: #4da3bd;
  opacity: 0.7;
  border: 1px solid #4da3bd;
}

.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
  background: #4da3bd;
}

.btn-success,
.btn-success.disabled {
  background: #26c6da;
  border: 1px solid #26c6da;
  -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14),
    0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
  box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14),
    0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-success:hover,
.btn-success.disabled:hover {
  background: #26c6da;
  -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
  box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
  border: 1px solid #26c6da;
}

.btn-success.active,
.btn-success:focus,
.btn-success.disabled.active,
.btn-success.disabled:focus {
  background: #1eacbe;
  -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
  box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-info,
.btn-info.disabled {
  background: #1e88e5;
  border: 1px solid #1e88e5;
  -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-info:hover,
.btn-info.disabled:hover {
  background: #1e88e5;
  border: 1px solid #1e88e5;
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-info.active,
.btn-info:focus,
.btn-info.disabled.active,
.btn-info.disabled:focus {
  background: #028ee1;
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-blue.disabled {
  background: #38507a;
}
.btn-blue {
  background: #102850;
  border: 1px solid #102850;
  -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  color: #fff;
}
.btn-blue.disabled:hover {
  background: #38507a;
}

.btn-blue:hover {
  color: #fff;
  background: #1c396d;
  border: 1px solid #1c396d;
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-blue.active,
.btn-blue:focus {
  color: #fff;
  background: #1c396d;
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-warning {
  background: #f68f11;
  border: 1px solid #f68f11;
}

.btn-warning.disabled {
  background: #b2965b;
  -webkit-box-shadow: 0 2px 2px 0 rgba(178, 150, 91, 0.42),
    0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
  box-shadow: 0 2px 2px 0 rgba(178, 150, 91, 0.42),
    0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
  border: 1px solid #b2965b;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-warning:hover,
.btn-warning.disabled:hover {
  background: #f39b2f;
  -webkit-box-shadow: 0 14px 26px -12px rgb(248 194 0 / 42%),
    0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(191 163 107 / 16%);
  box-shadow: 0 14px 26px -12px rgb(248 194 0 / 42%),
    0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(191 163 107 / 16%);
  border: 1px solid #f39b2f;
}

.btn-warning.active,
.btn-warning:focus,
.btn-warning.disabled.active,
.btn-warning.disabled:focus {
  background: #e9ab2e;
  -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
  box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-danger,
.btn-danger.disabled {
  background: #fc4b6c;
  border: 1px solid #fc4b6c;
  -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14),
    0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
  box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14),
    0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-danger:hover,
.btn-danger.disabled:hover {
  background: #fc4b6c;
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  border: 1px solid #fc4b6c;
}

.btn-danger.active,
.btn-danger:focus,
.btn-danger.disabled.active,
.btn-danger.disabled:focus {
  background: #e6294b;
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-inverse,
.btn-inverse.disabled {
  background: #2f3d4a;
  border: 1px solid #2f3d4a;
  color: #ffffff;
}

.btn-inverse:hover,
.btn-inverse.disabled:hover {
  background: #2f3d4a;
  opacity: 0.7;
  color: #ffffff;
  border: 1px solid #2f3d4a;
}

.btn-inverse.active,
.btn-inverse:focus,
.btn-inverse.disabled.active,
.btn-inverse.disabled:focus {
  background: #232a37;
  color: #ffffff;
}

.btn-red,
.btn-red.disabled {
  background: #fb3a3a;
  border: 1px solid #fb3a3a;
  color: #ffffff;
}

.btn-red:hover,
.btn-red.disabled:hover {
  opacity: 0.7;
  border: 1px solid #fb3a3a;
  background: #fb3a3a;
}

.btn-red.active,
.btn-red:focus,
.btn-red.disabled.active,
.btn-red.disabled:focus {
  background: #e6294b;
}

.btn-outline-secondary {
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14),
    0 3px 1px -2px rgba(169, 169, 169, 0.2),
    0 1px 5px 0 rgba(169, 169, 169, 0.12);
  box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14),
    0 3px 1px -2px rgba(169, 169, 169, 0.2),
    0 1px 5px 0 rgba(169, 169, 169, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
  box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-outline-secondary.active,
.btn-outline-secondary:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
  box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-outline-primary {
  color: #7460ee;
  background-color: #ffffff;
  border-color: #7460ee;
  -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14),
    0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
  box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14),
    0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  background: #7460ee;
  -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  color: #ffffff;
  border-color: #7460ee;
}

.btn-outline-primary.active,
.btn-outline-primary:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
  box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
}

.btn-outline-success {
  color: #26c6da;
  background-color: transparent;
  border-color: #26c6da;
  -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14),
    0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
  box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14),
    0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success.focus {
  background: #26c6da;
  border-color: #26c6da;
  color: #ffffff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
  box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-outline-success.active,
.btn-outline-success:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
  box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-outline-info {
  color: #1e88e5;
  background-color: transparent;
  border-color: #1e88e5 !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14),
    0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info.focus {
  background: #1e88e5;
  border-color: #1e88e5;
  color: #ffffff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-outline-info.active,
.btn-outline-info:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
  box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-outline-warning {
  color: #ffb22b;
  background-color: transparent;
  border-color: #ffb22b;
  -webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14),
    0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
  box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14),
    0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.focus {
  background: #ffb22b;
  border-color: #ffb22b;
  color: #ffffff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
  box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-outline-warning.active,
.btn-outline-warning:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
  box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-outline-danger {
  color: #fc4b6c;
  background-color: transparent;
  border-color: #fc4b6c;
  -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14),
    0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
  box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14),
    0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger.focus {
  background: #fc4b6c;
  border-color: #fc4b6c;
  color: #ffffff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-danger.active,
.btn-outline-danger:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-red {
  color: #fb3a3a;
  background-color: transparent;
  border-color: #fb3a3a;
}

.btn-outline-red:hover,
.btn-outline-red:focus,
.btn-outline-red.focus {
  background: #fb3a3a;
  border-color: #fb3a3a;
  color: #ffffff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-red.active,
.btn-outline-red:focus {
  -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42),
    0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-inverse {
  color: #2f3d4a;
  background-color: transparent;
  border-color: #2f3d4a;
}

.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse.focus {
  background: #2f3d4a;
  border-color: #2f3d4a;
  color: #ffffff;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
  background-color: #6352ce;
  border: 1px solid #6352ce;
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success.focus:active,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.btn-success.focus,
.btn-success:focus {
  background-color: #1eacbe;
  border: 1px solid #1eacbe;
}

.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info.focus:active,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover,
.btn-info.focus,
.btn-info:focus {
  background-color: #028ee1;
  border: 1px solid #028ee1;
}

.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning.focus:active,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning.focus,
.btn-warning:focus {
  background-color: #e28412;
  border: 1px solid #e28412;
}

.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger.focus:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger.focus,
.btn-danger:focus {
  background-color: #e6294b;
  border: 1px solid #e6294b;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.focus,
.btn-inverse:active,
.btn-inverse:focus,
.btn-inverse:hover,
.open > .dropdown-toggle.btn-inverse {
  background-color: #232a37;
  border: 1px solid #232a37;
}

.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.btn-red.focus,
.btn-red:active,
.btn-red:focus,
.btn-red:hover,
.open > .dropdown-toggle.btn-red {
  background-color: #d61f1f;
  border: 1px solid #d61f1f;
  color: #ffffff;
}

.button-box .btn {
  margin: 0 8px 8px 0px;
}

.btn-label {
  background: rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin: -6px 12px -6px -14px;
  padding: 7px 15px;
}

.btn-facebook {
  color: #ffffff;
  background-color: #3b5998;
}

.btn-twitter {
  color: #ffffff;
  background-color: #55acee;
}

.btn-linkedin {
  color: #ffffff;
  background-color: #007bb6;
}

.btn-dribbble {
  color: #ffffff;
  background-color: #ea4c89;
}

.btn-googleplus {
  color: #ffffff;
  background-color: #dd4b39;
}

.btn-instagram {
  color: #ffffff;
  background-color: #3f729b;
}

.btn-pinterest {
  color: #ffffff;
  background-color: #cb2027;
}

.btn-dropbox {
  color: #ffffff;
  background-color: #007ee5;
}

.btn-flickr {
  color: #ffffff;
  background-color: #ff0084;
}

.btn-tumblr {
  color: #ffffff;
  background-color: #32506d;
}

.btn-skype {
  color: #ffffff;
  background-color: #00aff0;
}

.btn-youtube {
  color: #ffffff;
  background-color: #bb0000;
}

.btn-github {
  color: #ffffff;
  background-color: #171515;
}

/*******************
blink
*******************/

.blink {
  font-family: "Roboto", sans-serif;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/*******************
File Upload 
******************/
.fileupload {
  overflow: hidden;
  position: relative;
}

.fileupload input.upload {
  cursor: pointer;
  filter: alpha(opacity=0);
  font-size: 20px;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/*--------------------------------------------------------------
# Multipel dropdown  css Start- Desktop
--------------------------------------------------------------*/
.multiple-search-box {
  width: 35%;
  float: left;
  margin-right: 20px;
}
.custom-select1 select {
  background: #eef0f4;
  border: 1px solid #eef0f4;
  height: 42px;
  color: #878787;
  width: 100%;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 5px;
}
.custom-select {
  position: relative;
  font-family: "Roboto", sans-serif;
}
.custom-select select {
  display: none;
}
.select-selected {
  background-color: #f5f5f6;
}
.custom-select label {
  text-align: left;
  font: normal normal normal 14px/17px Roboto;
  letter-spacing: 0px;
  color: #16171a;
  font-weight: 500;
  padding-bottom: 12px;
  display: block;
}
.select-selected:before {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  content: "\f107";
  color: #191616;
  font-family: "FontAwesome";
}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
.select-items div,
.select-selected {
  color: #878787;
  padding: 13px 16px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 400;
}
.select-selected {
  border: 1px solid transparent;
  position: relative;
  border-radius: 4px;
}
.select-items {
  position: absolute;
  background-color: #efefef;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
.select-hide {
  display: none;
}
.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
button.exprot {
  background: #102850;
  padding: 13px 38px;
  margin-top: 29px;
  margin-left: 9px;
  border: 1px solid #102850;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
  font-size: 14px;
}
button.exprot:hover {
  background-color: #1eb1d4;
  border: 1px solid #1eb1d4;
}

.custom-select2 select {
  font-size: 14px;
  font-weight: 300;
  font-family: "Roboto";
  background-image: url(../images/select-arrow.png);
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: auto;
  border: none;
  padding: 0 0 0 38px;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background-size: 13px;
}
.custom-select-arrow select {
  background-image: url(../images/select-arrow.png);
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: auto;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background-size: 13px;
}
.select-icon {
  position: absolute;
  z-index: 2;
  display: flex;
  height: 100%;
  width: 40px;
  align-items: center;
  justify-content: center;
  fill: #102850;
}
.select-icon + .input-box {
  padding: 0 0 0 38px;
}
.filter-select > .custom-select1 select {
  width: 230px;
  height: 58px;
  border: 1px solid #d6d8da;
  background-color: transparent;
  line-height: 34px;
  font-size: 14px;
  font-weight: 300;
}
/*--------------------------------------------------------------
# Multipel dropdown  css End- Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Switch  css start- Desktop
--------------------------------------------------------------*/
.switch-header h5 {
  color: #16171a;
  font-size: 14px;
  font-weight: 500;
}
.switch-box {
  display: flex;
  flex-wrap: wrap;
}
.switch-btn input[type="checkbox"] {
  height: 0;
  width: 0;
  display: none;
}
.switch-btn label {
  cursor: pointer;
  text-indent: -9999px;
  width: 65px;
  height: 27px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: auto;
  margin-top: 14px;
}

.switch-btn label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}
.switch-btn input:checked + label {
  background: #d97574;
}
.switch2-bg input:checked + label {
  background: #2f886b;
}
.switch3-bg input:checked + label {
  background: #f3a945;
}
.switch4-bg input:checked + label {
  background: #a79ada;
}
.switch5-bg input:checked + label {
  background: #656c71;
}
.switch-btn input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}
.switch-btn label:active:after {
  width: 20px;
}
.switch-btn h6 {
  padding: 16px 0 5px 0;
  margin: 0px;
  font-size: 12px;
  font-weight: 400;
}

.switch1-bg,
.switch2-bg,
.switch3-bg,
.switch4-bg,
.switch5-bg {
  width: 15%;
  height: 123px;
  background: #fff6f7;
  text-align: center;
  border-radius: 5px;
  padding: 10px !important;
  margin: 0 26px 0 0;
}

.switch2-bg {
  background: #f0fcf8;
}
.switch3-bg {
  background: #fef7ea;
}
.switch4-bg {
  background: #f6f4ff;
}
.switch5-bg {
  background: #e2e9ef;
}

/*--------------------------------------------------------------
# Switch No/Yes css  Desktop
--------------------------------------------------------------*/
.toggleSwitch {
  display: inline-block;
  height: 18px;
  position: relative;
  overflow: visible;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
  width: 40px;
  user-select: none;
  margin-top: 12px;
}
.toggleSwitch label,
.toggleSwitch > span {
  line-height: 20px;
  height: 20px;
  vertical-align: middle;
}
.toggleSwitch label {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
}
.toggleSwitch input:focus ~ a,
.toggleSwitch input:focus + label {
  outline: none;
}
.toggleSwitch input {
  position: absolute;
  opacity: 0;
  z-index: 5;
}
.toggleSwitch span span {
  display: none;
}
.toggleSwitch > span {
  position: absolute;
  left: -50px;
  width: 100%;
  margin: 0;
  padding-right: 50px;
  text-align: left;
  white-space: nowrap;
}
.toggleSwitch > span span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
  width: 50%;
  margin-left: 40px;
  text-align: left;
  font-size: 0.9em;
  width: 100%;
  left: 20%;
  top: 0px;
  opacity: 0;
}
.toggleSwitch a {
  position: absolute;
  right: 50%;
  z-index: 4;
  display: block;
  height: 100%;
  padding: 0;
  left: 2px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.toggleSwitch > span span:first-of-type {
  color: #ccc;
  opacity: 1;
  left: 45%;
}
.toggleSwitch > span:before {
  content: "";
  display: block;
  width: 54px;
  height: 22px;
  position: absolute;
  left: 50px;
  top: -2px;
  background-color: #7c7979;
  border: 1px solid #ccc;
  border-radius: 30px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.toggleSwitch input:checked ~ a {
  border-color: #fff;
  left: 100%;
  margin-left: -6px;
}
.toggleSwitch input:checked ~ span:before {
  border-color: #102850;
  box-shadow: inset 0 0 0 30px #102850;
}
.toggleSwitch input:checked ~ span span:first-of-type {
  opacity: 0;
}
.toggleSwitch input:checked ~ span span:last-of-type {
  opacity: 1;
  color: #fff;
}
.toggleSwitch.large {
  width: 60px;
  height: 27px;
}
.toggleSwitch.large a {
  width: 27px;
}
.toggleSwitch.large > span {
  height: 29px;
  line-height: 28px;
}
.toggleSwitch.large input:checked ~ a {
  left: 41px;
}
.toggleSwitch.large > span span {
  font-size: 1.1em;
}
.toggleSwitch.large > span span:first-of-type {
  left: 50%;
}

/*--------------------------------------------------------------
# Switch  css End- Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# scroll  css start Desktop
--------------------------------------------------------------*/
#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
}
#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
}
#scroll:hover {
  background-color: #e74c3c;
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}
/*--------------------------------------------------------------
# Scroll css End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Chart css start Desktop
--------------------------------------------------------------*/
#summery-chart {
  height: 400px;
  margin-top: 37px;
  margin-bottom: 20px;
}
g.highcharts-legend.highcharts-no-tooltip,
.highcharts-title,
.highcharts-axis-title,
g.highcharts-label.highcharts-stack-labels {
  display: none !important;
}
g.highcharts-no-tooltip.highcharts-button.highcharts-contextbutton {
  display: none;
}
.highcharts-a11y-proxy-button {
  display: none;
}
tspan.highcharts-text-outline {
  stroke: none;
}

.chart-total-bx {
  height: 60px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}
.chart-total-bx ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.chart-total-bx ul li {
  padding: 0;
  margin: 0px;
  line-height: 54px;
  font-size: 10px;
  font-weight: 400;
}
.chart-total-bx ul li span {
  font-size: 18px;
  position: relative;
  top: 1px;
  padding-left: 13px;
  font-weight: 500;
}
.box-cl {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 13px;
  position: relative;
  top: 4px;
}
.total-text {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: auto;
  color: #3d3d3d;
}
.total-text h4 {
  padding: 0px;
  margin: 0px;
  padding-top: 16px;
}
/*--------------------------------------------------------------
# Chart css start Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tabs css start Desktop
--------------------------------------------------------------*/
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: "Roboto", sans-serif;
}
ul.tabs li {
  background: none;
  color: #9e9e9e;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

ul.tabs li.current {
  color: #102850;
  font-weight: 500;
  position: relative;
  font-size: 14px;
}
ul.tabs li.current::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #102850;
  border-radius: 50%;
  left: 0;
  top: 14px;
}
.tab-content,
.tab-content1,
.tab-content2,
.tab-content3 {
  display: none;
}
.tab-content.current,
.tab-content1.current1,
.tab-content2.current2,
.tab-content3.current3 {
  display: inherit;
}
ul.tabs1 {
  display: flex;
  justify-content: space-between;
}
ul.tabs1 li.current1 {
  color: #102850;
  font-weight: 500;
  position: relative;
  font-size: 12px;
  background: #eef0f4;
  border: 1px solid#102850;
  border-radius: 5px;
  padding: 13px 16px;
}
ul.tabs1 li {
  color: #9e9e9e;
  display: inline-block;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  border: 1px solid #eef0f4;
  border-radius: 5px;
  background: #eef0f4;
  width: 48%;
  text-align: center;
}
ul.tabs2 {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  border: 1px solid #eef0f4;
  background: #eef0f4;
  border-radius: 5px;
  overflow: hidden;
}
ul.tabs2 li.current2 {
  color: #ffffff;
  font-weight: 400;
  position: relative;
  font-size: 12px;
  background: #102850;
  border: 1px solid #102850;
  padding: 12px 0;
  border-radius: 5px;
}
ul.tabs2 li {
  color: #9e9e9e;
  display: inline-block;
  padding: 12px 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  width: 48%;
  text-align: center;
}
ul.tabs3 {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  border: 1px solid #eef0f4;
  background: #eef0f4;
  border-radius: 5px;
  overflow: hidden;
}
ul.tabs3 li.current3 {
  color: #ffffff;
  font-weight: 400;
  position: relative;
  font-size: 12px;
  background: #102850;
  border: 1px solid #102850;
  padding: 12px 0;
  border-radius: 5px;
}
ul.tabs3 li {
  color: #9e9e9e;
  display: inline-block;
  padding: 12px 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  width: 48%;
  text-align: center;
}

/*--------------------------------------------------------------
# Tabs css End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tabs checkbox start Desktop
--------------------------------------------------------------*/
.checkbx {
  display: block;
  position: relative;
  padding-left: 33px;
  margin-bottom: 12px;
  margin-top: 40px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label.checkbx {
  color: #565656;
  line-height: 26px;
  font-weight: 300 !important;
}
.checkbx input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.checkbx input:checked ~ .checkmark {
  background-color: #102850;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbx input:checked ~ .checkmark:after {
  display: block;
}
.checkbx .checkmark:after {
  left: 6px;
  top: 2px;
  width: 7px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkround {
  position: absolute;
  top: 10px;
  left: 0;
  height: 25px;
  width: 25px;
  border: 1px solid #080505;
  border-radius: 50%;
}
.checkbx input:checked ~ .checkround {
  background-color: transparent;
}
.checkround:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbx input:checked ~ .checkround:after {
  display: block;
}
.checkbx .checkround:after {
  width: 19px;
  height: 19px;
  background: transparent;
  border-radius: 50%;
  margin: auto;
  left: 0px;
  bottom: 0;
  border: 2px solid #fff;
}

.checkbx .checkround-unknown:after {
  background: linear-gradient(
    335.64deg,
    #1a2a6c 10.84%,
    #b21f1f 56.16%,
    #fdbb2d 92.13%
  );
}
.checkround-unknown {
  border: 3px solid #1a2a6c;
}

.checkbx .checkround-black:after {
  background: #000;
}

.checkround-black {
  border: 3px solid #000;
}

.checkbx .checkround-pewter:after {
  background: #8E9294;
}

.checkround-pewter {
  border: 3px solid #000;
}

.checkbx .checkround-gray:after {
  background: #BEBEBE;
}

.checkround-gray {
  border: 3px solid #BEBEBE;
}

.checkbx .checkround-silver:after {
  background: #C0C0C0;
}

.checkround-silver {
  border: 3px solid #C0C0C0;
}

.checkbx .checkround-white:after {
  background: #fff;
}

.checkround-white {
  border: 3px solid #fff;
}

.checkbx .checkround-beige:after {
  background: #EDE8CE;
}

.checkround-beige {
  border: 3px solid #EDE8CE;
}

.checkbx .checkround-tan:after {
  background: #D2B48C;
}

.checkround-tan {
  border: 3px solid #D2B48C;
}

.checkbx .checkround-brown:after {
  background: #964B00;
}

.checkround-brown {
  border: 3px solid #964B00;
}

.checkbx .checkround-burgundy:after {
  background: #800020;
}

.checkround-burgundy {
  border: 3px solid #800020;
}

.checkbx .checkround-maroon:after {
  background: #830300;
}

.checkround-maroon {
  border: 3px solid #830300;
}

.checkbx .checkround-maroon:after {
  background: #830300;
}

.checkround-maroon {
  border: 3px solid #830300;
}

.checkbx .checkround-red:after {
  background: #FF0000;
}

.checkround-red {
  border: 3px solid #FF0000;
}

.checkbx .checkround-orange:after {
  background: #FFA500;
}

.checkround-orange {
  border: 3px solid #FFA500;
}

.checkbx .checkround-gold:after {
  background: #FAB338;
}

.checkround-gold {
  border: 3px solid #FAB338;
}

.checkbx .checkround-yellow:after {
  background: #FFFF00;
}

.checkround-yellow {
  border: 3px solid #FFFF00;
}

.checkbx .checkround-yellow:after {
  background: #FFFF00;
}

.checkround-yellow {
  border: 3px solid #FFFF00;
}

.checkbx .checkround-green:after {
  background: #006400;
}

.checkround-green {
  border: 3px solid #006400;
}

.checkbx .checkround-teal:after {
  background: #008080;
}

.checkround-teal {
  border: 3px solid #008080;
}

.checkbx .checkround-blue:after {
  background: #0000FF;
}

.checkround-blue {
  border: 3px solid #0000FF;
}

.checkbx .checkround-purple:after {
  background: #663399;
}

.checkround-purple {
  border: 3px solid #663399;
}



.file-browse li {
  list-style-type: none;
}
.file-browse .fs-upload-target {
  background: #fff;
  border: 3px dashed #607d8b;
  border-radius: 2px;
  color: #455a64;
  font-size: 14px;
  margin: 0;
  padding: 25px;
  text-align: center;
  -webkit-transition: background 0.15s linear, border 0.15s linear,
    color 0.15s linear, opacity 0.15s linear;
  transition: background 0.15s linear, border 0.15s linear, color 0.15s linear,
    opacity 0.15s linear;
}
.file-browse .fs-upload-target:hover {
  background: #cfd8dc;
  border-color: #546e7a;
}
.filelist.complete,
.filelist.queue {
  margin: 20px 0;
}
.filelist.complete li,
.filelist.queue li {
  background: #eceff1;
  padding: 10px;
}
/*--------------------------------------------------------------
# Tabs checkbox End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tabs Radio start Desktop
--------------------------------------------------------------*/
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkradio {
  position: absolute;
  top: 0;
  left: 0;
  height: 31px;
  width: 31px;
  border-radius: 50%;
}
.radio-container input:checked ~ .checkradio {
  background-color: #fff;
}
.checkradio:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-container input:checked ~ .checkradio:after {
  display: block;
}
.radio-container .checkradio:after {
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  bottom: 0;
  right: 0;
  margin: auto;
}

/*--------------------------------------------------------------
# Tabs Radio End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Input From start Desktop
--------------------------------------------------------------*/
.from-group {
  position: relative;
}
.from-group label {
  font-weight: 400;
  color: #102850;
  padding-bottom: 8px;
  display: block;
}
.from-group label img {
  position: relative;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
input.input-box {
  height: 58px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid transparent;
  width: 100%;
  padding: 0 12px;
}
textarea.input-box {
  background: #fff;
  min-height: 200px;
  border-radius: 5px;
  border: 1px solid transparent;
  width: 100%;
  padding: 12px;
}
.error {
  border: 1px solid #e74f4f !important;
  border-radius: 5px;
}
span.error-msg {
  color: #e74f4f;
  padding: 0px;
  font-size: 11px;
}
.disabled-btn {
  background: #546e98;
  border: 1px solid #546e98;
  cursor: auto;
  position: relative;
}
.disabled-btn::after {
  content: "\f110";
  animation: fa-spin 2s infinite linear;
  -webkit-animation: fa-spin 2s infinite linear;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  margin: 1px 5px;
}

.disabled-btn:hover {
  background: #546e98;
  border: 1px solid #546e98;
  cursor: auto;
}
.success-btn {
  cursor: auto;
  position: relative;
}
.success-btn::after {
  content: "\f14a";
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  margin: 1px 5px;
}

/*--------------------------------------------------------------
# Input From End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# breadcrumb start Desktop
--------------------------------------------------------------*/
.breadcrumb ul {
  padding: 16px 10px;
  list-style: none;
}
.breadcrumb ul li {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  padding: 0 3px;
  color: #1e1d1d;
  fill: #1e1d1d;
}
.breadcrumb ul li a {
  color: #1e1d1d;
  text-decoration: none;
  font-weight: 300;
}
.breadcrumb ul li a:hover {
  color: #01447e;
}
.breadcrumb-white ul li {
  color: #fff;
  fill: #fff;
  padding: 0 3px;
  font-weight: 700;
}
.breadcrumb-white ul li a {
  color: #fff;
  transition: all 0.5s;
  font-weight: 300;
}
.breadcrumb-white ul li a:hover {
  color: #9e7849;
}

/*--------------------------------------------------------------
# breadcrumb End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Pagination start Desktop
--------------------------------------------------------------*/
.pagination a {
  text-decoration: none;
  color: #000;
  padding: 0 4px;
}
.pagination {
  padding: 12px 0;
  margin: 14px 0px;
  text-align: right;
}
.pagination a img {
  position: relative;
  top: 1px;
}
.pagination a svg {
  position: relative;
  top: 1px;
  margin: 0 3px;
}
.pagination a:hover,
.pagination a:hover svg {
  color: #6f6f6f;
  fill: #6f6f6f;
}
/*--------------------------------------------------------------
# Pagination End Desktop
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Loader start Desktop
--------------------------------------------------------------*/
.pg-loader {
  height: 2px;
  left: 0;
  top: 0;
  z-index: 9999;
  position: fixed;
  margin: 0px;
  padding: 0px;
  line-height: 0;
  width: 100%;
}
.pg-loader img {
  width: 100%;
}
.success-box-pupop {
  margin: auto;
  height: 65px;
  background: white;
  z-index: 99999;
  width: 26%;
  border-left: 6px solid #0cb90c;
  border-radius: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 8%;
  left: 0;
  right: 0;
  box-shadow: 2px 14px 20px 3px #0000001c;
  -webkit-animation: cssAnimation 2s forwards;
  animation: cssAnimation 2s forwards;
  padding: 16px;
}
.success-box-pupop svg {
  fill: #4cca62;
  margin: 0 0 0 12px;
}
@keyframes cssAnimation {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes cssAnimation {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*--------------------------------------------------------------
# Custom input file start Desktop
--------------------------------------------------------------*/
.wrap-custom-file {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 0 0.5rem 1rem;
  text-align: center;
}
.wrap-custom-file input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
}
.wrap-custom-file label {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding: 0 0.5rem;
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  transition: transform 0.4s;
  border: 1px dashed #a2bce6;
}
.wrap-custom-file label span {
  display: block;
  margin-top: 3rem;
  font-size: 14px;
  color: #102850;
  transition: color 0.4s;
  font-weight: 500;
  padding: 0 14px;
}
.wrap-custom-file label .fa {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translatex(-50%);
  font-size: 1.5rem;
  color: #102850;
  transition: color 0.4s;
}
.wrap-custom-file label:hover {
  transform: translateY(-1rem);
}
.wrap-custom-file label:hover span,
.wrap-custom-file label:hover .fa {
  color: #333;
}
.wrap-custom-file label.file-ok {
  background-size: cover;
  background-position: center;
}
.wrap-custom-file label.file-ok span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.3rem;
  font-size: 1.1rem;
  color: #000;
  background-color: rgba(255, 255, 255, 0.7);
}
.wrap-custom-file label.file-ok .fa {
  display: none;
}
#image9 ~ label.file-ok span {
  background: red;
}
#image9 ~ label.file-ok span {
  background: #fff;
  z-index: 999;
  height: 148px;
  display: flex;
  justify-content: left;
  align-items: center;
}

/*--------------------------------------------------------------
# ToolTip start Desktop
--------------------------------------------------------------*/
.tool-tip {
  position: relative;
}
.tool-tip::after,
.tool-tip::before {
  position: absolute;
  display: none;
}
.tool-tip::before {
  content: "";
  top: -9px;
  left: 3px;
  height: 0px;
  width: 0px;
  border-left: 10px solid transparent;
  border-top: 7px solid #ffffff;
  border-right: 10px solid transparent;
  z-index: 3;
}
.tool-tip::after {
  content: attr(data-tooltip);
  bottom: 23px;
  left: 0;
  background: #ffff;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  color: black;
  box-shadow: 0 1px 8px 2px #0000003b;
  width: 231px;
  height: 80px;
  padding: 16px;
}
.tool-tip:hover::after,
.tool-tip:hover::before {
  display: block;
}

/*--------------------------------------------------------------
# Alert Box start Desktop
--------------------------------------------------------------*/
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

/*--------------------------------------------------------------
# Popup Box start Desktop
--------------------------------------------------------------*/
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 999;
  background-color: white;
  width: 500px;
  max-width: 80%;
}

.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.modal-header .title {
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-body {
  padding: 10px 15px;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 99;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 99;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

/*--------------------------------------------------------------
# Popup Box onload start Desktop
--------------------------------------------------------------*/
.modal-box {
  display: block;
  position: fixed;
  z-index: 1000;
  width: 45%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  transition: 40ms ease-in-out;
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
  margin: 0;
}

.modal-box .modal-body {
  padding: 2em 1.5em;
}

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
  transition: 1ms ease-in-out;
}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

/*--------------------------------------------------------------
# back btn start Desktop
--------------------------------------------------------------*/
.deal-back {
  position: relative;
  color: #a29e9e;
  font-weight: 400;
  padding: 20px 0 14px 0;
  display: inline-block;
}
.deal-back svg {
  fill: #a29e9e;
}
.deal-back svg {
  margin: 0 4pxs 0 0;
}
.deal-back:hover,
.deal-back:hover svg {
  fill: #102850;
  color: #102850;
}

/*--------------------------------------------------------------
# Deal colors start Desktop
--------------------------------------------------------------*/
.hot-deal-text {
  color: #008246 !important;
  fill: #008246 !important;
}
.awesome-deal-text {
  color: #5eb145 !important;
  fill: #5eb145 !important;
}
.fair-deal-text {
  color: #9dc53d !important;
  fill: #9dc53d !important;
}
.unfair-deal-text {
  color: #e9842c !important;
  fill: #e9842c !important;
}
.overprice-deal-text {
  color: #ca232a !important;
  fill: #ca232a !important;
}

/*--------------------------------------------------------------
# disabled start Desktop
--------------------------------------------------------------*/
.disabled-btn {
  background: #546e98;
  border: 1px solid #546e98;
  cursor: auto;
  position: relative;
}
.disabled-btn::after {
  content: "\f110";
  animation: fa-spin 2s infinite linear;
  -webkit-animation: fa-spin 2s infinite linear;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  margin: 1px 5px;
}

.disabled-btn:hover {
  background: #546e98;
  border: 1px solid #546e98;
  cursor: auto;
}
.success-btn {
  cursor: auto;
  position: relative;
}
.success-btn::after {
  content: "\f14a";
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  margin: 1px 5px;
}

/*--------------------------------------------------------------
# Header Top RightSide Dropdown start Desktop
--------------------------------------------------------------*/
li.ac {
  padding: 0 0px;
  margin: 0px 7px;
  display: inline-block;
  line-height: 50px;
  background: #f4f5f7;
  text-align: left;
  border-radius: 5px;
  position: relative;
}
a.Account-bx i {
  padding: 0 7px;
  margin-top: -1px;
  font-size: 25px;
}
li.ac a {
  color: #5a5656;
}

li.ac svg {
  margin: 0 11px;
  fill: #5a5656;
}
.drop-nav {
  position: absolute;
  width: 100%;
  min-height: auto;
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
  display: none;
  margin: 0 0 0 -10px;
  left: auto;
  right: 0;
  z-index: 99;
}
.drop-nav ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.drop-nav ul li {
  margin: 0px;
  padding: 0 6px;
  display: block;
  line-height: 21px;
  border-bottom: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 0px;
   height: auto
}
.drop-nav ul li:hover {
  background: #cfcfcf;
}
.drop-nav ul li a {
  text-decoration: none;
  text-align: left;
  display: block;
  width: 94%;
  margin: auto;
  line-height: 44px;
  color: #0e294f;
  font-family: "Roboto";
}
.drop-nav ul li a img {
  padding: 0px 9px 0 0;
}

.Create-Deal-btn {
  border: 1px solid #0f2950;
  border-radius: 5px;
  background: transparent;
  padding: 14px 33px;
  font-size: 12px;
  font-weight: 300;
  transition: all 0.5s;
}
.Create-Deal-btn:hover {
  background: #0e294f;
  color: #fff;
}

.photo-camera svg {
  stroke: red;
}

/*--------------------------------------------------------------
# Price Analysis for the Acura MDX Css Start- Desktop
--------------------------------------------------------------*/

.popular-convertibles {
  border: 1px solid #d6d8da;
  min-height: 120px;
  width: 100%;
  margin-top: 18px;
  border-radius: 5px;
  padding: 16px;
}
.popular-convertibles ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
}
.popular-convertibles ul li {
  background: url(../images/popular-next.png) no-repeat;
  font-size: 14px;
  color: #515151;
  padding: 0 18px;
  background-position: 6px 3px;
}

.popular-convertibles ul li a {
  color: #1a3b6f;
}
.popular-convertibles ul li a:hover {
  color: #ef8817;
}

/*--------------------------------------------------------------
# Back to top Css Start- Desktop
--------------------------------------------------------------*/

#back_to_top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
}
#back_to_top img {
  width: 40px;
  height: 40px;
}

/*--------------------------------------------------------------
# Top Header css start - Desktop
--------------------------------------------------------------*/
.sticky {
  position: fixed !important;
  width: 100% !important;
  background: #fff;
  z-index: 99;
  margin: auto;
  box-shadow: 4px 2px 6px -2px #00000038;
  right: 0;
  border-bottom: 1px solid #dfdede !important;
  animation: slide-down 1s;
}

@keyframes slide-down {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}