/*//////////////////////////////////////////////////////////////////
[ 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 ]*/

.navbtn {
  display: block;
  font-size: 18px;
  padding: 8px 10px;
  margin: 4px 0;
  transition: all 0.3s;
  color: white;
  width: 200px;
  border-radius: 0px 50px 50px 0px;
  cursor: pointer;
}
.navbtn i {
  padding: 0 30px 0 5px;
}
.navbtn .fa-caret-down {
  padding: 2px 0 0 0;
  width: 23px;
  line-height: 21px;
  font-size: 12px;
  transform: rotate(90deg);
  margin: 2px 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.3s;
}
.navbtn + .subnavbar .fa-caret-down {
  transition: all 0.3s;
}
.navbtn > .fa-caret-down:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.navbtn:hover,
.navbtn.active {
  background-color: rgba(255, 255, 255, 0.8);
  color: black !important;
  text-decoration: none;
}
.navbtn a {
  color: white;
  text-decoration: none;
}
.navbtn:hover a,
.navbtn.active a {
  color: black;
  text-decoration: none;
}
.subnavbar {
  max-height: 50vh;
  overflow: auto;
}
.subnavbar li {
  transition: all 0.3s;
  transition-delay: 0.3s;
  line-height: 0px;
  height: 0;
  padding: 0px 16px;
  color: black;
  list-style-type: none;
  cursor: pointer;
}
.navbtnhover + .subnavbar > a > li {
  line-height: 40px;
  height: unset;
}
.subnavbar li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.subnavbar li .fa-caret-down {
  padding: 12.5px 0;
  transform: rotate(90deg);
}

.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-1 {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 10px 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 !important;
}
.rounded-circle-pxl {
  border-radius: 100px !important;
}
.rounded-tlr-1 {
  border-radius: 8px 8px 0 0 !important;
}
.rounded-rtb-1 {
  border-radius: 0 8px 8px 0 !important;
}
.rounded-brl-1 {
  border-radius: 0 0 8px 8px !important;
}
.rounded-lbt-1 {
  border-radius: 8px 0 0 8px !important;
}
.split-t, .split-y, .split{
  border-top: 1px solid rgb(240,240,240)
}
.split-b, .split-y, .split{
  border-bottom: 1px solid rgb(240,240,240)
}
.split-l, .split-x, .split{
  border-left: 1px solid rgb(240,240,240)
}
.split-r, .split-x, .split{
  border-right: 1px solid rgb(240,240,240)
}

.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-primary0 {
  background-image: linear-gradient(45deg, #ff5900, #ffa600);
}
.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) !important;
}
.text-primary1 {
  color: #1b75bc !important;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-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: 30px;
  }
  .weathercards h1 sup {
    font-size: 20px;
    top: -20px;
  }
}
.weathercards img {
  padding: 0%;
  max-width: 80%;
  max-height: 80%;
}
.ac_input input {
  color: inherit;
  font: inherit;
  border-color: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  max-width: 100px;
  text-align: center;
  padding: 0 5px;
  position: relative;
  z-index: 1;
}
.ac_input input:hover {
  border-color: rgba(0, 0, 0, 1);
}
.ac_input sup {
  top: 10px !important;
  padding-left: 5px;
}
/* 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: 30px;
  }
  .weathercards h1 sup {
    font-size: 15px;
    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 {
  min-width: 150px;
  height: 35px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  cursor: pointer;
  border: 3px solid lightgray;
  box-sizing: unset;
}
.live_hisbtn > div {
  border-radius: 50px;
}
.livhis_pan {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 35px;
  transition: all 0.3s;
}
.live_pan,
.history_pan,
.togglebtn {
  color: white;
  line-height: 35px;
  min-width: 80px;
  flex: auto;
  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);
}
.live_hisbtn .selectbtn {
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
}
.live_hisbtn .dropBtn {
  padding: 4px 8px;
  color: white;
  font-size: 24px;
}
.live_hisbtn .dropBtn .dropDown {
  position: absolute;
  top: 30px;
  z-index: 10;
  font-family: arial;
  width: 200px;
  right: 0px;
  display: none;
}
.live_hisbtn .dropBtn:hover .dropDown {
  display: unset;
}

.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;
}
.myPopupToastContainer {
  position: fixed;
  bottom: 0px;
  right: 0;
  /* max-height: calc(100% - 40px); */
  z-index: 1000;
  width: 0px;
}

.myPopupToast {
  /* position: fixed;
  bottom: 20px;
  right: -300px; */
  width: 300px;
  background: #ffffff90;
  display: flex;
  z-index: 1020;
  backdrop-filter: blur(5px);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  animation-name: toastSlide;
  /* animation-iteration-count: infinite; */
  animation-duration: 1s;
  /* animation-direction: reverse;  */
  animation-fill-mode: forwards;
  margin-bottom: 10px;
}
@keyframes toastSlide {
  0% {
    transform: translateX(0px);
  }
  70% {
    transform: translateX(-330px);
  }
  100% {
    transform: translateX(-320px);
  }
}
@keyframes toastSlide1 {
  0% {
    transform: translateX(0px);
  }
  70% {
    transform: translateX(-330px);
  }
  100% {
    transform: translateX(-320px);
  }
}
.myPopupToast:hover {
  background: #ffffff;
}
.myPopupToast > div > i {
  width: 50px;
  line-height: 50px;
  font-size: 35px;
}
.myPopupToast > div > object {
  height: 50px;
  width: 20px;
  line-height: 50px;
  font-size: 35px;
  opacity: 0.3;
  padding: 20px 0;
}

#reason_popup .closePop {
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  width: 22px;
  padding-bottom: 4px;
  cursor: pointer;
}
#reason_popup .closePop:hover {
  color: black !important;
}

/* Empty Data */
.noData {
  background-color: rgb(240, 240, 240);
  color: grey;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 60px 0;
  height: 100%;
}

.listView {
  padding: 10px;
  border-top: 1px solid rgb(240, 240, 240);
}
.listView:hover {
  background-color: rgb(240, 240, 240);
}
.listView .Index {
  /* font-size: 20px; */
  width: 50px;
  line-height: 40px;
  text-align: center;
}
.listView .Badge {
  /* font-size: 20px; */
  width: 80px;
  line-height: 40px;
  color: white;
  text-align: center;
}
/* .listView .Title {
  font-size: 20px;
  font-weight: bold;
} */
.listView .Date {
  color: grey;
}
.filterPane {
  display: none;
  position: absolute;
  text-align: left;
  top: 100%;
  width: 200px;
  right: 0px;
  left: 0px;
  margin: auto;
  background-color: white;
  overflow: hidden;
  z-index: 1;
}
.filterPane label,
.filterSubPane label {
  margin: 0;
  cursor: pointer;
}
.filterPane span {
  color: grey;
  border-bottom: 1px solid lightgray;
}
.filterPane p {
  margin: 0;
  padding: 10px 20px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.filterPane p:hover {
  background-color: rgb(250, 250, 250);
}
.filterButtons .MuiInputBase-root {
  font-size: 14px;
}
.filterButtons .MuiInputLabel-outlined {
  transform: translate(14px, 12px) scale(1);
}
.filterButtons .MuiOutlinedInput-input {
  padding: 10px 14px;
}

.filterButtons button {
  padding: 3px 5px;
}
.filterButtons .resetFilter {
  border-radius: 50px !important;
  padding: 0 !important;
  width: 2.7em !important;
  /* line-height: 2.2em !important; */
}

@media (max-width: 575px) {
  .h-sm-2 {
    font-size: 1.75rem;
  }
}

.i_button {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  background-color: rgb(200, 200, 200);
  line-height: 20px;
  width: 25px;
  border-radius: 3px 8px 3px 15px;
  color: white;
  text-align: center;
}
.informationContainer {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
}
.informationContainer .info_popup {
  min-width: 300px;
  width: 40%;
  max-width: 400px;
  background-color: white;
  position: absolute;
  margin: auto;
  top: calc(50% - 75px);
  left: 0;
  right: 0;
  transform: scale(0.8);
  transition: all 0.5s;
  opacity: 0;
}

/* -------------------aqiScale------------------- */
.scaleRange {
  display: inline-block;
  color: black;
}
.scaleRange.l {
  border-left: 2px solid rgb(97, 84, 84);
}
.scaleRange.r {
  border-right: 2px solid rgb(97, 84, 84);
  transform: translateX(-100%);
}
.scaleRange > .point {
  display: none;
}

@media (max-width: 500px) {
  .scaleRange {
    font-size: 10px;
    text-align: center;
  }
  .scaleRange.l {
    border-left: 0px solid rgb(97, 84, 84);
    transform: translateX(-50%);
  }
  .scaleRange.r {
    border-right: 0px solid rgb(97, 84, 84);
    transform: translateX(-50%);
  }
  .scaleRange > .point {
    display: block;
    margin: -7px 0 3px 0;
    height: 7px;
    font-size: 8px;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .scaleRange {
    font-size: 12px;
    text-align: center;
  }
  .scaleRange.l {
    border-left: 0px solid rgb(97, 84, 84);
    transform: translateX(-50%);
  }
  .scaleRange.r {
    border-right: 0px solid rgb(97, 84, 84);
    transform: translateX(-50%);
  }
  .scaleRange > .point {
    display: block;
    margin: -10px 0 3px 0;
    height: 7px;
    font-size: 10px;
  }
}

.myPopupContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}
.myPopupContainer .closeBack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.myPopupContainer .innerContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}
.progressInner {
  transition: 2s all 1s;
  width: 0%;
}
.wifi-connection:hover .wifi-popup {
  display: unset;
}
.wifi-popup {
  display: none;
  top: 50%;
  right: 140%;
  transform: translateY(-50%);
  width: 265px;
  text-align: left;
}

@media (max-width: 450px) {
  .wifi-popup {
    display: none;
    top: unset;
    bottom: 150%;
    right: 0%;
    transform: translateY(0%);
    transform: translateX(30%);
    width: 265px;
    text-align: left;
  }
}
.my-wifi {
  background: no-repeat url(../img/my-icons/wifi-OnOff.svg);
  background-size: 100% 200%;
  transition: all 1s;
  background-position-x: center;
  padding: 10px;
}
.on {
  background-position-y: 0%;
}
.off {
  background-position-y: 100%;
}
.bm-line {
  border-bottom: 1px solid rgb(240, 240, 240);
}
.pop-anime {
  animation: popanime 1s infinite;
}
@keyframes popanime {
  0% {
    transform: scale(0);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(0.8);
  }
  30%,
  100% {
    transform: scale(1);
  }
}
.classSpy {
  position: fixed !important;
  top: 50px;
  left: 60px;
  width: calc(100% - 70px) !important;
  z-index: 1;
}
@media (max-width: 767px) {
  .classSpy {
    left: 0px;
    top: 40px;
    width: 100% !important;
  }
}
.classSpy > .row {
  background-image: linear-gradient(45deg, #0d3a5d, #1b75bc) !important;
}
.classSpy > .row .MuiInputBase-root {
  color: white;
}
.classSpy > .row .MuiFormLabel-root {
  color: rgba(255, 255, 255, 0.54);
}
.classSpy > .row .MuiFormLabel-root.Mui-focused {
  color: rgba(255, 255, 255, 1);
}
.classSpy > .row .MuiInput-underline:before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}
.classSpy > .row .MuiInput-underline:after {
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.padding-Spy {
  padding-top: 160px;
}
.glue-ratio-green, .glue-ratio-red{
  font-weight: bold;
  font-size: 20px;
  width: 100px;
  text-align: center;
}
.glue-ratio-green{
  background-color: rgba(0,150,0,0.5);
  border: 2px solid rgba(0,150,0,1);
}
.glue-ratio-red{
  background-color: rgba(255,0,0,0.5);
  border: 2px solid rgba(255,0,0,1);
}