html { overflow-y: scroll; }
body { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 1.4; color: #202020; margin: 0; padding: 0; }

h1 { font-family: 'Nunito', sans-serif; font-size: 36px; font-weight: 400; color: #002568; line-height: 44px; }
h2 { font-family: 'Nunito', sans-serif; font-size: 32px; font-weight: 600; color: #004C97; line-height: 40px; }
h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 24px; font-weight: 600; color: #202020; line-height: 28px; padding: 8px 0 0; }
h4 { font-family: 'Source Sans Pro', sans-serif; font-size: 20px; color: #202020; line-height: 24px; }

a { font-weight: 600; color: #0077C8; }
a:hover { color: #0062B0; text-decoration: none; }
button { cursor: pointer; border: 0; background: none; }
button:focus { outline: 0; }
ul { padding-left: 0; }
ul li { list-style: none; }

.logo { height: 80px; width: 180px; display: block; text-indent: -9999em; overflow: hidden; margin: 8px auto; background: url("../images/logo.png") no-repeat; /* Fallback */ background: linear-gradient(transparent, transparent), url("../images/logo.svg") no-repeat; background-size: 180px; }
header { width: 100%; height: 60px; position: fixed; left: 0; top: 0; z-index: 100; background: #003980; }
main {
	width: 100%; height: 100%; position: absolute; top: 0px; left: 0; margin: 0;
	padding: 124px 0 0 540px;
}
section { width: 1200px; min-width: 280px; margin-bottom: 40px; }
section form { padding: 24px 0; }
#subpanel { border-right: 1px solid #B3E5FF; }

/* alerts */
.hide { display: none; }
.alert { color: #202020; border: 0; }
.alert .close { color: #202020; text-shadow: none; }
.alert .close:hover { color: #202020; }
.alert-success { background: #B5F2C6; }
.alert-danger { background: #FFDEE1; }
.alert-warning { background: #F9E8AB; }
.alert-info { background: #B3E5FF; }
.alert-secondary { background: #EEE; }

/* buttons */
.btn-primary { height: 40px; min-width: 140px; font-size: 18px; font-weight: 400; line-height: 28px; background: #0077C8; border: 0; }
.btn-primary:hover { background: #0062B0; }
.btn-primary:focus { outline: 0 !important; box-shadow: 0 0 0 3px #B3E5FF !important; background: #0062B0; }
.btn-primary:active { outline: 0 !important; box-shadow: none !important; background: #004C97 !important; }
.btn-primary:disabled { cursor: auto; color: #8B8B8B; background: #DDD; }

.btn-secondary { height: 40px; min-width: 140px; font-size: 18px; font-weight: 400; line-height: 24px; color: #202020; background: #fff; background: #FFF; border: 1px solid #BBB; }
.btn-secondary:hover { color: #005917; border: 1px solid#005917; background: #B5F2C6; }
.btn-secondary:focus { outline: 0 !important; box-shadow: 0 0 0 3px #B3E5FF; }
.btn-secondary:active { outline: 0 !important; box-shadow: none !important; color: #005917 !important; border: 1px solid #005917 !important;  background: #7FEB9C !important; }

/* buttons */
.btn-danger { height: 40px; min-width: 140px; font-size: 18px; font-weight: 400; line-height: 24px; background: #dc3545; border: 1px solid #dc3545; }
.btn-danger:hover { background: #c82333; border-color: #bd2130; }
.btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); }
.btn-danger:active { outline: 0 !important; box-shadow: none !important; background: #bd2130 !important; }
.btn-danger:disabled { cursor: auto; border-color: #dc3545; background: #dc3545; }

/* of D39A9C ipv B58086*/
.btn-red { height: 40px; min-width: 140px; font-size: 18px; font-weight: 400; line-height: 24px; color: #202020; background: #fff; background: #FFF; border: 1px solid #700; }
.btn-red:hover { color: #590017; border: 1px solid#590017; background: #D39A9C; }
.btn-red:focus { outline: 0 !important; box-shadow: 0 0 0 3px #B58086; }
.btn-red:active { outline: 0 !important; box-shadow: none !important; color: #590017 !important; border: 1px solid #590017 !important;  background: #B58086 !important; }

.btn-sm { height: 32px; min-width: 120px; font-size: 16px; padding: 3px 0 5px; border-radius: 4px; }

.trailing {
	position: absolute;
	bottom: 2em;
	right: 2em;
}

.icon-btn {
	height: 32px; width: 32px; border-radius: 6px; background: #0077C8; border: 0;
	text-align: center;
	line-height: 32px;
	display: block;
}
.icon-btn:hover { background: #004C97; }
.icon-btn i { color: #FFF; }


.central-button {
	position: absolute;
	top: 45%;
	left: 53%;
	display: flex;
	gap: 2em;
}
.central-button--link {
	flex: 130px 1 0;
	text-align: center;
}
.central-button--icon {
	height: 100px;
	width: 100px;
	font-size: 52px;
	display: block;
	color: #FFF;
	padding: 24px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #0077C8;
}
.central-button--link:hover .central-button--icon {
	background: #004C97;
}
.central-button--link:focus .central-button--icon {
	background: #004C97;
	box-shadow: 0 0 0 6pt #D4F0FF;
}
.central-button--text {
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	line-height: 40px;
	font-size: 24px;
	color: #202020;
}

#add-group-sm .icon-btn { float: right; margin: 8px 16px; }

.btnMenu { text-align: right }
.btnGroup .btn:not(:last-child) {
	margin-left: 3px;
}

/* accordion */
.hiddenRow { border-bottom: 0; }
.hiddenRow td { padding: 0; background: #D4F0FF; }
.hiddenRow td.hidden { display: none; }
.hiddenRow td aside { float: right; }
.hiddenRow td aside button { margin-left: 16px; }
.accordion { margin: 16px; padding: 16px; background: #FFF; }
.accordion-body { padding: 24px 0; margin-bottom: 16px; }
.accordion-toggle { cursor: pointer; border-bottom: 0; }
.accordion-toggle, .accordion-toggle.collapsed:hover { background: #D4F0FF !important; }
.accordion-toggle.collapsed { border-bottom: 1px solid #EEE; background: #FFF !important; }
.collapse.show { overflow: hidden; }

.group-title { margin-top: 24px; margin-bottom: 24px; }
.group-title .btn { float: right; }

/* forms */
.holder { width: 100%; }
form .btn { margin-right: 16px; }
form .btn-compact { margin-right: 0 }
.form-group { margin: 0 0 24px; }
.form-control { color: #202020; }
label { width: 100%; min-width: 100px; font-weight: 600; margin-right: 24px; vertical-align: middle; }
label .optional { font-weight: 400; margin-left: 4px; }
label.vertical { display: block; }
input.group-search { min-width: 220px; margin: 0 16px 24px; border: 1px solid #94D6FF !important;  }
input.device-search { min-width: 220px; float: right; margin-right: 16px; }
input,
textarea,
select,
.select2-selection__rendered {
	min-width: 300px; margin-bottom: 16px; color: #202020; padding-left: 12px; padding-right: 12px; border-radius: 6px !important; border: 1px solid #BBB !important; background: white !important;
}
input,
select,
.select2-selection__rendered,
.input-like {
	height: 40px !important;
}
.input-like {
	line-height: 40px;
}
.select2-container {
	width: auto !important;
}
.select2-container--default .select2-selection--single {
	border: none;
    height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
}
.select2-container--default .select2-selection--multiple {
	border: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	height: auto !important;
}
.select2-container .select2-search--dropdown input {
	min-width: auto;
}
.select2-search__field {
	min-width: 288px;
	padding: 0 .5em !important;
}
.select2-selection__choice {
	padding: 5px !important;
	line-height: 28px;
}
input[type="checkbox"] {
	height: 1em !important;
}
td.row-select input {
	min-width: 0;
}
input:active { background: white !important; }
input:hover, select:hover { border: 1px solid #008741 !important; }
input:focus, select:focus { border: 1px solid #008741 !important; outline: 0; box-shadow: none !important; background: white !important; }
input::-ms-clear, input::-ms-reveal, ::-ms-reveal, select::-ms-expand, ::-ms-expand { display: none !important; }
select { -webkit-appearance: none; text-indent: 0.01px; text-overflow: ""; }
select.form-control { max-width: 300px; background: url('../images/chevron-down.svg') no-repeat !important; background-position: right 12px top 14px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
.toggle-password { cursor: pointer; color: #008741; position: relative; margin-left: -25px; right: 12px; top: 4px; font-size: 20px; z-index: 2; }
.toggle-password-slim {
	position: relative;
}
.toggle-password-slim .toggle-password {
	position: absolute;
    top: calc(20px - .5em);
}
.password { max-width: 300px; }
.password:hover > input { border: 1px solid #008741 !important; }
.password:hover > input[readonly] { border: 0 !important; }

.checkbox-holder { height: 32px; width: 16px !important; min-width: inherit !important; display: block; position: relative; padding-left: 24px; cursor: pointer; font-weight: 400; margin: 0; float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checkbox-holder input { position: absolute; opacity: 0; margin: 0; cursor: pointer; height: 0 !important; width: 0 !important; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; margin: 8px 0; border: 1px solid #BBB; border-radius: 4px; background-color: #FFF; color: #FFF; }
.checkbox-holder:hover input ~ .checkmark,
.checkbox-holder input:checked ~ .checkmark { border: 1px solid #005917; background-color: #B5F2C6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox-holder input:checked ~ .checkmark:after { display: block; }
.checkbox-holder .checkmark:after { left: 4px; top: 0; width: 6px; height: 11px; border: 1px solid #005917; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

input[type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.radio label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.5em; border-radius: 100%; vertical-align: -3px; border: 1px solid #6E6F7A; padding: 0.13em; background-color: transparent; background-clip: content-box; }
.radio label { margin-right: 1em; font-weight: 400; cursor: pointer; }
.radio input:hover + label:before { border-color: #005917; }
.radio input:checked + label:before { background-color: #005917; }

input[readonly], input[readonly]:focus, input[readonly]:hover { padding: 0; color: #202020; box-shadow: none !important; background-color: transparent; border: 0 !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; }

.password.readonly label { min-width: inherit; width: auto; float: left; }
.password.readonly i { margin-left: 0; right: 0; top: 2px; float: left; }
.password.readonly input { width: 100%; }

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; }

.pagination-nav { margin-top: 40px; }
.pagination { padding-left: 16px; }
.pagination-lg .page-link,
.paginate_button {
	font-size: 18px; padding: 8px 12px; line-height: inherit; background: none; border: 0; border-radius: 6px; margin: 0 1px;
}
.paginate_button:not(.disabled) {
	cursor: pointer;
}
.paginate_button:not(.disabled):hover {
	background: #B3E5FF;
}
.pagination-lg .page-link:focus { box-shadow: none; }
.pagination-lg .page-link i { font-size: 16px; line-height: 26px; margin: 0 !important; }
.page-item.disabled .page-link,
.paginate_button.current {
	font-weight: 600; color: #004C97; background: #B3E5FF; border-radius: 6px;
}
.icon-disabled i { color: #BBB; }
.icon-disabled .page-link:hover { cursor: default; background: none; }

div.dataTables_wrapper div.dataTables_paginate {
	text-align: left;
	margin-top: 40px;
}

/* header */
.top { height: 80px; }
.top .icon-navigation-menu { display: none; position: absolute; top: 16px; right: 180px;font-size: 32px; color: #FFF; border: 0; background: none; }
.top .icon-navigation-menu:hover { color: #7FEB9C; }
.top .icon-close { font-size: 24px; padding: 8px; top: 14px; right: 181px; }

.dropbtn { height: 60px; color: #FFF; padding: 8px; font-size: 16px; text-align: left; border: none; background: none; }
.initials { height: 24px; width: 24px; color: #002568; font-size: 13px; font-weight: 600; text-align: center; margin: 9px 0; padding-top: 3px; text-transform: uppercase; background:#7FEB9C; display: inline-block; border-radius: 50%; float: left; }
.dropbtn .user-name { float: left; font-weight: 600; margin-right: 8px; }
.dropbtn .user-name .icon-chevron-down { padding: 4px; font-size: 12px; color: #FFF; }
.dropbtn .organisation { width: 100%; display: inline-block; }
.dropbtn i { vertical-align: middle; }
.dropbtn:hover .user-name, .dropbtn:hover .user-name .icon-chevron-down { color: #B5F2C6; }
.dropdown { display: none; position: absolute; background: #FFF; min-width: 200px; right: 16px; border: 1px solid #BBB; border-top: 0; z-index: 1; border-radius: 0 0 6px 6px; }

nav.user-settings, nav.user-settings-mobile, nav.lang-settings { float: right; position: relative; display: inline-block; }
nav.user-settings { margin-left: 1.5em; }
nav.user-settings .item, nav.user-settings-mobile .item, nav.lang-settings .item { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; text-align: left; font-weight: normal; }
nav.user-settings .item:hover, nav.user-settings-mobile .item:hover, nav.lang-settings .item:hover { color: #005917; background-color: #B5F2C6; }
nav.user-settings:hover .dropdown, nav.user-settings-mobile:hover .dropdown, nav.lang-settings:hover .dropdown { display: block; }
nav.user-settings-mobile { display: none !important; padding: 12px 0; right: 0; }
nav.user-settings-mobile .dropbtn { margin-bottom: 16px; }

.lang {
	height: 1.4em;
	margin: 0 8px;
}
.flag {
	height: 1em;
	margin-right: .5em;
}
.lang-item {
    font-size: 1.4em;
    width: 100%;
    padding: .25em 0;
    text-align: left;
}

nav.lang-settings { float: right; position: relative; display: inline-block; }
nav.lang-settings.adjust .dropbtn { width: 200px; text-align: right; }
nav.lang-settings .dropdown { right: auto; }

nav.menu { width: 240px; min-width: 240px; height: 100%; position: fixed; z-index: 101; background: #002568; }
nav.menu ul { margin: 24px 0 0; padding: 0; height: calc(100% - 104px); overflow-y: auto; }
nav.menu ul li { width: 100%; line-height: 44px; padding-top: 8px; padding-bottom: 8px; }
nav.menu ul li i { font-size: 32px; display: block; float: left; margin-right: 16px; padding: 4px 0; }
nav.menu ul li a { width: 100%; font-family: 'Nunito', sans-serif; font-size: 18px; display: block; padding: 6px 16px; color: #FFF; }
nav.menu ul li a:hover { text-decoration: none; color: #7FEB9C; }
nav.menu ul li.active a { min-width: 240px; color: #002568; background:#D4F0FF; }

.sub-menu { height: 100vh; width: 250px; position: fixed; float: left; top: 0; left: 240px; padding-top: 76px; background: #D4F0FF; overflow-x: hidden; transition: 0.5s; z-index: 99; }
.sub-menu .inner { margin-top: 25px; min-width: 200px; }
.sub-menu .inner ul li i { margin-right: 16px; }
.sub-menu h3 { min-width: 240px; padding-left: 16px; }

.sub-menu .closebtn { top: 0; left: 0; }
.sub-menu .closebtn i { padding: 16px; }
.sub-menu .icon-arrow-left, .sub-menu .icon-arrow-right { font-size: 24px; color: #004C97; }

.sub-menu ul { margin: 24px 0; }
.sub-menu ul li a,
.sub-menu ul li.empty {
	font-size: 18px; font-weight: 400; color: #202020; padding: 16px; display: block; transition: 0.3s;
}
@media only screen and (min-width: 992px) {
	.sub-menu ul li a,
	.sub-menu ul li.empty {
		padding: 8px 16px;
	}
}
.sub-menu ul li a:hover { color: #002568; background: #B3E5FF; }
.sub-menu ul li.active a { font-weight: 600; color: #002568; background: #B3E5FF; }

.user-nav ul li a, .group-nav ul li a, .device-nav ul li a, .instelling-nav ul li a,
.inner h3, #main-menu li a { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* modal */
.modal { padding-right: 0 !important; }
.modal-header { color: #FFF; background: #004C97; }
.modal-content { min-width: 300px; border-radius: 8px; border: 2px solid #004C97; }
.modal-content h4 { margin-bottom: 16px; }
.modal-body { padding: 24px 24px 0; }
.modal-body table { cursor: inherit; }
.modal-body table tr td span { display: block; line-height: 22px; padding: 4px 0 0; float: left; }
.modal-body input, .modal-body select { min-width: 240px; max-width: 240px; }
.modal-body input#search-user, .modal-body input#search-group { width: 100%; max-width: 100%; margin-bottom: 16px; }
.modal-body .autocomplete-items { width: 80%; left: 10%; position: absolute; background: #FFF; border-radius: 6px; border: 1px solid #BBB; overflow: hidden; z-index: 10; }
.modal-body .autocomplete-items div { cursor: pointer; padding: 8px 16px; }
.modal-body .autocomplete-items div:hover { color:#005917; background: #B5F2C6; }
.modal-body .autocomplete-items div i { float: right; margin-top: 4px; }
.modal-box { padding: 16px; border-radius: 8px; border: 1px solid #BBB; overflow: hidden; }
.modal-box.no-padding { min-height: 160px; padding: 0; }
.modal-box .modal-table { line-height: 32px; margin-bottom: 8px; }
.modal-box .modal-table thead tr { background: none; }
.modal-box .modal-table thead tr th { padding: 4px 16px 0; color: #004C97; }
.modal-box .modal-table tr td { padding: 0 16px; }
.modal-box .modal-table tr td:first-child { width: 80%; }
.modal-box .modal-table tr td:last-child { width: 20%; }
.modal-box .modal-table tr td a { display: inline-block; }
.modal-box .modal-table tbody tr:hover { background: #D4F0FF; }
.modal-footer { padding: 24px; border-top: 0; }
.modal .icon-close { color: #FFF; font-size: 16px; text-shadow: none; }
.modal .close { opacity: 1; text-shadow: none; }
.modal .close:focus { outline: 0; }

.help-text + label {
	margin-top: 2em;
}

.no-border-right {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.errorlist {
	margin: 0;
}
.errorlist li {
	margin-bottom: .5em;
	color: hsl(354.5, 100%, 33.5%);
}

input.dropzone {
	width: 100%;
	max-width: 100%;
	min-height: 160px;
}

.audit-event:not(:first-child) {
	margin-top: 2em;
}
.audit-event table {
	cursor: auto;
}
.audit-event th {
	width: 30%;
}
.audit-event td {
	width: 70%;
}
.audit-event-details {
	margin-top: 1em;
	color: black;
}

.import-table {
	margin-bottom: 2em;
	cursor: auto;
}
.import-table thead th {
	padding: 0 12px;
}
.import-table tbody td {
	padding: 0;
	border: 1px solid hsl(0, 0%, 73.3%) !important;
	background-color: hsl(0, 0%, 92%);
	vertical-align: bottom;
}
.import-table tbody input {
	margin: 0;
	border: none !important;
	border-radius: 0 !important;
	min-width: auto;
	width: 100%;
}
.import-table tbody th input {
	min-width: 0;
	margin-right: .5em;
}
.import-table .errorlist li {
	margin: 0;
	padding: 4px 12px;
	font-weight: normal;
}

.example-code {
	padding: .5em;
	border: 1px solid #BBB;
	border-radius: 6px;
}

.errorMsg {
	margin: 2em 0;
	color: red;
}

.expired {
	text-decoration:line-through;
	opacity: .6;
}
.expired-date {
	color: hsl(354.5, 100%, 33.5%) !important;
}

.form-group input[type="checkbox"] {
    display: inline;
    min-width: auto;
}

td.table-form-cell {
	padding-top: 0;
	padding-bottom: 0;
	width: 0;
}
td.table-form-cell > form {
	padding: 0;
	line-height: 48px;
}

.feedback-hide {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.entitlement-button {
	min-width: auto;
	padding: .25rem .5rem;
}

/* tailwind */
.inline {
	display: inline;
}
.hidden {
	display: none;
}
.w-30_100 {
	width: 30%;
}
.w-70_100 {
	width: 70%;
}

.markup ul,
.markup ol {
	padding-left: 1em;
}
.markup li {
	list-style: outside;
}

.markup table {
	margin-bottom: 1em;
}

.x-drag-ok *,
.x-drag-error * {
	pointer-events: none;
}

.x-drag-ok {
	background-color: #B5F2C6;
}
.x-drag-error {
	background-color: #FFDEE1;
}

.x-drag-ok .x-drag-confirm {
	color: #005917;
}

.x-drag-ok .x-drag-hide,
.x-drag-error .x-drag-hide {
	display: none;
}
.x-drag-show-error {
	display: none;
}
.x-drag-error .x-drag-show-error {
	display: block;
}

/* custom breakpoints */
@media (min-width: 576px) {
	.modal-dialog { max-width: 600px; }
}

@media only screen and (max-width: 1800px) {
	section { width: 1000px; }
}

@media only screen and (max-width: 1600px) {
	section { width: 800px; }
}

/* xxl */
@media only screen and (max-width: 1400px) {
	main { padding: 108px 48px 48px 344px; }
	section { width: 100%; display: inline-block; }
	.sub-menu { width: 56px; }
}

/* xl */
@media only screen and (max-width: 1200px) {
	.sub-menu .inner { margin-top: 48px; }
	table#devices tr .location { display: none; }
}

/* lg */
@media only screen and (max-width: 992px) {
	.top .icon-navigation-menu { display: block; }
	.top .logo { width: 160px; height: 70px; float: left; margin: 8px 16px; background-size: 160px; }

	nav.user-settings-mobile { display: block !important; }
	nav.menu { width: 100%; height: 88px; z-index: 100; }
	nav.menu ul#main-menu { height: 100vh; width: 0px; position: absolute; left: 0; top: 88px; overflow-x: hidden; margin-top: 0; padding-top: 24px; background: #002568; transition: 0.5s; }
	nav.menu ul#main-menu li { min-width: 200px; }

	.sub-menu { top: 32px; left: 0; position: fixed; }
	.sub-menu .inner { margin-top: 24px; }

	main { padding: 128px 24px 128px 80px; }
	main, section { width: 100%; }

	.central-button { top: 45%; left: 45%; }
}

/* md */
@media only screen and (max-width: 768px) {
	table.devices tr .location
	table#devices tr .mac,
	table#personal-devices .location { display: none; }

	.central-button { min-width: 200px; left: 40%; top: 40%; }
}

/* sm */
@media only screen and (max-width: 576px) {
	.central-button--icon { width: 80px; height: 80px; font-size: 40px; padding: 20px; }
	.central-button--text { font-size: 28px; }
	section { margin-bottom: 20px; }

	table#devices tr .date,
	table tr .device,
	table.devices tr .mac,
	table.users tr .mac,
	table.users tr .e-mail,
	table#personal-devices .mac { display: none; }

	table aside { width: 100%; }
	table aside button { width: 100%; display: block !important; margin: 0 !important; }
	table aside .btn-secondary { margin-bottom: 16px !important; }

	.toggle-password { right: 12px; }
	.modal-body input, .modal-body select { min-width: 100%; max-width: 100%; }
	.modal-box label { width: 100%; }
	.modal-box .password { max-width: 100%; }
	form .btn { min-width: 200px; margin: 8px 8px 8px 0; }

	.central-button { left: 35%; top: 40%; }

	input.device-search { width: 100%; float: left; margin: 16px 0 0; }

	.top .icon-navigation-menu { right: 100px; top: 24px; }

	nav.user-settings-mobile { right: 16px; }
	nav.user-settings-mobile .dropdown { right: 0; }
	.dropbtn .user-name, .dropbtn .organisation { display: none; }
	.initials { width: 32px; height: 32px; font-size: 18px; margin-top: 14px; }
}

/* Phones */
@media only screen and (max-width: 440px) {
	.top .logo { height: 60px; width: 140px; background-size: 140px; }
	nav.menu { height: 80px; }
	nav.menu ul#main-menu { top: 80px; }
	nav.user-settings-mobile .dropbtn { margin-bottom: 8px; }
	main { padding: 160px 16px 128px; }
	.sub-menu { width: 100% !important; height: 120px; }

	input, select { min-width: 100%; }
	input.group-search { width: 90%; }

	.central-button { left: 25%; top: 50%; }

	.password { max-width: 100%; }
	form .btn { width: 100%; margin: 8px 8px 8px 0; }
	.modal-footer { display: block; }
	.modal-footer .btn { width: 100% !important; margin: 8px 0; }

	table.users tr .group,
	.pagination-nav { display: none; }
}