@import "table.css"; 
@import "radiobtn.css";
@import "checkbox.css";
@import "dropdown.css";
@import "gambar.css";

body {
font-family: "Lato", Helvetica, Arial, sans-serif;
  /*color: #ecf0f1;*/
  color: #FFFFFF;
  background:url(../imej/header-bg2.png) no-repeat top center fixed;
  background-size: cover;
  /*background-color: #44B3C2;
  background-image:url(../SPM/imej/header-bg.png) no-repeat top center;*/
}
::placeholder {
  color:#7B8D8E;
  opacity: 1; /* Firefox */
}
input[type=text].input1,input[type=password].input1 {
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size:16px;
  	color: #7f8c8d;
    /*width: 100px;
	text-align:center;*/
	border-radius: 13px;
	padding: 10px 32px;
    transition: ease-in-out, width .35s ease-in-out;
	border-color: transparent;
}
input[type=text]:focus.input1,input[type=password]:focus.input1 {
    font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size:16px;
  	color: #1C263C;
	background-color:#F2EDD8;
	border-radius: 13px;
	padding: 10px 32px;
	/*width: 100px; 
	text-align:center;*/
	border: 2px solid;
	border-color: #ffffff;
}

input[type=button].buttonbiasa, input[type=submit].buttonbiasa, input[type=reset].buttonbiasa {
    background-color: #44B3C2;
    border: 2px solid white;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
    cursor: pointer; 
	font-weight:bold;
}
input[type=button]:hover.buttonbiasa,input[type=submit]:hover.buttonbiasa,input[type=reset]:hover.buttonbiasa{
    color: #FFFFFF;
	 border: 2px solid #AAF200;
	 padding: 10px 32px;
	  background-color:#44B3C2;
	  transition: transform .7s ease;
	  transform: scale(1.1);
}
input[type=button].buttonreset, input[type=submit].buttonreset, input[type=reset].buttonreset {
    background-color: #44B3C2;
    border: 2px solid white;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
    cursor: pointer; 
	font-weight:bold;
}
input[type=button]:hover.buttonreset,input[type=submit]:hover.buttonreset,input[type=reset]:hover.buttonreset{
    color: #FFFFFF;
	 border: 2px solid #E45641;
	 padding: 10px 32px;
	  background-color:#44B3C2;
	  transition: transform .7s ease;
	  transform: scale(1.1);
}
input[type=button].buttonmenu, input[type=submit].buttonmenu, input[type=reset].buttonmenu {
    background-color: #44B3C2;
    border: 2px solid white;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
    cursor: pointer; 
	font-weight:bold;
	/*background-image: url(../SPM/images/email-24.png); 
	background-repeat: no-repeat;
	background-position: right;*/
}
input[type=button]:hover.buttonmenu,input[type=submit]:hover.buttonmenu,input[type=reset]:hover.buttonmenu{
    color: #44B3C2;
	 border: 2px solid #44B3C2;
	 padding: 10px 32px;
	  background-color:#FFFFFF;
	  transition: transform .7s ease;
	  transform: scale(1.5);
}

input[type=button].secureword, input[type=submit].secureword, input[type=reset].secureword {
    background-color: red;
    border: 2px solid #E45641;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
	font-size:24px; 
	font-weight:bold;
}
input[type=button].redbutton, input[type=submit].redbutton, input[type=reset].redbutton {
    background-color: #F2635F;
    border: 2px solid white;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
    cursor: pointer; 
	font-weight:bold;
}
input[type=button]:hover.redbutton,input[type=submit]:hover.redbutton,input[type=reset]:hover.redbutton{
    color: #FFFFFF;
	 border: 2px solid #FFFFFF;
	 padding: 10px 32px;
	  background-color:#F2635F;
	  transition: transform .7s ease;
	  transform: scale(1.1);
}
textarea {
    margin-left: auto;
    margin-right: auto;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size:16px;
  	color: #7f8c8d;
	border-radius: 13px;
	text-align:left;
	padding: 10px 32px;
    transition: ease-in-out, width .35s ease-in-out;
	border-color: transparent;
}
textarea:focus{
  	color: #1C263C;
	border-radius: 13px;
	text-align:left;
	padding: 10px 32px;
    transition: ease-in-out, width .35s ease-in-out;
	background-color:#F2EDD8;
	border: 2px solid;
	border-color: #ffffff;
}
.text1 {
color: #44B3C2; 
font-weight:bold;
}
.textkelabuBig{
font-family: "Lato", Helvetica, Arial, sans-serif;
font-size:35px; 
color:#F2EDD8;"
}
.textkelabuSmall{
font-family: "Lato", Helvetica, Arial, sans-serif;
font-size:16px; 
font-weight:bold; 
color:#F2EDD8;"
}
.redtext {
font-family: "Lato", Helvetica, Arial, sans-serif;
color: red;
font-size:16px;
font-weight:600;
}
.whitetext {
font-family: "Lato", Helvetica, Arial, sans-serif;
color: white;
font-size:16px;
font-weight:600;
}

.upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
}

.upload + label {
    width: 130px;
    height:30px;
    color: white;
    line-height: 1.7em;
    /*font-weight: 500;font-size: 1em;
	text-transform: uppercase;
	box-shadow: 0px 3px 0px #a73337;*/
    text-align: center;
    background-color: #44B3C2;
    display: inline-block;
    border-radius: 10px;
	border: 2px solid white;
    transition: 150ms;
	
	/*background-color: #44B3C2;
    border: 2px solid white;
	border-radius: 13px;
    color: #FFFFFF;
    padding: 10px 32px;
    margin: 2px 2px;
    cursor: pointer; */
    
}

.upload:focus + label,
.upload + label:hover {
    background-color: #44B3C2;
	border: 2px solid #AAF200;
	
	  transform: scale(1.1);
    /*box-shadow: 0px 5px 0px #d03338;
    cursor:pointer;
	
	color: #FFFFFF;
	 transition: transform .7s ease;
	 padding: 10px 32px;
	  background-color:#44B3C2;
	  
	*/
}
/*
.upload:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}*/
.zoom:hover {
  transition: transform .2s ease;
	  transform: scale(1.1);
}