/************************************************************************************
WARNA
*************************************************************************************/
putih	{color:#FFF;}
merah	{color:#FF0000;}
hijau	{color:#009741;}
kuning	{color:#FFFF00;}
biru	{color:#065387;}
orange	{color:#F27324;}
/************************************************************************************
FONT
*************************************************************************************/	
f14{	
	font-family	:sans-serif;
	font-size	:14px;	
	font-weight	:none;}
f16{	
	font-family	:sans-serif;
	font-size	:16px;	
	font-weight	:none;}
f20{	
	font-family	:sans-serif;
	font-size	:20px;	
	font-weight	:none;
	line-height	:1.5;}
f24{	
	font-family	:sans-serif;
	font-size	:24px;	
	font-weight	:bold;}
f36{	
	font-family	:sans-serif;
	font-size	:36px;	
	font-weight	:bold;}

a {
    color: #C70000;
    text-decoration: none;
    font-size: 16px;}
a:hover {
    color: purple;
    text-decoration: underline;}
a:visited {
    color: #C70000;}

/* -------- */
.row:after{
	content			:"";
    display			:table;
    clear			:both;
	padding			:5px 0px 0px 0px;}
.col-50a {
    float			:left;
    width			:48.5%;
    margin			:2% 1.5% 0px 0px;
	text-align		:left;}
.col-50b {
    float			:left;
    width			:48%;
    margin			:2% 0px 0px 1.5%;
	text-align		:left;}
.col-75 {
    float			:left;
    width			:75%;
    margin			:2% 2% 0px 0px;
	text-align		:left;}
.col-75b {
    float			:left;
    width			:75%;
    margin			:2% 2% 0px 0px;}
.col-100 {
    float			:left;
    width			:100%;
    margin			:2% 2% 0px 0px;
	text-align		:left;}
/* -------- */

input[type=text],
input[type=email]{
 	width			:100%;
 	height			:40px;
	padding			:10px;
 	margin-bottom	:5px;
 	margin-top		:5px;
 	color			:#226180;
 	font-size		:18px;
	border			:1px solid #CCC;
	border-radius	:5px;}

.custom-email {
    width			:100%;
 	height			:40px;
	padding			:10px;
 	margin-bottom	:0px;
 	margin-top		:0px;
 	color			:#226180;
 	font-size		:16px;
	border			:1px solid #CCC;
	border-radius	:5px;}

input[type=text2]{
 	width			:100%;
 	height			:40px;
	padding			:10px;
 	margin-bottom	:0px;
 	margin-top		:0px;
 	color			:#226180;
 	font-size		:16px;
	border			:1px solid #CCC;
	border-radius	:5px;}

input[type=text3]{
 	width			:120px;
 	height			:30px;
	padding			:5px;
 	margin-bottom	:0px;
 	margin-top		:0px;
 	color			:#226180;
 	font-size		:16px;
	border			:1px solid #CCC;
	border-radius	:5px;
	text-align 		:center;}

/* -------- */


input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

/* Style for the custom radio button */
input[type="radio"] + label {
    position: relative;
    padding-left: 30px; /* Adjust as needed */
    cursor: pointer;
    display: inline-block;
    line-height: 25px; /* Adjust as needed */

    font-family	:sans-serif;
	font-size	:16px;	
	font-weight	:none;
	margin-right: 20px;
	margin-bottom: 10px;
}

input[type="radio"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px; /* Adjust as needed */
    height: 20px; /* Adjust as needed */
    border: 2px solid #CCC; /* Border color for unchecked state */
    background-color: #fff; /* Background color for unchecked state */
    border-radius: 50%;
}

/* Style for checked state */
input[type="radio"]:checked + label:before {
    background-color: #007bff; /* Background color for checked state */
    border-color: #007bff; /* Border color for checked state */
    content: '\2713'; /* Unicode check mark character */
    color: #fff; /* Color of the check mark */
    text-align: center;
    line-height: 20px; /* Center vertically */
    font-size: 16px; /* Adjust as needed */
}

/* -------- */
 
input[type=password]{
 	width			:100%;
 	height			:40px;
 	padding			:10px;
 	margin-bottom	:5px;
 	margin-top		:5px;
 	color			:#226180;
 	font-size		:18px;
	border			:1px solid #CCC;
	border-radius	:5px;}

select{
	width			:100%;
	height			:40px;
	padding			:10px;
	color			:#226180;
 	font-size		:16px;
	font-style		:normal;
	border			:1px solid #CCC;
	border-radius	:5px;}
select option{
	color			:#FFFFFF;
	background-color:#226180;
	height			:35px;
 	font-size		:16px;
	border			:1px solid #CCC;
	border-radius	:5px;}
select option:checked {
    background-color:#C7000E;
    color 			:#ffffff;}

/***********
ANIMASI TEKS
************/	
.form-control{
	display				:block;
	font-size			:14px;
	line-height			:1.42857143;
	color				:#555;
	background-color	:#fff;
	background-image	:none;
	border				:1px solid #ccc;
	border-radius		:4px;
	-webkit-box-shadow	:inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow			:inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition	:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition		:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition			:border-color ease-in-out .15s,box-shadow ease-in-out .15s}			
.form-control:focus{
	border-color		:#66afe9;
	outline				:0;
	-webkit-box-shadow	:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}			
.form-control::-moz-placeholder{
	color				:#999;opacity:1}
.form-control:-ms-input-placeholder{
	color				:#999}
.form-control::-webkit-input-placeholder{
	color				:#999}
.form-control::-ms-expand{
	background-color	:transparent;border:0}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{
	background-color	:#eee;
	opacity				:1}
.form-control[disabled],fieldset[disabled] .form-control{
	cursor				:not-allowed}
textarea.form-control{
	height				:auto}
input[type=search]{
	-webkit-appearance	:none}

/*****
SUBMIT
******/
input[type="submit"]{        
	font-family			:'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
	font-weight			:bold !important;
	font-size			:18px;
	letter-spacing		:normal;
	text-rendering		:optimizelegibility;
	/*box-shadow: inset 0 1px 1px #a4e388;*/
	border				:1px solid;
	border-color		:#3b6e22 #3b6e22 #2c5115;
	background			:linear-gradient(#3399CC, #003366);
	border-radius		:5px;
	color				:#fff;	
	cursor				:pointer;
	display				:inline-block;
	position			:relative;
	text-shadow			:0 1px 2px rgba(0,0,0,.5);
	padding				:7px 50px;
	margin 				:10px 10px 10px 0px;
	width 				:100%;
	text-align			:center;}
input[type="submit"]:hover{
	background		:linear-gradient(#C50A0A, #2D0202);}

/*****
BUTTON
******/
button{
	font-family			:'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
	font-weight			:bold !important;
	font-size			:18px;
	letter-spacing		:normal;
	text-rendering		:optimizelegibility;
	/*box-shadow: inset 0 1px 1px #a4e388;*/
	border				:1px solid;
	border-color		:#3b6e22 #3b6e22 #2c5115;
	background			:linear-gradient(#FF3341, #C7000E);
	border-radius		:5px;
	color				:#fff;	
	cursor				:pointer;
	display				:inline-block;
	position			:relative;
	text-shadow			:0 1px 2px rgba(0,0,0,.5);
	padding				:7px 50px;
	margin 				:10px 10px 10px 0px;
	text-align			:center;}
button:hover{
	background		:linear-gradient(#C50A0A, #2D0202);}


button2{
    border           : 1px solid;
    border-color     : #333 #666 #333;
    background       : linear-gradient(#CCC, #999);
    border-radius    : 3px;
    color            : #fff;   
    cursor           : pointer;
    display          : inline-block;
    position         : relative;
    padding          : 6px 4px 18px 4px;
    width            : 30px;
    height           : 24px;
    margin-top       : -10px;
    text-align       : center;
}
button2:hover{
	background		:linear-gradient(#676767, #2D0202);}


/***********************************************
UKURAN MEDIA
************************************************/

@media screen and (max-width: 920px){
	
	.row:after{padding :0px;}
	.col-75,.col-75b{width :100%;}

	input[type=text],input[type=email],input[type=password]{
		height	:35px;
		padding	:5px;
	}

	button,input[type="submit"]{
		width		:100%;
		margin		:0px 0px 5px 0px;}
		
	f20{font-size 	:16px;}
	f36{display  	:none;}

	a {font-size: 12px;}

}