/*** FONT FACE ***/
@font-face {
  font-family: "header";
  src: url("fonts/HKNova-Medium.eot");
  src: url("fonts/HKNova-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/HKNova-Medium.woff") format("woff"),
    url("fonts/HKNova-Medium.woffw") format("woff2");
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "body";
  src: url("fonts/LatoLatin-Light.eot");
  src: url("fonts/LatoLatin-Light.eot?#iefix") format("embedded-opentype"),
    url("fonts/LatoLatin-Light.woff2") format("woff2"), url("fonts/LatoLatin-Light.woff") format("woff"),
    url("fonts/LatoLatin-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  text-rendering: optimizeLegibility;
}
/*
@font-face {
    font-family: 'body';
    src: url('fonts/LatoLatin-LightItalic.eot');
    src: url('fonts/LatoLatin-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/LatoLatin-LightItalic.woff2') format('woff2'),
         url('fonts/LatoLatin-LightItalic.woff') format('woff'),
         url('fonts/LatoLatin-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
*/
@font-face {
  font-family: "body";
  src: url("fonts/LatoLatin-Regular.eot");
  src: url("fonts/LatoLatin-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/LatoLatin-Regular.woff2") format("woff2"), url("fonts/LatoLatin-Regular.woff") format("woff"),
    url("fonts/LatoLatin-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/*
@font-face {
    font-family: 'body';
    src: url('fonts/LatoLatin-Italic.eot');
    src: url('fonts/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/LatoLatin-Italic.woff2') format('woff2'),
         url('fonts/LatoLatin-Italic.woff') format('woff'),
         url('fonts/LatoLatin-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}
*/

@font-face {
  font-family: "body";
  src: url("fonts/LatoLatin-Bold.eot");
  src: url("fonts/LatoLatin-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/LatoLatin-Bold.woff2") format("woff2"), url("fonts/LatoLatin-Bold.woff") format("woff"),
    url("fonts/LatoLatin-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
/*
@font-face {
    font-family: 'body';
    src: url('fonts/LatoLatin-BoldItalic.eot');
    src: url('fonts/LatoLatin-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/LatoLatin-BoldItalic.woff2') format('woff2'),
         url('fonts/LatoLatin-BoldItalic.woff') format('woff'),
         url('fonts/LatoLatin-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'body';
    src: url('fonts/LatoLatin-Semibold.eot');
    src: url('fonts/LatoLatin-Semibold.eot?#iefix') format('embedded-opentype'),
         url('fonts/LatoLatin-Semibold.woff2') format('woff2'),
         url('fonts/LatoLatin-Semibold.woff') format('woff'),
         url('fonts/LatoLatin-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'body';
    src: url('fonts/LatoLatin-SemiboldItalic.eot');
    src: url('fonts/LatoLatin-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/LatoLatin-SemiboldItalic.woff2') format('woff2'),
         url('fonts/LatoLatin-SemiboldItalic.woff') format('woff'),
         url('fonts/LatoLatin-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}
*/

body {
  font-family: "body", sans-serif;
  font-weight: 400;
  color: #222222;
  background-color: #fcfcfc;
}

/*** Topbar ***/
div#topbar > div.header a .tag {
  font-family: "header";
  font-size: 13px;
  color: #000000;
  opacity: 0.5;
}

div#topbar a.logo-main {
  width: 150px;
}

div#topbar ul#menu li a {
  padding: 8px 12px;
  color: #ffffff;
  font-family: "header";
  font-size: 14px;
  /*background-color: #a3dbee;*/
  /*background: linear-gradient(45deg, #5496e4, #3dc5de);*/
  background-image: linear-gradient(45deg, #e12778 0px, #ab1cbc 100%);
  background: #e12778;
  border-radius: 4px;
  border: none;
}

div#topbar ul#menu li a:hover {
  color: #ffffff;
  background-image: linear-gradient(45deg, #3dc5de 0px, #3dc5de 100%);
  background: #fa2e86;
}

@media only screen and (max-width: 720px) {
  /*div#topbar > div.header a .tag { font-size: 12px; }*/
  div#topbar a.logo-main {
    width: 125px;
  }
}

/*** Mobile menu ***/
.button_container span {
  background-color: #043c4f;
}

.button_container.active span {
  background-color: #ffffff;
}

.overlay {
  /*
  background: linear-gradient(45deg, rgba(84, 149, 228, 0.9), rgba(61, 198, 222, 0.9));
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0px, rgba(0, 0, 0, 0.8) 100%);
  */
  background-color: rgba(0, 0, 0, 0.9);
}

.overlay ul li a {
  color: #ffffff;
  font-family: "header";
  font-size: 1.5rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
}

.overlay ul li a.highlight {
  color: #ffffff;
  background-color: #e12778;
  padding: 15px 20px;
  border-radius: 50px;
}

.overlay ul li.small a {
  font-size: 1.125rem;
}

/*** Hello bar ***/
/*
div#topbar.login  {
  box-shadow: none;
  background-color: #ff00ff;
}
*/

div.hello-bar {
  font-family: "header";
  background-color: #002d3c;
  font-size: 0.875rem;
  color: #ffffff;
  line-height: 1.25;
}

/*** General ***/

a {
  color: #222222;
}

a.btn {
  padding: 19px 46px 21px;
  border-radius: 4px;
  font-family: "header";
  letter-spacing: 0.5px;
  font-size: 1rem;
  color: #ffffff;
  background-image: linear-gradient(45deg, #e12778 0px, #ab1cbc 100%);
  background: #e12778;
  box-shadow: 0 10px 10px 0 rgba(0, 45, 60, 0.04);
}

a.btn:hover {
  background: linear-gradient(45deg, #e12778, #e12778);
  background: #fa2e86;
  box-shadow: 0 10px 15px 0 rgba(0, 45, 60, 0.08);
}

a.btn.sm {
  font-size: 0.8125rem !important;
  padding: 14px 16px !important;
}

a#repay-in-full {
  margin-top: 0.5rem;
  background-image: linear-gradient(45deg, #e12778 0px, #ab1cbc 100%);
  background: #e12778;
  color: #ffffff;
  text-transform: none;
  transition: none;
}

a#repay-in-full:hover {
  background-image: linear-gradient(45deg, #e12778 0px, #e12778 100%);
  background: #fa2e86;
}

.payment-plan .swish-step a.btn {
  background: #222222;
  color: #ffffff;
}

.payment-plan .swish-step a.btn:hover {
  background: #404040;
}

.swish-step a.btn {
  background: #ab1cbc;
  color: #ffffff;
}

.swish-step a.btn:hover {
  background: #c620da;
}

/*
div.col a.btn
{
	padding: 0px 10px;
  max-height: 53px;
  font-size: 0.875rem;
}
*/

.payment-instructions a {
  color: #222222;
}

/*** Card wrapper ***/

.card-wrapper {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.card-wrapper .section {
  border-bottom: 1px solid #f0f0f0;
}

.card-wrapper .header .title {
  font-family: "header";
  font-size: 1rem;
}

.card-wrapper .header .title.big {
  font-size: 135%;
}

.card-wrapper .loan-debt .info.lg.value,
.card-wrapper .loan-info .info .value {
  color: #a3dbee;
  color: #e12778;
}

.card-wrapper .loan-debt .current-status.status-regular {
  background-color: rgba(163, 219, 238, 0.1);
  background-color: rgba(61, 198, 222, 0.08);
  background-color: rgba(78, 162, 226, 0.05);
  background-color: #f8f8f8;
}

.card-wrapper .loan-debt .current-status .title {
  font-family: "header";
}

.card-wrapper .loan-info .info .value {
  font-weight: 700;
}
.card-wrapper .payment-info .info.value {
  color: #facbcb;
  color: #ab1cbc;
  font-weight: 700;
}
.card-wrapper .payment-info.payment-plan .info.value {
  color: #222222;
}

.card-wrapper .payment-title .title:after {
  background: #e6ebed;
}

.card-wrapper .payment-title .title span {
  border-color: #e6ebed;
}

.card-wrapper .payment-instructions {
  border-color: #e6ebed;
}

/*** Input fields ***/
.card-wrapper label.input-label {
  color: #222222;
}

.card-wrapper label.invalid {
  color: #f53737;
}

.card-wrapper input,
.card-wrapper select {
  font-size: 1.125rem;
  color: #222222;
  line-height: 200%;
  border: none;
  border-bottom: 2px solid #222222;
}

.card-wrapper input:focus,
.card-wrapper select:focus {
  outline: none !important;
  border-color: #404040;
}

.card-wrapper input.invalid,
.card-wrapper select.invalid {
  border-color: #f53737;
}

.card-wrapper .select-wrapper:after {
  background-image: url("../img/CI/down-arrow.svg");
}

/*** Account selection ***/
div#account-selection #account-list a {
  background: #f5f5f5;
}

div#account-selection #account-list a:hover {
  background-color: #f0f0f0;
}

div#account-selection #account-list a.active {
  background-color: #222222;
  color: #ffffff;
}

/*** External loans ***/
div.external-loan .info-wrapper .title {
  color: #000000;
}
div.external-loan .info-wrapper .value {
  font-weight: 700;
  color: #222222;
}

@media only screen and (max-width: 640px) {
  #account-selection.card-wrapper .section {
    padding-bottom: 3rem;
    border-bottom: 1px solid #f0f0f0 !important;
  }
}

/*** Loader ***/
.loader {
  border-top: 1.1em solid #fbe5ef;
  border-right: 1.1em solid #fbe5ef;
  border-bottom: 1.1em solid #fbe5ef;
  border-left: 1.1em solid #e12778;
}

/** Spinner ***/
.spinner > div {
  background-color: #ffffff;
}