/*****************************
Normalize CSS
*****************************/
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*****************************
Base styles
*****************************/
:root {
  /* Typography */
  font-size: 10px;
  font-family: "Roboto Slab", sans-serif;
  --main-font: "Roboto Slab", sans-serif;

  /* Colors */
  --main-color: #df660c;
  --main-color-darker: #682e05;
  --secondary-color: #9c4b6f;
  --main-bg-color: #ebebeb;
  --secondary-bg-color: #fafafa;
  --main-text-color: #464545;
  --secondary-text-color: #a0a0a0;
  --main-gradient: linear-gradient(180deg, #397bb2 0%, #035c9f 100%);

  /* Borders */
  --border: 1px solid #d7d7d7;
  --border-radius: 0;
}

/*****************************
Number input
*****************************/
input[type="text"],
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.number-input,
.number-input * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.number-input button {
  border-radius: 50%;
  background: var(--secondary-color);
  outline: none;
  -webkit-appearance: none;
  border: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: "";
  width: 1rem;
  height: 2px;
  background-color: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type="text"],
.number-input input[type="number"],
select {
  padding: 0;
  width: 100%;
  margin: 0 10px;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  font-size: 1.8rem;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  text-align: center;
  -webkit-appearance: none;
  -ms-align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-writing-mode: horizontal-tb !important;
  text-align: center;
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  -webkit-text-align-last: center;
  text-align-last: center;
}

#credit_type_47_57 {
    font-size: 1.4rem;
}

select option {
    text-align: left;
    font-weight: bold;
    display: block;
    white-space: pre;
    -webkit-writing-mode: horizontal-tb !important;
}

.input-component {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: calc(33.33333% - 3rem);
  margin: 0 1.5rem;
}

.input-component-wrapper:nth-child(1) {
   padding-bottom: 30px; 
}

span.toke_kedvezmeny {
    display: block;
    width: 100%;
    text-align: center;
    font: 700 24px "Roboto slab";
    color: #E57E4A;
}

@media only screen and (max-width: 767px){
  .input-component-wrapper:nth-child(1) {
   padding-bottom: 0; 
    }  
}

.input-component-age {
    width: 90%;
}

.interval_block {
        margin-top: 10px;
        font: 500 12px "Roboto";
        color: #333;
}

.home .interval_block {
    display: none;
}

.interval_left {
    padding-left: 45px;
}

.interval_right {
    padding-right: 45px;
    float: right;
}

.input-label {
  font-family: var(--main-font);
  line-height: 1.2;
  font-size: 1.7rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: 2rem;
}

.inputs-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 100% !important;
  margin-top: 0;
  position: relative;
  z-index: 4;
}

.grey-wrapper {
  margin: 50px 0 0;
  padding: 0px 30px 0;
  border-radius: 5px;
  background: #f5f5f5;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
}

.copy_grantis p {
        margin-top: 8px;
   font: 500 14px "Roboto";
   text-align: center;
   color: #888;
}

.calculator_desc {
    font: 300 16px "Roboto";
    line-height: 1.6em;
    padding-bottom: 30px;
}

.calculator_desc p strong {
    font-weight: 700;
} 

.calculator-wrapper {
  /*background: var(--main-bg-color);*/
  padding: 3rem 9rem 3rem;
  border-radius: 5px 5px 0 0;
}

.collapsible_nobtn p {
    width: 200px;
    margin: 20px auto 20px;
    padding: 10px;
    text-align: center;
    border: 2px solid var(--main-color);
    border-radius: 5px;
    font: 700 16px "Roboto";
    color: var(--main-color);
    cursor: pointer;
  }
  
  @media only screen and (max-width: 767px){
      .collapsible_nobtn p {
         margin: 0 auto 40px;
      }
  }
  
  .collapsible_nobtn p:hover {
      background-color: #222;
      border: 2px solid #222;
      color: #fff;
  }

  #calc_age{
      font: 700 19px "Roboto";
  }
  
em.error {
    font: 500 13px "Roboto";
    color: #f00;
}

/*****************************
Checkbox
*****************************/

.checkbox-label {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1.2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "Roboto", sans-serif;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: -3px;
  left: 0;
  height: 2.5rem;
  width: 2.5rem;
  background: white;
  border: var(--border);
  border-radius: var(--border-radius);
}

.checkbox-label input:checked ~ .checkmark {
  background: var(--main-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-label input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-label .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*****************************
Selects
*****************************/

select {
    padding-top: 13px;
    padding-bottom: 12px;
    margin-bottom: 26px;
    background: #fff;
}

@media only screen and (max-width: 767px){
        select{
            margin-bottom: 0px;
        }
        select.select_no_btn {
            margin: 0;
            margin-bottom: 15px;
            padding-top: 9px;
            padding-bottom: 9px;
        }
        select.select_no_margin {
            margin-bottom: 0;
        }
    }
    
    .student_account_link {
        display: block;
        color: #9c4b6f;
        text-align: center;
        font: 500 16px 'Roboto';
        text-decoration: underline;
        margin-top: 24px;
    }
    
    .student_account_link:hover {
        color: #E57E4A;
    }

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

.btn-primary {
  background: #E57E4A !important;
  border: 2px solid #E57E4A;
  border-radius: 4px;
  -webkit-box-shadow: none;
   box-shadow: 0 0 15px #E57E4A;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  overflow-wrap: break-word;
  padding: 1.8rem 5rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 30px;
  margin-bottom: 30px;
}

.btn-primary:hover {
  border-color: var(--secondary-color);
  background-color: var(--secondary-color) !important;
  box-shadow: 0 0 15px var(--secondary-color);
}

.pulse_button {

  -webkit-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse_button:hover
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 5px 30px rgba(156, 71, 111, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 5px 30px rgba(156, 71, 111, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 5px 30px rgba(156, 71, 111, 0);}}
@keyframes pulse {to {box-shadow: 0 0 5px 30px rgba(156, 71, 111, 0);}}

.button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: center;
  margin-bottom: 1rem;
}

.spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background-image: url('../pics/spinner.gif');
    display: none;
    &.active {
        display: block;
    }
}

/*****************************
Collapsible
*****************************/
/* SVG */
.collapsible > svg circle {
      fill: #fff;
}

.collapsible {
  color: var(--secondary-text-color);
  cursor: pointer;
  text-align: center;
  font-family: var(--main-font);
  font-size: 1.6rem;
  margin-top: -4.4rem;
}

.collapsible-text {
  color: var(--main-text-color);
  font-weight: 500 !important;
  font-family: "Roboto", sans-serif;
  margin-bottom: 0.5rem;
}

.content {
  margin-top: -21px;
  padding: 0 18px;
  background-color: #f5f5f5;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
  border-radius: 0 0 5px 5px;
}

.khr-checkbox {
  margin-top: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.loan-checkbox {
  margin-top: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bank-checkbox {
  margin-top: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.loan-title,
.interest-title,
.banks-title,
.service-title {
  font-family: 'Roboto', sans-serif;
  margin: 4rem 0 2rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600 !important;
  color: var(--main-text-color);
}

.service-small {
    font: 500 13px 'Roboto';
    text-align: center;
    margin-bottom: 20px;
}

.filter_block {
    width: 100%;
}

.filter_block .service-title,
.filter_block .service-small {
    text-align: left;
}

.input-component-age {
    margin: 0 0;
}

.service-title-big {
    font-size: 22px;
    margin-bottom: 10px;
}

.banks,
.interest,
.service {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.banks {
    margin-bottom: 3rem;
}

.loan_box,
.bank-list,
.interest-list,
.checkbox-list,
.service-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  padding: 0 3rem;
}

.service-list {
    flex-basis: 50%;
    padding: 0 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.service-list-inner {
    padding: 12px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
}

.service-list-inner .fa {
    color: #999;
    position: relative;
}

.service-list-inner .fa span {
    display: none;
   position: absolute; left: -70px; bottom: 20px;
   z-index: 5;
   background-color: #222;
   border-radius: 5px;
   font: 500 13px 'Roboto';
   padding: 8px;
   min-width: 350px;
   line-height: 1.5em;
   text-align: center;
}

.service-list-inner .fa:hover span {
    display: block;
    color: #ddd;
}

.loan_box {
  -ms-flex-preferred-size: 26.6%;
  flex-basis: 26.6%;
}

.loan_box select {
      width: calc(100% - 65px);
  }

.interest-list {
  -ms-flex-preferred-size: 16%;
  flex-basis: 16%;
}
.checkbox-list {
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
}

.bank-list label {
  margin-bottom: 2rem;
  font-weight: 500 !important;
}

.interest-list label {
  margin-bottom: 2rem;
  font-weight: 600 !important;
}

.service-list label {
  font-weight: 300 !important;
  padding-left: 40px;
}

.collapsible-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 0;
}

.collapsible-btn .btn-primary {
  background: var(--secondary-color) !important;
  border: 2px solid var(--secondary-color);
  border-radius: 4px;
  -webkit-box-shadow: none;
   box-shadow: 0 0 0 #E57E4A;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  overflow-wrap: break-word;
  padding: 1.2rem 5rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 40px;
}

.collapsible-btn .btn-primary:hover {
    box-shadow: 0 0 15px var(--secondary-color);
}

.collapsible-btn div button {
  margin: 2rem 0;
}

.collapsible-close {
    font: 500 13px "Roboto";
    color: #999;
    position: relative; top: -18px;
    cursor: pointer;
}

.collapsible-close:hover {
    color: #555;
}

.interest-mobile select, 
  .banks-mobile select {
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 30px !important;
  }

/*****************************
Media Queries
*****************************/
@media only screen and (min-width: 767px) {
  .banks-mobile,
  .interest-mobile {
    display: none;
  }
  
}

@media only screen and (max-width: 767px) {
  .calculator-wrapper {
    padding: 4rem 3rem 4rem;
        background-color: #f5f5f5;
  }
  
  .service-list {
        flex-basis: 100%;
        padding: 0 10px;
        border-radius: 5px;
        margin-top: 15px;
    }
  
  .input-label {
      color: #111;
  }
  
  .inputs-wrapper {
      margin-top: 0px;
  }

  .input-component {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .input-label {
      margin-bottom: 10px;
  }
  
  .interval_block {
      color: #333;
  }

  .button-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .button-wrapper label {
    margin-top: 1.3rem;
  }

  .btn-primary {
    margin: 2rem 0;
  }

  .collapsible-btn {
    margin-top: 2rem;
  }

  .collapsible-btn div .btn-primary {
    margin-top: 1rem;
  }

  .interest-title,
  .banks-title {
    margin: 3rem 0 1rem 0;
  }

  .loan-checkbox {
      display: block;
  }

  .loan_box {
    padding: 0;
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }

  .loan_box select {
      font-size: 13px;
      padding: 10px;
  }

  .interest,
  .banks {
    display: none;
  }

  .khr-checkbox {
      display: block;
  }

  .checkbox-list {
        display: block;
        width: 100%;
        padding: 0;
         margin-bottom: 15px;
    }

  #calc-interest,
  #calc-banks {
      width: 100%;
  }
  
  select {
      padding-top: 7px;
      padding-bottom: 5px;
  }

  .interest-mobile select,
  .banks-mobile select {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1rem;
    border: var(--border);
    background: white;
    font-weight: 400 !important;
    font-size: 13px;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #bankok {
    position: relative;
    width: 100%;
  }
  #bankok:after {
    content: "\f078";
    font-family: "FontAwesome";
    font-size: 11px;
    color: var(--secondary-text-color);
    right: 2rem;
    top: 11px;
    padding: 0 0 2px;
    position: absolute;
    pointer-events: none;
  }
  #bankok:before {
    content: "";
    right: 4px;
    top: 0px;
    width: 23px;
    height: 18px;
    position: absolute;
    pointer-events: none;
    display: block;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1199px) {
   .calculator-wrapper {
        padding: 30px 0px 30px;
    }
    
    .service-list {
        flex-basis: 100%;
    }
  
    
    .number-input input[type="text"],
    .number-input input[type="number"]{
        width: calc(100% - 80px);

    }
    .loan_box {
        padding: 0 10px 0 0;
    }
    .checkbox-list {
        padding: 0 10px 0 0;
    }
    
    .interval_block {
        font-size: 10px;
    }
    
    
}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {
   .calculator-wrapper {
        padding: 4rem 3rem 3rem;
    }
          
    
    .number-input input[type="text"]
    .number-input input[type="number"]{
        width: calc(100% - 80px);

    }
}

.favored-offer div.article_inner, .favored-offer header.offer_header {
    background-color: transparent;
}

.favored-offer  {
    background-image: linear-gradient(#FDD099, #fff);
}