/*html {*/
/*  background-color: #301502;*/
/*  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#744526), to(#301502));*/
/*  background-image: -moz-linear-gradient(270deg, #744526, #301502);*/
/*  background-image: gradient(linear, 0% 0%, 0% 100%, from(#744526), to(#301502));*/
/*  filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#744526', EndColorStr='#301502');*/
/*  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#744526', EndColorStr='#744526')";*/
/*  height: 100%;*/
/*  width: 100%; }*/

/*body {*/
/*  background: #ebd8c4 url('header.jpg') no-repeat top center;*/
/*  width: 770px;*/
/*  margin: 0 auto;*/
/*  padding: 204px 0 104px 210px; }*/

body, input {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #3a2014;
}

.error {
	color: red;
}

/*h1 {
  display: none }
*/
h2 {
  font-weight: normal;
  color: #3a2014;
  margin: -10px 0 12px 0;
  font-size: 28px; }

h3 {
  color: #d33d1b;
  font-weight: normal;
  line-height: 1.4em; }

/*
table {
  border-collapse: collapse; 
}

table td {
  padding: 0 5px 5px 5px; 
}
*/

tfoot td {
  border-top: 3px solid #d23d1a;
  padding-top: 5px;
  font-weight: bold; }

fieldset {
  overflow: auto;
  border: 0;
  margin: 0;
  padding: 0; }

fieldset div {
  float: left; }

fieldset.centered div {
  text-align: center; }

label {
  color: #183b55;
  display: block;
  margin-bottom: 5px; }

label img {
  display: block;
  margin-bottom: 5px; }

input[type='button'] {
   color: white;
   font-weight: bold; 
   text-align: center;
   padding-top: 3px;
   padding-bottom: 6px;
   padding-right: 10px;
   padding-left: 10px;
   box-shadow: 4px 4px 4px #888888;
   background-color: #D5386F;
   height: 28px;
   border: 1px solid #888;
   border-radius: 15px;
   cursor: pointer;
}

input.text {
  border: 1px solid #bfbab4;
  margin: 0 4px 8px 0;
  padding: 3px;
  color: #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 5px 5px #e0e0e0;
  -moz-box-shadow: inset 0px 5px 5px #e0e0e0;
  box-shadow: inset 0px 5px 5px #e0e0e0; 
  font-size: 14px;
}


textarea.text {
  border: 1px solid #bfbab4;
  margin: 0 4px 8px 0;
  padding: 3px;
  color: #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 5px 5px #e0e0e0;
  -moz-box-shadow: inset 0px 5px 5px #e0e0e0;
  box-shadow: inset 0px 5px 5px #e0e0e0; 
  font-size: 14px;
}


select.text {
  border: 1px solid #bfbab4;
  margin: 0 4px 8px 0;
  padding: 3px;
  color: #1e1e1e;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 5px 5px #e0e0e0;
  -moz-box-shadow: inset 0px 5px 5px #e0e0e0;
  box-shadow: inset 0px 5px 5px #e0e0e0; 
  font-size: 14px;
}

.submit {
  display: block;
  background-color: #76b2d7;
  border: 1px solid #766056;
  color: #3a2014;
  margin: 13px 0;
  padding: 8px 16px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  font-size: 14px;
  -webkit-box-shadow: inset 3px -3px 3px rgba(0,0,0,.5), inset 0 3px 3px rgba(255,255,255,.5), inset -3px 0 3px rgba(255,255,255,.75);
  -moz-box-shadow: inset 3px -3px 3px rgba(0,0,0,.5), inset 0 3px 3px rgba(255,255,255,.5), inset -3px 0 3px rgba(255,255,255,.75);
  box-shadow: inset 3px -3px 3px rgba(0,0,0,.5), inset 0 3px 3px rgba(255,255,255,.5), inset -3px 0 3px rgba(255,255,255,.75); }

.purchase {
  margin: 20px 0 50px 0; }

.buy {
  padding: 8px 32px; }

.refund {
  display: inline;
  background-color: #decfb8;
  margin: 0;
  -webkit-box-shadow: inset -5px 5px 5px rgba(0,0,0,.5), inset 5px 0 5px rgba(255,255,255,.5), inset 0 5px 5px rgba(255,255,255,.75);
  -moz-box-shadow: inset -5px 5px 5px rgba(0,0,0,.5), inset 5px 0 5px rgba(255,255,255,.5), inset 0 5px 5px rgba(255,255,255,.75);
  box-shadow: inset -5px 5px 5px rgba(0,0,0,.5), inset 5px 0 5px rgba(255,255,255,.5), inset 0 5px 5px rgba(255,255,255,.75); }

.orange {
  font-weight: bold;
  color: #d8440a; }

.id {
  border: 3px solid #fff;
  border-radius: 5px;
  padding: 5px;
  width: 125px;
  margin-bottom: 50px; }

.error {
  width: 200px;
}

.error table {
  width: 100%;
  font-size: 11px;
  font-weight: bold;
  margin-top: 40px;
}

.required {
	/*background: #F2FFF2;*/
	background: #bcf6bc;
}

.datagridDiv {
   width: 600px;
   border: 1px solid black;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom-left-radius: 5px;
   /*    border-bottom-right-radius: 5px;*/
   box-shadow: 10px 10px 5px #A8A8A8;
   /*    overflow: auto;*/
}

.datagrid {
   width: 100%;
   background-color: #fff;
   margin: 0px;
   border-collapse: collapse;
   border-color: solid black;
}

   .datagrid th, .datagrid td {
      border-color: DarkGray;
   }

.datagrid caption {
   background-color: #002060;
   color: #fff;
   font-weight: bold;
   height: 1em;
   padding-top: 5px;
   padding-bottom: 5px;
   font-size: 1.2em;
}

.GridHeaderLink {
   padding: 4px 4px 4px 4px;
   BACKGROUND-COLOR: lightsteelblue;
   COLOR: teal;
   FONT-WEIGHT: bold;
   border-width: 1px;
   border-style: solid;
   border-color: DarkGray; 
}

.GridLink {
   padding: 4px 4px 4px 4px;
   BACKGROUND-COLOR: white;
   COLOR: black;
   border-width: 1px;
   border-style: solid;
   border-color: DarkGray;
}

.GridCell {
   padding: 4px 4px 4px 4px;
}

.GridBackground {
   BACKGROUND-COLOR: lightcyan
}

.GridBackground2 {
   BACKGROUND-COLOR: white;
}

.GridRowError {
   BACKGROUND-COLOR: Red;
}

.GridRowAdded {
   BACKGROUND-COLOR: LightSteelBlue;
}

.GridRowUpdated {
   BACKGROUND-COLOR: lightgreen;
}

.GridRowDeleted {
   BACKGROUND-COLOR: MistyRose;
}

.GridRowSelected {
   BACKGROUND-COLOR: lightblue;
}

A.GridSort:link {
   FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
   HEIGHT: 20px;
   COLOR: blue;
   FONT-SIZE: 15px;
   TEXT-DECORATION: none;
}
#loadingIcon {
   position: absolute;
   width: 50%;
   height: auto;
   top: 10%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.input-container {
   display: flex;
   justify-content: center; /* Center the text horizontally */
   align-items: center; /* Center items vertically */
   position: relative;
   width: 100%;
}

/*.input-container span {
   width: 100%;
   display: flex;
   justify-content: center;*/ /* Center the text horizontally */
   /*align-items: center;*/ /* Center items vertically */
   /*position: relative;*/
   /*padding-right: 30px;*/ /* Space for the icon */
   /*box-sizing: border-box;
}*/

   .input-container .icon {
      position: absolute;
      right: 5px; /* Position the icon inside the field */
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer; /* Make the icon look clickable */
      /*pointer-events: none;*/ /* Make the icon non-clickable */
   }
.bordered-div {
   border: 1px solid black;
   padding: 5px;
   margin: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: inset 0px 5px 5px #e0e0e0;
   -moz-box-shadow: inset 0px 5px 5px #e0e0e0;
   box-shadow: inset 0px 5px 5px #e0e0e0;
}
.container {
   max-width: 450px; /* Limits the maximum width to 450 pixels */
   /*width: 100%;*/ /* Ensures it scales for smaller screen sizes */
   margin: 0 auto; /* Centers the div horizontally */
   background-color: lightblue; /* Adds a background color for visibility */
   padding: 10px; /* Adds padding for inner spacing */
}


.crunched-table {
   border-collapse: collapse;
}

.crunched-table tr {
   margin-bottom: 0;
}

, .crunched-table th, .crunched-table td {
   padding: 1px; /* Adjust padding as needed */
}

.hr-with-text {
   display: flex;
   align-items: center;
   text-align: center;
   margin: 5px 0;
}

   .hr-with-text::before,
   .hr-with-text::after {
      content: "";
      flex: 1;
      border-bottom: 1px solid #000;
}

.hr-with-text:not(:empty)::before {
   margin-right: 10px;
}

.hr-with-text:not(:empty)::after {
   margin-left: 10px;
}

.hr-with-shadow {
   display: flex;
   align-items: center;
   text-align: center;
   margin: 5px 0;
}

.hr-with-shadow::before,
.hr-with-shadow::after {
   content: "";
   flex: 1;
   border-bottom: 1px solid #000;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Drop shadow for the line */
}

.hr-with-shadow:not(:empty)::before {
   margin-right: 10px;
}

.hr-with-shadow:not(:empty)::after {
   margin-left: 10px;
}

.button {
   display: inline-flex; /* Enables flexbox layout */
   align-items: center; /* Centers items vertically */
   justify-content: center; /* Centers items horizontally */
   color: white;
   font-weight: bold;
   text-align: center;
   padding-top: 3px;
   padding-bottom: 6px;
   padding-right: 10px;
   padding-left: 10px;
   box-shadow: 4px 4px 4px #888888;
   background-color: #D5386F;
   height: 28px;
   border: 1px solid #888;
   border-radius: 15px;
   cursor: pointer;
}

.button img {
   width: 100%;
   height: 100%;
   display: block;
   margin-left: 5px;
   padding: 2px;
}

.scrollable {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   /*width: 650px;*/
   width: 90%;
   height: 150px;
   overflow-x: auto; /* Enables horizontal scrolling */
   overflow-y: hidden;
   border: 1px solid black;
   white-space: nowrap;
   padding: 5px;
   margin: 5px;
   background-color: AliceBlue;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: inset 0px 5px 5px #e0e0e0;
   -moz-box-shadow: inset 0px 5px 5px #e0e0e0;
   box-shadow: inset 0px 5px 5px #e0e0e0;
}

.image-container {
   position: relative;
   border: 1px solid black;
   width: 130px;
   height: 120px;
   min-width: 130px;
/*   max-height: 120px;*/   
   margin: 5px;
}

.image-container input[type="checkbox"] {
   position: absolute;
   top: 10px; /* Adjust position */
   left: 10px; /* Adjust position */
}

.image-container img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   margin: 0;
   padding: 0;
}