h1{
    color: white;
}

#cnum{

}

#card{
    background-image: url(../img/ncard.png);
    background-size: cover;
}

.width-card{
    width: 448px;
    float:left;
}


#cnum{

}

.mmodal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.087);
    
}
  
  /* Modal Content/Box */
  .mmodal-content {
    background-color: #ffffff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .mclose {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .mclose:hover,
  .mclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

.transaction{
    width: 100%;
    border: 1px solid lightgray;
    border-width: 0px 0px 1px 0px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;

}

.transtbl{
    height: 50px;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.transtbl td{
    width: 2%;
}

.transaction:hover{
    background-color: #e6f4f173;
}

.transfirst{
    text-align: left;
}

.translast{
    text-align: right;
}

#beftrans{
    margin-top: 300px;
    width: 99%;
    border: 1px solid gray;
    border-width: 0px 0px 1px 0px;
    margin-left: auto;
    margin-right: auto;
}

#bcos{
    height: 20px;
    float: right;
    display: none;
}

#pfl{
    height: 50px;
    float: right;
    margin-right: 10px;
    display: none;
}

.incom i{
    color: #61a161;
}

.ogo i{
    color: rgb(208, 0, 0);
}

#sepa{
    margin-top: 170px;
}

#qrcode{
    width:190px;
    height:190px;
    margin-top:15px;
    margin-left: auto;
    margin-right: auto;
}

#egyenl a{
    text-decoration: none;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius:5px;
    color: black;
}

#qpay{
    display: none;
    background-size: cover;
    background-image: url('../img/card2.png');
    height: 270px;
    width: 428px;
    border: 1px solid lightgray;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
}

#val{
    font-size: larger;
}

#qpaytip{
    display: none;
}

.card-qp{
    background-color: #e8f2ff;
    padding: 9px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #2175e6;
    border: 1px solid #2175e6;
    border-width: 0px 0px 2px 0px;
}

.qp-acc{
    padding: 10px;
    border: 1px solid #2175e6;
    border-radius: 4px;
    margin-top: 15px;
    display: block;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: ease 500ms;
}

.qp-acc:hover{
    background-color:  #00ff000f;
}

.qp-dec{
    padding: 10px;
    border: 1px solid #2175e6;
    border-radius: 4px;
    margin-top: 10px;
    display: block;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: ease 500ms;
}

.qp-dec:hover{
    background-color: #ff00000f;
}

@media print{
    .width-card{
        width: 448px;
        color: red;
        float:left;
    }

    .card-qp{
        display:none;
    }

    #egyenl a{
        display: none;
    }

    #beftrans{
        margin-top: 300px;
        width: 91%;
        border: 1px solid black;
        border-width: 0px 0px 1px 0px;
        margin-left: auto;
        margin-right: auto;
    }
    

    #navbar{
        display: none;
    }

    .transaction{
        border: 1px dotted black;
        border-width: 0px 0px 1px 0px;
    }

    #qpay{
        display: none;
    }

    #card{
        border: 1px solid black;
    }
}



@media (width > 1300px) {
    #top{
        width: 60%;
        min-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    #beftrans{
        margin-top: 300px;
    }

    #egyenl a{
        text-decoration: none;
        padding: 10px;
        border: 1px solid lightgray;
        border-radius:5px;
        color: black;
    }
    
}



@media (width < 500px) {
    #beftrans{
        margin-top: 50px;
    }

    #egyenl{
        margin-top: 0px;
        margin-left: 0px;
        border: 1px solid lightgray;
        border-radius: 10px;
        padding: 10px;
        padding-bottom: 20px;
    }

    .transtbl{
        height: 50px;
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: small;
    }

    .width-card{
        width: 99%;
        float:left;
    }

    #card{
        background-image: url(../img/ncard.png);
        background-size: cover;
    }

    #qpaytip{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #qpay{
        width: 94%;
        height: 300px;
    }

    #qrcode{
        display: block;
    }
    

    h1{
        color: black;
    }
}