@charset "utf-8";

/* SUPER SIDEBAR -------------------------*/

/* MAIN */
.super-sidebar {
	font-family: Arial, sans-serif;
	visibility: hidden;
}
.super-sidebar.sb-ready {
	visibility: visible;
}
.super-sidebar.sb-vhide {
	visibility: hidden;
}

/* RESETS */
.super-sidebar a {
	text-decoration: none;
}
.super-sidebar a:focus {
	outline: none;
	box-shadow: none;
}
.super-sidebar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* CLEARFIX */
.sb-clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/* BAR -----------------------------------*/
.sb-bar {
	position: fixed;
	z-index: 10100;
}
.sb-bar.sb-hide {
	display: none;
}

.sb-bar.sb-side-space {
	margin: 2px;
}

.sb-round.sb-side-space {
	margin: 3px;
}
.sb-rounded.sb-side-space {
	margin: 3px;
}

/* BUTTON --------------------------------*/
.sb-bar li {
	position: relative;
	cursor: pointer;
}
.sb-bar li:hover {
	z-index: 1001 !important;
}

.sb-bar.sb-right li {
	height: 42px;
}
.sb-bar.sb-button-space li:not(:last-child) {
	margin-bottom: 2px;
}

.sb-round li {
	border-radius: 21px;
}
.sb-round.sb-button-space li:not(:last-child) {
	margin-bottom: 3px;
}

.sb-rounded li {
	border-radius: 5px;
}
.sb-rounded.sb-button-space li:not(:last-child) {
	margin-bottom: 3px;
}

.sb-rounded-out li {
	border-radius: 0 5px 5px 0;
}

.sb-space {
	margin-top: 4px;
}
.sb-button-space .sb-space {
	margin-top: 6px;
}
.sb-round.sb-button-space .sb-space {
	margin-top: 7px;
}
.sb-rounded.sb-button-space .sb-space {
	margin-top: 7px;
}

/* MASK */
.sb-mask {
	position: relative;
	overflow: hidden;
	z-index: 12;
}
.sb-mask.sb-off {
	overflow: visible;
}
.sb-right .sb-mask {
	position: absolute;
	right: 0;
	height: 42px;
}

.sb-round .sb-mask {
	border-radius: 21px;
}
.sb-rounded .sb-mask {
	border-radius: 5px;
}
.sb-rounded-out .sb-mask {}

/* LINK */
.sb-bar a {
	width: 42px;
	display: block;
	position: relative;
}
.sb-bar.sb-right a {
	position: absolute;
	right: 0;
}

.sb-round a {
	border-radius: 21px;
}
.sb-rounded a {
	border-radius: 5px;
}
.sb-rounded-out a {
	border-radius: 0 5px 5px 0;
}
.sb-right.sb-rounded-out a {
	border-radius: 5px 0 0 5px;
}

/* ICON */
div.sb-icon {
	color: #ffffff;
	background-color: #33AAFF;
	font-size: 21px;
	line-height: 42px;
	text-align: center;
	width: 42px;
	height: 42px;
	background-image: none;
	position: relative;
	z-index: 11;
}
a:hover .sb-icon {
	color: #ffffff;
	background-color: #33AAFF;
}
.sb-right .sb-icon {
	position: absolute;
	right: 0;
}
.sb-round .sb-icon {
	border-radius: 21px;
}
.sb-rounded .sb-icon {
	border-radius: 5px;
}
.sb-rounded-out .sb-icon {
	border-radius: 0 5px 5px 0;
}
.sb-right.sb-rounded-out .sb-icon {
	border-radius: 5px 0 0 5px;
}
.sb-ready .sb-css-anim .sb-icon {
	-webkit-transition: background-color 100ms linear, color 100ms linear;
    -moz-transition: background-color 100ms linear, color 100ms linear;
    -o-transition: background-color 100ms linear, color 100ms linear;
    -ms-transition: background-color 100ms linear, color 100ms linear;
    transition: background-color 100ms linear, color 100ms linear;
}

.sb-icon img {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
}

/* LABEL */
.sb-label {
	color: #ffffff;
	background-color: #33AAFF;
	font-size: 15px;
	line-height: 42px;
	padding: 0 11px 0 8px;
	position: absolute;
	left: 42px;
	top: 0;
	z-index: 10;
	visibility: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}
.sb-label.sb-show {
	visibility: visible;
}
.sb-right .sb-label {
	padding: 0 8px 0 11px;
	right: 42px;
	left: auto;
}

.sb-label-space .sb-label {
	margin-left: 2px;
}
.sb-right.sb-label-space .sb-label {
	margin-right: 2px;
	margin-left: 0;
}

.sb-round .sb-label {
	border-radius: 21px;
	padding: 0 12px;
}
.sb-rounded .sb-label {
	border-radius: 5px;
	padding: 0 11px;
}
.sb-rounded-out .sb-label {
	border-radius: 5px;
	padding: 0 11px;
}

.sb-connected .sb-label {
	padding: 0 11px 0 50px;
	left: 0;
}
.sb-right.sb-connected .sb-label {
	padding: 0 50px 0 11px;
	right: 0;
	left: auto;
}

.sb-connected.sb-round .sb-label {
	padding: 0 12px 0 47px;
}
.sb-right.sb-connected.sb-round .sb-label {
	padding: 0 47px 0 12px;
}

/* HIT */
.sb-hit {
	height: 100%;
	position: absolute;
	left: 0; top: 0;
	display: none;
	height: 42px;
}
.sb-hit.sb-show {
	display: block;
}

.sb-label-space .sb-hit {
	width: 2px;
	left: 42px;
}
.sb-right.sb-label-space .sb-hit {
	right: 42px;
	left: auto;
}

.sb-round .sb-hit {
	width: 42px;
	left: 21px;
}
.sb-right.sb-round .sb-hit {
	right: 21px;
	left: auto;
}
.sb-round.sb-label-space .sb-hit {
	width: 44px;
}
.sb-right.sb-round.sb-label-space .sb-hit {}

.sb-rounded .sb-hit {
	width: 10px;
	left: 37px;
}
.sb-right.sb-rounded .sb-hit {
	right: 37px;
	left: auto;
}

.sb-rounded.sb-label-space .sb-hit {
	width: 12px;
}
.sb-right.sb-rounded.sb-label-space .sb-hit {}

.sb-rounded-out .sb-hit {
	width: 10px;
	left: 37px;
}
.sb-right.sb-rounded-out .sb-hit {
	right: 37px;
	left: auto;
}
.sb-rounded-out.sb-label-space .sb-hit {
	width: 12px;
}
.sb-right.sb-rounded-out.sb-label-space .sb-hit {}

/* SUBBAR --------------------------------*/
.sb-sub {
	cursor: pointer;
}

.sb-sub > .sb-icon {
	position: relative;
	z-index: 1000;
}

/* LIST */
.sb-sub .sb-subbar {
	width: 42px;
	position: absolute;
	left: 0;
	top: 42px;
}
.sb-sub .sb-subbar.sb-hide {
	visibility: hidden;
}

.sb-sub.sb-side .sb-subbar {
	position: absolute;
	left: 42px;
	top: 0;
}
.sb-right .sb-sub.sb-side .sb-subbar {
	right: 42px;
	left: auto;
}

.sb-sub.sb-circular .sb-subbar {
	position: absolute;
	left: 0; top: 0;
	width: auto;
}
.sb-right .sb-sub.sb-circular .sb-subbar {
	right: 0;
	left: auto;
}

.sb-sub.sb-sub-space .sb-subbar {
	margin-top: 2px;
}
.sb-sub.sb-side.sb-sub-space .sb-subbar {
	margin: 0 2px;
	margin-top: 0;
}

.sb-round .sb-sub.sb-sub-space .sb-subbar,
.sb-rounded .sb-sub.sb-sub-space .sb-subbar {
	margin-top: 3px;
}
.sb-round .sb-sub.sb-side.sb-sub-space .sb-subbar,
.sb-rounded .sb-sub.sb-side.sb-sub-space .sb-subbar {
	margin: 0 3px;
	margin-top: 0;
}

/* SUB BUTTON */
.sb-sub.sb-posabs .sb-subbar li {
	position: absolute;
}
.sb-right .sb-sub.sb-posabs .sb-subbar li {
	right: 0;
}

/* SUB HIT */
.sb-subhit {
	position: absolute;
	display: none;
	left: 0; top: 0;
}
.sb-subhit.sb-show {
	display: block;
}
.sb-right .sb-subhit {
	right: 0;
	left: auto;
}

/* BUTTON COLORS -------------------------*/

/* COLORS */
.sb-bar.sb-blue-button .sb-icon,
.sb-bar.sb-blue-button-over a:hover .sb-icon,
.sb-bar.sb-blue-button-over .sb-label,
.sb-bar.sb-blue-button-over .sb-sub:hover > .sb-icon {
	background-color: #33AAFF;
}
.sb-bar.sb-red-button .sb-icon,
.sb-bar.sb-red-button-over a:hover .sb-icon,
.sb-bar.sb-red-button-over .sb-label,
.sb-bar.sb-red-button-over .sb-sub:hover > .sb-icon {
	background-color: #f73726;
}
.sb-bar.sb-yellow-button .sb-icon,
.sb-bar.sb-yellow-button-over a:hover .sb-icon,
.sb-bar.sb-yellow-button-over .sb-label,
.sb-bar.sb-yellow-button-over .sb-sub:hover > .sb-icon {
	background-color: #FFBD22;
}
.sb-bar.sb-green-button .sb-icon,
.sb-bar.sb-green-button-over a:hover .sb-icon,
.sb-bar.sb-green-button-over .sb-label,
.sb-bar.sb-green-button-over .sb-sub:hover > .sb-icon {
	background-color: #1dd442;
}
.sb-bar.sb-white-button .sb-icon,
.sb-bar.sb-white-button-over a:hover .sb-icon,
.sb-bar.sb-white-button-over .sb-label,
.sb-bar.sb-white-button-over .sb-sub:hover > .sb-icon {
	background-color: #ffffff;
}
.sb-bar.sb-black-button .sb-icon,
.sb-bar.sb-black-button-over a:hover .sb-icon,
.sb-bar.sb-black-button-over .sb-label,
.sb-bar.sb-black-button-over .sb-sub:hover > .sb-icon {
	background-color: #3a3a3a;
}

.sb-bar.sb-blue-icon .sb-icon,
.sb-bar.sb-blue-icon-over a:hover .sb-icon,
.sb-bar.sb-blue-icon-over .sb-sub:hover > .sb-icon {
	color: #33AAFF;
}
.sb-bar.sb-red-icon .sb-icon,
.sb-bar.sb-red-icon-over a:hover .sb-icon,
.sb-bar.sb-red-icon-over .sb-sub:hover > .sb-icon {
	color: #f73726;
}
.sb-bar.sb-yellow-icon .sb-icon,
.sb-bar.sb-yellow-icon-over a:hover .sb-icon,
.sb-bar.sb-yellow-icon-over .sb-sub:hover > .sb-icon {
	color: #FFBD22;
}
.sb-bar.sb-green-icon .sb-icon,
.sb-bar.sb-green-icon-over a:hover .sb-icon,
.sb-bar.sb-green-icon-over .sb-sub:hover > .sb-icon {
	color: #1dd442;
}
.sb-bar.sb-white-icon .sb-icon,
.sb-bar.sb-white-icon-over a:hover .sb-icon,
.sb-bar.sb-white-icon-over .sb-sub:hover > .sb-icon {
	color: #ffffff;
}
.sb-bar.sb-black-icon .sb-icon,
.sb-bar.sb-black-icon-over a:hover .sb-icon,
.sb-bar.sb-black-icon-over .sb-sub:hover > .sb-icon {
	color: #3a3a3a;
}

.sb-bar.sb-blue-label .sb-label {
	background-color: #33AAFF;
}
.sb-bar.sb-red-label .sb-label {
	background-color: #f73726;
}
.sb-bar.sb-yellow-label .sb-label {
	background-color: #FFBD22;
}
.sb-bar.sb-green-label .sb-label {
	background-color: #1dd442;
}
.sb-bar.sb-white-label .sb-label {
	background-color: #ffffff;
}
.sb-bar.sb-black-label .sb-label {
	background-color: #3a3a3a;
}

.sb-bar.sb-blue-label-text .sb-label {
	color: #33AAFF;
}
.sb-bar.sb-red-label-text .sb-label {
	color: #f73726;
}
.sb-bar.sb-yellow-label-text .sb-label {
	color: #FFBD22;
}
.sb-bar.sb-green-label-text .sb-label {
	color: #1dd442;
}
.sb-bar.sb-white-label-text .sb-label {
	color: #ffffff;
}
.sb-bar.sb-black-label-text .sb-label {
	color: #3a3a3a;
}

/* OVERLAY -------------------------------*/
.sb-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10101;
	display: none;
}
.sb-overlay.sb-show {
	display: block;
}

.sb-shadow {
	background-color: #2f2f2f;
	opacity: 0.3;
	width: 100%;
	height: 100%;
}

/* WINDOW --------------------------------*/

/* MAIN */
.sb-window {
	background-color: #f0f0f0;
	padding: 1px;
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	position: absolute;
	display: none;
}
.sb-window.sb-show {
	display: block;
}
.sb-round .sb-window {
	border-radius: 5px;
}
.sb-winshadow .sb-window {
	box-shadow: 0 0 5px 2px rgba(70, 70, 70, 0.1);
}

.sb-normal-window {
	max-width: 500px;
}
.sb-small-window {
	max-width: 400px;
}
.sb-big-window {
	max-width: 700px;
}
.sb-large-window {
	max-width: 1000px;
}

/* HEAD */
.sb-head {
	background-color: #33AAFF;
	padding: 18px 17px;
	line-height: 21px;
	min-height: 21px;
}
.sb-round .sb-head {
	border-radius: 5px 5px 0 0;
}

.sb-title {
	color: #ffffff;
	font-size: 20px;
	display: inline;
	cursor: default;
	vertical-align: middle;
}
.sb-close {
	background: url("../images/window/close-white.png") no-repeat center;
	width: 20px;
	height: 20px;
	float: right;
	cursor: pointer;
}

.sb-blue .sb-head {
	background-color: #33AAFF !important;
}
.sb-red .sb-head {
	background-color: #FF6B4D !important;
}
.sb-yellow .sb-head {
	background-color: #FFBD22 !important;
}
.sb-green .sb-head {
	background-color: #1dd442 !important;
}
.sb-black .sb-head {
	background-color: #505050 !important;
}

.sb-white .sb-head {
	background-color: #f2f2f2 !important;
}
.sb-white .sb-window {
	background-color: #fafafa;
}
.sb-white .sb-title {
	color: #707070;
}
.sb-white .sb-close {
	background-image: url("../images/window/close-black.png");
}

/* BODY */
.sb-body {
	font-size: 15px;
	padding: 15px;
	color: #707070;
	line-height: 18px;

	/* Clearfix */
	content: "";
	display: table;
	clear: both;
}

.sb-body p {
	margin: 0;
	line-height: 18px;
}
.sb-body p:not(:last-child) {
	margin-bottom: 8px;
}

.sb-sep {
	border-top: 1px solid #d0d0d0;
	border-bottom: 1px solid #fff;
	margin: 12px 0;
	clear: both;
}