@charset "utf-8";
/* CSS Document */

/* MY CODE */

@import url('https://fonts.googleapis.com/css?family=Roboto');

.vinContainer {
	width: 90%;
	margin: auto;
}

.card-container {
	margin-bottom: 100px;
	min-height: 600px;
	border: 8px solid;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px;
	width: 400px;
	height: 500px;
    overflow: hidden; /* Ensures chart doesn't overflow rounded corners */
}

.card-header {
    background-color: #f8f8f8;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.card-body {
	padding: 15px;
}

.scrollable-list {
	max-height: 400px; /* Set a fixed height for the scrollable area */
	overflow-y: auto; /* Enable vertical scrolling when content overflows */
	list-style: none; /* Remove default list bullets */
	padding: 0;
	margin: 0;
}

.scrollable-list li {
	display: flex;
	justify-content: space-between; /* Distribute space between items */
	padding: 8px 8px;
	border-bottom: 1px solid #eee;
}

.scrollable-list li:last-child {
  border-bottom: none; /* Remove border from the last item */
}

.low-pulse {
	color: rgba(255, 159, 64);
	background-color: rgba(255, 205, 186, 0.5);
}

#mobileContainer { display:block; }
@media only screen and (orientation:portrait){
  #mobileContainer {
   height: 100vw;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
  }
}

.vinHeader {
	height: 100px;
	background:#fff;
	background-image: url(../../assets/images/header_background.png);
	background-repeat:no-repeat;
	background-position:right;
}

.vinFooter {
	width: inherit;
	position: fixed;
	bottom: 0px;
	height: 50px;
 	padding: 0px 0px; 
	border-top: solid 4px #db4865;
	 background-image:
    linear-gradient(
      to left, 
      #222222, #222222
    ); 
}

.vinFooter p {
	color: #BBB;
	padding-left: 50px;
	line-height: 15px;
	vertical-align: middle;
}

.vinCenterDiv {
	display: flex;
	justify-content: center;
	align-items: center; 
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	/* Chrome, Safari, Opera */
	/* -webkit-transform: translate(-50%, -50%); */	
}

.vinCenter {
    display: table;
    margin-left: auto;
    margin-right: auto;
    align-items: center; 
}

.vinText {
	color: #db4865;
	border: 0px;
	font-weight: bold;
}

.hideListItem {
    display: none;
}

div.fieldSet {
	border: solid black thin;
	width: 100%;
	background-color: #dce6f2;
} 

fieldset {
	border: none;
	margin-left: 10px;
	margin-right: 10px;
	padding: 0px;
}

label.field {
	text-align: right;
	width: 100%;
	float: left;
	font-weight: bold;
}

input.textbox-300 {
	width: 300px;
	float: right;
	margin-left: 10px;
}

input.textbox-220 {
	width: 220px;
	float: right;
	margin-left: 10px;
}

fieldset p {
	clear: both;
	padding: 5px;
}

label span, .required {
	color: red;
	font-weight: bold;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	border-radius: 3px;
    font-size: 1.00em;
    font-weight: 700;
    color: white;
    background-image: url(ui-bg-btn.png);
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
    float: left;
    text-align: right;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-image: url(ui-bg-btn-selected.png);
}

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

.handCursor {
	cursor: pointer;
}

/* style for analytics page */
.vinFormLayout_right
{
	/*background-color: #f3f3f3;
	border: solid 1px #a1a1a1;*/
	
	padding: 1px;
	width: auto;
	float:left;
}
    
.vinFormLayout_right label
{
	display: block;
	width: 210px;
	float: left;
	margin-bottom: 1px;
	text-align: right;
	padding-right: 10px;
}


.vinFormLayout_left
{
	/*background-color: #f3f3f3;
	border: solid 1px #a1a1a1;*/
	
	padding: 1px;
	width: auto;
	float: left;
}
   
.vinFormLayout_left label
{
	display: block;
	width: 210px;
	float: left;
	margin-bottom: 1px;
	text-align: right;
	padding-right: 10px;
}

.vinFormLayout_left_no_newline
{
	/* background-color: #f3f3f3;
	border: solid 1px #a1a1a1;
	*/
	padding: 0px;
	width: auto;
	float: left;
}
   
.vinFormLayout_left_no_newline label
{
	display: inline-block;
	float: left;
	margin-bottom: 10px;
	text-align: right;
	padding-right: 20px;
}

.vinPopup {
	display:none;
	position:absolute;
/* 	z-index:999999; */
	border:1px solid #000;
	background:#ffcc00;
	max-width:auto;
	padding:0px 5px 0px 5px;
	margin:0 auto;
	border-radius:6px;
}

.vinTeal {
	color: teal;
}

.vinRed {
	color: red;
}

.vinGreen {
	color: green;
}

.vinBlack {
	color: black;
}

.vinPreserveCR {
	white-space: pre-wrap;
}

.mapContainer {
	width: 100%;
	height: calc(100vh - (300px));
	margin: 0 auto;
}

.mapContainerAdmin {
	width: 100%;
	height: calc(100vh - (420px));
	margin: 0 auto;
}

.mapContainerDlg {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border: 16px solid #f3f3f3; /* Light grey */
	border-radius: 50%;
	border-top: 16px solid blue;
 	border-right: 16px solid green;
 	border-bottom: 16px solid red;
 	border-left: 16px solid pink;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.green-bar-style .ui-progressbar-value {
	background: #7fb80e;
}
.orange-bar-style .ui-progressbar-value {
	background: #f47920;
}
.yellow-bar-style .ui-progressbar-value {
	background: #ffe600;
}
.red-bar-style .ui-progressbar-value {
	background: #d50000;
}

.grayLine {
  color: #A9A9A9;
  overflow: hidden;
  text-align: center;
}

.grayLine:before,
.grayLine:after {
  background-color: #A9A9A9;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 40%;
}

.grayLine:before {
  right: 0.5em;
  margin-left: -40%;
}

.grayLine:after {
  left: 0.5em;
  margin-right: -40%;
}


@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.socialButton:hover {
	cursor: pointer;
}