html, body { width: 100%; overscroll-behavior-y: none; }
html {
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	overflow: hidden;
}
body { margin: 0px; padding: 0px; height: 100%; line-height: 1; font-size: 16px; overflow: hidden; }

div.divmainpage {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
	text-align: left;
}

/*BLOK copy paste from brfun4*/
.taleft { text-align: left !important; } 
.tacenter { text-align: center !important; } 
.taright { text-align: right !important; } 
@font-face {
	font-family: "goldman";
	src: url("/fonts/Goldman-Regular.ttf") format("truetype");
}
/*end BLOK copy paste from brfun4*/


/*BLOK DIVMOBILE*/
div.dclient {
	display: flex; flex-direction: row; justify-content: center; align-items: center;
	position: fixed; left: 0; top: 0; width: 100%; height: 50px; overflow: hidden;
}
div.dclient img:nth-child(1) { height: 50px; width: 50px; }
div.dclient img:nth-child(2) { height: 50px; width: auto; }

.dfull_login {
	position: fixed; left: 0; top: 50px; width: 100%; height: calc(100% - 90px);
	text-align: center; padding-top: 20px;
}
.dmob_login {
	position: absolute; left: 50%; transform: translate(-50%); width: 80%;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.butcloselog {
	position: absolute; top: 0; right: 5px; width: 30px; height: 30px; border: none; outline: none; border-radius: 15px;
	background-color: transparent; font-size: 1.5rem; color: white; background-color: rgba(255,255,255,0.1);
}
div.dgreet {
	 display: none; justify-content: space-around; align-items: center;
	 position: fixed; left: 0; top: 0; width: 100%; background-color: black;
	 text-align: center; z-index: 2;
}
div.dgreet span {
	 color: white; 
	 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	 font-size: 16px; /* Ukuran standar browser */
	 line-height: 1.5;
}

/*pc, tablet*/
@media screen and (min-width: 768px) {
	div.dloading { visibility: visible; }
	div.dclient { margin: 50px auto; width: 768px; height: 200px; }
	div.dgreet { flex-direction: row; height: calc(100% - 200px); }
	div.dbottom { diplay: none; }
}

/*hp*/
@media screen and (max-width: 767px) {
	div.dloading { visibility: hidden; }
	div.dbottom {
		position: fixed; left: 0; bottom: 0; width: 100%; background-color: chocolate; /*goldenrod;*/
	}
	div.dbottom button { font-size: 12px; }
	div.dbotnone { display: none; }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	div.dgreet { flex-direction: row; height: calc(100% - 24px); }
	div.dbottom {
		flex-direction: row; justify-content: space-around; align-items: center;
		height: 24px; line-height: 24px; overflow: hidden;
	}
	div.dbotdis { display: flex; }
	div.ddev { display: inline-block; width: 50%; height: 24px; line-height: 24px; text-align: center; }
	span.spbotbut { display: inline-block; width: 50%; line-height: 24px; text-align: center; }
	.add-button, .log-button { width: 30%; height: 20px; }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
	div.dgreet { flex-direction: column; height: calc(100% - 18px); }
	div.dbottom { height: 40px; }
	div.dbotdis { display: block; }
	span.spbotbut { display: block; margin-top: 2px; width: 100%; height: 20px; text-align: center; }
	.add-button, .log-button { width: 30%; }
	div.ddev {
		position: absolute; bottom: 0;
		display: block; width: 100%; height: 18px; line-height: 18px; text-align: center;
	}
}

.add-button, .log-button {
	border: none; outline: none; border-radius: 10px; height: 20px;
}

div.ddev {
	font-size: 10px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div.dfooter {
	position: fixed; left: 0; bottom: 0; width: 100%; height: 20px; line-height: 20px; text-align: center;
	font-size: 12px; font-style: italic; background-color: orange;
 }

/*end BLOK DIVMOBILE*/

/*khusus fomm login share di divcomp */

/*BLOK DIVCOMP*/

.container_tm2 {
	margin-top: 0;
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
	background-image: linear-gradient(150deg,rgba(255,255,255,0.3) 5%,navy 20% 40%,rgba(255,255,255,0.5) 70%), linear-gradient(navy 30%,transparent);
}

.dcont_top {
	display: flex; justify-content: flex-start; align-items: center;
	position: absolute; top: 0; left: 0; width: 100%; height: 200px; overflow: hidden;
}

.dcont_client {
	display: flex; flex-direction: row; justify-content: center; align-items: center;
	width: 50%; height: 150px; overflow: hidden;
}
.dtop_logo {
	margin-left: 20px;
	width: 100px; height: 150px;
	background-image: url("/gambar/iislogo.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 90% auto;
	z-index: 3;
}
.dtop_client {
	width: calc(100% - 100px); height: 150px;
	z-index: 3;
}
.dtop_client img { width: 90%; height: auto; }
.dtop_client span {
	display: block; font-size: 1.2rem; font-family: "goldman"; color: white; text-align: center;
	padding-right: 30px;
}

.dmob_login, .dcont_login {
	height: 140px; text-align: center; border-radius: 10px; padding: 6px;
	background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.5)), linear-gradient(blue,transparent);
	color: white;
	box-shadow: 1px 1px 10px inset rgba(0,0,0,0.3);
	overflow: hidden;
}
.dcont_login { width: 280px; }

.dmob_login table, .dcont_login table { margin: 0 auto; }
.dmob_login table:focus, .dcont_login table:focus { outline: none; }
.dmob_login table tr td, .dcont_login table tr td { height: 24px; white-space: nowrap; padding-right: 10px; }
.dmob_login table tr td input, .dcont_login table tr td input {
	width: 140px; height: 20px; border: 1px inset white; border-radius: 0; background-color: lightgrey;
	font-size: 15px;
}
.dmob_login table tr td input:focus, .dcont_login table tr td input:focus {
	background-color: white; outline: none;
}

.dmob_login table tr td button, .dcont_login table tr td button {
	height: 25px; border: 1px outset white; border-radius: 0; background-color: lightgrey;
	transition: 0.5s ease;
}
.dmob_login table tr td button:hover, .dmob_login table tr td button:focus,
.dcont_login table tr td button:hover, .dcont_login table tr td button:focus {
	background-color: lime;
}
.dmob_login table tr td button:focus, .dcont_login table tr td button:focus { outline: none; }

/*background ikut container_tm2*/
.dcont_lside {
	position: absolute; top: 200px; left: 0; width: 100px; height: calc(100% - 240px);
	overflow: hidden;
}

/*jika tema warna klien greenyellow, maka ganti ke springgreen*/
.dcont_main {
	position: absolute; left: 100px; top: 200px; width: calc(100% - 100px); height: calc(100% - 200px);
	background-repeat: no-repeat;
	background-position: right 50px bottom 40px;
	background-size: cover;
	box-shadow: 2px 2px 20px inset black; border-radius: 200px 0 0 0; overflow: hidden;
}

.ddevinfo {
	position: absolute; width: 250px; height: 90px; right: 50px; bottom: 40px;
	white-space: nowrap; padding-top: 8px;
	background-image: linear-gradient(135deg,transparent 80px,rgba(255,255,255,0.5) 81px);
}
.ddevinfo img { width: 40%; height: auto; padding-left: 120px; }
.spdevname { display: block; line-height: 20px; font-size: 1rem; font-family: "goldman"; }
.spdevinfo {
	display: block; line-height: 12px; text-shadow: 0 0 4px white, 1px 1px 2px white; font-size: 12px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ddevinfo span:nth-of-type(1) { padding-left: 117px; color: #003c00;}
.ddevinfo span:nth-of-type(2) { padding-left: 77px; }
.ddevinfo span:nth-of-type(3) { padding-left: 66px; }
.ddevinfo span:nth-of-type(4) { padding-left: 55px; font-size: 10px; }

.dcont_rside {
	position: absolute; top: 50px; right: 0; width: 50px; height: calc(100% - 90px);
	background-image: linear-gradient(135deg, transparent 30% , rgba(0,0,0,0.5) 70%), linear-gradient(135deg, transparent 105px, orange 107px, orange 115px);'
	overflow: hidden;
}

.dcont_null3 {
	position: absolute; bottom: 40px; right: 50px; width: 40px; height: 40px;
	background-image: linear-gradient(135deg,transparent 49% ,rgba(0,0,0,0.5) 50%), linear-gradient(135deg,transparent 50%,orange 50%);'
}

.dcont_bottom {
	position: absolute; left: 40px; bottom: 0; width: calc(100% - 40px); height: 40px;
	background-image: linear-gradient(135deg,transparent 42%,rgba(0,0,0,0.5) 70%), linear-gradient(135deg,transparent 42px,orange 45px ,orange 52px);
}

.dcont_null4 {
	position: absolute; bottom: 0; right: 0; width: 50px; height: 50px;
	background-image: linear-gradient(135deg,transparent 35px,rgba(0,0,0,0.5) 35px,#4040ff 45px);
}

.dcont_foot {
	position: fixed; left: 0; bottom: 0; width: 100%; height: 40px; line-height: 40px; text-align: center;
	font-size: 12px; font-style: italic; color: navy; overflow: hidden; z-index: 901;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/*end BLOK DIVCOMP*/

/*BLOK BYPASS*/
.dmob_login { background-image: linear-gradient(navy,rgba(255,255,255,0.2)); }


/*BLOK DIPLAY NONE*/

@media (display-mode: standalone) {
	.add-button { display: none !important; }
}

#divmobile,
#divcomp,
.dfull_login,
.dfooter
{ display: none; }