* {

	margin: 0;

	padding: 0;

	font-family: Arial;

}

body {

	background: #f0f0f0;

	color: #333;

	font-size: 13px;

}

div {

	padding: 10px;

}



a {

	color: #47a;

	text-decoration: none;

}

a:hover {

	color: #f70;

}



/** headings */



h1, h2, h3 {

	font-family: "Trebuchet MS", sans-serif;

	font-weight: normal;

}

h1 { font-size: 15px; }

h2 { font-size: 18px; }

h3 { font-size: 21px; }



/** divitions */



div, blockquote {

	padding: 10px;

	overflow: auto;

}



/** listing */



ul {

	list-style-type: none;

}

ul li {

	padding: 5px 10px;

}



/** Table */



table {

	border: 1px solid #ddd;

	border-collapse: collapse;

	margin: 5px 0;

}

table tr th, table tr td {

	border: 1px solid #ddd;

	padding: 8px 10px;

	text-align: left;

	white-space: nowrap;

}

table tr th {

	background: #eee;

	color: #555;

}

table tr td[contenteditable=true]:focus {

	background: #fff;

	border: 2px solid #4a7;

	color: #222;

	font-size: 11px;

	outline: none;

}

table.table {

	visibility: hidden;	

}

table.table tr td a:hover {

	color: #258;

	text-decoration: underline;

}

table.no-border, table.no-border * {

	border: none;

	border-radius: 0;

}

table.no-background, table.no-background * {

	background: #fff;

}

table.wrap tr th, table.wrap tr td{

	white-space: normal; 

}



/** Showing data managements */



main {

	display: flex;

}

aside {

	flex-basis: 20%;

}

aside a, aside ul li {

	color: #333;

}

aside ul li {

	padding: 10px;

	cursor: pointer;

}

aside ul li:hover {

	background: #eee;

}

aside ul.menu ul {

	background: #222;

	display: none;

	position: relative;

}

aside ul.menu ul:after {

	position: absolute;

	left: 10px;

	top: -5px;

	width: 0;

	height: 0;

	content: '';

	border-left: 5px solid transparent;

	border-right: 5px solid transparent;

	border-bottom: 5px solid #222;

}

aside ul.menu ul li {

	border: none;

	color: #fff;

	padding-left: 15px;

}

aside ul.menu ul li:hover {

	background: #111;

}



/** Instant styling */



.float-left {

	float: left;

}

.float-right {

	float: right;

}

.small-padding {

	padding: 5px;

}



.note {

	padding: 10px 10px;

	margin: 5px 0;

}

.note h1, .note h2, .note h3 {

	font-weight: normal;

	color: #555;

}

.note ul {

	list-style-type: disc;

	margin: 5px 30px;

}

.note ul li {

	padding: 3px;

}



/** Inputs */



input, select, textarea {

	border: 1px solid #ccc;

	padding: 5px 8px;

	box-sizing: border-box;

	outline: none;

}

input:focus, select:focus, textarea:focus {

	background: #f9f9f9;

}

textarea {

	width: 100%;

	height: 200px;

}

.input-group {

	background: #ddd;

	padding: 0;

	margin: 5px 0;

	display: flex;

}

.input-group input {

	width: 100%;

	border: 1px solid #ddd;

	border-radius: 0;

	padding: 10px;

}

.input-group input:focus {

	background: #f5f5f5;

}

.input-group label {

	padding: 10px;

}

.form-label {

	font-weight: bold;

	padding: 10px 0;

}



/** Buttons */



[class^="button-"] {

	border: 1px solid #ccc;

	border-radius: 3px;

	color: #fff;

	cursor: pointer;;

	font-size: 12px;

	margin: 0 2px;

	padding: 8px 10px;

}

[class^="button-"]:disabled {

	opacity: 0.8;

	cursor: default;

}

.button-white {

	background: #fff;

	color: #222;

}

.button-red {

	background: #a22;

	border: 1px solid #900;

}

.button-green {

	background: #2a2;

	border: 1px solid #090;

}

.button-blue {

	background: #47a;

	border: 1px solid #369;

}

.button-white:hover { background: #eee; }

.button-red:hover { background: #900; }

.button-green:hover { background: #090; }

.button-blue:hover { background: #369; }





/** Alerts  */



.success-alert, .error-alert{

	color: #fff;

	padding: 8px 10px;

}

.success-alert:before, .error-alert:before{

	font-family: FontAwesome;

}

.success-alert:before{

	content: "\f00c ";

}

.error-alert:before{

	content: "\f00d ";

}

.success-alert{

	background: #4c4;

	border: 1px solid #3b3;

}

.error-alert{

	background: #d55;

	border: 1px solid #c44;

}



/** Modal Popup  */



.modal-background{

	background: rgba(10, 10, 10, 0.5);

	display: none;

	position: fixed;

	overflow: hidden;

	top: 0;

	left: 0;

	z-index: 9;

	width: 100%;

	height: 100%;

}

.modal-background .modal-dialog{

	background: #fff;

	border: 1px solid #ccc;

	border-radius: 3px;

	padding: 0;

	position: absolute;

	top: -100%;

	left: 30%;

	right: 30%;

	transition: .5s;

	z-index: 10;

	overflow-x: hidden;

	overflow-y: auto;

	max-height: 80%;

}

.modal-background .modal-dialog .modal-header{

	border-bottom: 1px solid #eee;

	font-size: 18px;

	padding: 15px 15px 10px;

}

.modal-background .modal-dialog .modal-body {

	padding: 10px 15px 15px;

}

.modal-background .modal-dialog .modal-footer {

	border-top: 1px solid #eee;

	overflow: auto;

}

.modal-background .modal-dialog .modal-footer button {

	float: right;

}



/** Tab navigation */



.tab-navigation {

	border-bottom: 1px solid #ccc;

	padding: 0;

	overflow: auto;

}

.tab-navigation .tab {

	border-radius: 2px 2px 0 0;

	cursor: pointer;

	float: left;

	padding: 10px 20px;

}

.tab-navigation .tab.active {

	font-size: 14px;

	border: 1px solid #ccc;

	border-bottom: none;

	cursor: default;

}

.tab-content {

	display: none;

	padding: 10px 0;

}



/** Switch button */



.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}



.switch input {display:none;}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}



input:checked + .slider {

  background-color: #2196F3;

}



input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}



/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}



.slider.round:before {

  border-radius: 50%;

}