@import url("https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,700,900&subset=latin-ext");
*{border:0;border-collapse: collapse;margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: Muli;color:#000}
img{display:block;}
html{width:100%}
body{background-color:#fff;}

header{height:140px;width: 100%;background-image:url('../pic/headerBackground.png');background-position:top center;}
#auth{position:absolute;top:0;left:0;z-index:10;width:100%;padding:10px 0px;display:none;}
#auth .authContainer{width:80%;margin:0 auto;padding:0 50px;}
#auth input{float:right;margin:5px 5px 5px 0;width:200px;height:40px;border:2px solid #a0a0a0;border-radius:20px;padding:0 15px;font-size:15px;}
#auth button{float:right;margin:5px 0 5px 0;height:40px;border:2px solid #e54d1e;border-radius:20px;background-color:#e54d1e;padding:0 15px;font-size:15px;font-weight:bold;color:#fff;cursor:pointer;}
#auth button:HOVER{background-color:#c64017;}
.headerContainer{width:100%;margin:0 auto; height: 140px;}
.logoContainer{float:left;}
.logo{margin:5px 25px 0 50px; height: 130px;}
.login{float:right;margin:0 50px 0 25px;height:70px;}
.login button{margin:14px 0;height:40px;border:2px solid #eee;border-radius:20px;background-color:#eee;padding:0 16px;font-size:15px;font-weight:bold;color:#fff;cursor:pointer;}
.login button img{position:relative;top:1px;;display:inline;}
.login button:HOVER{background-color:#ddd;}
.menu{clear:right;float:right;margin:0px 50px;height:60px;padding:15px 0;}
.menu a{font-size:18px;font-weight:bold;color:#fff;text-decoration:none; margin-right: 41px; }
.menu a:HOVER{color:#fff;text-decoration:underline}

table{width: 100%;}
thead{border-bottom: 1px solid #999;}
td{text-align: center;height: 50px;}
th{height: 50px; text-align: center !important;}
tbody tr:nth-of-type(odd){background-color: rgb(235, 235, 235);}

.vasarloi_oldal{overflow: auto; display: flex; background-color: #f2f2f2;}
.vasarloi_oldal h2{border-bottom: none; padding-bottom: 0px;}
.vasarloi_oldal h1{float: left; text-align: left; padding: 0px; padding-bottom: 10px; font-size: 200%; font-weight: bold; color: rgb(255,102,0);}
.vasarloi_oldal p{float: left; clear: both; padding: 5px 0px;}

.customer_login_page{overflow: auto; display: flex; }
.customer_login_page img{margin: auto;}
.customer_login_page form{padding: 0px; width: 100%;}
.customer_login_page .form{margin-top: calc(50vh - 312px - 70px)}

.vasarloi_oldal .tortenelem {width: 90%; background-color: #fff; overflow: auto; margin: auto; padding: 20px; margin-top: 20px;}
.vasarloi_oldal .tortenelem h1 {text-align: center; width: 100%; margin-bottom: 5px;}
.vasarloi_oldal .tortenelem p {text-align: center; width: 100%; margin-bottom: 20px;}

.adataim_oldal h1 {width: 50%; margin-top: 10px; margin-bottom: 30px; border-bottom: 2px solid rgb(255,102,0); padding-bottom: 25px;}
.adataim_oldal p {color: #333;}


.left-col{flex: 3; border: 2px solid red;}
.right-col{flex: 7; overflow: none;}

.section { width: 45%; overflow: auto; float: left; margin-left: 5%;}
.section h2 {font-size: 27px;}
.section h1 {font-size: 34px;}

.right_section {width: 45%; float: left; overflow: auto; padding: 25px; position: relative;}
.right_section .card { width: 300px; height: 201px; float: right; background-color: transparent; border: none; }
.right_section img{width: 300px; float: right;}
.right_section #card_number{color: #000; font-size: 15px; font-weight: bold; float: left; margin-top: -49px; margin-left: 39px; display: block;}
.right_section #card_name {  text-shadow:-1px -1px 0 #000,  1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color: #fff; font-weight: bold; font-size: 18px; margin-top: -126px; margin-left: 25px; line-height: 22px; text-transform: uppercase; vertical-align: bottom;}

#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }

.page_changer {position: relative; left: -50%; float: left;}
.page_changer p {float: left; clear: none; margin: 0px 10px; padding: 10px;}
.page_changer a {float: left; clear: none; margin: 0px 10px; padding: 10px;}

/* Login page */
.login_page {overflow: auto; max-width: 1500px; width: 100%; margin: auto; margin-top: 0px;}
.login_page h1 {width: 100%; text-align: center; color: #e54d1e; font-size: 36px; font-weight: bold; padding-left: 0px; padding-right: 0px; line-height: 50px;}
.login_page .block {float: left; max-width: 700px; width: 90%; margin: 0px 25px; height: 500px; position: relative; overflow: auto; border: 1px solid #ddd; border-radius: 20px;}
.login_page .block .left {width: 35%; height: 100%; border-radius: 20px; float: left;}
.login_page #left_1 {background-image: url("http://oazis.hu/app/uploads/2018/03/cserep_nagyker.jpg");}
.login_page #left_2 {background-image: url("http://oazis.hu/app/uploads/2018/03/flora_nagyker.jpg");}
.login_page .block .right {width: 65%; height: 99%; float: left;}
.login_page .block .right h3 {padding-left: 30px; margin-top: 20px; color: rgb(218, 87, 0); font-weight: bold; font-size: 25px; border-bottom: 1px solid #ddd; padding-bottom: 20px;}
.login_page .block .content {padding: 25px 25px; line-height: 24px;}
.login_page .block .content p {font-size: 16px;}
.login_page .block .content a {font-size: 17px; color: #e54d1e; text-decoration: underline;}
.bottomRow {width: 220px; margin: auto; text-align: center; }

@media(max-width: 1600px) {
}

footer{overflow:auto;background-image:url('/view/image/footerBackground.png');background-position:top center;background-repeat:no-repeat;background-color:#5e6b68}
.footerContainer{margin:0 auto;width:80%;padding-top:0px;overflow:auto;}
.footerline{width: 100%; height: 60px; background-color: rgb(58, 85, 68)}
.footerMenu{float:left;margin:0px;padding:30px 50px;}
.footerMenu ul{list-style:none;width:100%;text-align:left;}
.footerMenu ul li{padding:5px 0;font-size:15px;color:#fff;}
.footerCopyright{float:right;margin:0px;padding:30px 50px;}
.footerMenu ul li a{color:#fff;text-decoration:none;}
.footerMenu ul li a:HOVER{text-decoration:underline;}
.footerCopyright p{padding:5px 0;font-size:15px;color:#fff;}
.footerCopyright p b{color:#fff;}

.linkButton{margin:30px 0;height:40px;border:2px solid #e54d1e;border-radius:20px;background-color:#e54d1e;padding:5px 22px 5px 22px;font-size:15px;font-weight:bold;color:#fff;cursor:pointer;}
.linkButton:visited{color: #fff;}
a{text-decoration:none;color:#e54d1e}
a:HOVER{color:#000;}

.upper_line{width: 100%; height: 40px; line-height: 40px; vertical-align: center;}
.right_line{float: right;height: 60px; margin-top: 80px; padding-right: 100px; margin-right: 0px;}
.right_line a {float: right; height: 40px; padding: 0px 30px; background-color: #fff; font-weight: bold; border-radius: 20px; color: #336f5e; line-height: 40px; vertical-align: middle; -webkit-transition: background-color 0.25s; transition: background-color 0.25s;}
.right_line a:hover {text-decoration: none; color: #336f5e; background-color: #eee; -webkit-transition: background-color 0.25s; transition: background-color 0.25s;}
.right_line p {float: right; margin-right: 0px;}

.header_aszf{
    width: 100%;
    text-align: center;
    margin: 30px 0px;
}

.cont_aszf{
    width: 70%;
    margin: auto;
}

.cont_aszf h2{
    color: #e54d1e;
}

.cont_aszf h3{
    font-size: 18px;
    font-weight: bold;
}

.cont_aszf a{
    font-size: 16px;
    text-decoration: underline;
}

.cont_aszf br {
    line-height: 40px;
    display: block;
    margin: 10px 0px;
    content: "";
}

.cont_aszf b {
    line-height: 40px;
    color: #e54d1e;
}

#time{font-size: 18px; font-weight: bold; color: #444; text-align: center; float: right;}

#form-messages {
    background-color: rgb(255, 232, 232);
    border: 1px solid red;
    color: red;
    display: none;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 25px;
    width: 100%;
}

#regisztracio_oldal .right-col {
    width: 90%;
    max-width: 500px;
    margin: auto;
}

#regisztracio_oldal .formRow {
    display: flex; flex-wrap: wrap; align-content: stretch; float: left; width: 100%;
}

#regisztracio_oldal input, #regisztracio_oldal select {
    margin-left: 2px; margin-right: 2px; width: 100%;
}

#regisztracio_oldal p {
    width: 100%;
}

#regisztracio_oldal .flex-s {
    flex: 1;
    min-width: 90px;
}

#regisztracio_oldal .flex-m {
    flex: 2;
    min-width: 125px;
}

#regisztracio_oldal .flex-l {
    flex: 3;
    min-width: 200px;
}

#regisztracio_oldal .formBlock {
    width: 100%;
}

#regisztracio_oldal label {
    padding-left: 10px;
    text-indent: -15px;
    }

#regisztracio_oldal input[type=checkbox] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin:0;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

#regisztracio_oldal input[type=radio] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin:0;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    *overflow: hidden;
}


.uj_jelszo_oldal input {
    float: left;
}

@media (max-width:1520px) {

    .login_page .block {
        margin: auto;
        margin-bottom: 30px;
        float: none;
    }

}

@media (max-width: 1210px) {
    .headerContainer{width:100%;}
    .footerContainer{width:100%;}
    #authContainer{width:100%;}
    .login_page form {width: 80%;}

    .menu {margin-right: 0px;}

    .menu a {
        font-size: 14px;
        margin-right: 28px;
        line-height: 28px;
        vertical-align: middle;
    }

}

@media (max-width:990px) {


    .vasarloi_oldal .section {
        width: 100%;
        margin-left: 0px;
        padding: 0px 14px;
        display: flex;
        flex-direction: column;
        justify-content: middle;
    }

        .vasarloi_oldal .section h1, h2 {
            text-align: center;
            width: 100%;
        }

        .vasarloi_oldal .section h1 {
            font-size: 32px;
        }

        .vasarloi_oldal .section p {
            display: block;
            margin: auto;
            margin-bottom: 2px;
        }

    .vasarloi_oldal .right_section {
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 30px;
        text-align: center;
        width: 100%;
        position: relative;
    }

    .vasarloi_oldal .right_section .card{
        float: left;
        margin-left: calc(50% - 150px);
    }   

    .vasarloi_oldal .right_section #card_number {
        text-align: left;
    }

    .vasarloi_oldal .right_section #card_name {
        text-align: left;
    }

    .vasarloi_oldal .tortenelem {
        width: 100%;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    table {
        margin-top: 130px;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 1rem 0 1rem 0;
        -webkit-box-shadow: 0px 4px 20px -1px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 4px 20px -1px rgba(0,0,0,0.15);
        box-shadow: 0px 4px 20px -1px rgba(0,0,0,0.15);
        border-top: 5px solid rgb(255,102,0);
    }
      
    tbody tr:nth-of-type(even) {
      background-color: #fff;
    }

    tbody tr:nth-of-type(odd) {
        background-color: #fff;
      }
    
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-top: 20px;
        padding-bottom: 30px;
        padding-left: 5px;
        margin-bottom: 10px;
        text-align: left;
        font-weight: bold;
        font-size: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    td:before {
        position: absolute;
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 13px;
    }

    td:last-of-type { border-bottom: none; margin-bottom: 0px; }
    td:nth-of-type(1) {background-color: rgba(255, 102, 0, 0.15); margin: 0px 0px 10px 0px; padding-top: 30px; padding-left: 15px;}

    td:nth-of-type(1):before { content: "Dátum"; padding-left: 8px; margin-top: 10px;}
    td:nth-of-type(2):before { content: "Áruház"; }
    td:nth-of-type(3):before { content: "Kártyaszám"; }
    td:nth-of-type(4):before { content: "Vásárolt összeg"; }
    td:nth-of-type(5):before { content: "Pont";}
    td:nth-of-type(6):before { content: "Típus";}
    td:nth-of-type(7):before { content: "Blokkszám";}



    .page_changer a {
        margin-left: 3px;
        margin-right: 3px;
    }



    /* Adataim oldal --------------------------------------------------------------------------------------------- */

    .adataim_oldal h1 {
        width: 100%;
        text-align: center;
        font-size: 36px;
        border-bottom: none;
        margin-bottom: 0px;
        padding-bottom: 40px;
    }

    .adataim_oldal .formRow p {
        margin-bottom: 8px;
    }

    .adataim_oldal .formRow label {
        text-indent: -15px;
        font-size: 15px;
        line-height: 30px;
        vertical-align: top;
        display: inline;
    }

    .adataim_oldal .formRow input {
        margin-top: 0px;
    }

    .adataim_oldal input[type="checkbox"] {

    }

    .adataim_oldal hr {
        width: 95%;
        margin-left: 2.5%;
        border-color: #b0b0b0;
    }

    /* Header ---------------------------------------------------------------------------------------------------- */

    .logo {
        margin-left: calc(50vw - 51px);
        width: 102px;
    }

    .login_page .block {
        margin-left: 5%;
        height: auto;
    }

    .login_page .block .left {
        width: 100%;
        height: 300px;
    }

    header {
        overflow: auto;
        height: auto;
    }

    header .menu {
        width: 100%;
        height: auto;
        background-color: rgb(58, 85, 68);
        margin: 0px !important;
        padding: 0px;
    }

    header .menu a{
        width: 100%;
        padding: 10px 0px;
        text-align: center;
        display: block;
    }

    header .right_line {
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px 0px 5px 0px;
        background-color: rgb(58, 85, 68);
        text-align: center;
    }

    header .right_line a {
        float: none;
        font-size: 14px;
        color: #fff;
        background-color: transparent;
    }

    /* Login Page ---------------------------------------------------------------------------------------------------- */

    .login_page .formRow p {
        margin-bottom: -2px;
        padding-left: 8px;
    }

    .login_page {
        padding-bottom: 0px;
    }

    .login_page h1 {
        margin-bottom: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 24px;
        border-bottom: 1px solid #ddd;
    }

    .login_page .block {
        margin-top: 30px;
    }

    .login_page .block .right {
        text-align: center;
        width: 100%;
        height: auto;
        padding-bottom: 5px;
    }

    .login_page .block .right h3{
        margin-left: 5%;
        text-align: center;
        width: 90%;
        line-height: 35px;
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .login_page .block .right .content {
        padding-top: 15px;
    }

    #loginForm {
        width: 90%;
        margin: 0px !important;
        margin-left: 5% !important;
    }

    #loginForm input{
        height: 44px;
        border-radius: 22px;
        font-size: 120%;
    }

    #loginForm button {
        height: 44px;
        font-size: 120%;
        width: 80% !important;
    }

    /* Registration Page ---------------------------------------------------------------------------------------------------- */

    .register--header_row {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .register--header_row h1{
        text-align: center;
        border-bottom: 1px solid #ddd;
        line-height: 60px;
        padding-bottom: 15px !important;
        margin-bottom: 30px;
    }

    #regisztracio_oldal .formRow {
        padding-top: 20px;
    }

    #regisztracio_oldal .submitRow {
        padding-top: 0px;
    }

    #regisztracio_oldal .formRow p {
        margin-bottom: 6px;
    }

    #regisztracio_oldal label {
        font-size: 110%;
    }

    #regisztracio_oldal button {
        height: 50px;
    }

    .register__small-row {
        padding-top: 0px !important;
    }

    /* New Password Page ---------------------------------------------------------------------------------------------------- */

    .uj_jelszo_oldal label {
        font-size: 125%;
    }

    .new_pass--header_row {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .new_pass--header_row h1{
        text-align: center;
        border-bottom: 1px solid #ddd;
        line-height: 60px;
        padding-bottom: 15px !important;
        margin-bottom: 30px;
    }

    .uj_jelszo_oldal .formRow {
        width: 100% !important;
    }

    .uj_jelszo_oldal .formSubmit {
        width: 100% !important;
    }

    .uj_jelszo_oldal .formSubmit button{
        width: 100% !important;
    }

    /* New Password Page ---------------------------------------------------------------------------------------------------- */

    .header_aszf {
        padding: 10px 5px 45px 5px;
        line-height: 42px;
        margin-bottom: 45px;
        border-bottom: 1px solid #ddd;
    }

    .cont_aszf {
        width: 90%;
    }
}

/* Vonalkód a kártyaképen (pontjaim.php, kartyamuveletek.php) */
.right_section .card { position: relative; }
.card_vonalkod { position: absolute; left: 11.2%; top: 65.5%; width: 48.2%; height: 10.5%; cursor: pointer; z-index: 1; }
.card_vonalkod svg { display: block; width: 100%; height: 100%; float: none; }
#vonalkod_nagy { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: #fff; align-items: center; justify-content: center; cursor: pointer; }
.vonalkod_nagy_doboz { width: 92%; max-width: 640px; text-align: center; }
.vonalkod_nagy_kod svg { display: block; width: 100%; height: 35vw; max-height: 200px; float: none; }
#vonalkod_nagy p { color: #000; font-size: 26px; font-weight: bold; letter-spacing: 3px; margin: 12px 0 30px 0; float: none; width: auto; }
#vonalkod_nagy span { color: #888; font-size: 14px; }