html,
body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: none;
    font: normal 300 16px 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

/**
 * Common style
 */

a {
    text-decoration: none;
}

/**
 * Viewport wrapper
 */

.wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

.wrapper > header,
.wrapper > footer {
    padding: 5px;
}

/**
 * Header
 */

.wrapper header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0;
    flex-shrink: 0;
    height: 40px;
    padding: 10px;
}

.wrapper header .logo {
    display: flex;
    align-items: center;
}

.wrapper header img {
    max-width: 200px;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.wrapper header img:nth-child(2) {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

.sidebar-icon-only .wrapper header img:nth-child(2) {
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 250ms, visibility 250ms;
    transition: opacity 250ms, visibility 250ms;
}

.wrapper header .sidebar-action {
    margin-left: 20px;
}

.wrapper header .sidebar-action .fa {
    font-size: 1.5rem;
    cursor: pointer;
}

.wrapper > header .hd-options a {
	padding-right: 10px;
}


/**
 * Main
 */

.wrapper > main {
	position: relative;
    display: flex;
    overflow: auto;
    flex: 1;
    flex-direction: row;
}


/**
 * Sidebar
 */

aside {
	position: fixed;
    min-height: calc(100vh - 60px);
    padding: 0;
    width: 200px;
    z-index: 11;
    transition: width 0.125s ease, background 0.125s ease;
}

aside ul {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

aside ul li {
    position: relative;
    transition-duration: 0.125s;
    transition-property: background;
    white-space: nowrap;
}

aside > ul > li {
    padding: 5px 5px 5px 10px;
    line-height: 1.75;
}

aside > ul > li:not(:first-child) {
    margin-top: 0;
}

aside > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 32px;
}

aside ul li .icon {
    width: 16px;
    height: 16px;
}

aside > ul > li .fa {
	vertical-align: initial;
    font-size: 1rem;
}

aside ul li .menu-title {
    display: flex;
    flex: 1;
    align-items: center;
    padding-left: 10px;
	font-size: 0.75rem;
}

aside ul li i {
    vertical-align: middle;
}

aside ul li .menu-title ~ i {
    display: flex;
    font-size: 0.75rem;
}

aside ul.sub-menu {
    display: none;
    margin: 0;
    list-style: none;
    text-align: left;
}

aside ul.sub-menu.show {
    display: block;
    margin-left: 20px;
}

aside ul.sub-menu li a {
	display: block;
    font-size: 0.75rem;
}

aside ul.sub-menu li i {
    margin-right: 7px;
}

/*@media (min-width: 992px) {*/
.sidebar-icon-only aside {
    width: 40px;
}

.sidebar-icon-only aside ul {
    overflow: visible;
    text-align: center;
}

.sidebar-icon-only aside ul li:hover ul.sub-menu {
    display: block;
    position: absolute;
    min-width: 150px;
    border-radius: 0 5px 5px 0;
    top: 0;
    left: 100%;
    margin: 0;
}

.sidebar-icon-only aside ul li .menu-title {
    display: none;
}

.sidebar-icon-only aside ul li .menu-title ~ i {
    display: none;
}

.sidebar-icon-only aside ul li {
    position: relative;
    padding-left: 0;
}

.sidebar-icon-only aside ul li a {
    justify-content: center;
    width: 100%;
}

.sidebar-icon-only aside ul.sub-menu {
    text-align: left;
    padding: 10px;
}

.sidebar-icon-only aside ul.sub-menu li {
	margin: 10px 0;
}

.sidebar-icon-only aside ul.sub-menu li a {
    justify-content: left;
}

.sidebar-icon-only aside ul li .icon {
    justify-content: center;
}


/*}*/

/**
 * Outer section / container
 */
 
div[section] {	
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
    padding: 0;
	transition: width 0.125s ease, background 0.125s ease;
}

div[section]:not([section-fluid]) {
	margin-left: 200px;
}

.sidebar-icon-only div[section] {
	margin-left: 40px;
}

/**
 * Section
 */

section[content] {
    flex: 1;
	padding: 10px;
	transition: width 0.125s ease, background 0.125s ease;
	font-size: 0.875rem;
}

section[content] h2 {
    margin: 0 0 20px;
}

section[login] {
    display: flex;
    flex: 1;
    text-align: left;
}

section[login] .container {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

section[login] .form-layout {
    border: 1px solid #ccc;
	border-radius: 4px;
    min-width: 200px;
    max-width: 600px;
    min-height: 250px;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

section[login] .form-layout h1 {
    font-weight: 300;
    font-size: 1.5rem;
}

section[login] .form-layout [input-group]:not(:first-child) {
    margin-top: 10px;
}

section .form-opts[sameline] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
	font-size: 0.875rem;
}

section[login] .form-action {
	display: flex;
    justify-content: center;
}

[input-icon-fake] {
    display: flex;
	border-radius: 4px;
    padding: 10px 5px;
}

[input-icon-fake] .fa {
    width: 24px;
}

[input-icon-fake] input {
    flex: 1;
    border: 0;
	border-radius: 4px;
}

[input-select] {
    display: flex;
    padding: 10px 5px;
	border-radius: 4px;
}

[input-select]:focus,
[input-icon-fake] input:focus {
    outline: 0;
}


/**
 * Form
 */

section[form] {
	flex: 1;
	padding: 10px;
}

section[form] .form-layout {
	border-radius: 4px;
	padding: 10px;
}

section[form] .form-layout:not(:first-child) {
	margin-top: 25px;
}

section[form] .form-layout h2 {
	margin: 0 0 15px;
    font-weight: 300;
    font-size: 1.25rem;
}

section[form] [input-group] {
	display: flex;
	margin: 10px 0;
}

section[form] [text-group] {
	display: flex;
	flex-direction: column;
}

section[form] [text-group][errors-group] {
	flex-direction: row;
}

section[form] [text-group] p {
	margin: 0;
	font-size: 0.875rem;
}

section[form] [text-group] p:not([message]):not(:first-child) {
	margin-top: 15px;
}

section[form] [input-group] label {
	display: flex;
	align-items: center;
	flex: 0 0 200px;
	font-weight: 700;
	font-size: 0.875rem;
}

section[form] [input-group] p[error] {
	color: red;
}

section[form] label[fake] {
	display: flex;
	align-items: center;
	flex: 0 0 200px;
}

section[form] [checkbox-label] {
	flex: 1;
}

section[form] [checkbox-label] .pretty {
	display: block;
}

section[form] input,
section[form] select {
	flex: 1;
	padding: 10px;
	border-radius: 4px;
}

section[form] input:focus,
section[form] select:focus {
    outline: 0;
}

section[form] .form-action {
	margin-top: 25px;
}

section[form] .form-action .nd-btn:first-child {
	margin-left: 0;
}


/**
 * Buttons
 */

.nd-btn {
    display: inline-block;
    width: auto;
    padding: 7px 17px;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    font-size: 12px;
    line-height: 18px;
    min-width: 80px;
    margin: 0 10px;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * Footer
 */

.wrapper footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25px;
    font-size: 0.75rem;
}

div[section] footer {
	padding: 10px;
}

/**
 * Helpers
 */

/* Messages */

[justify-content-start] {
    justify-content: start;
}

[justify-content-center] {
    justify-content: center;
}

[justify-content-end] {
    justify-content: end;
}

/* Messages */

[class*="msg-"] {
    margin: 5px 0 15px;
}

/* Widths */

[w100] {
    width: 100%;
}

[w100][input-icon-fake] {
    width: calc(100% - 12px);
}

/* Alignment */

[align-left] {
    text-align: left;
}

[align-center] {
    text-align: center;
}

[align-right] {
    text-align: right;
}

.hidden {
    display: none;
}

/* Pretty inputs */

.pretty.p-default.p-thick .state label:after,
.pretty.p-default.p-thick .state label:before {
    border-width: 1px;
    border-radius: 4px;
}

.pretty.p-round.p-thick .state label {
    min-width: calc(1.5em + 2px);
    min-height: calc(1.5em + 2px);
}

.pretty.p-round.p-thick .state label:before,
.pretty.p-round.p-thick .state label:after {
    width: calc(1.875em + 2px);
    height: calc(1.875em + 2px);
    left: -0.15em;
}


/* Select2 overrides */

.select2-container .select2-selection--single {
	height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
}

.select2-container .select2-selection--multiple {
	min-height: 36px;
}

.select2-search--dropdown .select2-search__field {
	min-height: 32px;
	outline: 0;
}

.select2-container {
	width: 100% !important;
}

.select2-container .select2-search--inline .select2-search__field {
	min-height: 28px;
	margin-top: 0;
	margin-left: 0;
	padding: 8px;
	font-size: 0.875rem;
}

.select2-container .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-results__option {
	font-size: 0.875rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 34px;
}

.select2-container--default .select2-selection--multiple {
	margin: 0;
}

.select2-selection--multiple:before,
.select2-container--focus.select2-container--open .select2-selection--multiple:before {
    position: absolute;
    top: 42%;
    right: 7px;
	content: "";
}
	
.select2-selection--multiple:before {
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.select2-container--focus.select2-container--open .select2-selection--multiple:before {
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	font-size: 1.125em;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	font-size: 0.875rem;
}


/* Multi line fix */

.pretty {
    white-space: inherit;
}

.pretty .state label {
    width: 100%;
    padding-left: 1.5rem;
    text-indent: 0;
    font-size: 0.875rem;
}

.pretty .state label:after,
.pretty .state label:before {
    top: 0;
}


/* Single line fix */

.pretty .state.inline {
    padding-left: 2rem;
}

.pretty .state.inline label {
    display: inline;
    padding-left: 0;
}

.pretty .state.inline label:after,
.pretty .state.inline label:before {
    top: 0.125em;
}

.pretty label span {
    position: relative;
    display: inline-block;
    z-index: 5;
}

.pretty a,
.pretty [data-link] {
    z-index: 3;
    pointer-events: initial !important;
}


/* Scrollbar */

*::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

*::-webkit-scrollbar-thumb {
    border-radius: 50px !important;
}

@-moz-document url-prefix() {
    div {
        scrollbar-width: thin !important;
    }
}

/**
 * Media queries
 */

@media screen and (max-width: 576px) {
    section .form-opts[sameline] {
        flex-direction: column;
		
    }

    section .form-opts[sameline] > *:not(:first-child) {
        margin-top: 10px;
    }
	
	section[form] [input-group]:not([checkbox-group]) {
		flex-direction: column;
	}
	
	section[form] [input-group] label {
		flex: 1;
		margin-bottom: 5px;
	}
	
	section[form] [input-group][checkbox-group] {
		flex-wrap: wrap;
		align-content: space-between;
		width: 100%;
	}
	
	section[form] [checkbox-group] label {
		flex: 1;
	}
	
	section[form] [checkbox-group] [checkbox-label] {
		flex: 0;
		width: 20px;
	}
	
	section[form] label[fake] {
		flex: 0;
	}
}