/* Dark theme */
@import url('bootstrap-cyborg-theme.min.css') (prefers-color-scheme: dark);

/* Material Icons font */

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
		url(../fonts/MaterialIcons-Regular.woff) format('woff'),
		url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	user-select: none;
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* Support for IE. */
	font-feature-settings: 'liga';
}

/* End Material Icons font */

body {
	padding-top: 80px;
	/* Use system font: https://furbo.org/2018/03/28/system-fonts-in-css/ */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}

table {
	width: 100%;
	background: inherit !important;
}

table, .table {
	font-size: inherit !important;
}

.title {
	font-size: 36px;
}

.device-icon {
	margin-right: 20px;
	font-size: 80px;
	text-align: center;
	vertical-align: middle;
}

.device-warning .alert {
	margin-bottom: 0;
}

.panel-input .panel-body {
	word-wrap: break-word;
}

.whatdevice-button {
	width: 100%;
	margin-bottom: 30px;
}

#report-text {
	display: none;
}

.share-button-fab {
	position: fixed;
	right: 23px;
    bottom: 23px;
	z-index: 997;
	width: 56px;
	height: 56px;
	background: #149c82;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.share-button-fab span {
	color: #FFF;
	line-height: 56px;
	font-size: 30px;
	margin-left: -2px;
}

.share-button-nav {
	display: none !important;
}

#whatdevice-share-modal .modal-body {
	padding: 0 !important;
}

#whatdevice-share-modal .list-group {
	margin-bottom: 0 !important;
}

.pwa-refresh {
	cursor: pointer;
}

@media only screen and (max-width: 300px) {
	.device-icon {
		margin-right: 0px !important;
		display:none
	}
}

@media only screen and (max-width: 400px) {
	.title {
		font-size: 24px;
	}

	.device-icon {
		margin-right: 10px !important;
		font-size: 50px !important;
	}
}

@media only screen and (min-width: 768px) {
	.share-button-fab {
		display: none;
	}

	.share-button-nav {
		display: block !important;
	}
}