/*
Theme Name: VAULT CARD SHOP - POS
Theme URI: http://www.muldavaitsolutions.com
Description: Simple theme created by allanmarkpaanio@yahoo.com
Version: 1
Author: Allan Mark Paanio
Author URI: http://www.muldavaitsolutions.com
*/

.c {clear: both;}

body {margin: 0; padding: 0; font-family: 'Kanit', sans-serif;}
#sign-out {display: none;}
#delete-sale {display: none;}
#wrapper {width: 100%; height: auto; display: block; max-width: 1366px; margin: 0 auto;}
#header {height: 50px; border-bottom: 1px solid #000; margin: 0 auto; display: block; padding: 10px 0}
#header button { font-family: 'Kanit', sans-serif; height: 100%; display: inline-block; flex-direction: column; align-items: center; padding: 0 14px; border-radius: 6px; border: none; background: #6E6D70; box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12); color: #DFDEDF; user-select: none;  -webkit-user-select: none; touch-action: manipulation; font-size: 180%; vertical-align: center; cursor: pointer}
#header button:focus {box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5); outline: 0;}
#header input[type="date"] {height: 90%; vertical-align: top; padding: 0 10px;}
#header select {height: 95%; vertical-align: top; padding: 0 10px;}
#triggerbox {border: 1px dashed #000; width: 96%; display: none; margin: 5px auto; padding: 10px 2%; text-align: center;}
#triggerbox #action select {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; width: 15%; background-color: #F99}
#triggerbox #action input[type="text"] {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; width: 10%;}
#triggerbox #action input[type="number"] {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; width: 10%; background-color: #FF9}
#triggerbox #action input[type="date"] {display: inline-block; padding: 9px 10px; font-family: 'Kanit', sans-serif; width: 10%; background-color: #FF9}
#triggerbox #action button {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; cursor: pointer; width: 15%;}
#triggerbox #action input[type="submit"] {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; cursor: pointer; width: 15%;}
#triggerbox #action span {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; cursor: pointer; width: 15%; background-color: #CCC; border: 1px solid #000; vertical-align: middle}
#triggerbox #cardsingles {display: none;}
#triggerbox #cardsingles textarea {width: 100%; height: 300px; resize: none; margin: 10px 0; border: 3px dashed #000}
#triggerbox #search {float: right; width: 40%;}
#triggerbox #search input[type="text"] {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; width: 43%;}
#triggerbox #search button {display: inline-block; padding: 10px; font-family: 'Kanit', sans-serif; cursor: pointer; width: 43%;}

#wrapper #login-page {display: block; width: 45%; margin: 1% auto 40px; padding: 1%; vertical-align: top; min-height: 300px; text-align: center; border: 1px solid #000;}
#wrapper #login-page img {width: 100%; height: auto; display: block; margin: 20px auto;}
#wrapper #login-page h2 {color: #000; font-weight: normal; font-size: 28px; border-bottom: 5px solid #27aae2; padding-bottom: 10px; margin: 30px auto; text-align: center; width: 70%; display: block;}
#wrapper #login-page label {display: block; margin: 10px auto; font-size: 12px; width: 70%; text-align: left;}
#wrapper #login-page input[type="text"] {cursor: pointer; display: block; width: 66%; padding: 10px 2%; border-radius: 5px; border: 1px solid #CCC; margin: 15px auto;}
#wrapper #login-page input[type="password"] {cursor: pointer; display: block; width: 66%; padding: 10px 2%; border-radius: 5px; border: 1px solid #CCC; margin: 15px auto;}
#wrapper #login-page input[type="submit"] {background-color: #ed1b24; font-size: 18px; cursor: pointer; display: block; width: 36%; padding: 8px 2%; border-radius: 5px; border: 1px solid #CCC; margin: 15px auto; color: #fff;}
#wrapper #login-page input[type="button"] {background-color: #ed1b24; font-size: 18px; cursor: pointer; display: block; width: 36%; padding: 8px 2%; border-radius: 5px; border: 1px solid #CCC; margin: 15px auto; color: #fff;}

#saleslist {border: 1px dashed #000; width: 96%; display: block; margin: 5px auto; padding: 10px 2%; text-align: center;}
#saleslist h1 {border-bottom: 5px solid #000;}
#saleslist table {width: 100%; text-align: left;}
#saleslist tr td {width: 20%; position: relative;}
#saleslist tr td.head {background-color: #F99; font-size: 120%;  padding: 10px;}
#saleslist tr td.main {background-color: #FF9; font-size: 120%;  padding: 10px;}
#saleslist tr td.sub {background-color: #fff; padding: 5px 0; font-size: 90%;  padding: 0 10px;}
#saleslist tr td.add {background-color: #CCC;  padding: 0 10px;}
#saleslist tr td.deduct {background-color: #336; color: #fff; padding: 0 10px;}
#saleslist tr td.online {background-color: #390; color: #fff; padding: 0 10px;}
#saleslist tr td.red {color: #fff; background-color: #F00; padding: 0 10px;}
#saleslist tr td #listofcards {position: absolute; font-size: 80%; height: 10px; width: 1px; background-color: #f1f1f1; z-index: 9998; top: 2px; right: 2px; overflow: scroll; padding-left: 10px; border: 1px solid #000;}
#saleslist tr td #listofcards:hover {height: 300px; width: 300px; box-shadow: 2px 3px 4px #000; z-index: 9999;}
#saleslist tr td button {border-radius: 10px; border: 1px solid #000; background-color: #a10; color: #fff; padding: 5px 10px; font-size: 50%; margin: 0 10px; display: inline-block; cursor: pointer;}
#saleslist tr td button:focus {background-color: #CCC; color: #fff;}