@font-face{
    font-family:'corbel';
    src:url('../../fonts/CORBEL.TTF');
    font-weight:normal;
    font-style:normal}
  body{height: 100%;padding:0;margin:0;}

  #top-header{background-color:#c30000;border-bottom:1px solid #ad0000;color:#eee;font-family:Arial;height:42px;left:0;padding:5px 0 0;position:relative;width:100%;z-index:5;}
  #top-header .logo-brand{font-family:Impact, Charcoal, sans-serif;color:#ccc;text-transform:uppercase;letter-spacing:4px;font-size:3vmin;text-shadow:-3px -3px 0 rgba(0,0,0,0.2);margin-left:12px;}/*color:#fff;font-family:corbel,Arial;font-weight:bold;letter-spacing:1px;*/
  #top-header .logo-user{color:#fff;}
  #top-header .logo-text{font-family: Impact, Charcoal, sans-serif;font-size:3vmin;color:#fff;letter-spacing:1px;text-shadow:-5px -5px 0 rgba(0,0,0,0.2);}  
  #version{color:#fff;font-family:comic Sans MS;font-size:3vmin;font-weight: bold;margin-left:4px;letter-spacing: 1px;margin-right:20px;}
  #top-header #smaller-detail{color:#FF7878;display:block;font-size:0.766em;letter-spacing:-0.03em;margin-left:10px;margin-top:-3px;}  
  
  #menu-icon{padding: 0 0 0 5px;height:50px;}
  .icon{height:50px;width: 55px;cursor:pointer;}
  #breadcrumb-bar{background-color:#cf0000;height:23px;border-bottom:1px solid #9a0000;border-top:1px solid #e80000;margin-top:42px;width:100%;z-index:99}/position:relative;*/
  #top-shadow{height:4px;position:absolute;top:44px;width:100%}  
  #logo-login{padding:0;text-align:left!important}/*background-color:#f5f5f5;*/
  #logo-login img.icon{float:right;margin:15px}  
  span.h2{border-radius: 15px 15px 0 0;background-color:#f5f5f5;display:block;font-family:Impact, Charcoal, sans-serif;font-size:20px!important;font-weight:normal;text-transform:uppercase;letter-spacing:1.2px;line-height:24px;margin:0;padding-top:7px;padding-bottom:7px;text-align:center;} /*color:#f00;background-color:transparent;color:#555;*/
  
  /*#form-login{padding:25px;}  
  #form-login p{color:#333;padding:0 15px;text-align:left}
  #form-login-shadow{margin-left:40px;width:250px}*/
  
  #error-login{color:#cf0000;float:left;background:#ffecec url('../Utilities/image/cross_octagon.png') no-repeat 5px 50%;border:1px solid #f5aca6;border-radius:10px;font-family:Tahoma,Geneva,Arial,sans-serif;
    font-size:12px;padding:8px 34px 8px 28px;width:84%;} /*margin:0 0 2px 41px;*/
  #error-login span{text-transform:uppercase;font-weight:bold;}   
  
  #main-content{height: 90%}
  #content-login{
	/*overflow-x:auto;*/
	margin:30px 20px 10px 30px;
	float:right;
	background-color:#f5f5f5;
	border:2px solid #cf0000;
	border-radius:3%;box-shadow: 5px 8px #cf0000;
	background: linear-gradient(to top, #cf0000, 2%, #fff);
	/*height:520px;*/
	height: 94%;
	} /*width:28%;text-align:right;*/  
  #content-left{
	/*overflow-x:auto;*/
	margin:30px 0 10px 20px;
	float:left;
  	border:1px solid #f6d4d4;
	border-radius: 0 15px 15px 0;  		
  	background: linear-gradient(to left, #cf0000, 7%, white);
  	/*height:530px;*/
  	height: 97.2%;
  	} /*width:66%;*/
  #bottom-footer{
	background-color:#c30000;
	position:fixed;
	bottom:0;
	width:100%;
	height:30px;   /* Height of the footer */
	font-weight:bold;
	padding-top:5px;
	color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:center;
	z-index:5 ; 
	background: linear-gradient(to bottom, #000, 10%, #cf0000);		  
  } 
  #bottom-footer a{text-decoration:none;color:#ccc;}
  #bottom-footer a:hover{text-decoration:underline;color:blue;}
  .box-entity a{text-decoration:none;display:block}.box-entity>a img{border:0}   
  .box-entity{background-color:transparent;height:float;margin:0 0 16px 0;padding:5px;width:100%}
  /*.entity-text{color:#cf0000;font-family:corbel,arial,tahoma,sans-serif;font-size:26px;letter-spacing:-1px;line-height:24px}*/
  .entity-text{background-color:transparent;font-family:Impact, Charcoal, sans-serif;font-size:20px!important;font-weight:normal;color:#cf0000;background:-webkit-linear-gradient(#cf0000, #f26a6a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
  .entity-text-title{background-color:transparent;font-family:Impact, Charcoal, sans-serif;font-size:20px!important;font-weight:normal;color:#fff;text-transform: uppercase;}

  .entity-image-frame{background-color:#cf0000;color:#fff;float:left;height:74px;margin:0 12px 0 0;position:relative;width:112px}
  .entity-image{background-color:#fff;color:#fff;float:left;height:63px;margin:5px;width:102px}
  .text-entity-detail{color:#505050;font-family:tahoma,arial,sans-serif;font-size:12px;line-height:14px;display:block}
  .text-entity-detail a{text-decoration:none;display:inline-block;}
  .text-entity-detail a:hover{text-decoration:underline}
  .text-entity-reminder{color:#505050;font-family:corbel,tahoma,sans-serif;font-size:12px}

  #instructions{margin:20px 35px 0 35px;border-bottom:2px solid #ccc;font-family: Impact, Charcoal, sans-serif;font-size:14px;letter-spacing:4px;  background: -webkit-linear-gradient(#eee, #333);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
  #instructionsText{margin:1px 35px 5px 35px;border-bottom:2px solid #ccc;font-family:corbel,Helvetica,Arial,sans-serif;font-size:12px;color:#000;background-color:transparent;text-align:justify}  
  
  #how-to-login{margin:2px 10px 0 10px;text-align:left}
  #content_popup{font-family:corbel,tahoma,arial,sans-serif}.desc_recovery{font-size:11px;color:#666}
  a{font-family:Arial, Helvetica, sans-serif;}
  .forgot-password a{text-decoration:none;font-size:12px;color:blue;}
  .forgot-password a:hover{text-decoration:underline;font-size:12px}  
  .forgot-password{text-decoration:none;}
  ::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #ccc;
	font-size:2.0vmin;
	opacity: 1; /* Firefox */
  }
  :-ms-input-placeholder{ /* Internet Explorer 10-11 */
	color: #ccc;
  }
  ::-ms-input-placeholder{ /* Microsoft Edge */
	color: #ccc;
  }  
  
  /* Style the tab */
  .tab {
    margin-top: 1px;
    padding-top:10px;
    padding-left:15px;
    /*background-color:#fff;*/
    background: transparent;
    color:#000;
    font-family: Impact, Charcoal, sans-serif;font-size:12px;letter-spacing:1px;
    border: 1px solid #cf0000;
    border-bottom: none;
  }

  /* Style the tab content */
  .tabcontent {
    padding: 6px 12px;
    border: 1px solid #cf0000;
    border-top: none;
  }
  
  #fancybox-loading{position:fixed;top:50%;left:50%;height:40px;width:40px;margin-top:-20px;margin-left:-20px;cursor:pointer;overflow:hidden;z-index:1104;display:none}* html 
  #fancybox-loading{position:absolute;margin-top:0}
  #fancybox-loading div{position:absolute;top:0;left:0;width:40px;height:480px;background-image: url('../../css/fancy_loading.png')}
  #fancybox-overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:#000;z-index:1100;display:none}* html 
  #fancybox-overlay{position:absolute;width:100%}
  #fancybox-tmp{padding:0;margin:0;border:0;overflow:auto;display:none}
  #fancybox-wrap{position:absolute;top:0;left:0;margin:0;padding:20px;z-index:1101;display:none}
  #fancybox-outer{position:relative;width:100%;height:100%;background:#FFF;border:1px solid rgba(0,0,0,0.333)}
  #fancybox-inner{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;outline:0;overflow:hidden}
  #fancybox-hide-sel-frame{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}
  #fancybox-close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background-image: url('../../css/fancybox.png');background-position:-40px 0;cursor:pointer;z-index:1103;display:none}
  #fancybox_error{color:#444;font:normal 12px/20px Arial;padding:7px;margin:0}
  #fancybox-content{height:auto;width:auto;padding:0;margin:0}
  #fancybox-img{width:100%;height:100%;padding:0;margin:0;border:0;outline:0;line-height:0;vertical-align:top;-ms-interpolation-mode:bicubic}
  #fancybox-frame{position:relative;width:100%;height:100%;border:0;display:block}
  #fancybox-title{bottom:0;left:0;font-family:Arial;font-size:12px;z-index:1102;border-bottom:1px solid #cecece}.fancybox-title-inside{padding:10px 0;text-align:center;color:#333}.fancybox-title-outside{padding-top:5px;color:#FFF;text-align:center;font-weight:bold}.fancybox-title-over{color:#FFF;text-align:left}
  #fancybox-title-over{padding:10px;background-image: url('../../css/fancy_title_over.png');display:block}
  #fancybox-title-wrap{display:inline-block}
  #fancybox-title-wrap span{height:32px;float:left}
  #fancybox-title-left{background-image: url('../../css/fancybox.png');background-position:-40px -90px;background-repeat:no-repeat}#fancybox-title-main{font-weight:bold;line-height:29px;background-image: url('../../css/fancybox-x.png');background-position:0 -40px;color:#FFF}
  #fancybox-title-right{padding-left:15px;background-image: url('../../css/fancybox.png');background-position:-55px -90px;background-repeat:no-repeat}#fancybox-left,
  #fancybox-right{position:absolute;bottom:0;height:100%;width:35%;cursor:pointer;outline:0;background-image: url('../../css/blank.gif');z-index:1102;display:none}#fancybox-left{left:0}#fancybox-right{right:0}#fancybox-left-ico,#fancybox-right-ico{position:absolute;top:50%;left:-9999px;width:30px;height:30px;margin-top:-15px;cursor:pointer;z-index:1102;display:block}#fancybox-left-ico{background-image: url('../../css/fancybox.png');background-position:-40px -30px}
  #fancybox-right-ico{background-image: url('../../css/fancybox.png');background-position:-40px -60px}
  #fancybox-left:hover,
  #fancybox-right:hover{visibility:visible}#fancybox-left:hover span{left:20px}#fancybox-right:hover span{left:auto;right:20px}.fancy-bg{position:absolute;padding:0;margin:0;border:0;width:20px;height:20px;z-index:1001}#fancy-bg-n{top:-20px;left:0;width:100%;background-image: url('../../css/fancybox-x.png')}#fancy-bg-ne{top:-20px;right:-20px;background-image: url('../../css/fancybox.png');background-position:-40px -162px}#fancy-bg-e{top:0;right:-20px;height:100%;background-image: url('../../css/fancybox-y.png');background-position:-20px 0}#fancy-bg-se{bottom:-20px;right:-20px;background-image: url('../../css/fancybox.png');background-position:-40px -182px}#fancy-bg-s{bottom:-20px;left:0;width:100%;background-image: url('../../css/fancybox-x.png');background-position:0 -20px}#fancy-bg-sw{bottom:-20px;left:-20px;background-image: url('../../css/fancybox.png');background-position:-40px -142px}#fancy-bg-w{top:0;left:-20px;height:100%;background-image: url('../../css/fancybox-y.png')}#fancy-bg-nw{top:-20px;left:-20px;background-image: url('../../css/fancybox.png');background-position:-40px -122px}#fancybox-loading.fancybox-ie div{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png',sizingMethod='scale')}.fancybox-ie #fancybox-close{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png',sizingMethod='scale')}.fancybox-ie #fancybox-title-over{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png',sizingMethod='scale');zoom:1}.fancybox-ie #fancybox-title-left{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png',sizingMethod='scale')}.fancybox-ie #fancybox-title-main{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png',sizingMethod='scale')}.fancybox-ie #fancybox-title-right{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png',sizingMethod='scale')}.fancybox-ie #fancybox-left-ico{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png',sizingMethod='scale')}.fancybox-ie #fancybox-right-ico{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png',sizingMethod='scale')}.fancybox-ie .fancy-bg{background:transparent!important}.fancybox-ie #fancy-bg-n{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-ne{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-e{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-se{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-s{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-sw{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-w{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png',sizingMethod='scale')}.fancybox-ie #fancy-bg-nw{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png',sizingMethod='scale')}
  /* for responsive screen - mobile friendly */
  @media only screen and (min-width: 0px) and (max-width: 700px){
    #top-header{height:70px;position:fixed;}
    #top-header div{float:left;}    
    #breadcrumb-bar{margin-top:70px;position:fixed;}
    #main-content{padding-top:70px;padding-bottom:20px;}    
    #main-content td{float:right;padding:5px;width:98%;}     
	#bookmark table{border: 0;width:98%;}	
	#bookmark table #title{font-size: 1.3em;text-align: center;font-weight: bold;background-color: #ccc;}	
	#bookmark table thead{border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}	
	#bookmark table tr{border-bottom: 3px solid #ddd;display: block;margin-bottom: .625em;}	
	#bookmark table td{border-bottom: 1px solid #ddd;display: block;font-size: .8em;text-align: right;}	
	#bookmark table td::before{content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}	
	#bookmark table td:last-child{border-bottom: 2px solid #ccc;}    
	.tabcontent #studentActivation{display:block;}
	.tabcontent #passwordRecoveryStudent{display:block;}
	.tabcontent #newApplicant{display:block;}
	.tabcontent #passwordRecovery{display:block;}
  } 
  
  /* Whastapp */
  .whatsapp-number {
    background-color: #25D366;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    margin-left: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing:2px;
  }

  .whatsapp-number:hover {
    background-color: #32e375; /* warna hijau lebih terang */
    transform: scale(1.05); /* sedikit besar bila hover */
  }
  
  /* Application Deadline */
  .intake-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f9fafb;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  }

  .intake-table th {
    background: linear-gradient(90deg, #cf0000, #a30000);
    color: white;
    padding: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .intake-table td {
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
  }

  .intake-table tr:nth-child(even) {
    background-color: #fff5f5;
  }

  .intake-table tr:hover {
    background-color: #ffe6e6;
    transition: 0.3s;
  }

  .intake-table td:first-child {
    font-weight: 600;
    color: #a30000;
  }

  .intake-table b {
    color: #cf0000;
  }

  /* Responsive layout */
  @media (max-width: 768px) {
    .intake-table thead {
      display: none;
    }

    .intake-table, .intake-table tbody, .intake-table tr, .intake-table td {
      display: block;
      width: 100%;
    }

    .intake-table tr {
      margin-bottom: 15px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .intake-table td {
      text-align: left;
      padding-left: 45%;
      position: relative;
    }

    .intake-table td::before {
      content: attr(data-label);
      position: absolute;
      left: 15px;
      top: 10px;
      font-weight: bold;
      color: #cf0000;
      text-transform: uppercase;
    }
  }
  
  /* Announcement */
  .announcement-box {
	margin-top:8px;
	width: 100%;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	overflow: hidden;
	/*font-family: 'Segoe UI', sans-serif;
	font-family:Impact, Charcoal, sans-serif;
	letter-spacing: 2px;*/
  }
	
  .announcement-header {
	background: linear-gradient(90deg, #cf0000, #f26a6a);
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 14px;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	font-size: 15px;
  }
	
  .announcement-header i {
	margin-right: 8px;
	font-size: 18px;
  }
  
  .announcement-body {
	padding: 8px 14px;
	background: #fafafa;
	height: 283px;
  }
	
  .announcement-item {
	margin-bottom: 12px;
	color: #333;
	line-height: 1.5;
  }
	
  .announcement-item p {
	margin: 0;
	font-size: 14px;
  }
	
  .announcement-item hr {
	border: 0;
	border-top: 1px dashed #ddd;
	margin: 8px 0;
  }
  
  /* Announcement Message */
  .msg-info {
	font-size: 12px !important;
	font-family: Arial,Helvetica,sans-serif !important;
  }
  .msg-info h4 {
	font-size: 14px !important;
	text-transform: uppercase;
  }

  /* Link */
  .info-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: "Segoe UI", sans-serif;
  }
	
  .info-card {
	/*background: #fff;*/
	border: 1px solid #eee;
	border-left: 6px solid #cf0000;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	overflow: hidden;
  }
	
  .info-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  .info-card a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #333;
	padding: 10px 12px;
  }
	
  .info-card img {
	width: 90px;
	height: 54px;
	object-fit: contain;
	margin-right: 14px;
	border-radius: 6px;
	background: #f8f8f8;
	transition: transform 0.3s ease;
  }
	
  .info-card:hover img {
	transform: scale(1.05);
  }

  .info-text h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #cf0000;
	text-transform: uppercase;
	letter-spacing: 0.5px;
  }

  .info-text p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
  }

  /* Follow Bar */
.follow-bar {
  margin: 4px 0;
  background: linear-gradient(90deg, #b00000 0%, #d40000 50%, #a80000 100%);
  border-radius: 12px;
  padding: 7px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.follow-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-25deg);
  animation: shine 4s infinite linear;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

.arrow-animate { /* Animated Arrow */
  display: inline-block;
  animation: moveRight 1.2s infinite ease-in-out;
}

@keyframes moveRight {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(6px); opacity: 1; }
}

/*.social-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-icons a {
  color: white;
  font-size: 24px;
  transition: all 0.35s ease;
  text-shadow: 0 2px 5px rgba(0,0,0,0.3);
  position: relative;
}

.social-icons a:hover {
  transform: translateY(-4px) scale(1.2);
  color: #fff8e1;
  text-shadow: 0 0 10px #fff, 0 0 20px #ffd700;
}

.social-icons a::after {
  content: attr(title);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
}

.social-icons a:hover::after {
  opacity: 1;
  bottom: -32px;
}*/

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* jarak antara ikon */
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #b30000;
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* tiada glow awal */
}

.social-icons a:hover {
  background: #b30000;
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 80, 80, 0.5);
}
  
  /* Login */
.input-container {
  position: relative;
  /*margin-bottom: 15px;*/
}

.input-container i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #cf0000;
}

.input-container input {
  width: 100%;
  padding: 10px 10px 10px 38px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-container input:focus {
  border-color: #1e88e5;
  outline: none;
  box-shadow: 0 0 5px rgba(30, 136, 229, 0.3);
}

  /* Login */
  #top-login {
	position: relative;
	z-index: 3;
	background: linear-gradient(to right, #cf0000, #f26a6a);
	margin: 10px 40px -25px 40px;
	/*font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-family: Impact, Charcoal, sans-serif;*/
	text-align: center;
	border-radius: 10px 10px 0 0;
	padding: 12px 0;
	box-shadow: 0 3px 8px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
  }

  .entity-text-login{background-color:transparent;font-family:Impact, Charcoal, sans-serif;font-size:24px!important;font-weight:normal;color:#fff;text-transform: uppercase;letter-spacing: 3px;}
  
#form-login {
  z-index: 2;
  margin: 0 40px 40px 40px;
  border: 1px solid #cf0000;
  padding: 30px 40px;
  border-radius: 0 0 10px 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

#form-login:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

#form-login label {
  color: #505050;
  font-weight: 600;
  display: block;
  padding: 4px 0;
  text-align: left;
  font-size: 13px;
}

/* === Input Field with Icon === */
.input-container {
  position: relative;
  margin-bottom: 6px;
}

.input-container i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #cf0000;
  font-size: 16px;
  transition: color 0.3s;
}

.input-container input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-container input:focus {
  border-color: #cf0000;
  box-shadow: 0 0 6px rgba(207, 0, 0, 0.25);
  outline: none;
}

.input-container input::placeholder {
  color: #aaa;
}

/* === Submit Button === */
input.accept {
  width: 100%;
  height: 42px;
  background: linear-gradient(to bottom, #f26a6a, #cf0000);
  border: 1px solid #cf0000;
  border-radius: 6px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-shadow: none;
  transition: all 0.3s ease;
}

input.accept:hover {
  background: #b30000;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

input.accept:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}

input.cancel {
  width: 100%;
  height: 42px;
  /*background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);*/
  border: 1px solid #ccc;
  border-color:#c9c9c9 #c9c9c9 #999;
  border-radius: 6px;
  color: #333;
  /*text-shadow:1px 1px #fff;transition:all .218s ease;-o-transition:all .218s ease;-moz-transition:all .218s ease;-webkit-transition:all .218s ease;*/
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-shadow: none;
  transition: all 0.3s ease;
}

input.cancel:hover {
  background: #f9f9f9;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

input.cancel:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}

  /* Visitor */
  .visitor-info {
	text-align: center;
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 14px;
	/*color: #fff;*/
	font-weight: 550;
	margin-top: 5px;
	/*line-height: 1.6;*/
	letter-spacing: 0.3px;
  }
	
  .visitor-info i {
	color: #fff;
	margin-right: 2px;
  }
	
  .visitor-info strong {
	color: #fff;
	font-weight: 600;
  }
	
  .visitor-info span.label {
	color: #fff;
	opacity: 0.9;
  }
	
  .visitor-info:hover {
	text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
	transition: text-shadow 0.3s ease;
  }
  
  /* Under Maintenance */
.maintenance-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  border-radius: 12px;
  padding: 20px 25px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Segoe UI", Arial, sans-serif;
  animation: fadeIn 0.8s ease-in-out;
}

.maintenance-icon {
  font-size: 80px;
  margin-bottom: 10px;
  animation: spin 3s linear infinite;
}

.maintenance-text h3 {
  margin: 0;
  font-size: 40px;
  font-weight: bold;
}

.maintenance-text p {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.5;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 


  /* QR Whatsapp */
.qr-whatsapp {
  text-align: center;
  margin-top: 15px;
}

.qr-whatsapp .icon {
  font-size: 50px;
  color: #25D366; /* warna hijau WhatsApp */
  margin-bottom: 6px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.qr-whatsapp .icon:hover {
  transform: scale(1.2);
  color: #1ebe57;
}

.qr-whatsapp img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  /*border: 2px solid #fff;*/
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-whatsapp img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}