/*
 * Typos styles
 */

@font-face {
	font-family: 'Ubuntu';
	src: url('./fonts/Ubuntu-C.eot');
	src: url('./fonts/Ubuntu-C.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/Ubuntu-C.woff') format('woff'),
		 url('./fonts/Ubuntu-C.ttf') format('truetype'),
		 url('./fonts/Ubuntu-C.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Ubuntu-Light';
	src: url('./fonts/Ubuntu-L.eot');
	src: url('./fonts/Ubuntu-L.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/Ubuntu-L.woff') format('woff'),
		 url('./fonts/Ubuntu-L.ttf') format('truetype'),
		 url('./fonts/Ubuntu-L.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Ubuntu-Bold';
	src: url('./fonts/Ubuntu-B.eot');
	src: url('./fonts/Ubuntu-B.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/Ubuntu-B.woff') format('woff'),
		 url('./fonts/Ubuntu-B.ttf') format('truetype'),
		 url('./fonts/Ubuntu-B.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSans';
	src: url('./fonts/OpenSans-Regular.eot');
	src: url('./fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/OpenSans-Regular.woff2') format('woff2'),
		 url('./fonts/OpenSans-Regular.woff') format('woff'),
		 url('./fonts/OpenSans-Regular.ttf') format('truetype'),
		 url('./fonts/OpenSans-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html,
body {
	font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

a:active,
a:focus,
a:hover,
button,
button:active,
button:focus,
embed,
input::-moz-focus-inner,
object {
	outline: 0;
}

.hidden {
	display: none;
}
.hidden-desktop {
	display: none!important;
}

.no-visible {
	visibility: hidden!important;
}

.pull-right {
	float: right!Important;
}
.pull-left {
	float: left!Important;
}

.align-top {
	vertical-align: top!important;
}
.align-base {
	vertical-align: baseline!important;
}
.align-middle {
	vertical-align: middle!important;
}

.opacity-25 {
	opacity: 0.25!important;
}
.opacity-50 {
	opacity: 0.5!important;
}
.opacity-75 {
	opacity: 0.75!important;
}
.opacity-100,
.opaque {
	opacity: 1!important;
}

.disabled {
	color: #fff;
	.btn-default& {
		color: #999;
	}
}

xmp {
	overflow: auto;
}

.text-italic {
	font-style: italic!important;
}
.text-dashed {
	text-decoration: line-through;
}
.nowrap {
	white-space: nowrap;
}
.truncated {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-space {
	margin: 0;

	>[class*=col-] {
		margin: 0!important;
		padding-right: 0;
		padding-left: 0;
	}
}

.no-margin {
	margin: 0!important;
}
.no-x-margin {
	margin-left: 0!important;
	margin-right: 0!important;
}
.no-y-margin {
	margin-top: 0!important;
	margin-bottom: 0!important;
}

.margin {
	&-2 {
		margin: 2px!important;
	}
	&-5 {
		margin: 5px!important;
	}
	&-10 {
		margin: 10px!important;
	}
	&-20 {
		margin: 20px!important;
	}
	&-x-2 {
		margin-left: 2px!important;
		margin-right: 2px!important;
	}
	&-x-5 {
		margin-left: 5px!important;
		margin-right: 5px!important;
	}
	&-x-10 {
		margin-left: 10px!important;
		margin-right: 10px!important;
	}
	&-x-20 {
		margin-left: 20px!important;
		margin-right: 20px!important;
	}
	&-y-2 {
		margin-top: 2px!important;
		margin-bottom: 2px!important;
	}
	&-y-5 {
		margin-top: 5px!important;
		margin-bottom: 5px!important;
	}
	&-y-10 {
		margin-top: 10px!important;
		margin-bottom: 10px!important;
	}
	&-y-20 {
		margin-top: 20px!important;
		margin-bottom: 20px!important;
	}
	&-top-0 {
		margin-top: 0!important;
	}
	&-top-2 {
		margin-top: 2px!important;
	}
	&-top-5 {
		margin-top: 5px!important;
	}
	&-top-10 {
		margin-top: 10px!important;
	}
	&-top-20 {
		margin-top: 20px!important;
	}
	&-bottom-0 {
		margin-bottom: 0!important;
	}
	&-bottom-2 {
		margin-bottom: 2px!important;
	}
	&-bottom-5 {
		margin-bottom: 5px!important;
	}
	&-bottom-10 {
		margin-bottom: 10px!important;
	}
	&-bottom-20 {
		margin-bottom: 20px!important;
	}
	&-left-0 {
		margin-left: 0!important;
	}
	&-left-2 {
		margin-left: 2px!important;
	}
	&-left-5 {
		margin-left: 5px!important;
	}
	&-left-10 {
		margin-left: 10px!important;
	}
	&-left-20 {
		margin-left: 20px!important;
	}
	&-right-0 {
		margin-right: 0!important;
	}
	&-right-2 {
		margin-right: 2px!important;
	}
	&-right-5 {
		margin-right: 5px!important;
	}
	&-right-10 {
		margin-right: 10px!important;
	}
	&-right-20 {
		margin-right: 20px!important;
	}
}

.shift {
	&-topleft {
		&-2 {
			margin-top: -2px!important;
			margin-left: -2px!important;
		}
		&-4 {
			margin-top: -4px!important;
			margin-left: -4px!important;
		}
	}
	&-topright {
		&-2 {
			margin-top: -2px!important;
			margin-right: -2px!important;
		}
		&-4 {
			margin-top: -4px!important;
			margin-right: -4px!important;
		}
	}
	&-bottomleft {
		&-2 {
			margin-bottom: -2px!important;
			margin-left: -2px!important;
		}
		&-4 {
			margin-bottom: -4px!important;
			margin-left: -4px!important;
		}
	}
	&-bottomright {
		&-2 {
			margin-bottom: -2px!important;
			margin-right: -2px!important;
		}
		&-4 {
			margin-bottom: -4px!important;
			margin-right: -4px!important;
		}
	}
}

.bordered:not(:empty) {
	border: 1px solid #ccc;

	&:hover {
		border-color: #bbbbbb;
	}
	&.nohover:hover {
		border-color: #ccc;
	}
}

.no-border {
	&,
	.well[class*=" bg-"]& {
		border-width: 0!important;
	}
	&-transparent {
		border-color: transparent!important;
	}
	&-radius {
		border-radius: 0;
	}
}

.border {
	&-0 {
		border-width: 0!important;
	}
	&-1 {
		border-width: 1px!important;
	}
}

.radius {
	&-4 {
		border-radius: 4px!important;
	}
	&-top-4 {
		border-top-left-radius: 4px!important;
		border-top-right-radius: 4px!important;
	}
	&-bottom-4 {
		border-bottom-left-radius: 4px!important;
		border-bottom-right-radius: 4px!important;
	}
	&-left-4 {
		border-top-left-radius: 4px!important;
		border-bottom-left-radius: 4px!important;
	}
	&-right-4 {
		border-top-right-radius: 4px!important;
		border-bottom-right-radius: 4px!important;
	}
}

.width {
	&-nomin {
		min-width: 0!important;
	}
	&-20 {
		width: 20px;
		max-width: 20px;
	}
	&-40 {
		width: 40px;
		max-width: 40px;
	}
	&-50 {
		width: 50px;
		max-width: 50px;
	}
	&-60 {
		width: 60px;
		max-width: 60px;
	}
	&-80 {
		width: 80px;
		max-width: 80px;
	}
	&-100 {
		width: 100px;
		max-width: 100px;
	}
	&-200 {
		width: 200px;
		max-width: 200px;
	}
	&-300 {
		width: 300px;
		max-width: 300px;
	}
	&-400 {
		width: 400px;
		max-width: 400px;
	}
	&-500 {
		width: 500px;
		max-width: 500px;
	}
}

.height {
	&-nomin {
		min-height: 0!important;
	}
	&-20 {
		height: 20px;
		max-height: 20px;
	}
	&-40 {
		height: 40px;
		max-height: 40px;
	}
	&-50 {
		height: 50px;
		max-height: 50px;
	}
	&-60 {
		height: 60px;
		max-height: 60px;
	}
	&-80 {
		height: 80px;
		max-height: 80px;
	}
	&-100 {
		height: 100px;
		max-height: 100px;
	}
	&-200 {
		height: 200px;
		max-height: 200px;
	}
	&-300 {
		height: 300px;
		max-height: 300px;
	}
	&-400 {
		height: 400px;
		max-height: 400px;
	}
	&-500 {
		height: 500px;
		max-height: 500px;
	}
}

.padding {
	&-5 {
		padding: 5px!important;
	}
	&-7 {
		padding: 7px!important;
	}
	&-10 {
		padding: 10px!important;
	}
	&-20 {
		padding: 20px!important;
	}
	&-x-0 {
		padding-left: 0px!important;
		padding-right: 0px!important;
	}
	&-x-5 {
		padding-left: 5px!important;
		padding-right: 5px!important;
	}
	&-x-10 {
		padding-left: 10px!important;
		padding-right: 10px!important;
	}
	&-x-20 {
		padding-left: 20px!important;
		padding-right: 20px!important;
	}
	&-y-0 {
		padding-top: 0px!important;
		padding-bottom: 0px!important;
	}
	&-y-5 {
		padding-top: 5px!important;
		padding-bottom: 5px!important;
	}
	&-y-10 {
		padding-top: 10px!important;
		padding-bottom: 10px!important;
	}
	&-y-20 {
		padding-top: 20px!important;
		padding-bottom: 20px!important;
	}
	&-top-0 {
		padding-top: 0!important;
	}
	&-top-5 {
		padding-top: 5px!important;
	}
	&-top-10 {
		padding-top: 10px!important;
	}
	&-top-20 {
		padding-top: 20px!important;
	}
	&-bottom-0 {
		padding-bottom: 0!important;
	}
	&-bottom-5 {
		padding-bottom: 5px!important;
	}
	&-bottom-10 {
		padding-bottom: 10px!important;
	}
	&-bottom-20 {
		padding-bottom: 20px!important;
	}
	&-left-0 {
		padding-left: 0!important;
	}
	&-left-5 {
		padding-left: 5px!important;
	}
	&-left-10 {
		padding-left: 10px!important;
	}
	&-left-20 {
		padding-left: 20px!important;
	}
	&-right-0 {
		padding-right: 0!important;
	}
	&-right-5 {
		padding-right: 5px!important;
	}
	&-right-10 {
		padding-right: 10px!important;
	}
	&-right-20 {
		padding-right: 20px!important;
	}
}

.no-padding {
	padding: 0!important;

	.md-editor,
	.widget-body& .cke_chrome {
		border: 0;
	}
	>pre {
		margin: 30px;
	}
	&-bottom {
		padding-bottom: 0!important;
	}
}
.no-x-padding {
	padding-left: 0!important;
	padding-right: 0!important;
}
.no-y-padding {
	padding-top: 0!important;
	padding-bottom: 0!important;
}

.no-content-padding {
	margin: -10px -14px 0 -14px;

	@media (min-width:768px) and (max-width:880px) {
		margin: 0 -14px!important;
	}
	@media (max-width:767px) {
		margin: 0 -5px!important;
	}
	@media only screen and (min-width:0) and (max-width:679px) {
		margin: 0 -5px!important;
	}
	@media only screen and (min-width:320px) and (max-width:479px) {
		margin: 0 -5px!important;
	}
}

.no-height {
	line-height: 0;
}

.clearfix,
.inner-space:after {
	zoom: 1;
}

.clearfix,
.inner-space {
	&:after {
		clear: both;
	}
	&:after,
	&:before {
		display: block;
		visibility: hidden;
		overflow: hidden;
		content: "\0020";
		height: 0;
		font-size: 0;
		line-height: 0;
	}
}

.display-inline {
	display: inline-block!important;
}

.display-normal {
	display: inline!important;
}

.hover-transparent {
	opacity: .5;

	&:hover {
		opacity: 1;
	}
}

.row-seperator-header {
	margin: 15px 14px 20px;
	border-bottom: 0;
	display: block;
	color: #646464;
	font-size: 20px;
	font-weight: 400;
}

.text-align-center,
.text-center {
	text-align: center!important;
}

.text-align-left,
.text-left {
	text-align: left!important;
}

.text-align-right,
.text-right {
	text-align: right!important;
}

.center-canvas,
.center-child-canvas >canvas {
	display: block!important;
	margin: 0 auto!important;
}

.semi-bold {
	font-weight: 400!important;
}
.bold {
	font-weight: 900!important;
}

.ultra-light {
	font-weight: 300!important;
}

.font-xs {
	font-size: 85%!important;
}

.font-sm {
	font-size: 95%!important;
}

.font-md {
	font-size: 130%!important;
}

.font-lg {
	font-size: 160%!important;
}

.font-xl {
	font-size: 200%!important;
}

.font-400 {
	font-size: 400%!important;
}

.badge {
	font-size: 11px;
	padding: 3px 6px 2px;
}

.label {
	padding: 0.3em .6em .1em;
}

.cursor-pointer {
	cursor: pointer;
}

.selected {
	border: 1px solid #0091d9!important;

	tr& {
		background-color: rgb(220, 235, 255);
	}
	&:before {
		display: block;
		position: absolute;
		content: "\f00c";
		color: #fff;
		right: 4px;
		font-family: FontAwesome;
		z-index: 1002;

		tr& {
			display: none;
		}
	}
	&:after {
		width: 0;
		height: 0;
		border-top: 35px solid #0091d9;
		border-left: 35px solid rgba(0, 0, 0, 0);
		position: absolute;
		display: block;
		right: 0;
		content: ".";
		top: 0;
		z-index: 1001;

		tr& {
			display: none;
		}
	}
}
