/*//////////////////////////////////////////////////////////////////
[ FONT ]*/
@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../fonts/poppins/Poppins-SemiBold.ttf'); 
}

@font-face {
  font-family: Montserrat-Bold;
  src: url('../fonts/montserrat/Montserrat-Bold.ttf'); 
}


/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/



.dropshadow{
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.dropshadow-hover:hover{
  box-shadow: 0 20px 30px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 20px 30px 0 rgba(0,0,0,0.1);
  -moz-box-shadow: 0 20px 30px 0 rgba(0,0,0,0.1);
}
.rounded-1{
  border-radius: 8px;
}

.trans-0-1, .trans-1-0:hover{
  transition: all 0.3s;
}
.trans-0-1:hover, .trans-1-0{
  transition: all 1s;
}

.gradient-primary{
  background-image: linear-gradient(45deg,#0A5A7B,#30A1AB);
}
.gradient-primary1{
  background-image: linear-gradient(45deg,#C21C12,#F16544);;
}
.gradient-primary2{
  background-image: linear-gradient(45deg,#009933,#1FB833);
}
.gradient-primary3 {
  background-image: linear-gradient(45deg, #0D3A5D, #1B75BC);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
  background: #1B75BC; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1B75BC80; 
}

* {
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
  scroll-behavior: smooth;
}

body, html {
	height: 100%;
	/* font-family: Poppins-Regular, sans-serif; */
}

/* Weather */
.weathercards {
  background-color: #FFFFFF;
  height: 280px; /*245*/
  border: 1px solid white;
  transition: all 0.3s;
  cursor: pointer;
}
.weathercards:hover{
  border: 1px solid #1B75BC;
  transform: scale(1.05);
}
.weathercards:active{
  border: 1px solid red;
  transform: scale(1.03);
  transition: all 0.1s;
}

.weathercards .lastupdate{
  text-align: center;
  color: grey;
  font-family: arial;
  height: 20px;
}
.weathercards .cardbody{
  height: 200px;
}
.weathercards h5{
  font-weight: bold;
  text-align: center;
  height: 25px;
  color: black;
}
.weathercards h1{
  font-size: 60px;
  padding: 40px 0px;
}
.weathercards h1 sup{
  font-size: 25px;
  top: -25px;
}
@media (max-width: 991px) {
  .weathercards h1{
    font-size: 40px;
  }
  .weathercards h1 sup{
    font-size: 20px;
    top: -20px;
  }
}
.weathercards img{
  padding: 0%;
  max-width: 80%;
  max-height: 80%;
}

/* Temperature */
/* .temperature img{
  height: 100%;
} */
.temperature h6, .weathercards h6{
  font-size: 20px;
  color: grey;
  font-weight: bold;
  border-bottom: 2px solid grey;
  display: inline;
  padding-bottom: 5px;
}
@media (max-width: 767px) {
  /* .weathercards .lastupdate{
    font-size: 9px;
    height: 20px;
    line-height: 10px;
  } */
  .weathercards .lastupdate{
    font-size: 14px;
    height: 20px;
    line-height: 15px;
  }
  .weathercards .cardbody{
    /* height: calc(100% - 29px); */
    height: 150px;
  }
  .weathercards h5{
    height: 13px;
    line-height: 13px;
    font-size: 12px;
  }
  .weathercards img{
    /* width: 80%; */
    height: 80%;
  }
  .weathercards h1{
    font-size: 50px;
  }
  .weathercards h1 sup{
    font-size: 25px;
    top: -25px;
  }
  .temperature h1{
    font-size: 20px;
  }
  .temperature h6{
    font-size: 8px;
    padding-bottom: 3px;
    border-width: 1px;
  }
}
.weathercards .weathermassage{
  padding: 5px 10px;
  width: 100%;
  border-radius: 15px;
  font-size: 18px;
  margin: -6px 0 0 0;
  transition: all 0.5s;
}


/* Live & History Radio Button */
.live_hisbtn{
  margin-top: 21px;
  float: right;
  width: 110px;
  height: 35px;
  overflow: hidden;
  position: relative;
  background-color: red;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
  border-radius: 50px;
  cursor: pointer;
  border: 3px solid lightgray;
  box-sizing: unset;
}
.livhis_pan{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  height: 35px;
  transition: all 0.3s;
}
.live_pan,.history_pan{
  color: white;
  line-height: 35px;
  width: 80px;
  text-align: center;
}
.radio_btn{
  background-color: white;
  border-radius: 50px;
  width: 25px;
  height: 25px;
  margin: 5px 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}


.svg2 circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  stroke: rgb(240,240,240);
  stroke-width: 2em;
}
.svg2 .group{
  transform-origin: center;
  transform: scale(0.8);
}
.svg2 .bar {
  stroke-linecap: round;
}
.cont {
  display: block;
  margin: 2em auto;
  border-radius: 100%;
  position: relative;
}
.cont:after {
  position: absolute;
  display: block;
  left: calc(50% - 45px);
  top: calc(50% - 50px);
  content: attr(data-pct)"%";
  text-align: center;
  border-radius: 100%;
  line-height: 100px;
  width: 100px;
  font-size: 2em;
}


/*for serach input in center*/

.dataTables_filter {
  justify-content: center;
  display: flex;
  float: none !important;
}
.p-steps .p-steps-item .p-menuitem-link{
  background: transparent !important;
}