/*index css*/
.table-text-center th, .table-text-center td {
    text-align: center;
	color:white;
}

<!--button hover effect-->
.button:hover {
    background-color: #185d79; /* Green */
    color: white;
}

.text-orange{color:#f56600;}
.arrow a{color:#6c757d;}
.arrow a:hover{color:orange !important;}

.arrow button{color:#6c757d;}
.arrow button:hover{color:orange !important;}

<!--rotaion direction css on click-->
img {
    width: 10px;
    height: 10px;
    position: relative;
    -webkit-perspective: 10px;
    -moz-perspective: 10px;
    -o-perspective: 10px;
    perspective: 10px;
}
.card {
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 5% 5%;
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

/*graph css*/

.line { stroke: 1px solid black;  stroke-width: 3px; }

#my-canvas{border-style: ridge;
background-color:white;
 color:white;
 }
 
 .span{
	 color:white;
	 margin-top:35px;
	font-size: 125%;
 }
 /************transform on x and y axis****************/
.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
  font-size:15px;
}

.spanLable-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
  cursor: pointer;
}
/************end***************/
/********pulley direction animation css*************/
.fa-spin-reverse {
    -webkit-animation: fa-spin 2s infinite linear reverse;
            animation: fa-spin 2s infinite linear reverse;
          /*color:#185d79;*/
          color:#f56600;
}
.fa-spin{
    color:#185d79;
}
.fa-pulse-reverse {
  -webkit-animation: fa-spin-reverse 1s infinite steps(8);
  animation: fa-spin-reverse 1s infinite steps(8);
}
@-webkit-keyframes fa-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(-359deg);
  }
}
@keyframes fa-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(-359deg);
  }
}
.flat{width: 2em;}
.groove{width: 2em;}
/************************end*********************/

/*********new pulley css code***********/
.circle {

/*  fill-opacity: 3;
  fill: rgb(225, 225, 225);*/
  stroke-opacity: 0.5;
  stroke:#212529;
 /* stroke-width: 3px;*/
}
.pulley{
  fill: #ffffff;
fill-opacity: 3;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #cccccc 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #cccccc 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #cccccc 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #cccccc 100%);
background: radial-gradient(ellipse at center, #ffffff 0%, #cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=1 );
  
}
/*.center {
  fill-opacity: 364;
  fill: black;
  stroke-opacity: .4;
  stroke: #f56600;
  stroke-width: 30px;
}*/
/*.run_circle{
  fill-opacity: 10;
  fill: #f5660059;
  stroke-opacity: 10;
  stroke: black;
  stroke-width: .5px;
}*/
.text{
	  fill:	#f56600 !important;
    color: #000 !important;
	  stroke: #0000; fill-opacity: 5;stroke-width: 5px;}
.textAxis{
    fill: black !important;
    color: #000 !important;
    stroke: #0000; fill-opacity: 5;stroke-width: 5px;}
.pulley-text{  fill:  #000 !important;
    color: #000 !important;
    stroke: #0000; fill-opacity: 100; stroke-width: 20px;}
.circle-number{
    fill: black;
    font: bold 25px sans-serif;stroke: #0000;fill-opacity: .9;}
.text_info{
	  fill:red;
	  font: bold 18px sans-serif;stroke: #0000;fill-opacity: 0.9;
}
.line-1,.line-2,.line-3,.line-4,.line-5,.line-6,.line-7,.line-8,.line-9,.line-10{stroke:black;
	stroke-width: 3px;}
.arc{ stroke: #f74606;
	 fill:none;
	 stroke-width:3px;}
#svgGraph{
    border-style: double; border-color: #185d79;
}
.x-y-line{stroke:#ccc;
          stroke-width: 3px;
          }
/**********************/
/*********toolkit hover***********/
[data-title]:hover:after {
    opacity:1;
    transition: all -1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: black;
    color: white;
    font-size: 60%;
    position: absolute;
   padding: 1px 5px 2px 5px;
  
    top: 0%;
    left: 100%;
    white-space: wrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
	
}

/****select box text size******/
.selectoption{font-size: 13px;}
input[type="checkbox"]{
  width: 17px; /*Desired width*/
  height: 17px; /*Desired height*/
  cursor: pointer;
      vertical-align:middle;
}

.list-group-item-warning {
    color: #185d79;
    background-color: #ffffff;
}

.badge-warning {
    color: #fff;
    background-color: #185d79;
}

.badge {
    display: inline-block;
    padding: 0.45em 0.4em 0.45em 0.6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
}

label {
    display: inline-block;
    margin-bottom: .1rem !important;
	font-size:14px;
	
}

[type="checkbox"]
{
    vertical-align:middle;
}
.report-color{color:#094259;}

.inline{width:22%;}
.axisLine{stroke:black; stroke-opacity: 5; max-width: 100%;}
.tickline{stroke:black; stroke-opacity: .5;}
/*.svg-back{background-color: #FFFFFF; }*/

.width-input{
  width: 70%;
  float: left;
  margin-right: 10px;
}
.mt-10{
    margin-top: 10px;
  }

svg{
  max-width: 100%;
}


@media (max-width:768px){
  .mwidth{
    width: 5rem;
  }
  .width-input{
    width: 70%;
  }


}
@media (min-width: 768px){
  .right-20{
    position: relative;
    right: 20px;
  }
}
@media(max-width: 991px){
  .align-self-top{
    padding: 0 30px;
  }
  .mt-20{
    margin-top: 20px;
  }
  .top-991{
    position: relative;
    top: 12px;
  }
  .bot-991{
    position: relative;
    bottom: 12px;
  }
  .hidden-xs { display: none; }
}

/*====pdf responsive by AVI==*/

.pdf-modal{
    padding: 10px;
    padding-top: 0;
}
.pdf-report{
  padding-top: 20px;
  position: relative;
}
.pdf-report .close{
  position: absolute;
  top: 0;
  right: 0;
  color: #185d79;
  font-size: 35px;
  z-index: 99;
}
.pdf-report .my-tbl tr td{
  white-space: nowrap;
  font-size: 9px;
}
.pdf-report .table2 tr.bg-dark{
  background-color: #185d79 !important;
}
.pdf-report .my-tbl tr td:first-child{
  text-align: left;
}
.pdf-report .my-tbl tr td:last-child{
  text-align: right;
}
.pdf-report .my-tbl tr td span.report-color,
.pdf-report .report-color{
  color: #185d79;
  font-weight: 600;
}
.pdf-report img{
  max-width: 100%;
}
.bottom-text{
  text-align: left;
    font-size: 13px;
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

.flex-wrap {
    
    flex-wrap: nowrap!important;
}

/*.warning-text{
  color: #ffc107 !important;
}*/
.warning-border{
  border: 1px solid #ffc107 !important;
  box-shadow: 0 0 0 1px #ffc107 !important;
}

.warning-border2{
  border: 1px solid #ffc107 !important;
  box-shadow: 0 0 0 1px #ffc107 !important;
}

.warning-border3{
  border: 1px solid #ffc107 !important; box-shadow: 0 0 0 1px #ffc107 !important;
}

.warning-border4{
  border: 1px solid #ffc107 !important; box-shadow: 0 0 0 1px #ffc107 !important;
}
.warning-border5{
  border: 1px solid #ffc107 !important; box-shadow: 0 0 0 1px #ffc107 !important;
}
.warning-border6{
  border: 1px solid #ffc107 !important; box-shadow: 0 0 0 1px #ffc107 !important;
}

.colorbox-top{top:35px !important; position: fixed !important;}
.center-top-button{
  display: flex;
    float: right;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}