#calculator-container {
  display: flex;
  justify-content: center;
  background: url("../imgs/gradi.svg") no-repeat center;
  background-size: cover;
  padding: 50px 0; }
  #calculator-container #calculator-start {
    background-color: #471394;
    color: white;
    padding: 20px;
    font-size: 16px;
    max-width: 500px;
    height: fit-content; }
    #calculator-container #calculator-start button#calculate {
      background: #FFC924;
      font-size: 14px;
      color: #221E28;
      letter-spacing: 1.5px;
      text-align: center;
      line-height: 19px;
      border: none;
      width: 100%;
      padding: 13px;
      margin: 20px 0;
      cursor: pointer; }
  #calculator-container .befilled {
    background-color: white; }
  #calculator-container .calculated {
    border-color: transparent;
    border: none;
    background-color: rgba(255, 255, 255, 0.26);
    color: white; }
  #calculator-container fieldset {
    border: none;
    width: 100%;
    padding: 0;
    margin: 15px 0 30px; }
    #calculator-container fieldset legend {
      margin: 30px 0 35px; }
    #calculator-container fieldset .input {
      float: left;
      display: flex;
      position: relative;
      width: calc(33% - 6px); }
      #calculator-container fieldset .input:not(:last-child) {
        margin-right: 10px; }
      #calculator-container fieldset .input input {
        border: none;
        padding: 5px;
        width: 100%;
        border: solid 2px white;
        font-size: 16px; }
      #calculator-container fieldset .input span {
        color: black;
        position: absolute;
        right: 5px;
        top: 7px;
        font-size: 12px; }
      #calculator-container fieldset .input.sup1::before, #calculator-container fieldset .input.sup2::before, #calculator-container fieldset .input.sup3::before {
        display: block;
        position: absolute;
        top: -20px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bold; }
      #calculator-container fieldset .input.sup1::before {
        content: "1. szint"; }
      #calculator-container fieldset .input.sup2::before {
        content: "2. szint"; }
      #calculator-container fieldset .input.sup3::before {
        content: "3. szint"; }
  #calculator-container .calculated-result {
    display: none;
    padding: 20px;
    width: calc(100% - 540px);
    background-color: white; }
    #calculator-container .calculated-result h2 {
      font-size: 20px; }
    #calculator-container .calculated-result .row {
      display: grid;
      grid-template-columns: 50% 50%; }
    #calculator-container .calculated-result fieldset {
      transition: cubic-bezier(0.075, 0.82, 0.165, 1) all 0.3s;
      opacity: 0; }
      #calculator-container .calculated-result fieldset legend {
        font-size: 14px;
        margin: 0; }
      #calculator-container .calculated-result fieldset .input {
        width: 150px;
        border-bottom: solid 2px lightgray; }
        #calculator-container .calculated-result fieldset .input input {
          color: black;
          padding: 0;
          border: none;
          box-sizing: border-box;
          width: 100%;
          padding: 5px; }
        #calculator-container .calculated-result fieldset .input span {
          top: 6px; }
        #calculator-container .calculated-result fieldset .input::before {
          display: none; }

/*# sourceMappingURL=calculator.css.map */