/*  $Basic Button                                   */
/*==================================================*/
.bttn {
	
	text-decoration:none;
	cursor:pointer;
  position:relative;
  font-size:13px;
	padding:0 8px;
	font-weight:bold;
	height:30px;
	line-height:30px;
	display:inline-block;
	outline:0;
	color:#444;
	background-color:#f5f5f5;
	background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image:linear-gradient(top,#f5f5f5,#f1f1f1);
	border:1px solid #d9d9d9;
	border:1px solid rgba(0,0,0,0.1);
	border-radius:2px;
  min-width:65px;
  text-align:center;
}

.bttn:focus,
.bttn:hover {
	
	border:1px solid #c6c6c6;
	border:1px solid rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	position:relative;
	z-index:1;
}

.bttn:focus,
.bttn:active {

	box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}

.on {
  background-image:-webkit-linear-gradient(top,#eee,#e0e0e0);
  background-image:-moz-linear-gradient(top,#eee,#e0e0e0);
  background-image:linear-gradient(top,#eee,#e0e0e0);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}


/*==================================================*/
/*  $Emphasis                                       */
/*==================================================*/
.emphasis {
	text-transform:uppercase;
}
/*==================================================*/
/*  $Colors                                         */
/*==================================================*/
/* .red */
.red:not(.Red) {
  
	color: var(--colorWhite);
	background-color: var(--colorMain);
	border:1px solid transparent;
	background-image:linear-gradient(top,var(--colorMain),#d14836);
}

.red:not(.Red):focus,
.red:not(.Red):hover {
  
	background-color: var(--colorMain);
	color: var(--colorWhite);
	border:1px solid #b0281a;
	background-image:linear-gradient(top,var(--colorMain),#c53727);
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.red:not(.Red):active {
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
}

/* .blue */
.blue {
	color:#fff;
	background-color:#4D90fe;
	border:1px solid #3079ed;
	background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);
	background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);
	background-image:linear-gradient(top,#4d90fe,#4787ed);
}

.blue:focus,
.blue:hover {
  color:#fff;
	background-color:#357aeb;
	border:1px solid #2F5bb7;
	background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);
	background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);
	background-image:linear-gradient(top,#4d90fe,#357ae8);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

a.blue:focus,
a.blue:hover{
  color:#ffffff;
  text-decoration:none;
}

.blue:active {
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
}

/* .yellow */
.yellow {
	color:#867343;
	background-color:#ffe07b;
	border:1px solid #fddb69;
	background-image:-webkit-linear-gradient(top,#ffe896,#ffe07b);
	background-image:-moz-linear-gradient(top,#ffe896,#ffe07b);
	background-image:linear-gradient(top,#ffe896,#ffe07b);
}

.yellow:focus,
.yellow:hover {
	background-color:#ffda73;
	border:1px solid #deb74f;
	background-image:-webkit-linear-gradient(top,#ffe485,#ffda73);
	background-image:-moz-linear-gradient(top,#ffe485,#ffda73);
	background-image:linear-gradient(top,#ffe485,#ffda73);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.yellow:focus,
.yellow:active {
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
}


/* .white */
.white {
	color:black;
	background-color:#FFFFFF;
	border:1px solid #B8B8B8;
	background-image:-webkit-linear-gradient(top,#FFFFFF,#FFFFFF);
	background-image:-moz-linear-gradient(top,#FFFFFF,#FFFFFF);
	background-image:linear-gradient(top,#FFFFFF,#FFFFFF);
}

.white:focus,
.white:hover {
	background-color:#ffda73;
	border:1px solid #deb74f;
	background-image:-webkit-linear-gradient(top,#ffe485,#ffda73);
	background-image:-moz-linear-gradient(top,#ffe485,#ffda73);
	background-image:linear-gradient(top,#ffe485,#ffda73);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.white:focus,
.white:active {
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
}


/*==================================================*/
/*  $Icons                                          */
/*==================================================*/

.icon:before,
.prev:before {
	content:"";
  position:relative;
  top:3px;
  left:0px;
  margin-right:15px;
  float:left;
  width:21px;
  height:21px;
  background:url('/images/iconsEmailBlack.png') no-repeat 0 0;
}
.icon.only:before{left:15px;}
.icon.only8:before{left:8px;}
.icon.only25:before{left:25px;}

.next:after {
	content:"";
	position:relative;
	top:9px;
	right:0;
	margin-left:6px;
	float:right;
	width:12px;
	height:12px;
  background:url('/images/iconsEmailBlack.png') no-repeat 0 0;
}
.bttn.icon:before,
.prev:before,
.next:after {
	opacity:0.8;
}
.bttn.icon:hover:before,
.prev:hover:before,
.next:hover:after {
	opacity:1;
}

/* Move icon to right side */
.icon.right:before {
	margin-left:6px;
	margin-right:0px;
	float:right;
}


/*==================================================*/
/* Icons */
/*==================================================*/

.icon.add:before {background-position:0 0;}
.icon.refresh:before {background-position:0 -192px;}
.icon.archive:before {background-position:0 -16px;}
.icon.spam:before {background-position:0 -38px;}
.icon.delete:before {background-position:0 -409px;}
.icon.folder:before {background-position:0 -352px;}
.icon.tag:before {background-position:0 -291px;}
.icon.back:before {background-position:0 -432px;}
.icon.approve:before {background-position:0 -24px;}
.icon.pause:before {background-position:0 -492px;}
.icon.play:before {background-position:0 -515px;}
.icon.jump:before {background-position:0 -536px;}
.icon.viewList:before {background-position:0 -126px;}
.icon.viewExpand:before {background-position:0 -270px;}

.icon.multiUser:before {background-position:0 -558px;}
.icon.oneUser:before {background-position:0 -579px;}

.icon.setting:before {background-position:0 -605px;}
.icon.edit:before {background-position:0 -628px;}
.icon.search:before {background-position:0 -654px;}
.icon.share:before {background-position:0 -675px;}



/*==================================================*/
/*  $Colored-icons                                  */
/*==================================================*/

.red.icon.add:before, .blue.icon.add:before {background-position:-12px 0;}
.red.icon.apple:before, .blue.icon.apple:before {background-position:-12px -12px;}


/*==================================================*/
/*  $Grouped                                        */
/*==================================================*/
.grouped {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
}
.grouped li {
  float:right;
	margin:0;
	padding:0;
}
.grouped .bttn {
  float:right;
  margin-right:-1px;
}
.grouped li:not(:first-child):not(:last-child) .bttn,
.grouped > .bttn:not(:first-child):not(:last-child) {
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
}
.grouped li:first-child .bttn,
.grouped > .bttn:first-child {
	-webkit-border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
.grouped li:last-child .bttn,
.grouped > .bttn:last-child {
	margin-left:0;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

@media only screen and (max-width:700px) {
  .bttn {
    padding: 3px 8px;
    height: auto;
  }
}