.spinner {
  width: 40px;
  height: 40px;
  background-color: #E57373;

  margin: 10px auto;
  margin-top: 100px;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}



img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}


html, body {
  font-family: sans-serif;
  color: #363636;
}
.modal-wide {
  width: 96%;
}
.alpha60 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}	
.list-reset {
  list-style: none;
  padding-left: 0;
}
.page-sort {
  padding:12px;margin-bottom:4px;cursor:move;cursor:move;
}
.clickable {
  cursor: pointer;
  cursor: hand;	
}
.padding8 {
	padding: 8px;
}
.padding12 {
	padding: 12px;
}
.padding20 {
	padding: 20px;
}
.polaroid {
	display: inline-block;
	padding: 10px 10px 10px 10px;
	background: #fcfcfc;
	border: 1px solid #fff;
	box-shadow: 0px 2px 15px #333;
	position: relative;	
}
.img-full-center { max-width: 100%; max-height: 100%; display: block; margin: auto;	}
.centerize { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* Yep! */ width: 48%; height: 59%; }
.center { margin-left: auto; margin-right: auto; }
.force1line, .oneline, .nobreak {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.gray {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.icon-stack {
	position: relative;
}
.icon-stack .glyphicon {
	position: absolute; 
}
/*<span class="icon-stack"><i class="glyphicon glyphicon-unchecked"></i><i class="glyphicon glyphicon-ok"></i></span>*/

.carousel-control.right, .carousel-control.left {
	background-image:none;
}

.sk-double-bounce {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 0px auto; }
  .sk-double-bounce .sk-child {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
			animation: sk-doubleBounce 2s infinite ease-in-out; }
  .sk-double-bounce .sk-double-bounce2 {
	-webkit-animation-delay: -1.0s;
			animation-delay: -1.0s; }
@-webkit-keyframes sk-doubleBounce {
  0%, 100% {
	-webkit-transform: scale(0);
			transform: scale(0); }
  50% {
	-webkit-transform: scale(1);
			transform: scale(1); } }
@keyframes sk-doubleBounce {
  0%, 100% {
	-webkit-transform: scale(0);
			transform: scale(0); }
  50% {
	-webkit-transform: scale(1);
			transform: scale(1); } }
	
	
.navbar-custom {
  background-color: #ffffff;
  border-color: #eeeeee;
}
.navbar-custom .navbar-brand {
  color: #696969;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #505050;
  background-color: transparent;
}
.navbar-custom .navbar-text {
  color: #696969;
}
.navbar-custom .navbar-nav > li:last-child > a {
  border-right: 1px solid #eeeeee;
}
.navbar-custom .navbar-nav > li > a {
  color: #696969;
  border-left: 1px solid #eeeeee;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #363636;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #363636;
  background-color: #eeeeee;
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}
.navbar-custom .navbar-toggle {
  border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ededed;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #363636;
  border-bottom-color: #363636;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background-color: #eeeeee;
  color: #363636;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #363636;
  border-bottom-color: #363636;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #696969;
  border-bottom-color: #696969;
}
@media (max-width: 767) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #696969;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #363636;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #363636;
    background-color: #eeeeee;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
.navbar-custom .navbar-link {
  color: #696969;
}
.navbar-custom .navbar-link:hover {
  color: #363636;
}

.mycolor{color:#337AB7;}
.mybg{background-color:#337AB7;}

.color-red{color: #900000;}
.color-orange{color: #ffcc00;}
.color-blue{color: #455DA3;}
.color-green{color: #009000;}
.color-white{color: #ffffff;}
.color-redpink{color: #FF0048;}

.roundbox{background:#eeeeee;color:#337AB7;width:100%;display:inline-block;border-radius:8px;}
	
.iconmenu{padding:8px;background:#eeeeee;color:#337AB7;width:116px;display:inline-block;text-align:center;margin-right:20px;margin-bottom:20px;border-radius:8px;cursor:pointer;}
.iconmenu img{height:48px;margin-top:8px;margin-bottom:12px;}
.iconmenu i{font-size:48px;height:48px;margin-top:8px;margin-bottom:12px;}
.iconmenu div{display:block;width:100px;overflow:hidden;text-align:center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

.color-bg-header{
	background-color: #295358;
	color: #fff;
}
.color-bg-red{
	background-color: #900000;
	color: #fff;
}
.color-bg-lightred{
	background-color: #E84C3D;
	color: #fff;
}
.color-bg-orange{
	background-color: #ffcc00;
	color: #000;
}
.color-bg-blue{
	background-color: #455DA3;
	color: #fff;
}
.color-bg-lightblue{
	background-color: #D9EDF7;
	color: #000;
}
.color-bg-buttonblue{
	background-color: #337AB7;
	color: #000;
}
.color-bg-green{
	background-color: #009000;
	color: #fff;
}
.color-bg-black{
	background-color: #222222;
	color: #fff;
}
.color-bg-gray{
	background-color: #565656;
	color: #fff;
}
.color-bg-lightgray{
	background-color: #F5F5F5;
	color: #000;
}
.color-bg-white{
	background-color: #fff;
	color: #000;
}


.log-empty{
	background-color: #898989;
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
}
.log-new{
	color: #455DA3;
	font-weight:bold;
}
.log-old{
	color: #898989;	
}
.log-changed{
	color: #009000;
	font-weight:bold;
}
.log-deleted{
	color: #900000;	
	font-weight:bold;
	text-decoration: line-through;
}
.log-label-page{
	padding: 4px 12px;
	background: #eeeeee;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999;
	width: 20%;
}
.log-value-page{
	padding: 4px 12px;
	background: #fefefe;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999;
	width: 80%;
}
.log-child{}
.log-header{
	padding: 4px;
	background: #eeeeee;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999;
}
.log-col{
	padding: 4px;
	background: #fefefe;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999;
}
.log-child-title{
	padding: 4px;
	font-weight:bold;
}
.bold{font-weight:bold;}
.mandatory{background-color:#FFFFAA;}


/* custom-able */
.bg-carousel{
	background-color: #565656;
	color: #fff;
}

.marginright8{
	margin-right: 8px;
}
.hoverbutton:hover{
	background:#75ACD9;
    cursor: pointer;
    cursor: hand;	
}
.hoverbutton{
	background:#E4EFF8;
    cursor: pointer;
    cursor: hand;
}
.mybox{
	border:1px solid #dddddd;
	padding:8px;
	margin-bottom:8px;
}
.mybox-nopadding{
	border:1px solid #dddddd;
	margin-bottom:8px;
}

.bg_dark_green{background:#6E9A9F;color:#fff;}
.bg_light_green{background:#89C0C7;color:#000;}

.padding8lr{padding-left:8px;padding-right:8px;}
.paddingtop8{padding-top:8px;}
.paddingtop12{padding-top:12px;}
.marginbottom8{margin-bottom:8px;}
.marginleft8{margin-left:8px;}
.margintop12{margin-top:12px;}
.marginbottom12{margin-bottom:12px;}
.hide{display:none;}
.width100{width:100%}
.rightalign{text-align:right;}
.topalign{vertical-align:text-top;}