.customerTable tr:hover td{
	background-color: #7fb926;
	color: white;
}

#tableContainer {
    min-height: 71vh;
    max-height: 71vh;
    overflow-y: auto;
}

#tableContainer table {
    width: 100%;
    border-collapse: collapse;
}

#tableContainer thead th {
    position: sticky;
    top: 0;
    background: #6f6e71;
    color: white;
    z-index: 10;
    padding: 10px;
    border-bottom: 2px solid #ddd;
}

#tableContainer thead th input{
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: none;
}

#tableContainer td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

input[type="search"] {
    border: 1px solid gray;
    padding: .2em .4em;
    border-radius: .2em;
}

input[type="search"].dark {
    background: #222;
    color: #fff;
}

input[type="search"].light {
    background: #fff;
    color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url("../fonts/fontawesome-free-5.15.1-web/svgs/regular/times-circle.svg") no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .8;
    pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}


#showCase {
    display: none;
}





tr:nth-of-type(2n){
	background-color: #EAECED;
}

.customerTable tbody tr:nth-of-type(2n+1){
	background-color: white;
}

.detailsForm > div {
	display: block;
	background-color: #4b4a4d;
	padding: 5px;
}

.detailsForm > div > div{
	display: block;
	overflow: auto;
	color: white;
}

.detailsForm > div:nth-child(1){
    Display: block;
    text-align: right;
    color: white;
}

.detailsForm > div > div > div{
	padding: 10px;
}

.detailsForm > div > div > div:nth-child(1){
	display: block;
	width: calc(50% - 40px);
	float: left;
	min-width: 250px;
}

.detailsForm > div > div > div:nth-child(2){
	display: block;
	width: 50%;
	float: right;
	min-width: 250px;
}

.detailsForm > div > div > div > label{
	color: white;
}

.detailsForm input[type=text]{
	display: block;
	background-color: white;
	border: none;
	width: 100%;
}

.detailsForm input[type=text][readonly]{
	background-color: #828b90ee;
	color: white;
}

.detailsForm select{
	display: block;
	background-color: white;;
	width: 100%;
	border: none;
	height: 26px ;
}

#closeButton {
    background: none;
    border: none;
    color: white;
    top: 10px;
    right: 10px;
    cursor: pointer;
    float: right;
}

#closeButton:hover {
    color: #6f6e71;
}


#customerView {
    float: right;
}

#showCaseHeader {
    display: block;
    background-color: #99c751;
    color: white;

}