@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500&display=swap");

		*{	
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
/*			font-family: 'Poppins', sans-serif;*/
			
			font-family: "Raleway", sans-serif;
		}

		:root {
			--bodybg: #f3f3f3;
			--hue: 223;
			--bg: hsl(var(--hue), 90%, 90%);
			--fg: hsl(var(--hue), 90%, 10%);
			--primary: hsl(var(--hue), 90%, 50%);
			--trans-dur: 0.3s;
			--trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
			font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
		}
		a{
			text-decoration-line: none;
		}
		body,
		input {
/*			color: var(--fg);*/
/*			font: 1em/1.5 "Open Sans", sans-serif;*/
		}
		body {
/*			background-color: #e0e5ec;*/
			background: var(--bodybg);
/*			display: flex;*/
			height: 100vh;
			transition: background-color var(--trans-dur), color var(--trans-dur);
		}
		header{
			position: relative;
			top: 0px;
			width: 100%;
			padding: 15px;
/*			border-radius: 0px 0px 10px 10px;*/
			background: #FF9800;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		header .kri_header{
			font-size: 25px;
			display: flex;
			align-items: center;
		}
		header .kri_header a{
			font-size: 25px;
			display: flex;
			align-items: center;
			color: #3c3c3c;
		}
		header .kri_header strong{
			font-size: 15px;
		}
		header .kri_header .title_header{
			font-size: 12px;
			color: #ffffff;
			letter-spacing: 1px;
			margin-left: 10px;
			line-height: 15px;
		}
		header .knan_header{
			font-size: 35px;
			display: flex;
		}	
		header .knan_header a{
			font-size: 20px;
			display: flex;
			align-items: center;
			color: #3c3c3c;
			background: white;
/*			border: 1px solid #fc6246;*/
			border-radius: 100%;
			padding: 5px;
		}
		header .knan_header strong{
			font-size: 12px;
			margin-left: 5px;
		}
		main {
			margin: 0px auto;
			padding: 1.5em 0;
			padding-bottom: 9em;
			max-width: 500px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
		main.overflow{
			height: 70vh;
			overflow-y: auto;

		}
		.pembungkus_header{
			line-height: 20px;
			padding-bottom: 25px;
		}
		.pembungkus_header span{
			font-size: 12px;
			color: #3c3c3c;
			letter-spacing: 2px;
		}
		.pembungkus_bahasa{
			padding: 20px 0px;
			width: 90%;
			border: 1px solid #adadad;
			border-radius: 5px;
		}
		.form {
			margin: auto;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.inp_bahasa,
		input[type="radio"] {
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
		}
		.inp_bahasa {
			width: 45%;
			background-color: hsl(230.85deg 100% 83.35%);
			border-radius: 4px;
			display: flex;
			align-items: center;
			padding: 15px 10px;
			transition: background-color var(--trans-dur);
			margin: 5px 5px;
			justify-content: space-between;
			box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
		}
		.inp_bahasa span{
			font-size: 12px;
		}
		input[type="radio"] {
			background-color: hsl(0, 0%, 100%);
			border-radius: 50%;
			box-shadow: 0 0 0 0.0625em hsl(var(--hue), 90%, 80%),
			0 0.125em 0.125em 0.0625em hsla(var(--hue), 90%, 10%, 0.3);
			flex-shrink: 0;
			outline: transparent;
			position: relative;
			width: 1em;
			height: 1em;
			transition: background-color var(--trans-dur), box-shadow var(--trans-dur);
			-webkit-appearance: none;
			appearance: none;
		}
		input[type="radio"]:before,
		input[type="radio"]:after {
			border-radius: 50%;
			content: "";
			display: block;
			position: absolute;
			transform: scale(0);
			transition: transform var(--trans-dur) var(--trans-timing);
		}
		input[type="radio"]:before {
			box-shadow: 0 0 0 0.5em var(--primary) inset, 0 0 0 0.0625em var(--primary);
			top: -0.0625em;
			left: -0.0625em;
			width: calc(100% + 0.125em);
			height: calc(100% + 0.125em);
		}
		input[type="radio"]:after {
			background-color: hsl(0, 0%, 100%);
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
		}
		input[type="radio"]:checked:before,
		input[type="radio"]:checked:after {
			transform: scale(1);
		}
		.inp_bahasa:has(input[type="radio"]:checked),
		.inp_bahasa:has(input[type="radio"]:not(:checked)):hover {
			background-color: hsla(0, 0%, 100%, 0.5);
		}
		.select {
			border-radius: 0.75em;
			box-shadow: 0 0 0 0.125em var(--primary) inset;
			display: none;
			pointer-events: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 4.5em;
			transition: transform var(--trans-dur) var(--trans-timing);
		}
		footer{
			position: fixed;
			bottom: 0px;
			width: 100%;
			background-color: #FCA000;
			border-top: 1px solid white;
			color: #3c3c3c;
			font-size: 12px;
			padding: 10px;
			text-align: center;
			letter-spacing: 1px;

		}

		.pembungkus_flottingadd{
				position: absolute;
				bottom: 20px;
				right: 50px;
			}