/* Groovy CSS Document */
:root {
  --main-font: arial; 
  --main-font-size: 16px;
  --HeadColor1: #5D5D5D; /* var(--HeadColor1)  #4470A6 */
  --H1FontC: #FFFFFF; /* var(--H1FontC) */
  --HeadColor2: #B6BBCB; /* var(--HeadColor2) */
  --H2FontC: #000000; /* var(--H2FontC) */
  --HeadColor3: #909090; /* var(--HeadColor3) #999999 #6699D0 */
  --BodyColor1: #999999; /* var(--BodyColor1) #C4C2C2 #ADBEE0  */
  --FormBodyColor1: #C4C2C2; /* var(--FormBodyColor1)   #B8D1F3 */
  --InputColor1: #DCDCDC;/* var(--InputColor1)  #BEBEBE #D4E6FF */
  --ButtColor1: #909090; /* var(--ButtColor1)  #6699D0 */
  --ButtHovColor1: #4D6580; /* var(--LinkHovColor1) */
  --NavbarTopColor1: #000000; /* var(--NavbarTopColor1)   #4D6580 */
  --HeadColor4: #416EB3; /* var(--HeadColor4)*/
  --HeadColor4-2: #4F6476; /* var(--HeadColor4)*/
  --ModalHeadColor1: #C4C2C2; /* var(--ModalHeadColor1)*/
  --ModalFootColor1: #DCDCDC; /* var(--ModalFootColor1)*/
}

@media print{
    @page {
        /* size: landscape; */
    }
}

body {
    background-image: url("../backround.gif");
	/*background-color:#303642;*/
	/*color:#9A9A9A;*/
    padding-top: 70px;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 0px;
    font-family: var(--main-font);
    font-size: var(--main-font-size);
}
p, h1, a {
    color: #000000;
    font-family: var(--main-font);
    font-size: var(--main-font-size);
}
hr {
    height: 1px;
    border: none;
    background-color: #000000;
}
hr.double {
    height: 2px;
    border: none;
    background-color: #000000;
}
b, strong {
    font-family: var(--main-font);
    font-size: var(--main-font-size);
}

/* Navbar */
.navtop {
    background-color: var(--NavbarTopColor1);
}

/* Links */
a:hover {
    color: #3882DB;
}

/* DataTables */
div.dt-buttons { /* keeps buttons and search on same row */
    float: left;
    margin-right: 5px;
}
.dataTables_info { /* keeps info and search on same row */
    float: left;
	font-weight: bold;
}

/* InoLinks */
a:link.infolink {
    color: #0000CC;
    font-weight: bold;
    font-size: 75%
}
a:hover.infolink {
    color: #990000;
    font-weight: bold
}

/* Barcodes */
.barcode {
    color: #000000;
    font-size: 16px;
    font-family: CCode39;
    /* font-family: IDAutomationHC39M; font-size: 11px; */
}

/* Page load spinner */
.pageload-modal .modal-dialog{
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
}
.pageload-modal .modal-dialog .modal-content{
    background-color: transparent;
    border: none;
}

/* Small Buttons */
.sbutt1 {
    --bs-btn-padding-y: .20rem; 
    --bs-btn-padding-x: .5rem; 
    --bs-btn-font-size: .85rem;
}

.form-group.nbspace {
    padding-left: 1px;
    padding-right: 1px;
}

.form-group.bspace {
    padding-left: 10px;
    padding-right: 10px;
}

.center-div {
    margin: 0 auto;
    /*width: 20%;*/
}

.autowidth {
    width: auto;
    margin: 10px;
}

.alert {
    font-weight: bold;
}

.nalert {
    font-weight: bold;
}

/* Login Page */
.login-card {
	background-color: #828282;
	color: #7C7C7C;
	border-radius: 5px;
}
.login-card-header {
	background-color: #D0D0D0;
	color: #7C7C7C;
}
/* Sign-in Form */
.form-signin {
	border-radius: 5px;
	padding: 2px 0px;
	align-content:center;
}
.form-signin input[type=text], input[type=password] {
	color: #000000;
	background-color: #BEBEBE;
	border-color:#5D5D5D;
}
.form-signin input[type=text]:focus {
	color: #000000;
	background-color: #BEBEBE;
}
.form-signin input[type=password]:focus {
	color: #000000;
	background-color: #BEBEBE;
}
.form-signin input[type=text]:placeholder{
	color: #000000;
}
.form-signin input[type=password]:placeholder {
	color: #000000;
}
.form-signin input[type=submit] {
	background-color: #A6A6A6;
}
.form-signin input[type=submit]:hover {
	background-color: #343a40;
	color: white;
}
.form-signin input[type="text"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	background-color: #BEBEBE;
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Output Card */
.out-card {
	/*background-color: #428BCA;*/
	border-radius: 10px;
	/*color: #909090;*/
}
.out-card-header {
	/*background: linear-gradient(to bottom, #909090, #428BCA);*/
	background-color: var(--HeadColor1);  /*  #428BCA #A4D6FF, #428BCA #909090 #444444 */
	border-radius: 10px 10px 0px 0px;
	color: var(--H1FontC);
	font-weight: bold;
	/*text-align: center;*/	
}
.out-card-body {
	/*background: linear-gradient(to bottom, #909090, #428BCA);*/
	background-color: var(--BodyColor1);  /*#A4D6FF, #428BCA #909090 #444444 */
	border-radius: 0px 0px 10px 10px;
	color: var(--H2FontC);
	/*text-align: center;*/	
}

/* Standard Card */
.std-card {
	background-color: var(--BodyColor1);  /* var(--BodyColor1) #828282 */
	color: #7C7C7C;
	border-radius: 5px;
}
.std-card-header {
	background: linear-gradient(to bottom, var(--HeadColor3), var(--HeadColor1));
	/*background-color: #428BCA;*/ /* #909090 #444444 */
	color: #7C7C7C;
	font-weight: bold;
	text-align: center;
}
.list-group-item {
	background-color: var(--FormBodyColor1); /* #828282 */
	color: #000000;
}
.list-group-item > a {
	background-color: var(--ButtColor1);
	color: #000000;
}
.list-group-item > a:hover {
	background-color: var(--ButtHovColor1);
    color: var(--H1FontC); /* #4D6580 */
}

/* Form Card */
.form-card {
	background-color: var(--FormBodyColor1); /*#6E6E6E*/
	color: #4D6580; /*#A6A6A6*/
	border-radius: 5px;
	padding: 2px 0px;
	align-content: center;
}
.form-card input[type=text], input[type=password] {
	color: #000000;
	background-color: var(--InputColor1); /* #BEBEBE */
  	border-color: var(--ButtHovColor1);
    margin-top: 5px;
}
.form-card input[type=text]:focus, input[type=password]:focus {
	color: #000000;
	background-color: var(--InputColor1);
}
.form-card input[type=text]::placeholder { 
    color: var(--ButtColor1);
}
.form-card input[type=text]:focus::placeholder { 
    color: var(--InputColor1);
}
.form-card input[type=submit] {
    background-color: var(--ButtColor1);  /* #909090 */
    margin-top: 5px;
}
.form-card button {
    background-color: var(--ButtColor1);
    margin-top: 5px;
}
.form-card input[type=submit]:hover {
    background-color: var(--ButtHovColor1); /* #343a40 */
    color: white;
}
.form-card button:hover {
    background-color: var(--ButtHovColor1); /* #343a40 */
}

/* Billing Modal */
.billmodal {
    width: 50%;
    resize: both;
    overflow: auto;
}

/* Login Table */
table.login {
    border-radius: 10px 10px 7px 7px;
    background-color: #999999;
}
table.login td {
    padding: 10px;
}


/* Invoice Details */
.InvSystem {
    color: #6699FF;
    font-family: arial;
    font-weight: bold;
    text-decoration: underline
}
.InvRoom {
    color: #6699FF;
    font-family: arial;
    font-weight: bold;
    text-decoration: underline
}
.InvItemNotes {
    color: #000000;
    font-size: 12px;
}

/* Table Menu */
table.menu {
    border-radius: 10px 10px 7px 7px;
    background-color: #999999;
    border-spacing: 0px;
}

table.menu th {
    border-radius: 10px 10px 0 0;
    background-image: url(../images/tablebar-5.gif);
    height: 25px;
}

table.menu td {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-top-color: #999999;
    border-bottom-color: #999999;
    height: 25px;
}


/* Table Menu 2 */

table.menu2 {
    background-color: #B6BBCB;
    border: 1px solid #000000;
    border-spacing: 0px;
    border-collapse: separate;
    /*border: hidden;*/
}

table.menu2 td {
    border: 1px solid #000000;
    border-top-color: #000000;
    border-bottom-color: #000000;
}


/* Table Menu 11 */

table.menu11 {
    border-radius: 12px 12px 12px 12px;
    background-color: #FFFFFF;
    border-spacing: 5px;
    border-collapse: separate;
    border: hidden;
}


/* Display Table1 */

.table-display1 {
    border: none;
}
.table-display1 th {
    background-color: var(--HeadColor1);
	color: var(--H1FontC);
    font-weight: bold;
    border: none;
    /*text-shadow: 1px 1px 1px #ccc;  #BFBFBF*/
}
.table-display1 tr:first-child td:first-child.rlu {
    border-top-left-radius: 12px;
}
.table-display1 tr:first-child td:last-child.rlu {
    border-top-right-radius: 12px;
}
.table-display1 th:first-child {
    border-top-left-radius: 12px;
}
.table-display1 th:last-child {
    border-top-right-radius: 12px;
}
.table-display1 td {
    border: none;
    /*border-top: solid 1px;*/
    background-color: var(--BodyColor1);
}
.table-display1 td.head1 {
    border: none;
    background-color: var(--HeadColor1);
	color: var(--H1FontC);
    font-weight: bold;
}
.table-display1 td.head2 {
    border: none;
    background-color: var(--HeadColor2);
	color: var(--H2FontC);
    font-weight: bold;
}
.table-display1 td.head3 {
    border: none;
    background-color: var(--HeadColor3);
	color: var(--H2FontC);
    font-weight: bold;
}
.table-display1 tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.table-display1 tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


/* Menu Table1 */

.table-menu1 {
    border: none;
    border-collapse: collapse;
}

.table-menu1 th {
    border: none;
    align: center;
    /*text-shadow: 1px 1px 1px #ccc;*/
}

.table-menu1 th:first-child {
    border-radius: 12px 0 0 0;
}

.table-menu1 th:last-child {
    border-radius: 0 12px 0 0;
}

.table-menu1 td {
    border: none;
    /*border-top: solid 1px;*/
    background-color: #FFFFFF;
}

.table-menu1 td.head1 {
    border: none;
    background-color: #B6BBCB;
    font-weight: bold;
}

.table-menu1 td.head2 {
    border: none;
    background-color: #999999;
    font-weight: bold;
}

.table-menu1 td.p10 {
    padding: 10px;
}

.table-menu1 tr:last-child td.rm1:first-child {
    /* for single row menu */
    border-radius: 12px 0 0 12px;
}

.table-menu1 tr:last-child td.rm1:last-child {
    /* for single row menu */
    border-radius: 0 12px 12px 0;
}

.table-menu1 tr:first-child td:first-child {
    border-radius: 12px 0 0 0;
}

.table-menu1 tr:first-child td:last-child {
    border-radius: 0 12px 0 0;
}

.table-menu1 tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

.table-menu1 tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}


/* outputlist-round */

table.outputlist-round {
    /*border-radius: 10px 10px 10px 10px;*/
    border-collapse: inherit;
    /*border: 1px;*/
    border: none;
	border-spacing:0px;
    
    /*font-size: 14px;*/
    /*font-family: arial;*/
}
/* table.outputlist-round thead tr {
    display: block;
}

table.outputlist-round tbody {
    display: block;
    overflow: auto;
    height: 200px;
    width: 100%;
} */

table.outputlist-round th:first-child {
    border-top-left-radius: 12px;
    border-left: 1px solid black;
}
table.outputlist-round th:last-child {
    border-top-right-radius: 12px;
    border-right: 1px solid black;
}
table.outputlist-round th {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    padding: 2px;
    color: #A7A7A7; 
    font-weight: bold;
    font-size: 18px; 
   /* background-image: url(../images/gradgraybar1.jpg); */
	background-color: #444444; /*  #383838 #36575F */
    height: 45px;
    text-align: center;
    /* white-space: nowrap; */
}
table.outputlist-round td {
    height: 45px;
	color: #000000;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    /*border: none;*/
    padding: 2px;
}
table.outputlist-round td:last-child {
    border-right: 1px solid black;
}
table.outputlist-round tr:nth-child(odd) td {
    background-color: #BBBBBB;
	/*height: 30px;*/
    /*white-space: nowrap; #828282*/
}
table.outputlist-round tr:nth-child(even) td {
    background-color: #E7E7E7;
	/*height: 30px;*/
    /*white-space: nowrap; #a7a7a7*/
}
table.outputlist-round tr.closer td {
    /*background-image: url(../images/gradgraybar1.jpg);*/
	background-color: #383838;
	color: #7C7C7C;
    white-space: nowrap;
}
table.outputlist-round td#kaboom {
    background-color: #f8a7a8;
    /* #d9534f */
}
table.outputlist-round tr#blue1 td {
    background-color: #0099FF; 
    /* #5AA4D7 #d9534f */
}
table.outputlist-round th a {
    color: #A7A7A7;
    /*font-size: 14px;*/
    height: auto;
}
table.outputlist-round a {
    /*font-size: 14px;*/
    height: auto;
}
table.outputlist-round a:hover {
    color: #006868;
    /*font-size: 14px;*/
    background-color: #C0C0C0;
    /* display: block; */
    height: auto;
}


/* Output */

table.output {
    border-radius: 10px 10px 0px 0px;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #000000;
    color: #000000;
    font-size: 14px;
    text-align: center;
}

table.output th {
    border-radius: 10px 10px 0 0;
    border: hidden;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 4px;
}

table.output td {
    background-color: #FFFFFF;
    padding: 4px;
}

/* output1 */

table.output1 {
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid black;
    color: #000000;
    /* font-size: 14px; */
}

table.output1 td {
    /* height: 25px; */
    border-bottom: 1px solid black;
    padding: 5px;
}

table.output1 th {
    border-bottom: 1px solid black;
    color: #FFFFFF;
    font-weight: bold;
    /* font-size: 14px; */
    background-image: url(../images/tablebar-1.gif);
    height: 25px;
    text-align: center;
    white-space: nowrap;
}

/* table.output1 th a {
    color: #FFFFFF;
    font-size: 14px;
    height: auto;
}

table.output1 a {
    font-size: 14px;
    height: auto;
}

table.output1 a:hover {
    color: Teal;
    font-size: 14px;
    background-color: #C0C0C0;
    display: block;
    height: auto;
} */

table.output1 tr:last-child td:last-child {
    border-bottom: none;
}

/* Output2 */

table.output2 {
    border-radius: 10px 10px 0px 0px;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #000000;
    color: #000000;
    font-size: 14px;
}

table.output2 th {
    border: hidden;
    border-spacing: 1px;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 4px;
}

table.output2 th:first-child {
    border-radius: 10px 0 0 0;
}

table.output2 th:last-child {
    border-radius: 0 10px 0 0;
}

table.output2 tr:nth-child(1) {
    background-color: #BFBFBF;
    text-align: center;
}

table.output2 tr:nth-child(2) {
    background-color: #A8BECD;
}

table.output2 tr:nth-child(3) {
    background-color: #A8BECD;
}

table.output2 td {
    padding: 4px;
}


/* Output2 Sub List */

table.output2s {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 1px;
    /*background-color: #000000;*/
    color: #000000;
    font-size: 14px;
    /*text-align: center;*/
}

table.output2s th {
    border: hidden;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 2px;
}

table.output2s tr:nth-child(even) {
    background-color: #BFBFBF;
    border: 1px solid black;
}

table.output2s tr:nth-child(odd) {
    background-color: #FFFFFF;
    border: 1px solid black;
}

table.output2s td {
    padding: 2px;
    border: 1px solid black;
}


/* Table Rounded Corners */

table.r1 {
    border-collapse: separate;
    /* border: 1px solid black; */
    border-spacing: 0px;
    border-radius: 8px;
}
table.r1 td {
    padding: 4px;
}
table.r1 tr:first-child td:first-child {
    border-top-left-radius: 8px;
}
table.r1 tr:first-child td:last-child {
    border-top-right-radius: 8px;
}
table.r1 tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
table.r1 tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Table Round Single column, no head */

table.roundedsc {
    border-radius: 12px 12px 12px 12px;
    border-spacing: 5px;
    border-collapse: separate;
}

/* Rounded */

.round {
    border-radius: 10px;
    /*border-spacing: 5px;*/
    /*border-collapse: separate;*/
}
.roundtop {
    border-radius: 10px 10px 0 0;
    /*border-spacing: 5px;*/
    /*border-collapse: separate;*/
}
.roundbottom {
    border-radius: 0px 0px 10px 10px;
    /*border-spacing: 5px;*/
    /*border-collapse: separate;*/
}

/* Output Grey */

.outputGrey th {
    color: #000000;
    font-size: 14px;
    font-family: arial;
    height: 25px;
    background-image: url(../images/tablebar-5.gif);
    background-position: bottom;
}

.outputGrey th a {
    color: #000000;
    height: auto;
}

.outputGrey th a:hover {
    color: #3882DB;
    /* background-color: #C0C0C0; */
    /* display: block; */
    height: auto;
}


/* Customer Page */

.customers td {
    background-color: #FFFFFF;
}

.customerslabel {
    color: #000099;
    font-weight: bold;
    font-size: 15px;
}

.customersvars {
    color: #000000;
    font-weight: bold;
    font-size: 15px;
}

.customersheader1 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 15px;
    /* background-image: url(../images/tablebar-1.gif); */
	background: linear-gradient(to top, var(--HeadColor4), var(--HeadColor4-2) 200%);
}
/* Customer Page Modal */
.CusPageModalHead {
    background-color: var(--ModalHeadColor1);
}
.CusPageModalFoot {
    background-color: var(--ModalFootColor1);
}



/* Vendor Page */

.vendors {
    width: 70%;
    color: #000000;
    background-color: #FFFFFF;
    /*	font-family: arial;
	font-size: 14px;
	border: 1px solid black;
	border-collapse: collapse;*/
    border-spacing: 10px;
}

.vendors td {
    background-color: #FFFFFF;
}

.vendorslabel {
    color: #8A8A92;
    font-weight: bold;
    font-size: 15px;
}

.vendorsvars {
    color: #000000;
    font-weight: bold;
    font-size: 15px;
}

.vendorsheader1 {
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    background-image: url(../images/tablebar-5.gif);
}

.vendorsbreak1 {
    color: #7D7D82;
    font-weight: bold;
    font-size: 14px;
    background-image: url(../images/tablebar-5.gif);
}

/* Copy Button */

.copy-button{
    height: 20px;
    /* width: 20px; */
    /* top: 0; */
    /* left: 5; */
	position: relative;
}
.ttip{
	background-color: #263646;
	padding: 0 14px;
	line-height: 27px;
	position: absolute;
	border-radius: 4px;
	z-index: 100;
	color: #fff;
	font-size: 12px;
	animation-name: ttip;
	animation-duration: .6s;
	animation-fill-mode: both
}
.ttip:before{
	content: "";
	background-color: #263646;
	height: 10px;
	width: 10px;
	display: block;
	position: absolute;
	transform: rotate(45deg);
	bottom: -4px;
	left: 17px;
}
#copied_ttip{
	animation-name: copied-ttip;
	animation-duration: 1s;
	animation-fill-mode: both;
	top: -35px;
	left:2px;
}

/* Button Animate after click NOT USED button on 1.asp */
input[type=submit].ba1 {
    transition: all 0.25s ease, color 1ms;
    text-align: center;
}

input[type=submit]:focus.ba1 {
    outline: 0;
}

input[type=submit].animate.ba1 {
    border-radius: 50%;
    background: transparent;
    color: transparent;
    border: 3px solid #337ab7;
    border-left-color: #ccc;
    animation: rotating 2s 0.25s linear infinite;
    animation-delay: 0s;
    width: 34px;
    height: 34px;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}