@font-face {
	font-family:'Montserrat';
	src: url('Montserrat-Regular.eot');
	src: local('Montserrat-Regular'),
		url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Montserrat-Regular.woff') format('woff'),
		url('../fonts/Montserrat-Regular.ttf') format('truetype'),
		url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
	font-weight:normal;
	font-style: normal;
  }
  @font-face {
	font-family:'NotoSans';
	src: url('NotoSans.eot');
	src: local('NotoSans'),
		url('../fonts/NotoSans.eot?#iefix') format('embedded-opentype'),
		url('../fonts/NotoSans.woff') format('woff'),
		url('../fonts/NotoSans.ttf') format('truetype'),
		url('../fonts/NotoSans.svg#NotoSans') format('svg');
	font-weight:normal;
	font-style: normal;
  }
  @font-face {
	font-family: 'Michelin';
	src: url('Michelin-Bold.eot');
	src: local('Michelin Bold'), local('Michelin-Bold'),
		url('../fonts/Michelin-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Michelin-Bold.woff2') format('woff2'),
		url('../fonts/Michelin-Bold.woff') format('woff'),
		url('../fonts/Michelin-Bold.ttf') format('truetype'),
		url('../fonts/Michelin-Bold.svg#Michelin-Bold') format('svg');
	font-weight: bold;
	font-style: italic;    
  }
  
  /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
  article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
  figure{ margin:0px; padding:0px;}
  audio,canvas,video { display: inline-block;}
  section{width:100%; clear: both; content: " "; display: table; padding:0px 0}
  
  * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  }
  /*************************
  *******Typography******
  **************************/
  
  .clearfix:before,
  .clearfix:after {
  content: " ";
  display: table;
  }
  .clearfix:after {
  clear: both;
  }
  html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  }
  
  body {padding: 0; margin: 0; font-family: 'NotoSans', sans-serif !important; font-size:15px; background:#fff; color:#696969; position:relative;}
  .mat-body, .mat-body-1, .mat-typography{font:400 15px/20px 'NotoSans', sans-serif !important;}
  
  input, textarea, select, code, kbd, pre, samp {font-family:'NotoSans', sans-serif !important;}
  
  
  /* set image max width to 100% */
  img {max-width: 100%; border:none; height: auto; width: auto\9; /* ie8 */}
  img{ display:block;}
  
  p{ margin:0px 0 20px 0; padding:0px;}
  .pos{position:relative;}
  
  .bglightGray{background-color:#f3f3f3 !important;}
  .fntblue{color:#28509b !important;}
  .fntblack{color:#333 !important;}
  .fntwhite{color:#fff !important;}
  
  .red{ color:#e60000 !important;}
  
  #maindiv{padding-top:82px;}
  #maindiv.loginBg{padding-top:0px;}
  
  a{ color:#27509b; text-decoration:none; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;}
  a:hover{ color:#040707; text-decoration:none;}
  
  h1, h2, h3, h4 {font:normal 1.5em/1.2em 'Michelin', sans-serif !important;  color:#28509b;}
  h1{ font:normal 1.7em/1.5em 'Michelin', sans-serif !important;}
  h2 {font:normal 1.5em/1.2em 'NotoSans', sans-serif !important; padding:0px; margin:5px 0 20px 0;}
  h3{font:normal 1.3em/1.1em 'NotoSans', sans-serif !important; padding:0px; margin:5px 0 15px 0;}
  h4{font:normal 1.1em/1em 'NotoSans', sans-serif !important; padding:0px; margin:5px 0 15px 0;}
  ul{ list-style:none; margin:0px; padding:0px;}
  
  .mat-h2, .mat-typography h2{font:normal 1.5em/1em 'Michelin', sans-serif !important}
  .mat-h3, .mat-typography h4{ font-size:1.3em; font-weight:normal;}
  
  .pgeTitle{text-align:center; color:#28509b;}
  .pgeTitle h1{text-align:center; color:#28509b; margin:0px !important; padding:0px; line-height: inherit !important;}
  
  *:focus {outline: none;}
  
  /*header css start from here */
  header { background-color:#fff; padding:10px 0; -webkit-box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2); -moz-box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2); box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2); position: fixed; top:0px; left:0px; z-index:99; width: 100%; background-color:#fff;}
  /*header.fixed{position: fixed; z-index:99; width: 100%;}*/
  header #logo{ width:100px; float:left; margin-right:20px;}
  header #logo img{ display:block}
  header nav{ width:72%; float:left;}
  /*header nav ul{ float:right}
  header nav li{ display:inline-block; font-size:13px; font-weight:300}
  header nav li + li{ border-left:1px solid #333333}
  header nav li a{ padding:0px 10px; display:block; text-decoration:none; color:#27509b;}*/
  
  #menu {margin-top:20px; padding: 0; border: 0; list-style: none; display: block; position: relative; font-size: 14px; /*font-family: TimesNewRoman, "Times New Roman", Times, Georgia, serif; font-weight:bold;*/ font-family: 'NotoSans', sans-serif; }
  #menu:after, #menu > ul:after {content: ".";	display: block;	clear: both; visibility: hidden; line-height: 0; height: 0;}
  #menu #menu-button {display: none;}
  #menu > ul > li {float: left; position:relative; border-top:2px solid transparent; 
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;}
  #menu > ul > li:hover{border-top:2px solid #28509b; /*position:absolute; left:0px; top:0px;*/}
  #menu > ul > li+li{ margin-left:10px;}
  #menu.align-center > ul {font-size: 0; text-align: center;}
  #menu.align-center > ul > li {display: inline-block;	float: none;}
  #menu.align-center ul ul {text-align: left;}
  #menu.align-right > ul > li {float: right;}
  #menu > ul > li > a {padding: 5px;  text-decoration: none; color: #27509b; display:block;}
  #menu > ul > li:hover > a {color: #4f4f4f;}
  #menu > ul > li.has-sub > a {/*padding-right: 30px;*/}
  /*#menu > ul > li.has-sub > a:after {position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd;	content: '';}
  #menu > ul > li.has-sub > a:before {position: absolute; top: 19px; right: 14px;	display: block;	width: 2px;	height: 8px; background: #dddddd; content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  }*/
  #menu > ul > li.has-sub:hover > a:before {top: 23px; height: 0;}
  #menu ul ul {position: absolute; left: -9999px; z-index:99; background: #fff; padding:15px 22px 15px 22px; border-bottom-left-radius:3px; border-bottom-right-radius:3px;
  -webkit-box-shadow:0px 5px 8px 0px rgba(0, 0, 0, 0.09);
  -moz-box-shadow:0px 5px 8px 0px rgba(0, 0, 0, 0.09);
  box-shadow:0px 5px 8px 0px rgba(0, 0, 0, 0.09);
  }
  #menu.align-right ul ul {text-align: right;}
  #menu ul ul li {font-family: 'NotoSans', sans-serif; font-weight: normal;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  }
  #menu li:hover > ul {left: auto;}
  /*#menu li li:hover > ul{right: -101%;}*/
  #menu.align-right li:hover > ul {left: auto;	right: 0;}
  #menu li:hover > ul > li {/*height: 35px;*/ color: #dddddd; background: #fff; position:relative;}
  #menu ul ul ul {margin-left: 100%; top: 0;}
  #menu.align-right ul ul ul {margin-left: 0;	margin-right: 100%;}
  #menu ul ul li a {border-left: 1px solid rgba(150, 150, 150, 0.15); padding:7px 7px 7px 15px; width: 170px; display:block;	font-size: 12px; text-decoration: none;}
  #menu ul ul li:last-child > a, #menu ul ul li.last-item > a {border-bottom: 0;}
  #menu ul ul li:hover > a, #menu ul ul li a:hover {color:#4f4f4f; font-weight:bold;}
  #menu ul ul li.has-sub > a:after {position: absolute; top: 16px;	right:-3px; width: 8px; height: 2px; display: block; background: #27509b; content: ''; display:none;}
  #menu.align-right ul ul li.has-sub > a:after {right: auto; left: 11px;}
  /*#menu ul ul li.has-sub > a:before {position: absolute;top: 13px; right:0px; display: block; width:0px; height:0px; content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;	
  border-top:5px solid transparent;  border-bottom:5px solid transparent; border-left:5px solid #27509b; z-index:9;}*/
  #menu ul ul li > a:before {position: absolute;top: 10px; right:0px; display: block; width:0px; height:0px; content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;	
  border-top:5px solid transparent;  border-bottom:5px solid transparent; border-left:5px solid #27509b; z-index:9;}
  #menu ul ul li:hover > a:before{right:auto; left:0px;}
  #menu.align-right ul ul li.has-sub > a:before {right: auto; left: 14px;}
  #menu ul ul > li.has-sub:hover > a:before {top: 13px; height: 0;}
  
  #menu > ul > li.active > a {padding-right: 30px;}
  #menu > ul > li.active > a:after {position: absolute; top:10px; right: 11px; width: 8px; height: 2px; display: block; content: '';
  width:0; height:0; border-top:6px solid #27509b; border-left:5px solid transparent; border-right:5px solid transparent; 
  }
  
  
  .rightTop{width:135px; float:right; margin-top:20px;}
  .rightTop ul{float:right;}
  .rightTop a{color:#4f4f4f; font-size:14px; margin:0px 2px; width: 25px; height: 25px; display: inline-block; text-align: center; border:1px solid #4f4f4f; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
  .rightTop a:hover{color:#135F90; border:1px solid #135F90;}
  /*header css end from here */
  
  .fullWidth {width: 100%;}
  /*.container{ max-width:1122px; margin:0 auto;}*/
  /*.inrPage, .mainBnr{ margin-top:75px;}*/
  .inrPage, .mainBnr{ margin-top:0px;}
  
  .mainBnr{background:url(../images/main-bnr.jpg) no-repeat 50% 100%; background-size:100%;}
  .mainBnr .container{height:300px;}
  .mainBnr .dName{ position:absolute; left:15px; bottom:35px; color:#fff; font-size:1.4em;}
  
  .linehr{background:#fff; position:relative; z-index:1; padding-right:20px;}
  .newsUpdate h2:after{ position:absolute; right:0px; bottom:2px; width:100%; content:''; display:inline-block; border-bottom:1px solid #28509b; width:100%; height:2px;}
  
  /*Chart css start */
  .chartWrap{background-color:#244b90; color:#fff; padding:30px; font-weight:bold;}
  .chartCaption{font-size:12px; color:#7d9fde; border-top:1px solid #7d9fde; padding-top:10px; min-height:40px;}
  .bglightGray .chartCaption{color:#a3a4a2; border-top:1px solid #a3a4a2;}
  
  .announcements{ background:url(../images/announcements-bg.jpg) no-repeat 100% 0% #fce500; background-size:57%; margin-bottom:40px;}
  /*.announcements .virtualCode:before{ content:''; display:block; position:absolute; left:0px; top:0px; height:100%; width:100%; background:url(../images/announcements-bg.jpg) no-repeat 100% 0%; background-size:contain;}*/
  .virtualCodeData ul{ display:flex; color:#fff; width:55%; font-size:.9em; margin-bottom:2px; border-bottom:1px solid #fff;}
  .virtualCodeData ul li{ padding:10px 0px; margin:0px 0px; min-width:50%}
  .virtualCodeData ul:last-child{border-bottom:none;}
  
  /*Global input css*/
  .form-control::-webkit-input-placeholder {color:#333333 !important;} 
  .form-control:-moz-placeholder {color:#333333 !important;} 
  .form-control::-moz-placeholder {color:#333333 !important;} 
  .form-control:-ms-input-placeholder {color:#333333 !important; }
  
  .form-control {background:#fff; color:#333; font-size:14px; width:100%; height:35px; padding:1px 10px; border:none; border: 1px solid #28509b; border-radius:2px;}
  .form-control:focus {outline-width: 0;}
  .form-submit{ border:none; background:#48c9f2; padding:5px 25px; height:28px; clear:both; border:none; cursor:pointer;  font-size:16px; color:#fff; text-decoration:none; margin-top:5px; margin-bottom:10px;}
  
  
  
  /*Form error global class */
  .has-error .form-control{border:1px solid #a94442;}
  .has-error .with-errors{font-size:13px; color:red; margin-bottom: 6px; display: block;}
  .has-validation-callback .message{padding:.5rem !important;}
  /*Global input css end*/
  
  .loginWrap .form-control::-webkit-input-placeholder {color:#222 !important; opacity:1;} 
  .loginWrap .form-control:-moz-placeholder {color:#222 !important; opacity:1;} 
  .loginWrap .form-control::-moz-placeholder {color:#222 !important; opacity:1;} 
  .loginWrap .form-control:-ms-input-placeholder {color:#222 !important; opacity:1;}
  
  .loginBg{background:url(../images/login-bg.jpg) no-repeat; background-size:100%; height:100vh;}
  .loginBg:before{ content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,.5); position:absolute;}
  .loginWrap{width:450px; background:#fff; text-align:center; min-height:400px; padding:45px; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
  .loginWrap img{ display:inline-block; width:180px;}
  .loginWrap li{border-bottom:1px solid #222; margin-bottom:20px;}
  .loginWrap .form-control{ border:none; padding:1px 0px;}
  .SubmitBtn{width:100%; height:40px; border:none; background-color:#fce500; text-transform:uppercase; font-weight:bold; text-align:center; margin-top:15px; cursor:pointer;}
  .frmlink{color:#27509b;    cursor: pointer;}
  .frmlink a{color:#27509b;}
  
  .btmInfo {background-color:#f3f3f3; text-align:center; color:#333;}
  .btmInfo h4{color:#333;}
  .btmInfo .fa-phone{color:#27509b; border:1px solid #27509b; padding:3px; width:22px; height:22px; margin:10px 0px; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
  .section-padding{ padding-top:40px; padding-bottom:40px;}
  .noContainer{padding-left:20px; padding-right:20px;}
  
  footer{ margin-top:40px;}
  footer .copyright{color:#fff; padding:10px 0 10px 0; position:relative;background:#28509b; font-size:12px;}
  footer .copyright .container{display:flex; justify-content: space-between; align-items:center}
  footer .copyright .fright{text-align: right; display:none;}
  footer .copyright a{ color:#fff; text-decoration:none}
  footer .fa-facebook{border:1px solid #fff;  padding:3px; width:20px; height:20px; text-align:center;margin-right: 10px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
  footer .createdBy a{color:#fff;}
  
  /* Checkbox css start */
  label input {display: none; /* Hide the default checkbox */}
  /* Style the artificial checkbox */
  label span {height:25px; width:25px; border:2px solid #28509b; margin-right:8px; color:#fff; display: inline-block; vertical-align:middle; position: relative; font-size:23px; font-weight:bold;}
  /* Style its checked state...with a ticked icon */
  [type=checkbox]:checked + span:before {content: '\2714';  position: absolute;  top:0px;  left:0px; width: 100%; height: 100%; line-height: 1; color:#fff;  background-color:#28509b;}
  /* Checkbox css end*/
  
  /*table format css*/
  .table .thead-light th{color:#28509b;}
  .table-striped tbody tr:nth-child(odd) {background-color:transparent;}
  .table-striped tbody tr:nth-child(even) {background-color: #f9f9f9;}
  .table td{font-size:13px;}
  /*table format css end */
  
  /* Inner page css start */
  .inrPage{ padding:7px 0px 25px 0px !important;}
  .min-heightGlobal { min-height:300px;}
  .more{display:none;}
  
  .btn-primary{background-color:#28509b; border-color:#28509b;}
  .btn-primary:hover{background-color:#222;}
  
  .btn-outline-primary {color: #28509b; border-color: #28509b;}
  
  /*.btn.disabled, .btn[disabled], fieldset[disabled] .btn {cursor: not-allowed; pointer-events: none; opacity: .65; filter: alpha(opacity=65);    -webkit-box-shadow: none; box-shadow: none; background-color: #fff; border-color: #ccc;}*/
  
  .tabs .nav-item{background-color:transparent; border:2px solid #28509b; color:#28509b;}
  .tabs .nav-item.active{background-color:#28509b; color: #fff; border-color: #28509b;}
  
  .btnRightTp{position:absolute; right:20px; top:10px;}
  
  /* step wizard css*/
  .stepwizard-row {display: table-row;}
  .stepwizard {display: table;  width: 100%; position: relative;}
  .stepwizard-step button[disabled] {opacity: 1 !important; filter: alpha(opacity=100) !important;}
  .stepwizard-row:before {top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0;}
  .stepwizard-step {display: table-cell; text-align: center; position: relative;}
  .btn-circle {width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px;}
  /* step wizard css end*/
  
  /* Modal popup css start */
  .modal-dialog{max-width:700px;}
  .modal-body {padding:15px 30px 20px 30px;}
  .modal-body h2 {margin-bottom: .5rem;}
  .modal-body hr {margin-top: .5rem;}
  .modal-header{ border-bottom:none; padding: 0; border: 0; position: absolute;  right:20px; top:13px; z-index:9}
  .close {color:#28509b; font-size:55px;font-weight: lighter; line-height:32px; padding: 0; z-index: 1; margin-right: 0px; margin-top: 0px; opacity: .8;}
  .story_modal h3{ font-weight:700; margin-bottom:25px; color:#28509b;}
  .story_modal p{ font-size:14px;}
  /* Modal popup css end */
  
  /*Loader css*/
  .loader span{text-align:center; background:rgba(255,255,255,0.7);  border-radius:0.125rem; padding: 40px; color: #ccc; top: 50%; left: 50%; margin-left: -86px;    margin-top: -80px;  position: fixed;  z-index: 99999; display: block; font-size: 20px;}
  
  .brcrumb{color:#28509b;}
  .brcrumb h2 {margin-bottom:5px !important; font-size: 1.2em !important; font-family:'NotoSans', sans-serif !important; text-transform:uppercase;}
  
  /* border css we can use global*/
  .bdr-top{border-top:1px solid #ccc !important;}
  .bdr-bottom{border-bottom:1px solid #ccc !important;}
  .bdr-left{border-left:1px solid #ccc !important;}
  .bdr-right{border-right:1px solid #ccc !important;}
  
  .bdr-top-none{border-top:none !important;}
  .bdr-bottom-none{border-bottom:none !important;}
  .bdr-left-none{border-left:none !important;}
  .bdr-right-none{border-right:none !important;}
  /* border css we can use global end*/
  
  /* Popup Format start */
  .modal-body .ng-star-inserted .row hr{margin-top:0px; margin-bottom:0px;}
  .modal-body .ng-star-inserted .row label{ margin-bottom:0px;}
  /*.modal-body .ng-star-inserted .row h4{ margin-bottom:0px;}*/
  .modal-body .ng-star-inserted .row{background-color: #f3f3f3; word-wrap: anywhere; margin:0px;}
  .modal-body .ng-star-inserted .row:nth-child(odd){background-color: #fff;}
  .modal-body .ng-star-inserted .row > [class*='col-'] {border:1px solid #ccc; padding:5px;}
  .modal-body .ng-star-inserted .row + .row [class*='col-'] {border:1px solid #ccc; border-top:none;}
  .modal-body .ng-star-inserted .row .row > [class*='col-']{/*border:none;*/ border-right:none;}
  .modal-body .ng-star-inserted .row .row > [class*='col-']{border-right:none;}
  
  .modal-body .ng-star-inserted .row .row > [class*='col-']:first-child{/*border:none;*/ border-left:none;}
  
  /*.modal-body .ng-star-inserted .row .row{margin:0px -5px;}*/
  
  .modal-body .form-inline{ margin-bottom:0px;}
  
  .modal-body .ng-star-inserted .row .form-group label{width:100%; justify-content: left;}
  
  .iconCell{display: flex !important; justify-content: center; align-items: center;}
  
  .ltr {direction:ltr;}
  .rtl {direction: rtl;}
  
  .inrPage .container.min-heightGlobal{ background-color:#fff; padding:1.5rem;}
  .inrPage .container.min-heightGlobal .box-dealer-order-dashboard{padding:0px;}
  .ag-theme-alpine{margin-top:15px !important;}
  .form-control[type="file"]{line-height: 20px; padding: 3px 5px;}
  .gblebulletList li{ list-style-type: disc !important;line-height: 1.8em; margin-left: 15px;}
  
  
  /*Tabs css start */
  #tabs{width:100%; border-bottom:1px solid #ccc;}
  #tabs .nav-tabs{width: max-content; border-bottom:none;}
  #tabs .nav-tabs .nav-link {border-bottom:none; border-top-left-radius: .25rem; border-top-right-radius: .25rem; color: #eee; font-size: 20px;	padding:0px; background-color:transparent; color:#28509b;}
  #tabs .nav-tabs .nav-item.show .nav-link, #tabs .nav-tabs .nav-link.active { color: #f3f3f3;  background-color:#fff; border-color: transparent transparent #28509b; border-bottom: 4px solid !important; font-size: 20px; font-weight: bold;}
  #tabs .nav-tabs .nav-link.active { color: #f3f3f3;  background-color:#fff; border-bottom: 4px solid #28509b !important; font-size: 20px; font-weight: bold;}
  #tabs .nav-tabs .btn, .gbleTabs .nav-tabs .btn{ background-color:transparent; color:#28509b; width:100%; height:100%; border:none; border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; padding: .1rem .85rem;}
  #tabs .nav-tabs .btn:focus, .gbleTabs .nav-tabs .btn:focus{outline:none; border:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}
  #tabs .nav-tabs .nav-link:focus, #tabs .nav-tabs .nav-link:hover, .gbleTabs .nav-tabs .nav-link:hover{background-color:transparent; color:#28509b;}
  .gbleTabs .btn-primary:not(:disabled):not(.disabled):active{}
  /*Tabs css end */
  
	/* transaction Nav Tab active class */
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #495057;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
	border-top-color: #28509b;
	border-top-width: 3px;
  }
  /* end transaction Nav Tab active class */
  
  
  /* model-lg class */
  .modal-lg{
	max-width: 800px;
  }
  /* end model-lg class */
  
  
  
  /*  //Newly added 8/6/24 from here */
  
  .graph {
	  margin-bottom:1em;
	font:normal 100%/150% arial,helvetica,sans-serif;
  }
  
  .graph caption {
	  font:bold 150%/120% arial,helvetica,sans-serif;
	  padding-bottom:0.33em;
  }
  
  .graph tbody th {
	  text-align:right;
  }
  
  @supports (display:grid) {
  
	  @media (min-width:32em) {
  
		  .graph {
			  display:block;
		width:600px;
		height:300px;
		  }
  
		  .graph caption {
			  display:block;
		  }
  
		  .graph thead {
			  display:none;
		  }
  
		  .graph tbody {
			  position:relative;
			  display:grid;
			  grid-template-columns:repeat(auto-fit, minmax(2em, 1fr));
			  align-items:end;
			  height:100%;
			  margin:3em 0 1em 2.8em;
			  padding:0 1em;
			  border-bottom:2px solid rgba(0,0,0,0.5);
			  background:repeating-linear-gradient(
				  180deg,
				  rgba(170,170,170,0.7) 0,
				  rgba(170,170,170,0.7) 1px,
				  transparent 1px,
				  transparent 20%
			  );
		  }
  
		  .graph tbody:before,
		  .graph tbody:after {
			  position:absolute;
			  left:-3.2em;
			  width:2.8em;
			  text-align:right;
			  font:bold 80%/120% arial,helvetica,sans-serif;
		  }
  
		  .graph tbody:before {
			  content:"";
			  top:-0.6em;
		  }
  
		  .graph tbody:after {
			  content:"";
			  bottom:-0.6em;
		  }
  
		  .graph tr {
			  position:relative;
			  display:block;
		  }
  
		  .graph tr {
			  z-index:999;
		  }
  
		  .graph th,
		  .graph td {
			  display:block;
			  text-align:center;
		  }
  
		  .graph tbody th {
			  position:absolute;
			  top:-3em;
			  left:0;
			  width:100%;
			  font-weight:normal;
			  text-align:center;
			  white-space:nowrap;
			  text-indent:0;
			  transform:rotate(-90deg);
		  }
  
		  .graph tbody th:after {
			  content:"";
			  background:rgb(10, 10, 10);
		  }
  
		  .graph td {
			  width:100%;
			  height:100%;
			  background:rgb(4, 33, 128);
			  border-radius:0.5em 0.5em 0 0;
			  transition:background 0.5s;
		  }
  
	  .graph_a {
			  width:100%;
			  height:100%;
			  background:rgb(51, 51, 255);
			  border-radius:0.5em 0.5em 0 0;
			  transition:background 0.5s;
		  }
  
		  .graph tr td {
			  opacity:0.7;
		  }
  
		  .graph td span {
			  overflow:hidden;
			  position:absolute;
			  left:50%;
			  top:50%;
			  width:0;
			  padding:0.5em 0;
			  margin:-1em 0 0;
			  font:normal 85%/120% arial,helvetica,sans-serif;
  /* 			background:white; */
  /* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
			  font-weight:bold;
			  opacity:0;
			  transition:opacity 0.5s;
		color:white;
		  }
  
		  .toggleGraph:checked + table td span,
		  .graph tr  td span {
			  width:4em;
			  margin-left:-2em; /* 1/2 the declared width */
			  opacity:1;
		  }
  
  
  
	  } /* min-width:32em */
  
  } /* grid only */
  
  /*  //Newly added 8/6/24 till here */