/*
Project			: mykey.outlet
Creator			: Tanto Uciha
*/

/* SMARTPHONES - HD : 360px & all device will force here */
body { 
	/* leave empty */ margin: 0 auto;
}
@font-face { 
	font-family: 'poppins'; src: url("../poppins-regular.ttf") format('truetype'); 
}
#loading {
	z-index: 40000001;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: url("../img/loader.gif");
	background-repeat: no-repeat;
	background-position: center 45%;
}
#loading_only {
	display:none;
	z-index: 40000001; overflow:hidden; position:fixed; top: 0; left: 0; width: 100%; height: 100%; text-indent:100%;
	background-image: url("../img/loader.gif"); background-repeat: no-repeat; background-position: center;
}
#rewrite_bg {
	z-index:1999; display:none; position:fixed; top: 0; left: 0; width: 100%; height: 100%; text-indent:100%; background-repeat: no-repeat; background-position: center; background-color: #dad8d8; opacity: 0.9;
}
#rewrite_bg_2 {
	z-index:40000000; display:none; position:fixed; top: 0; left: 0; width: 100%; height: 100%; text-indent:100%; background-repeat: no-repeat; background-position: center; background-color: #dad8d8; opacity: 0.9;
}

/* general */
#message_gagal,
#main #message_gagal {
	z-index: 40000000; display: inline-block;
	position: fixed; top: 30px; width: 95vw; padding: 12px 15px 12px 15px;
	font-size: 14px; font-family: 'poppins', Verdana, Helvetica, sans-serif; color: #FF0000; background-color: #faeaea; border-top: 1px solid #FF0000; border-bottom: 1px solid #FF0000; text-align: left; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
	letter-spacing: 1px;
}

#message_berhasil,
#main #message_berhasil {
	z-index: 40000000; display: inline-block;
	position: fixed; top: 30px; width: 95vw; padding: 12px 15px 12px 15px;
	font-size: 14px; font-family: 'poppins', Verdana, Helvetica, sans-serif; color: #0f906a; background-color: #faeaea; border-top: 1px solid #0d5b48; border-bottom: 1px solid #2CE408; text-align: left; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
	letter-spacing: 1px;
}

#main {
	display: none; width: 100%; margin: 0; padding: 0;
}

#main .header {
	display:flex; align-items: center; margin:10px 0px 10px 0px;
}
#main .header .left {
	width:10vw; text-align:center; padding-left:10px;
}
#main .header .left .img_back {
	border:0; width:30px;
}
#main .header .right {
	width:90vw; text-align:center; font-size:18px; font-family: 'poppins',verdana,helvetica,sans-serif; color: #004733;
}
#main .header .center {
	width:100vw; text-align:center; font-size:18px; font-family: 'poppins',verdana,helvetica,sans-serif; color: #004733;
}

/* new alert */
#my-alert-overlay {
    display:none; /* tetap hidden saat load */
    position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:39999999; align-items:center; justify-content:center;
}
.my-alert{
    display:none; position:fixed; z-index:40000000;
}
.my-alert-box{
    background:#FFFFFF; padding:25px 30px; border-radius:15px; text-align:center; box-shadow:0 5px 25px rgba(0,0,0,0.2); animation:popupIn_message_fail_success .25s ease-out; will-change:transform; backface-visibility:hidden;
	max-width:75vw; min-width:250px;
}
.my-alert-icon{
    width:80px; height:80px;
    background-size:contain; background-repeat:no-repeat; margin:0 auto 10px auto; animation:iconBounce .6s ease-out;
}
.my-alert-icon-success{
    background-image:url('../img/message_berhasil.png');
}
.my-alert-icon-fail{
    background-image:url('../img/message_gagal.png');
}
/* closing animation */
.my-alert-closing .my-alert-box{
    animation:popupOut_message_fail_success .25s ease-in forwards;
}
@keyframes popupOut_message_fail_success{
    from{transform:scale(1);opacity:1;}
    to{transform:scale(.7);opacity:0;}
}
@keyframes popupIn_message_fail_success{
    from{transform:scale(.7);opacity:0;}
    to{transform:scale(1);opacity:1;}
}
@keyframes iconBounce{
    0%{transform:scale(1);}
    30%{transform:scale(1.4);}
    60%{transform:scale(.9);}
    100%{transform:scale(1);}
}
/* end */

#screen-lock {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #fff; display: none; align-items: center; justify-content: center;
	z-index:39999998;
}

/* font global */
.font_global { font-family: 'poppins',verdana,arial,helvetica; }
.font_left { text-align:left !important; }
.font_center { text-align:center !important; }
.font_right { text-align:right !important; }
.font_justify { text-align:justify !important; }

.font_hitam { color:#000000 !important; }
.font_putih { color:#FFFFFF !important; }
.font_merah { color:#FF0000 !important; }
.font_abuabu { color:#80776a !important; }
.font_hijau { color:#0d5b48 !important; }

.font_12 { font-size: 12px !important; }
.font_13 { font-size: 13px !important; }
.font_14 { font-size: 14px !important; }
.font_15 { font-size: 15px !important; }
.font_16 { font-size: 16px !important; }
.font_22 { font-size: 22px !important; }

.font_hapus { font-size: 20px !important; }
.font_tebal { font-weight: bold !important; }
.font_normal { font-weight: normal !important; }
.font_clear_search { font-size: 20px !important; }

.gl_jarak_kolom_25 { line-height: 25px !important; }
.gl_jarak_kolom_32 { line-height: 32px !important; }

.mandatory { font-size: 15px; color: #FF0000; padding-right: 3px; }

/* GLOBAL FORM */
.new_form_frame {
	padding: 4px; margin-bottom:12px;
}
.new_form_label {
	padding: 4px;
}
.form_text {
	width: 98%; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none;
	background: transparent; outline: 0; text-decoration: none; resize: none; border: none; box-sizing: border-box;
	padding: 4px ; margin: 2px;
	border-bottom: 1px solid #79a3a0;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form_text:focus {
	border-bottom: 1px solid #e98f7a;
}
.form_select {
	-webkit-appearance: none;-moz-appearance: none;background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px;
	border-radius: 4px; margin-right: 2rem; padding: 1rem; padding-right: 2rem;
	border: 1px solid #dfdfdf;
}
.form_select:focus {
	border-bottom: 1px solid #e98f7a;
}
.form_textarea {
	width: 98%; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none;
	background: transparent; outline: 0; text-decoration: none; resize: none; border: none; box-sizing: border-box;
	padding: 4px ; margin: 2px;
	border-bottom: 1px solid #79a3a0;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form_textarea:focus {
	border-bottom: 1px solid #e98f7a;
}
.form_button {
	width:80%;
	padding: 12px 20px 12px 20px; margin-left:auto; margin-right:auto;
	border-radius:15px; background-color:#148d6a; cursor: pointer;
}
/* foto */
.new_form_label_foto {
	text-decoration:none; cursor: pointer;
	padding: 10px 10px 10px 40px;
	background: url("../img/browse_foto.png") #FFFFFF 2px no-repeat;
	background-size: 30px 30px; height:50px; border-radius:6px; border:1px solid #79a3a0;
}
.new_form_show_file_name {
	font-style: italic; margin:5px 0px 5px 0px;
}
.new_form_img {
	width:165px; border:0; border-radius:10px;
}
/* checkbox */
.new_form_frame_checkbox {
	display: block; position: relative; user-select: none; color: #148d6a; line-height: 25px;
	padding-left: 35px;
}
.new_form_checkbox { /* hide native checkbox */
	position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;
}
.new_form_checkmark { /* box */
	position: absolute; top: 0; left: 0; border-radius: 4px;
	background-color: #148d6a; /* always green */
	height: 25px; width: 25px;
}
.new_form_checkmark:after { /* check icon hidden by default */
	content: ""; position: absolute; display: none;
}
.new_form_checkbox:checked ~ .new_form_checkmark:after { /* show check when checked */
	display: block;
}
.new_form_checkmark:after { /* draw the check */
	left: 9px; top: 5px; width: 5px; height: 10px;
	border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.selected_div {
	cursor:pointer; border:1px solid #148d6a; border-radius:10px;
	padding: 4px; margin: 5px 2px 5px 2px;
	background: url("../img/checklist.png") #f0fcf4 right 0px no-repeat; /* f0fcf4 */
	background-size: 28px 21px;
	background-position: right 1% top 5px;
}

.width40 { width:40vw !important; }
.width45 { width:45vw !important; }
.width50 { width:50vw !important; }
.width55 { width:55vw !important; }
.width60 { width:60vw !important; }

.gl_margin_top_10 { margin-top:10px !important; }
.gl_margin_top_20 { margin-top:20px !important; }
.gl_margin_top_30 { margin-top:30px !important; }
.gl_margin_top_40 { margin-top:40px !important; }
.gl_margin_top_50 { margin-top:50px !important; }
.gl_margin_top_60 { margin-top:60px !important; }