body {
	font-size:12px;
  font-family: arial;
  line-height: 1.25;
  scrollbar-face-color: #ffffff;
  scrollbar-shadow-color: #2D2C4D;
  scrollbar-highlight-color:#7D7E94;
  scrollbar-3dlight-color: #7D7E94;
  scrollbar-darkshadow-color: #2D2C4D;
  scrollbar-track-color: #7D7E94;
  scrollbar-arrow-color: #fff; 
}

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  width:100%;
}

.skip-link:focus {
  top: 0;
}

#loader_image {
	padding: 5px;
	background: #fff;
	border-radius: 15px;
}

.table {
  border: 0px solid;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  /*font-size:12px;*/
}

.table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

.table tr {
  border-bottom: 3px;
  padding: .625em;
}

.table th,
.table td {
	border-bottom: 1px;
  padding: .625em;
  /*text-align: center;*/
}

.table th {
  /*font-size: .85em;*/
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dateclass{  
	background-image:url('images/date.png');   
	background-position:right;   
	background-repeat:no-repeat;   
	padding-right:25px;
	padding-left:5px;
	background-size: 20px;
	width:60%;
	height:25px;
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	float:left;
	margin:3px;
}

:root {
 color-scheme: light only;
}

@media screen and (max-width: 600px) {
	.flex-container {
		flex-direction: column;
	  }

	#loader_image {
	  width: 15%
  }
  
  .table {
    border: 0;
	border-collapse: collapse;
  }

  .table caption {
    font-size: 1.3em;
  }
  
  .table #headerlist {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .table tr {
    border-bottom: 3px solid #eee;
    margin-bottom: .625em;
    
  }
  
  .table td{
    border-bottom: 1px solid #eee;
    display: block;
    /*font-size: .8em;*/
    text-align: right;
  }
  
  .table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .table td:last-child {
    border-bottom: 0;
  }
  .pageing{
  	width:100%;
  }
}

.hero {
  /* Photo by mnm.all on Unsplash */
  background-size: cover;
  padding: 1rem 1rem;

  /* Grid styles */
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  list-style-type: none;
  padding: 0.1rem 0.5rem;
}

.button_box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-gap: 1rem;
  list-style-type: none;
  padding: 0.5rem 0.5rem;
}

.bu_box {
  display: grid;
 
  grid-gap: 0.5rem;
  list-style-type: none;
  padding: 0.5rem 0.5rem;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor:pointer;
    padding: 2.5vh 1.5vw;
    width:35vw;
  }
  
  .upload-btn {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    /* padding: 1.5vh 2.5vw; */
    padding: 1.5vh 0vw;
    border-radius: 2vw;
    font-size: 3vw;
    font-weight: bold;
  }
  
  .upload-btn-wrapper input[type=file] {
    font-size: 7vw;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

#inline {/* display: none;*/ width: 700px; text-align:left;}

#inline h2{/* display: none;*/ width: 500px; text-align:center;}

.backxm {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,f7a831+96,f7a831+100 */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(247,168,49,1) 96%, rgba(247,168,49,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(247,168,49,1) 96%,rgba(247,168,49,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(247,168,49,1) 96%,rgba(247,168,49,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7a831',GradientType=0 ); /* IE6-9 */
	min-height:80px;height:100px;
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	font-size:14px;
	padding:5px;
	margin:5px;
}



/*.inputfullsize{
	width:99%;
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	padding-left: 5px;
  border-radius: 4px;
  resize: vertical;
}*/


.inputfullsize{
	width:97%;
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	vertical-align: text-top;
	resize: vertical;
	padding: 5px;
}

.inputfullsizex{
	width:98%;
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	vertical-align: text-top;
}

input{
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	resize: vertical;
}

textarea{
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	resize: vertical;
	padding: 5px;
}

select{
	border:solid 1px #ccc;
	-webkit-border-radius:0.3em;
	resize: vertical;
	padding: 5px;
}

.dotted{
	border-bottom:dotted 1px #ccc;
}

.selectbox {
	width: 310px;
  height: 26px;
  overflow: hidden;
  background: #fff ;
  border: 1px dotted #ccc;
	margin-bottom: 10px;
}

.lineup {
    background: #ccc;
    height: 1px;
    width: 100%;
}

.lineupx {
    background: #eee;
    height: 7px;
    margin-top: 10px;
    width: 100%;
}

.lineup_new {
    background: #fff;
    height: 7px;
    margin-top: 10px;
    width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  text-align: center;
}

.flex-item {
  background-color: #fff;
  flex: 25%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin:8px;
  padding-bottom:10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.selectbox select{
	background: transparent;
	width: 312px;
	padding: 0px;
	font-size: 16px;
	line-height: 1;
	border: 0;
	font-family: Arial, Tahoma, sans-serif; 
	height: 26px;
	-webkit-appearance: none;
	padding: 2px 5px;
	color: #676767;
	font-size: 12px;
}

.hoverup:hover{
	cursor:pointer;
	background-color:#33FFCC;
}

#msg { 
	display: block; 
	resize: none;
	color: #676767;
	font-family: Arial, Tahoma, sans-serif; 
	margin-bottom: 10px; 
	width: 500px; 
	height: 150px;
	border: 1px dotted #ccc;
	padding: 5px 9px; 
	font-size: 1.2em;
	line-height: 1.4em;
}

.error{
	background: #f99d1c; 
	color: #333333; 
}

#send, #back, #send2, #preview, #send3 { 
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
	background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
	background-color:#ffc477;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:4px 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
#send:hover, #back:hover, #preview:hover, #send2:hover, #send3:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
	background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
	background-color:#fb9e25;
}
#send:active, #back aktive, #send2:active, #send3:active {
	position:relative;
	top:1px;
}

.dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	grid-gap: 1rem;
	list-style-type: none;
	align-items: center;
  padding: 0.5rem 0.5rem;
}

.chil {
	padding:15px;
  height:60px;
  line-height:60px;
  -webkit-border-radius:0.5em;
	background: #EFDF77; /* Old browsers */
	color:#666;
}


li .am a{background:silver;}
li .am:hover a{background:yellow}

#rempas em, #rempas2 em{
	margin-left:130px;
	color: #ff0000;
}

.fieldname{
	padding-left: 10px;
	padding-right: 10px;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: #000000;
	font-size: 12px;
	text-align:center;
}
.fieldnamex{
	padding-left: 10px;
	padding-right: 10px;
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: #000000;
	font-size: 12px;
	background-color:#fff;
	-webkit-border-radius:0.3em;
}

/*.table_style{
	-webkit-border-radius:1em;
	border:solid 4px #fff;
	background-color:#fff;
	padding:1px 2px 1px; 
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
	margin-top:5px; margin-bottom:10px;
}*/

.fieldname2{
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	border-left: 1px solid #DEDEDE;
	color: #646464;
	background : #D3D3D3;
	min-height : 10px;
}

.headerfield{
	padding: 5px;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	font-size : 14px;
	font-weight: bold;
	line-height:30px;
	color:#666;
	font-weight:bold;
	background-color:rgb(247,207,128);
	text-align:left;
	border-color:#fff;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
}

.headerfield-xgreen{
	border-width: 1px;
	border-style: solid;
	border-color: #DEDEDE;
	padding: 5px;
	color: #FFFFFF;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	font-size : 20px;
	font-weight: bold;
	background-color:#2ED1A2;
}

.headerfield2{
	border-width: 1px;
	border-style: solid;
	border-color: #DEDEDE;
	padding: 5px;
	color: #FFFFFF;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	text-align : center;
	font-size : 16px;
	font-weight: bold;
	background : #939393 ;
}
.fieldlabel{
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap;
	/*height : 25px;*/
	font-size : 12px;
	font-weight:bold;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
}

.fieldlabel-white{
	border: 1px solid #DEDEDE;
	color: #333;
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap;
	font-size : 14px;
	font-weight:bold;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	-webkit-border-radius:0.3em;
}

.fieldlabel-whitex{
	border-top: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	border-left: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	color: #333;
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap;
	font-size : 14px;
	font-weight:bold;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
}

.fieldlabelclear {
    background: #fff;
	background: -moz-linear-gradient(left, #fff 0%, #fcfcfc 100%);
	background: -webkit-linear-gradient(left, #fff 0%,#fcfcfc 100%);
	background: linear-gradient(to right, #fff 0%,#fcfcfc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fcfcfc',GradientType=1 );
    border: 1px solid #b3b3b3;
    color: #000;
    padding-top: 5px;
	padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    font-size: 14px;
	font-weight:bold;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	text-shadow: 2px 2px 10px #000000;
	float:left;
	width:95%;
	height:25px;
	}
	
.fieldlabelclear:hover {
    background: #fff;
    border: 1px solid #b3b3b3;
    color: #fff;
	text-shadow: 2px 2px 4px #000000;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    font-size: 14px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-weight:bold;
	cursor: pointer; cursor: hand;
}

.button_submit{
  background: #8f9294;
  background-image: -webkit-linear-gradient(top, #8f9294, #3f3f40);
  background-image: -moz-linear-gradient(top, #8f9294, #3f3f40);
  background-image: -ms-linear-gradient(top, #8f9294, #3f3f40);
  background-image: -o-linear-gradient(top, #8f9294, #3f3f40);
  background-image: linear-gradient(to bottom, #8f9294, #3f3f40);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 5px #666666;
  -moz-box-shadow: 0px 3px 3px #666666;
  box-shadow: 0px 3px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 1px 5px 1px 5px;
  text-decoration: none;
}

ul#menu, ul#menu ul.sub-menu {
    padding-top:1px;
	padding-left:5px;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

/*Link Appearance*/
ul#menu li a {
	padding-top:3px;
    text-decoration: none;
    color: #fff;
    background: #fff;
	background-image:url(../img/toolbar-bg.png);
    padding-left: 10px;
	padding-right: 10px;
	height:23px;
    display:inline-block;
	border: solid 1px #4D4E4F;
}
ul#menu li a:hover {
	padding-top:3px;
    text-decoration: underline;
    color: #fff;
    background: #fff;
	background-image:url(../img/toolbar-bg_selected.png);
    padding-left: 10px;
	padding-right: 10px;
	height:23px;
    display:inline-block;
	border: solid 1px #4D4E4F;
}
ul#menu li.selected a{
	padding-top:3px;
    text-decoration: underline;
    color: #fff;
    background: #fff;
	background-image:url(../img/toolbar-bg_selected.png);
    padding-left: 10px;
	padding-right: 10px;
	height:23px;
    display:inline-block;
	border: solid 1px #4D4E4F;
}
ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background-color: #000000;
    padding-left: 5px;
	padding-right: 5px;
	height:23px;
    display:inline-block;
	width:200px;
}
ul#menu li ul.sub-menu li a:hover {
    text-decoration: underline;
    color: #fff;
    background-color: #000000;
    padding-left: 5px;
	padding-right: 5px;
	height:23px;
    display:inline-block;
	width:200px;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 26px;
    left: 0;
}
ul#menu li:hover ul.sub-menu {
    display:inline-block;
}

.gradient{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 36%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(36%,#cccccc), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 36%,#999999 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#999999',GradientType=0 ); /* IE6-9 */

}

.fieldlabelxray{
	color:#666666;
	font-weight:bold;
    white-space: nowrap;
    font-size: 14px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}
	
.fieldnamelist {
    border-bottom: 1px solid #b3b3b3;
	border-top: 1px solid #b3b3b3;
    border-left: 1px solid #b3b3b3;
    border-right: 1px solid #b3b3b3;
	}

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color:rgb(247, 207, 128);
    z-index:1001;
    -moz-opacity: 0.4;
    opacity:0.4;
    filter: alpha(opacity=0.4);
}

.clbutton{
  background-image: linear-gradient(to bottom, blue 0%, blue 100%);
  background-repeat: repeat-x;
  border-color: lightblue;
	padding: 0px 5%;
	color: #fff;
	font-weight:bold;
	border: medium none;
	line-height: 25px;
	margin-left: 0px;
	cursor: pointer;
	-webkit-border-radius:0.3em;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	margin:2px;
	
}

.clbuttony{
  background-image: linear-gradient(to bottom, #F3BE61 0%, #E6B063 100%);
  background-repeat: repeat-x;
  border-color: #E38D13;
	padding: 0px 5%;
	color: #fff;
	font-weight:bold;
	border: medium none;
	line-height: 25px;
	margin-left: 0px;
	cursor: pointer;
	-webkit-border-radius:0.3em;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	margin:2px;
	
}

.clbuttonx{
    background-image: linear-gradient(to bottom, red 0%, red 100%);
    background-repeat: repeat-x;
    border-color: #E38D13;
	padding: 0px 5%;
	color: #fff;
	font-weight:bold;
	border: medium none;
	line-height: 25px;
	margin-left: 0px;
	cursor: pointer;
	-webkit-border-radius:0.3em;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	margin:2px;
}

.tabber_deactive{
	float:left; z-index:10; width:100px; height:20px; padding-top:3px; border: #ccc solid 1px; text-align:center; background-color:#66cc91; font-weight:bold; color:#FFFFFF;
}

.tabber_active{
	float:left; z-index:10; color:#333; width:100px; height:20px; padding-top:3px; border-top: #ccc solid 1px; border-bottom: #fff solid 1px; background-color:#FFFFFF; border-left: #ccc solid 1px; border-right: #ccc solid 1px; text-align:center; font-weight:bold;
}

.tabber_deactive:hover{
	background-color:lightgreen; z-index:11; color:#333;
}

.tabber-view{
	border-bottom: #ccc solid 1px; border: #ccc solid 1px; float:left; width:100%; min-height:120px; max-height:120px; padding-top:3px; margin-top:-1px;
}

.fitbutton{
	background:url(../images/fitmenu.png);
	background-size: 100% 100%;
	line-height: 25px;
	margin-left: 0px;
	cursor: pointer;
	border: medium none;
	padding: 0px 12px;
	margin-left:5px;
}

.clbutton:hover{
    background: blue;
}
/*
.hvr:hover{
	background:rgb(242, 223, 186);
}*/

.fieldlabelyellow{ color:#fff;   text-shadow: 2px 2px 4px #000000;}

.white_content {
  display: none;
	width: 90%;
  height: auto;
  padding: 16px;
  background-color: white;
  z-index:1002;
	box-shadow: 2px 2px 3px #000, 3px 6px 8px #8f9294;	
	-webkit-border-radius:1em;	
	max-height: calc(100% - 100px);
	position: fixed;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
}

.white_content_banner {
	display: none;
	width: auto;
	height: auto;
	padding: 16px;
	background-color: white;
	z-index:1002;
	  box-shadow: 2px 2px 3px #000, 3px 6px 8px #8f9294;	
	  -webkit-border-radius:1em;	
	  max-height: calc(100% - 100px);
	  position: fixed;
	top: 50%;
	left: 50%;
	  transform: translate(-50%, -50%);
  }

.white_content4 {
  display: none;
	width: 50%;
  height: auto;
  padding: 16px;
  z-index:9999;
	max-height: calc(100% - 100px);
	position: fixed;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
}

.white_contentxx {
   display: none;
		width: 40%;
    height: auto;
    padding: 16px;
    background-color: white;
    z-index:1002;
		box-shadow: 2px 2px 3px #000, 3px 6px 8px #8f9294;	
		-webkit-border-radius:1em;	
		max-height: calc(100% - 100px);
  	position: fixed;
    top: 50%;
    left: 50%;
  	transform: translate(-50%, -50%);
}

.fieldlabelwhite {
    background-color: #fff;
    border-bottom: 1px solid #DEDEDE;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-size: 14px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}

input:-moz-read-only { /* For Firefox */
    background-color: #ccc;
}

input:read-only {
    background-color: #ccc;
}

.admin-home{ 
	font:  35px arial;
	text-align:center;
	padding-top:30px;
	color: #1F1F1F;
}
body {	
	font-family:arial;
	font-size:11px;
	padding:10px;	
}

#loginbody{
	background:url("../images/test5.jpg") no-repeat;
	background-position: 50% 0%;
	font-family:arial;
	font-size:11px;
	padding:10px;
	background-color: #F89D1E;
}

body, h1{
	margin: 0; 
	padding: 0; 
	border: 0;
}

#body{	
	width:946px;
	vertical-align:top;
	/*text-align:justify;*/
	text-align:left;
	padding:7px;
	height:245px;	
}

#konten{
	width:730px; 
	padding-left:15px;
	float:left;
	text-align:left;
	padding-bottom:10px;
	font-family:arial;
	font-size:15px;
	color:#1F1F1F;
}

tbody{
	width:300px;	
}

#i_konten_kanan{
	width:3%;
}
#i_konten{
	font-size:15px; 
	/*margin-bottom:20px;*/
	font-family:arial;
	color:#1F1F1F;
	/*padding: 15px 0 0 0;*/
}
#i_konten p{
	margin-top:0px;
}
#i_konten img{
	max-width:700px;	
}
#editor1{
	width:500px;
	height:150px;
}

img{
	border:0;
}

#accordion p,#accordion2 p,#accordion3 p,#accordion4 p{
	width:620px;
	/*text-align:justify;*/
	text-align:left;
}
.demo{
	/*text-align:justify;*/
	text-align:left;
}
#container{
	margin: 0px auto;
	width: 960px;
}
#content {
	float:left;
	/*width: 960px;*/
	text-align:left;
}
#footer {
	clear: both;
}
.body{
	background-color:#000022;
}
#a {
	text-decoration: none; 
	color: #f2f2f0;
}
#a2 {
	text-decoration: none; 
	color: #f2f2f0;
}
.small-font{
	font-size:12px;
	color:white;
	text-decoration:none;
	font-family:arial;
	}
#footer123{
	background-color:#000000;
	background:#000000;
	width:960px;
}
#footer-box{
	/*-moz-border-radius:4px 4px 4px 4px;
	/*border:1px #000000 solid;
	background-color:#FFF0A5;*/
	color: white;
	width:450px;
	float:left;
	margin:20px;
}
#footer-box2{
	/*-moz-border-radius:4px 4px 4px 4px;
	/*border:1px #000000 solid;
	background-color:#FFF0A5;*/
	width:300px;
	float:right;
	margin:20px;
	color: white;
}
#content-kanan{
	text-align:center;
	color:black;
	width:200px;
	font-size:12px;
	margin: 22px 0px 22px 0px;
}
#content-tengah{
	text-align:center;
	width:300px;
	font-size:small;
	border:1px solid;
	border-bottom:none;
	border-color:#f2f2f0;
}
#content-tengah img{
	border-bottom:1px solid;
	border-bottom-color:#f2f2f0;
}
#content-bawah{
	/*text-align:justify;*/
	text-align:left;
	width:300px;
	height: 117px;
	font-family: arial;	
	border-bottom:1px solid;
	border-left:1px solid;
	border-right:1px solid;
	border-color:#f2f2f0;
	background-color:#CECECE;
}

#subtitle{
	background-color:#242424;
	padding:5px;
	width:290px;
	color: #f2f2f0;
	font:bold  15px arial;
	border-bottom:1px solid #f2f2f0;
}

#detil{
	font-family:arial;
	font-size: 15px;
	color:#1F1F1F; 
	text-decoration:none;
	margin-left:10px;
	text-align:left;
	vertical-align:bottom;
}
.wrapper{
	background:#f2f2f0;
}
.wrapper2{
	background-color:#f2f2f0;
}

.wrapper3{
	
	width:100%;
	margin-top : 0px;
}



.frame2{
margin:0px;

border-top-left-radius: 10px 5px;
	border-bottom-right-radius: 10px 5px;
	border-bottom-left-radius: 10px 5px;
	border-top-right-radius: 10px;
/*background: #ffffff; /* Old browsers */
/*background: -moz-linear-gradient(top,  #ffffff 0%, #b7b7b7 0%, #f1f1f1 76%, #f6f6f6 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(0%,#b7b7b7), color-stop(76%,#f1f1f1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #ffffff 0%,#b7b7b7 0%,#f1f1f1 76%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top,  #ffffff 0%,#b7b7b7 0%,#f1f1f1 76%,#f6f6f6 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top,  #ffffff 0%,#b7b7b7 0%,#f1f1f1 76%,#f6f6f6 100%); /* IE10+ */
/*background: linear-gradient(to bottom,  #ffffff 0%,#b7b7b7 0%,#f1f1f1 76%,#f6f6f6 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */




}
.header2{
width:900px; 
min-height:85px;

border-top-left-radius: 10px 5px;
	border-bottom-right-radius: 10px 5px;
	border-bottom-left-radius: 10px 5px;
	border-top-right-radius: 10px;

}
.banner{
min-height : 25px;
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10px 5px;
border-bottom-left-radius: 10px 5px;
border-top-right-radius: 10px;


}
#trcolor{
	background-color:#bbbbbb;
	color:#333333;
	font-weight:bold;
}

/* PAGINATION */
.paging ul{
	list-style-type:none;
	margin:5px;
	padding:0;
	text-align:left;
	margin-top:15px;
	margin-bottom:-5px;
	font-size:11px;
	font-weight:bold;
	color:#161616;
}
.paging ul li{
	display:inline;
	border:1px solid #CCCCCC;
	margin:0px 3px;
	text-align:center;
	padding:3px 7px;
	background-color:#999999;
	color:161616;
}
.paging ul li a{
	text-decoration:none;
	font-weight:normal;
	color:#161616;
} 
.paging ul li a:hover{
	text-decoration:none;
}

#login{
	padding: 3px 15px;
	border: solid 1px;
	border-radius:4px;
}

.form-text{
	border:solid 1px;
	padding:3px 4px
}

.login-box{
	margin-top:100px;
	background-color:#FFFFFF;
	width:510px;
	-moz-box-shadow: 0px 0px 10px #999999; /* Firefox */
 	-webkit-box-shadow: 0px 0px 10px #999999; /* Safari and Chrome */
 	box-shadow: 0px 0px 10px #999999; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
	behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
.standard-font{
	margin-top:210px;
}
.system-error{
	font-size:12px;
	text-align:center;
}
.standard-font, .standard-font2{
	font-family:arial;
	color:#333333;
	font-weight:bold;
	font-size:14px;
}
form label{
	text-align:left;		
}

#demo-description{
	clear:both;	
	font-family: arial;
	font-size: 15px;
	/*text-align:justify;*/
	text-align:left;
}

#images img{
	width:185px;
	height: 200px;
}

#shadow{
	min-height:510px;
	margin-top:0px;
	background:#FFFFFF;
}

a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}

a:active {
	text-decoration: none;
}

.capt{ background-color:#F89D1E;color:#FFFFFF; font-weight:700}

#pager {text-align:center;}

#linkunplan{
	width:35px;
	float:right;
	margin: -8px 5px 15px 5px;
	background: #F89D1E;
	border-radius: 7px;
	font-weight: bold;
	padding:5px;
	font-size:12px;
	text-align:center;
}

#linkunplan:hover{
	opacity:0.9;
	color: #fff;
}

h3{
	margin:0px;
	margin-left:5px;
	text-align:left;
}

.linkactivity{
	width:90px;
	float:left;
	margin: 5px;
	background: #F89D1E;
	border-radius: 7px;
	font-weight: bold;
	padding:5px;
}

.linkactivity:hover , .linkactivity:hover  a{
	opacity:0.9;
	color: #fff;
}

#myTable .header:hover,#myTable th a:hover{
	color: #F08044;
}

#myTable td a b:hover{
	color: #0000ff;
	text-decoration:underline;
}

/*.odd td, .even td{
	border-color:#ffffff;
}*/

.tooltip , .tooltip2, .tooltip3  { 
	float:left;
	width:26px;
}

.tooltip span, .tooltip2 span, .tooltip3 span { 
	z-index:199;
	display:none; 
	padding:0px 10px; 
	margin-top:-20px; 
	margin-left:-12px;
	width:30px; 
	line-height:16px;
	font-size:11px; 
}

.tooltip:hover span, .tooltip2:hover span, .tooltip3:hover span{ 
	display:inline; 
	position:absolute; 
	color:#111; 
	border:1px solid #DCA; 
	background:#fffAF0;
} 


#isispan{
	float:left;
	width:170px;
	padding-left:10px;
	padding-bottom:5px;
}

#pembataslabel{	
	float:left;
	padding-bottom:5px;
}
#labelspan{
	width:150px;
	float:left;
	padding-bottom:5px;
}

.form_r td{
	height:25px;
	vertical-align:middle;
}

#excel{
	background :url(../images/excel.gif);
	height:30px;
	width:150px;
}
#excel:hover{
	background :url(../images/excelhover.gif);
}

.buttonsubmit,.buttonsubmit2,.buttonsubmit3,.buttonsubmit4,.buttonsubmit5 {
    background-color: transparent;    
    background-repeat: no-repeat;
    border: medium none;
    cursor: pointer;   
    width: 30px;
}
.buttonsubmit {
	background-image: url("../images/next3.png");
	height: 30px;
	width : 30px;
}
.buttonsubmit2 {
    background-image: url("../images/next4.png");
	height: 30px;
	width : 30px;
}

.buttonsubmit4 {
    background-image: url("../images/search_min.png");
	height: 34px;
	margin-left:10px;
}
.buttonsubmit5 {
    background-image: url("../images/delete.png");
	margin-left:10px;
}
.buttonsubmit6 {
    background-image: url("../images/edit.jpg");
	
}
.preview{
	 width: 50px;
	
    
}


.myButton {
	background-color:#878583;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	padding:2px 2px;
	white-space : nowrap;
	

}
.myButton:hover {
	background-color:#D4CFC5;
}
.myButton:active {
	position:relative;
	top:1px;
}

.fit{
max-width: 60px;
word-wrap: break-word;
}


.gradient{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 36%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(36%,#cccccc), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 36%,#999999 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 36%,#999999 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#999999',GradientType=0 ); /* IE6-9 */

}

#frame{
	margin-left:30px;
	margin-right:30px;
	height : 283px;
	background:#FFFFFF;
	 
}

.box {
  margin-left:147px;
  margin-right:147px;
  height : 100%;
  
}

.font-style {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: #000000;
	font-size: 19px;
}
.font-style2 {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: #000000;
	font-size: 25px;
	font-weight: bold;
}

img.grayscale:hover{ 
    -webkit-transition: all 1s ease;
-webkit-filter:  grayscale(1);
}

.myButtons {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
	background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
	background-color:#ffc477;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
.myButtons:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
	background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
	background-color:#fb9e25;
}
.myButtons:active {
	position:relative;
	top:1px;
}
.btn {
  background: #ffa600;
  background-image: -webkit-linear-gradient(top, #ffa600, #ffaf19);
  background-image: -moz-linear-gradient(top, #ffa600, #ffaf19);
  background-image: -ms-linear-gradient(top, #ffa600, #ffaf19);
  background-image: -o-linear-gradient(top, #ffa600, #ffaf19);
  background-image: linear-gradient(to bottom, #ffa600, #ffaf19);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Arial;
  color: #FFFFFF;
  font-size: 12px;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
}

.btn:hover {
  background: #96938F;
  background-image: -webkit-linear-gradient(top, #96938F, #96938F);
  background-image: -moz-linear-gradient(top, #96938F, #96938F);
  background-image: -ms-linear-gradient(top, #96938F, #96938F);
  background-image: -o-linear-gradient(top, #96938F, #96938F);
  background-image: linear-gradient(to bottom, #96938F, #96938F);
  color : #FFFFFF;
  text-decoration: none;
}
#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background: 100% 1px no-repeat;
    width:345px;
	height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
	padding: 6px;
    font-size: 13px;
    background: #fff  top left repeat-x;
    border: 1px solid #d5d5d5;
	color: #333;
	border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
	height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
	
}

.label {
  padding: 5px 5px 5px 0;
  display: inline-block;
  font-weight: bold;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

.form-container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 5px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  text-align:left;
}

.col-50 {
	float: left;
	width: 50%;
	margin-top: 6px;
	text-align: left;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
  text-align:left;
}

.col-100 {
	float: left;
	width: 100%;
	margin-top: 6px;
	text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit], input[type=button]{
    width: 99%;
    margin-top: 0;
  }
  .col-50, .col-100 {
	margin-top: 0;
  }
}

/* for popup elements */

.employee_popup {
	display: none;
	position: fixed;
	top: 10%;
	/*
	left: 28%;
	width: 60%;
	height: 65%;
	*/
	min-height:50%;
	padding: 1vw;
	background-color: white;
	z-index:1002;
	box-shadow: 2px 2px 3px #000, 3px 6px 8px #8f9294;		
}

.hvrpopup:hover{
	background:#93DB70; cursor:pointer;
}

.popupbutton{
    background-image: linear-gradient(to bottom, #F3BE61 0%, #E6B063 100%);
    background-repeat: repeat-x;
    border-color: #E38D13;
	padding: 0px 1%;
	color: #fff;
	font-weight:bold;
	border: medium none;
	line-height: 25px;
	margin-left: 0px;
	cursor: pointer;
	font-size:100%;
}

.popupbutton:hover{
    background: #ff0000;
}

ul.preview-upload-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/* font-size: 0px; --we would like caption(s) */ /* eliminate space between li */
	text-align:left;
}

ul.preview-upload-list li {
	display: inline-block;
	margin: 2px;
}

ul.preview-upload-list img {
	height:11vh;
	width:auto;
}

ul.preview-upload-list img:hover {
    background-color: #63D1F4;
}