@font-face {
  font-family: 'Ebrima';
  src: url('Ebrima.eot?#iefix') format('embedded-opentype'),  url('Ebrima.woff') format('woff'), url('Ebrima.ttf')  format('truetype'), url('Ebrima.svg#Ebrima') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {margin:0;padding:0;font-family: 'Ebrima','san-serif';font-size: 15px;color:#000;}
body.red {background-color:#c31f3a;color:#fff;}

h4 {margin:0 0 10px;text-align: center;padding: 0;font-family:'Ebrima';font-weight:normal;text-transform: uppercase;font-size:20px;}
.logo-w {display:block;width:200px;display:block;margin:auto;}
h2 {font-size:25px;padding:0;font-weight:normal;margin:50px 20px 20px;text-transform:uppercase;letter-spacing:1px;}

form {padding:20px;}
form label {display:block;font-size:18px;opacity:0.8;}
form .input {display: block;border:0;border-bottom:1px solid;background-color:transparent;width:100%; font-size:22px;margin-top:10px;margin-bottom:25px;;outline:0;}
form textarea.input {border:1px solid #000;height:150px;width:calc(100% - 20px);padding: 10px;font-size: 15px;}
.btn {display:block;background-color:transparent;border:1px solid;padding:10px;font-size:18px;text-transform:uppercase;min-width:150px;margin:auto;text-align: center;border-radius:2px}
.red .btn {color:#FFF;}
.red .input {border-bottom:1px solid #FFF;color:#FFF;}

.red ::placeholder {color: #FFF;opacity: 0.5;}
.red :-ms-input-placeholder {color: #FFF;}
.red ::-ms-input-placeholder {color: #FFF;}

#login {padding-top:15%;}
.btn-bottom {color: #FFF;text-decoration: none;text-transform: uppercase;font-size: 15px; display: block;text-align: center;margin: 0 20px;}

header {background-color:#c31f3a; color:#FFF;height:43px}
header .logo {display:block;float:left;margin-top:12px;margin-left:10px;}
header .logo img {display:block;width:80px;}
header .icons {display:block;width:40px;height:40px;background:url(../images/ico-sprite.png) no-repeat 0 0;float:right;}
header .home {background-position:-40px 0;}
header .back {float: left;background-position:-80px 0;margin-right:-10px;}
header p {clear:both;text-align:center;font-size:18px;opacity:0.5;margin: 0 0 -8px;padding: 0;}
header h2 {margin:0;padding:0;text-align:center;font-size:45px;font-weight:bold;text-transform:none;}

.big_header header {height:150px;}
.big_header #page {top:160px;bottom:50px;}

.tab {display:block;overflow:auto;margin:0 10px;clear:both;}
.tab a {display: block;float: left;width:50%;text-align: center;font-size: 18px;text-transform: uppercase;color: #FFF;text-decoration:none;margin-top:20px;padding-bottom:15px;opacity:0.5}
.tab a.selected {border-bottom:5px solid #FFF;opacity:1}

#page {padding:10px 20px;position:fixed;top:43px;bottom:0;overflow:auto;width:calc(100% - 40px)}
#page form {padding:0; margin-top:20px;}
#page form label {opacity:0.5}

.bottom {position: fixed;bottom: 0;left:0;width:100%;}
.bottom a {display: block;width:calc(50% - 1px);text-align:center;float:left;line-height:50px;background-color:#c31f3a;color:#FFF;text-decoration:none;font-size:15px;border-right:1px solid #fff;}
.bottom a:last-child {background-color:#1e824c;border-left:1px solid #fff;border-right:0}

.customer {border-bottom:1px solid #000;padding:10px 0}
.customer:last-child {border:0;}
.customer p {font-size:16px;margin:0;padding:0;}
.customer p.amt {float: right;}
.customer h3 {margin:0;padding:0;font-size:18px;}

.popup {position:fixed;background-color:rgba(0,0,0,0.5);left:0;top:0;height:100%;width:100%;display:none;}
.popup .body {background-color:#FFF;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); }
.popup h4 {text-align:left;padding:10px 20px;}
.popup .close {position:absolute;top:-15px;right:-15px;}

.add-customer {position:fixed;z-index: 123;background-color: #c31f3a;color: #fff;padding: 5px 20px;text-decoration: none;bottom: 20px;right: 20px;border-radius: 20px;text-transform: uppercase;}

.tag {padding:5px 20px}
.tag a {color:#fff; text-decoration:none;display:inline-block;margin-right:20px;opacity: 0.5}
.tag a.selected {opacity:1}

.search-form {clear:both;}
.search-form form {padding:25px 10px 10px;}
.search-form select, .search-form input {padding:5px;width:80px;}
.search-form input {width:calc(100% - 99px)}

#customers_list tr th {padding:10px;background-color:#eee;border-left:1px solid #fff;}
#customers_list tr th:first-child, #customers_list tr td:first-child {text-align:left;border-left:0}
#customers_list tr td {text-align: center;padding:10px 0;border-top:1px solid #eee}

.password {position: relative;}
.password a {color: #FFF;text-decoration: none;position: absolute;right: 0;bottom:10px}
.password a:hover {text-decoration:none;}