/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/varela-round-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Varela Round Regular'), local('VarelaRound-Regular'),
       url('../fonts/varela-round-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/varela-round-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/varela-round-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/varela-round-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/varela-round-v13-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
}

html {
  height: 100%;
}


html, body{
width: 100%;
padding:0px;
margin:0px;
}

body{
background: #e5e5e5;
font-family: 'Varela Round', sans-serif;
color:#333;
position: relative;
margin: 0;
min-height: 100%;
}

footer{
background-color: #eee;
text-align: center;
width: 100%;
height: auto;
line-height: 2em;
right: 0;
bottom: 0;
left: 0;
}

@media (max-width: 768px){
.navbar-brand{
display:none;
}
nav.navbar{
min-height: 50px !important;
}
}

@media (min-width: 768px){
body{
padding-bottom: 240px;
}
footer{
position: absolute;
bottom:0px;
}
}


ul, ol{
list-style-type:none !important;
}

a{
cursor: pointer !important;
color:#005ea7;
}
a:hover{text-decoration: none}

button, button[type="submit"]{
cursor: pointer !important;
}

h1{
font-size:26px;
}

h2{
font-size:22px;
}

h3{
font-size:20px;
}

h4{
font-size:18px;
}

.row{
margin:0px;
}

.header{
background-color: transparent;
}

.header li a{
color: #fff !important;
font-size: 17px
}

#content{
position: relative;
margin: 0;
min-height:400px;
}

#content_secure{
position: relative;
margin: 0;
padding:10px;
padding-right:20px;
}

#content_secure h2{
font-size:1.5em;
margin-top:20px;
margin-bottom:20px;
}

.fa{color: darkslategray;padding: .1em;text-decoration: none}

.navbar-toggler .fa{
color:white;
}

/* Add a hover effect if you want */
.fa:hover{opacity: .7}

.fa-facebook{background: #3B5998;color: white !important; padding:4px;}

.fa-twitter{background: #55ACEE;color: white !important; padding:2px;}

.fa-google-plus{background: red;color: white !important; padding:2px;}

.fa-book{vertical-align: middle}

.fa-book:hover{opacity: 1}

/* Recap */
#recap{
width:100%;
max-width:300px;
margin:10px auto;
background-color: #eee;
padding:10px;
text-align:center;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;}
.recap_value{font-size: 1.5em;
}

/* footer */
footer{
color: #333;
background-color: #ddd;
margin-top:10px;
}

footer ul li a{
color:#333;
display: block;
text-align: left;
margin: 5px auto;
font-size: 15px;
}

footer ul li a:hover{
color:#444;
}

footer ul li a .fa{
color:#333;
}

footer h3{
font-size:1.2em;
margin: 30px auto;
}

/* page container */
.page-container{
padding: 20px;
margin-top:30px;
}

.page-container h3{
margin-bottom:30px;
}

.page-container .card{
max-width:800px;
width:100%;
margin:auto;
margin-bottom:60px;
}

/* login */
.login-container{
padding: 0px;
margin-top:30px;
}

#login_info{
margin-top:30px;
}

/* register */
.register-container{
padding: 20px;
margin-top:30px;
}

/* after_content */
.after_content{
margin:0px auto;
background-color: #fff;
display:block;
clear:both;
text-align: center;
min-height:100px;
margin-top:20px;
}

/* before_content */
.before_content{
min-height: 300px;
padding:10px;
}

/* page card */
.page-card{
max-width:500px;
width:100%;
margin:auto;
}

/* form */
form.form label{
width:100%;
}

form.form input{
width:100%;
max-width:800px;
padding:10px;
}

form.form button[type="submit"], form .btn-submit{
margin:auto;
margin-top:40px;
margin-bottom:20px;
cursor: pointer !important;
width:auto;
}

form.form textarea{
width:100%;
height:100px;
max-width:800px;
}

/* navbar*/
.nav-item{
text-align:center;
}

.errorlist li {
color:red;
}

.amount_format{
padding-right:10px;
text-align:right;
}

.history_detail td{
background-color:white !important;
color:#666;
}

.history_separator td{
border-top:2px dashed #CCC;
background-color:white !important;
height:5px;
padding:0px;
margin:0px;
}

#piggy_history
{
background-color: white;
font-size:15px;
}

table.receipt_detail{
font-size:14px;
border:none;
}

table.receipt_detail td{
padding:0px;
border:none;
}

/* Responsive */
@media (max-width: 768px){
#page-contact,
.register-container,
#login,
#login .card,
#login .card-body{
margin:0px;
padding:0px;
border:none;
  background-color: white;
}
#login .card{
margin-top:40px;
}

}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
background: #d2d2d2 !important;
background-color: #d2d2d2 !important;
border-color: #d2d2d2 !important;
color: #a0a0a0 !important;
}




/* Operations */
.op_receipt_lines{
    display: flex;
}

.op_receipt_line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.op_receipt_sep{
    margin-right: 1rem;
    margin-left: 1rem;
}

.op_header{
    background-color: white;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.op_receipt_amount,
.op_receipt_shop,
.op_receipt_pos{
    width: 100%;
    text-align: center;
    margin: 1rem;
}

.op_receipt_amount{
    font-size: 2rem;
}

.op_receipt_shop i{
    margin-right: 0.5rem;
}

.op_receipt_line{
    width: 100%;
    padding:1rem;
    background-color:white;
    margin: 2px;
}

.op_line_quantity{
    font-weight: bold;
    margin-right: 1rem;
}

#menu_card section h2{
border-bottom: 1px solid #ccc;
font-size: 1rem;
color: #676767;
}

#menu_card section ul{
padding:0;
}

#menu_card{
border: 1px solid #b3b3b3;
margin-top: 2rem;
}

#menu_card ul li i{
margin-right: 0.5rem;
}

#content_secure{
padding: 1rem;
padding-top: 0rem;
}

.btn, .btn.btn-primary,
btn.btn-default{
border-radius: 4px !important;
font-size: 1rem;
}

.content_secure_content{
background-color: white;
padding: 1rem 2rem;
border: 1px solid #b3b3b3;
margin-top: 2rem;
overflow: auto;
}

.page-home .content_secure_content{
background-color: transparent;
border: 0px solid #b3b3b3;
padding: 0;
}

#content_secure h2{
font-size: 1.5rem;
}

#content_secure h2:after {
content: "";
display: block;
height: 0.25rem;
background-color: #ddd;
width: 6rem;
margin-top: 0.8rem;
}

#content_secure input{
background-color: #efefef;
border: none;
}

.menu_head_1{
font-weight: bold;
}

.menu_head{
margin-bottom: 1rem;
}

.menu_head_2 span.menu_head_2_1{
color: #676767;
}

.menu_head_2 span.menu_head_2_2{
font-weight: bold;
font-size: 0.8rem;
}

.detail_li{
border-bottom: 2px solid #ddd;
display: block;
margin-bottom: 1rem;
}
.detail_li:last-child{
border: none;
}

.operation_line1{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.operation_line2{
display: flex;
flex-direction: row;
justify-content: space-between;
}

a{
color: #333;
}

.operation_line1_1, .operation_line1_2{
color: #666;
}

.op_front_name{
    font-size: 1rem;
    color: #666;
}

.op_amount_format{
   font-size:1.3rem;
}

.main_content{
    max-width: 1200px;
    margin: auto;
}


.op_line_label{
flex: 6;
}

.op_line_quantity,
.op_line_total_incl_tax{
flex: 1;
}

.op_line_label,
.op_line_quantity{
text-align: left;
}
.op_line_total_incl_tax{
text-align: right;
}