@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
		*{
			box-sizing: border-box ;
			padding: 0px;
			margin: 0px;
/*		font-family: 'Roboto', sans-serif;*/
			font-family: 'Raleway', sans-serif;
		}
		a{
			text-decoration: none;
		}
		body{
			background-image: linear-gradient(195deg,#f9f9f9,#f1f1f1);
/*			background: rgb(247 247 247);*/
/*background: rgb(247 238 231);*/
			height: 100vh;
		}
		
		.panel-atas{
			/* background: rgb(50 44 56); */
    	/* background: rgb(241 241 241); */
    	background: rgb(42 42 42);
    	position: relative;
    	top: 0px;
    	width: 100%;
    	height: 180px;
    	background-image: url(../images/bg-panel-atas.png), linear-gradient(rgb(42 42 42), rgb(42 42 42)) !important;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
		}
		.panel-atas .dekor-atas{
			position: absolute;
			top: -33px;
			right: 15px;
			width: 235px;
		}
		
		.panel-atas .detail-panel{

		}
		.panel-atas .detail-panel .detail-icon{
			/*position: absolute;
			bottom: -20px;
			right: 5px;
			width: 137px;*/
			position: absolute;
			bottom: 5px;
			right: 0px;
			width: 185px;
		}
		.panel-atas .detail-panel .detail{
			margin: 25px 0px;
			padding: 10px;
			width: 165px;
			border-radius: 5px;
			position: absolute;
			left: 15px;
			bottom: 0px;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			border: 0.1px solid hsla(0, 0%, 100%, 0.1);
			background-color: white;
			box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
		}
		.panel-atas .detail-panel .detail img{
			width: 100px;
			margin: 5px 0px;
		}
		.panel-atas .detail-panel .detail span{
			font-size: 12px;
			color: #322c38;
			line-height: 5px;
		}
		.panel-atas .detail-panel .detail span ion-icon{
			font-size: 14px;
			color: #f9f9f9;
			background: #c62f4a;
			border-radius: 5px;
			padding: 5px;
			margin-right: 8px;
		}
		.panel-atas .detail-panel .detail .d_prof{
			display: flex;
			align-items: center;
		}
		.pembungkus-judul{
			position: absolute;
			padding: 15px;
			width: 100%;
		}
		.pembungkus-judul .judul{
			position: relative;
			color: whitesmoke;
			font-weight: 900;
			letter-spacing: 2px;
			font-size: 15px;
		}

		main{
			position: relative;
		}
		main .pembungkus_judul_main{
			padding: 10px 15px;
			background: whitesmoke;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		}
		main .pembungkus_judul_main .kanan{
			display: flex;
			flex-direction: column;
		}
		main .pembungkus_judul_main .kiri{
			display: flex;
			justify-content: space-between;
			width: 100px;
		}
		main .pembungkus_judul_main div ion-icon{
			color: rgb(179 31 47);
			border: 1px solid rgb(179 31 47);
			padding: 5px;
			border-radius: 20px;
		}
		main .pembungkus_judul_main strong{
			font-size: 14px;
			color: rgb(179 31 47);
		}
		main .pembungkus_judul_main span{
			font-size: 12px;
			color: #585858;
		}
		main .konten{
			margin: 0px;
			position: relative;
			/* border: 1px solid red; */
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-wrap: wrap;
			padding-bottom: 100px;
		}
		main .konten h3.nama_kategori_notif {
			font-size: 15px;
			font-weight: 200;
			padding: 8px;
			margin: 10px 0;
			width: 95%;
			background: whitesmoke;
			box-shadow: 0px 3px 5px #00000017;
		}
		
		@media only screen and (min-width: 450px) {
			.panel-atas .detail-panel .detail-icon {
				position: absolute;
				bottom: 0px;
				right: 55px;
				width: 105px;
			}
			.panel-atas .detail-panel .detail {
				margin: 15px 25px;
				width: 200px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}
		}
		main .konten .pembungkus_menu{
			box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.075), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09);
			background-color: hsl(0, 0%, 100%);
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 20px;
			margin: 10px;
			width: 120px;
			height: 120px;
			justify-content: center;
			transition: 0.5s;
		}
		main .konten .pembungkus_menu:hover{
			box-shadow: 0px 0px 12px #62626200;
		}
		main .konten .pembungkus_menu img{
			width: 45px;
		}
		main .konten .pembungkus_menu span{
			font-size: 10px;
			line-height: 10px;
			margin-top: 5px;
			color: #2e2b71;
		}
		.pembungkus-judul{
			position: absolute;
			padding: 15px;
			width: 100%;
		}

		/*		QRcode style*/
		.custom-model-main {
		  text-align: center;
		  overflow: hidden;
		  position: fixed;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0; /* z-index: 1050; */
		  -webkit-overflow-scrolling: touch;
		  outline: 0;
		  opacity: 0;
		  -webkit-transition: opacity 0.15s linear, z-index 0.15;
		  -o-transition: opacity 0.15s linear, z-index 0.15;
		  transition: opacity 0.15s linear, z-index 0.15;
		  z-index: -1;
		  overflow-x: hidden;
		  overflow-y: auto;
		}

		.model-open {
		  z-index: 99999;
		  opacity: 1;
		  overflow: hidden;
		}
		.custom-model-inner {
		  -webkit-transform: translate(0, -25%);
		  -ms-transform: translate(0, -25%);
		  transform: translate(0, -25%);
		  -webkit-transition: -webkit-transform 0.3s ease-out;
		  -o-transition: -o-transform 0.3s ease-out;
		  transition: -webkit-transform 0.3s ease-out;
		  -o-transition: transform 0.3s ease-out;
		  transition: transform 0.3s ease-out;
		  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
		  display: inline-block;
		  vertical-align: middle;
		  width: 600px;
		  margin: 30px auto;
		  max-width: 97%;
		}
		.custom-model-wrap {
		  display: block;
		  width: 100%;
		  position: relative;
		  background-color: #fff;
		  border: 1px solid #999;
		  border: 1px solid rgba(0, 0, 0, 0.2);
		  border-radius: 6px;
		  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		  background-clip: padding-box;
		  outline: 0;
		  text-align: left;
		  padding: 20px;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		  max-height: calc(100vh - 70px);
			overflow-y: auto;
		}
		.model-open .custom-model-inner {
		  -webkit-transform: translate(0, 0);
		  -ms-transform: translate(0, 0);
		  transform: translate(0, 0);
		  position: relative;
		  z-index: 999;
		}
		.model-open .bg-overlay {
		  background: rgba(0, 0, 0, 0.6);
		  z-index: 99;
		}
		.bg-overlay {
		  background: rgba(0, 0, 0, 0);
		  height: 100vh;
		  width: 100%;
		  position: fixed;
		  left: 0;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 0;
		  -webkit-transition: background 0.15s linear;
		  -o-transition: background 0.15s linear;
		  transition: background 0.15s linear;
		}
		.close-btn {
		  position: absolute;
		  right: 0;
		  top: -30px;
		  cursor: pointer;
		  z-index: 99;
		  font-size: 30px;
		  color: #fff;
		}

		@media screen and (min-width:800px){
			.custom-model-main:before {
			  content: "";
			  display: inline-block;
			  height: auto;
			  vertical-align: middle;
			  margin-right: -0px;
			  height: 100%;
			}
		}
		@media screen and (max-width:799px){
		  .custom-model-inner{margin-top: 45px;}
		}

		.pembungkus_hasil_qr{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
		}
		.pembungkus_hasil_qr h1{
			font-size: 22px;
			margin-bottom: 20px;
		}
		.pembungkus_hasil_qr .data{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			border-bottom: 1px solid #e3e3e3;
			margin-bottom: 20px;
		}
		.pembungkus_hasil_qr .data .detail-data{
			display: flex;
			align-items: center;
			font-size: 20px;
		}
		.pembungkus_hasil_qr .data .detail-data strong{
			width: 100px;
			font-size: 18px;
		}
		.pembungkus_hasil_qr .data .detail-data span {
			margin-right: 10px;
			font-size: 18px;
		}
		.veriifikasi{
			text-align: center;
			background: #4caf50;
			padding: 10px;
			margin: 15px 0px;
			border-radius: 10px;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.veriifikasi ion-icon{
			color: white;
			font-size: 25px;
			margin-right: 10px;
		}
		.veriifikasi span{
			color: white;
			font-size: 15px;
		}
		.aksi{
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;
		}
		.aksi button{
			width: 100%;
			margin: 0px 10px;
			border-radius: 10px;
			font-weight: bold;
		}



		/*		menu utama*/
		div.menu_utama{
			width: 100%;
			height: 60px;
/*			background: rgb(50 44 56);*/
			background: rgb(42 42 42);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10px 10px 0px 0px;
			position: fixed;
			bottom: 0px;
		}
		.menu_utama ul {
			width: 100%;
			display: flex;
			justify-content: space-around;
		}
		.menu_utama ul li {
			list-style: none;
			position: relative;
			width: 70px;
			height: 40px;
			z-index: 2;
		}

		.menu_utama ul li a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			text-align: center;
			font-weight: 500px;
			color: rgb(247 238 231);
		}
		.menu_utama ul li a .icon {
			position: relative;
			display: block;
			font-size: 1.8em;
			text-align: center;
			transition: 0.5s;
		}

/*	notif	*/
		
		.efek-notif {
			position: absolute;
			top: -5px;
			left: -5px;
			height: 25px;
			width: 25px;
			z-index: 10;
			border: 5px solid #ef5350;
			border-radius: 70px;
			animation: efek-notif 1s ease-out infinite;
		}

		.menu_utama ul li a span.icon .jumlah-notif {
			color: white;
			font-size: 9px;
			position: absolute;
			top: 0px;
			left: 0px;
			height: 14px;
			width: 14px;
			border-radius: 100px;
			background: red;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
		}
		@keyframes efek-notif {
			0% {
				-webkit-transform: scale(0);
				opacity: 0.0;
			}

			25% {
				-webkit-transform: scale(0.1);
				opacity: 0.1;
			}

			50% {
				-webkit-transform: scale(0.5);
				opacity: 0.3;
			}

			75% {
				-webkit-transform: scale(0.8);
				opacity: 0.5;
			}

			100% {
				-webkit-transform: scale(1);
				opacity: 0.0;
			}
		}



		.menu_utama ul li a .icon.qrcode{
			border: 8px solid rgb(179 31 47);
			width: 65px;
			height: 65px;
			background: rgb(179 31 47);
			position: absolute;
			top: -42px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 14px;
			font-size: 35px;
		}
		.menu_utama ul li a .text {
			font-size: 10px;
/*			line-height: 0px;*/
		}
		.aktif{
			color: white !important;
		}

/*		end main menu*/
		.pembungkus_penjadwalan{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		/*	inventaris list	*/
		h1 {
		  text-align: center;
		}

		.accordion {
			text-align: left;
		  border-bottom: 1px solid #979797;
		  cursor: default;
		  margin: 0px 10px;
		  max-width: 1130px;
		}
		.accordion:not(.detail--terbuka):hover .detail_title {
		  color: #0078c1;
		}
		.accordion:not(.detail--terbuka):hover ion-icon {
		  transform: rotate3d(0, 0, 1, 90deg);
		}
		.detail_title {
		  align-items: center;
		  color: #3c4a57;
		  display: flex;
		  font-size: 15px;
		  font-weight: 700;
		  justify-content: space-between;
		  line-height: 27px;
		  padding: 15px 0px 15px 0px;
		  transition: color 0.3s ease-in;
		}
		.isi_detail_notifikasi {
		  color: #363636;
		  display: none;
		  font-size: 16px;
		  padding: 0 0 16px;
		}
		/*.isi_detail_notifikasi *:last-child {
		  margin: 0;
		}*/
		.detail--terbuka .detail_title {
		  color: #3f51b5;
		}
		.detail--terbuka .isi_detail_notifikasi {
		  display: block;
		}
		.pembungkus_pencarian {
		  font-size: 14px;
		  margin: 10px 8px 10px 8px;
		  padding: 6px 5px;
		  border: 1px solid #C1C1C1;
		  background-color: white;
		  border-radius: 5px;
		  transition: 0.2s;
		  display: flex;
		  align-items: center;
		}

		.pembungkus_pencarian:hover {
		  border-color: black;
		}

		.pembungkus_pencarian:focus-within {
		  border-color: #414141;
		  box-shadow: 0px 5px 10px 0px rgb(99 99 99 / 40%);
		}
/*notif notifikasi*/

.pembungkus_notifikasi .notifikasi{
      display: flex;
      justify-content: space-between;
    }
    .notif-terbaru-icon{
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      font-size: 12px;
    }
    .notif-terbaru-icon span{
      line-height: 5px;
      font-size: 12px;
    }
    .notif-lawas{
      display: none !important;
    }
    .pembungkus_notif_tab {
      width: 100%;
      position: absolute;
      top: 0%;
      font-size: 0;
      border-radius: 3px;
      overflow: auto;
      height: calc(100vh - 115px);
    }
    .pembungkus_notif_tab input {
      display: none;
      transition: 0.5s;
    }
    .pembungkus_notif_tab input:checked + label {
    	background: #eee;
    	box-shadow: 0px 2px 5px #00000042;
    }
    .pembungkus_notif_tab input#tab1:checked ~ .line {
      left: 0%;
    }
    .pembungkus_notif_tab input#tab1:checked ~ .content-container #c1 {
          display: block;
    }
    .pembungkus_notif_tab input#tab2:checked ~ .line {
      left: 25%;
    }
    .pembungkus_notif_tab input#tab2:checked ~ .content-container #c2 {
          display: block;
    }
    .pembungkus_notif_tab input#tab3:checked ~ .line {
      left: 50%;
    }
    .pembungkus_notif_tab input#tab3:checked ~ .content-container #c3 {
         display: block;
    }
    .pembungkus_notif_tab input#tab4:checked ~ .line {
      left: 75%;
    }
    .pembungkus_notif_tab input#tab4:checked ~ .content-container #c4 {
          display: block;
    }

    .pembungkus_notif_tab label {
      display: inline-block;
      font-size: 14px;
      height: 36px;
      line-height: 36px;
      width: 25%;
      text-align: center;
      background: #f4f4f4;
      color: #555;
      position: relative;
      transition: 0.25s background ease;
      cursor: pointer;
    }
    .pembungkus_notif_tab label::after {
      content: "";
      height: 2px;
      width: 100%;
      position: absolute;
      display: block;
      background: #ccc;
      bottom: 0;
      opacity: 0;
      left: 0;
      transition: 0.25s ease;
    }
    .pembungkus_notif_tab label:hover::after {
      opacity: 1;
    }
    .pembungkus_notif_tab .line {
      position: absolute;
      height: 2px;
      background: #1E88E5;
      width: 25%;
      top: 34px;
      left: 0;
      transition: 0.25s ease;
    }
    .pembungkus_notif_tab .content-container {
      position: relative;
/*      height: 100vh;*/
      font-size: 15px;
    }
    .pembungkus_notif_tab .content-container .content {
      position: absolute;
      padding: 10px;
      width: 100%;
      top: 0;
      display: none;
      transition: 0.25s ease;
      color: #333;
    }
    .pembungkus_notif_tab .content-container .content h3 {
      font-weight: 200;
      margin: 10px 0;
    }

    .pembungkus_notif_tab .content-container .content .nama_kategori_notif{
    	font-size: 15px;
    	padding: 8px;
    	margin: 10px 12px;
    	width: 95%;
    	background: whitesmoke;
    	box-shadow: 0px 3px 5px #00000017;
    }
    .pembungkus_notif_tab .content-container .content p {
      margin: 10px 0;
    }
    .pembungkus_notif_tab .content-container .content p,  .pembungkus_notif_tab .content-container .content i {
      font-size: 13px;
    }



    .set_time{
    	position: relative;
    	background: white;
    	font-size: 12px;
    	width: 100%;
    	display: flex;
    	margin: 15px 12px;
    }
    .set_time .time{
    	padding: 10px;
    	margin: auto 2px;
    	border-radius: 5px;
    	width: 50px;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.075), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    	background-color: hsl(0, 0%, 100%);
    }
    .set_time .time.aktif{
    	background-color: rgb(179 31 47);
    	color: white;
    }
    .pembungkus_meteran{
    	max-width: 500px;
    	width: 100%;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: center;
    }
    .meteran {
    	padding: 10px;
    	margin: 5px 5px;
    	width: 45%;
    	border-radius: 5px;
    	box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.075), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    	background-color: hsl(0, 0%, 100%);
    }

    .meteran svg {
    	max-width: 100%;
    }

    .meteran path {
    	stroke-width: 100;
    	stroke: #ecf0f1;
    	fill: none;
    }

    .meteran text {
    	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .meteran.temperature path.data-arc {
    	stroke: #c62f4a;
    	stroke-linecap: round;
    }

    .meteran.temperature text {
    	fill: #2a2a2a;
    }

    .meteran.turbidity path.data-arc {
    	stroke: #c62f4a;
    	stroke-linecap: round;
    }

    .meteran.turbidity text {
    	fill: #2a2a2a;
    }

    .meteran.pH path.data-arc {
    	stroke: #c62f4a;
    	stroke-linecap: round;
    }

    .meteran.pH text {
    	fill: #2a2a2a;
    }

    .meteran.water path.data-arc {
    	stroke: #c62f4a;
    	stroke-linecap: round;
    }

    .meteran.water text {
    	fill: #2a2a2a;
    }

    .meteran.Oxygen path.data-arc {
    	stroke: #c62f4a;
    	stroke-linecap: round;
    }

    .meteran.Oxygen text {
    	fill: #2a2a2a;
    }

    .title_konten{
    	background-color: rgb(179 31 47);
    	color: white;
    	padding: 8px;
    	margin: 10px 0px;
    	border-radius: 5px;
    	font-size: 13px;
    	letter-spacing: 1px;
  	}