html,BODY {height:100%;}

BODY {
  padding:0;
  margin:0;
  height:100vh;
  /* background-color: #C7234A;	*/
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.0em;
	color: #000;
	margin: 0 auto;
  }
  
#ALL {width:100%;height:100%;background-color: #C7234A;}
#ALL_1 {width:100%;height:100%;background-color: #FFFFFF;}
#U13,#U16,#U17,#U18,#U26,#U27 {width:100%;height:100%;}
#U13,#U18 {background-color: #D8E6EA;}
#U1_2,#U1_3,#U4_modal,#U6_modal,#U25_modal{display:none;}
  
.errmessage1{display:block;position:absolute;top:20%;left:0;width:100%;text-align:center;border:1px dashed orange;text-align:center;color:white;font-size:2em;}

.errmessage {
  display:block;
  background-color: #FFF;
  color: #000;
  width: 100%;
  margin: auto;
  padding: 2.3em;  
  position: relative;
  font-size:1.0em;
  border-radius: 10px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}


/*****/
#ALL_LOGO {
	background-color: #FFF;
	height: 8%;
	margin: auto;
	width : auto;
	text-align: center;
	padding: 2% 0 2% 0;
}

#ALL_LOGO img {
  padding: 0 1% 0 1%;
}

.imgLogo {
	width: 100%;
	height: auto;
	margin: auto;
}


/*****SLIDER*****/
#U1 {
	position: absolute;
	height:90%;
	width:99%;  
	color: #ffffff;
}

#box_teks {
	height:90%;
	width:100%; 
	display: inline-block;
	text-align: center;
}

.mySlides {display:none;}
img {vertical-align:middle;}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 80%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  padding: 0.5em;
  color: white;
  font-weight: bold;
  font-size: 2.0em;
  transition: 0.6s ease;
  border-radius: 0 0.2em 0.2em 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0.2em 0 0 0.2em;
}

.prev {
	left: 0;
	border-radius: 0.2em 0 0 0.2em;
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 1.0em;
  padding: 8px 12px;
  top :0;
  width: 100%;
  text-align: center;
}

.t_content {
  color: #fff;
  font-size: 0.8em;
  padding: 8px 12px;
  top :0;
  width: 95%;
  text-align: left;
  line-height: 1.6;
}

#welcome{
	font-size: 1.5em;
}
#welcome2{
	font-size: 1.3em;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/*****/
#U2 {
  display:none;
  width:100%;height:auto;
  text-align:center;
  position:relative;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  padding: 2%;
}

#U9 {
  width:100%;height:auto;
  color: #ffffff;
  text-align:center;
  position:relative;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  padding: 2%;
}

#U9X {
	background-color: #C7234A;
	color: #ffffff;
	height: 90%;
	margin: auto;
	text-align: center;
	padding: 2% 0 0 0;
}

#U2_form,#U9_form {
    padding: 1% 0 0 0;
}

.input-container {
  /*display: -ms-flexbox;  IE10 */
	display: flex; 
	width: 100%;
	margin-bottom: 15px;
}

.icon {
	padding: 15px 20px;
	background: white;
	color: black;
	text-align: center;
	font-size:1.2em;
	border: none;
	border-radius:5px 0 0 5px;
}

.input-field {
	width: 100%;
	padding: 15px 20px;
	outline: none;
	border: none;
	border-radius:0 5px 5px 0;  
  
}

.input-field:focus {
	border: 2px solid black;
}

.btnSubmit {
	background-color: #FFBF00;
  color: #000;
	border: none;  
	padding: 1em;
	text-align: center;
	font-weight: bold;
	margin: 0.7em;
	cursor: pointer;
	border-radius:5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btnSubmit a:link { color: #000; font-size: 1.5em; font-weight: bold; text-decoration: none; }

.btnOk {
	background-color: #FFBF00;
  color: #000;
	border: none;  
	padding: 0.5em;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	border-radius:5px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btnBahasa {
	background-color: #FFBF00;
  color: #000;
	border: none;  
	padding: 0.5em 1em;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	border-radius:5px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/***ini guna masa awal css sebelum ada modal**/
#ALL_POPUP {
	background: rgba(0, 0, 0, 0.5);
	position : absolute;
	height: 15%;
	margin : auto;
	width: 100%;
	bottom: 50%;
	text-align: center;
	color: #fff;
}

#BOX_POPUP {
	margin : 40px;
}

.teksPopup {

}



/*****/
#U21 {
  width:100%;height:auto;
  color: #ffffff;
  text-align:center;
  position:relative;
  top:30%;
  left:50%;
  transform:translate(-50%, -50%);
  padding: 2%;
}

#BOX_MESEJ {
  color: #FFF;
	text-align :center;
	height: auto;
	width : 100%;
	padding: 1.0em 0 1.0em 0;
}


/*****/
#ALL_FOOTER {
	background-color: #FFF;
	position: fixed;
	height: 5%;
	width: 100%;
	margin: auto;
	bottom : 0;
	text-align: center;
}
 
#footer {
  font-family : Arial Narrow;
	font-size:0.7em;
	color: #000;
	text-align : center;
	padding: 1.0em 0 1.0em 0;
}



/**** header untuk pengundian sahaja *****/
#ALL_HEADER {
  width: 100%; /* edit */
  background-color: #C7234A;
  color: #FFF;
  padding: 2%;
  margin-bottom: 0.5em;
  height:10%;
}

#ALL_HEADER a:link { color: #FFF; font-size: 2.5 em; font-weight: bold; text-decoration: none; }

#HEADER_KIRI {
  display: inline-block;  
  width: 25%; 
  padding-left: 1.0em;
}

#HEADER_KIRI img {
  padding: 0 1% 0 1%;
}

#HEADER_TENGAH {
  display: inline-block;  
  width: 45%; 
  text-align: center;
}

#HEADER_KANAN {
  display: inline-block;
  float: right;
  width: 25%; 
  text-align: right; 
}

#HEADER_KANAN img {
  padding: 0 1% 0 1%;
}

#bahasa {
  display: inline-block;
  width: 30%;  
  vertical-align: super;
}

#infoPelajar {
  display: inline-block;
  padding: 0.3em 0.5em 0 1.0em; 
}

/*****/

#BOX_PELAJAR {
	background: rgba(255, 255, 255); 
  color: #000;  
	width: 100%;
  margin: auto;
	height: auto;
	/*border: 1px solid red;*/
	text-align: left;
  padding: 2em;
  line-height: 1.5em;
  border-radius: 10px;
}

.tajukPelajar {
	font-weight: bold;
	font-size: 1.2em;	
}

.img_pel{
	margin: 0.6em 0 0.6em 0;
}


/* submit */
#U13_topInfo{
  /*position:fixed;*/
  top:0;
  left:0;
  width: 100%;
  background-color: #FFF; /*tambah */
}

#U13_voteArea{
  position:fixed;

  left:0;
  width: 100%;
  height:calc(100% - 33% - 44px);
  background-color: #D8E6EA;
  overflow:scroll;
}

#SUBMIT_KIRI {
  display: inline-block;
  width: 52%;
}

#SUBMIT_KANAN {
  background-color: #D8E6EA;
  display: inline-block;
  width: 44%;
}

#BOX_MASA {
  border-bottom: 2px solid #D8E6EA;
  height: 50%; 
}

#labelMasa {
  font-family: Arial Narrow;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

#U13_masa,#U18_masa {
  font-family: Arial Narrow;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

.teksMerah {
  /* color: #C7234A;  SPREQ tukar kejap... nanti betulkan balik 
color:lightblue;*/
color: #C7234A;
}

#BOX_VOTE { 
  border-top: 2px solid #D8E6EA;
  height: 50%; 
  text-align: center; 
}

#labelVote {
  font-family: Arial Narrow;
  font-size: 1.1em;
  font-weight: bold;
}

#U13_bilangan {
  display: inline-block;
}

#U13_dipilih_fakulti,#U13_maksima_fakulti,#U13_dipilih_umum,#U13_maksima_umum,#U13_slash {
  font-family: Arial Narrow;
  font-size: 2.0em;
  font-weight: bold;
}

/*
#U13_maksima,#U18_maksima,#U13_dipilih,#U18_dipilih{display:inline-block;}
*/

#btnSubmit,#U13_btnSubmit,#U18_btnSubmit  {
  width: 100%;
  float: right;
  background-color: #D8E6EA;
  color: #FFF;
  font-size: 1.3em;
  font-weight: bold;
  border: none;  
  padding: 1.6em 0.7em 1.6em 0.7em;
  text-align: center;
  cursor: pointer;
}

#btnSubmit,#U13_btnSubmit,#U18_btnSubmit a:link { color: #FFF; font-size: 2.5 em; font-weight: bold; text-decoration: none; }


/* tajuk */
#TAJUK {  
  padding: 2% 1% 2% 1%;
  background-color: #000;
  color: #FFF;
  font-size: 1.5 em;
  font-weight: bold;
  text-align: center;
}


/* calon */
#U13_calonFakulti,#U13_calonUmum,#U18_calonUmum {
  background-color: #D8E6EA;
  margin:auto;
  width:calc(100% - 30px);
  padding: 4% 0 4% 0;
}

.column {
  float: left;
  width: 25%;
}
.column1 {
  float: left;
  width: 70%;
}
.column2 {
  float: left;
  width: 10%;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.U13_eachCalon_fakulti, .U13_eachCalon_umum, .U18_eachCalon {
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  padding: 2%;
  margin-bottom: 4%;
}

.U13_wajahCalon, .U18_wajahCalon {
  display: inline-block;
  width: 25%;
  height: auto;
  border:1px solid gray;
  box-shadow: 0 0 5px gray;
  vertical-align: top;
}

.U13_infoCalon, .U18_infoCalon {
  display: inline-block;
  width: 60%; 
  padding: 0 0 0 2%;
  margin: auto;
}

.U13_idCalon, .U18_idCalon {
  font-size: 1.5em;
  font-weight: bold;
}

.U13_namaCalon, .U18_namaCalon {
  font-size: 1.1em;
}

.U13_matriksCalon, .U18_matriksCalon {
  font-size: 1.1em;  
}

.U13_btnCalon, .U18_btnCalon {
  display: inline-block;
  width: 100px;
  float: right;
  background-color: #FFBF00;
  font-size: 1.0em;
  border: none;  
  padding: 0.5em;
  text-align: center;
  margin: 0.7em;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.U13_btnCalon, .U18_btnCalon a:link { color: #000; font-size: 1.0em; font-weight: bold; text-decoration: none; }


/* pop up --- ini boleh guna bila dlm html*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding: 10%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  text-align: center;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  color: #000;
  margin: auto;
  padding: 2.3em;
  border: 1px solid #888;
  width: 90%;
}

.modal-content-2 {
  background-color: #fefefe;
  color: #000;
  margin: auto;
  padding: 2.3em;
  border: 0px solid #888;
  width: 90%;
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* content sitemenu */

.site_content {
  color: #000;
  font-size: 0.8em;
  padding: 1.5em 0 1.5em 0;
  top :0;
  width: 100%;
  text-align: left;
  line-height: 1.2em;
}


/* footer */
#ALL_FOOTER_2 {
	background-color: #FFF;
	width:100%;
  height: 5%;
  margin: auto;
	bottom:0;
  padding: 2% 0 2% 0;
  position: fixed;
}

#footer_2 {
	font-family : Arial Narrow;
	font-size:0.7em;
	color: #000;
	text-align : center;

}


/*************************/
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 200;
      top: 0;
      left: 0;
      background-color: #f1f1f1;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 15px 15px 15px 32px;
      text-decoration: none;
      color: #000;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover {
      background-color: #fff;
      font-weight: bold;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    .sidenavmenu {
      padding: 15px 15px 15px 32px;
      text-decoration: none;
      color: #000;
      display: block;
      transition: 0.3s;
      height:40px;

    }


/*************************/




@media screen and (min-width:400px) {  
  #U13_voteArea{
    height:calc(100% - 25% - 44px);
  }

  #btnSubmit,#U13_btnSubmit,#U18_btnSubmit  {
    padding: 1.9em 0.7em 1.9em 0.7em;
  }
}

@media screen and (max-width:320px) { 
  #welcome{
    font-size: 1.3em;
  }
  .t_content {
    font-size: 0.7em;
  }
  #U13_voteArea{
    height:calc(100% - 31% - 44px);
  }
  #U13_masa {
    font-size: 1.0em;
  }
  
  #labelVote {
  font-size: 1.0em;
  }
  
  #U13_dipilih_fakulti,#U13_maksima_fakulti,#U13_dipilih_umum,#U13_maksima_umum,#U13_slash {
  font-size: 1.7em;
  }
  
  .U13_wajahCalon{width:80px;height:104px;}
  
  #btnSubmit,#U13_btnSubmit,#U18_btnSubmit  {
    padding: 1.2em 0.7em 1.2em 0.7em;
  }
}