:root {
	--color-blue: #222;
	--color-red: #555;	
	--color-text: #222;
}
.tile-row .external_link  {
	position: relative;
	display: block;
}
.tile-row .external_link:after {
    top: 5px;
    right: 5px;
    color: white;
    position: absolute;
    font-size: 1rem;
    text-shadow: -1px 1px 1px rgba(0,0,0,0.5);
}
.tile-row .external_link:hover:after {
	color: yellow;
}
.main-content {
    min-height: calc(100vh - 262px) !important;
}
.img-square {
	margin: auto;
    overflow: hidden;
}
.img-cover:hover img {
    transform: scale(1.3) translateX(-5%) translateY(-5%);
    transition: ease-out 3s;
}
.main-nav > li:not(:last-child):after {
	display: none;
}
.main-nav > li {
	transition: background-color ease-in-out 250ms;
}
.main-nav li a {
	padding: 0 4rem;
}
.page-content p img {
    margin: 0 0 2rem 2rem;
}
.page-content blockquote {
    padding: 0 2rem 2rem 2rem;
    font-size: 120%;
    line-height: 1.5;
    font-weight: bold;
    opacity: 0.75;
    clear: both;
}
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content ul:not(.nav):not(.Hi5Error) {
	margin: 2rem 0 3rem 0;
}
.header-mobile .header-item > a > span, .header-mobile .header-item button > span {
    display: inline-block;
}
.header-mobile .header-item > a > i {
	margin: 0 0.5rem 0 0;
}
.header-mobile .header-login {
    margin-top: -7px;
}
.header-mobile .header-item > a {
    background: #777;
    border-radius: 0.25rem;
    padding: 6px 12px;
    margin-top: -7px;
    border: 1px solid #777;
    transition: border-color ease-in 150ms, background-color ease-in 150ms;
    
}
.header-mobile .header-item > a:hover, .header-mobile .header-item > a:focus, .header-mobile .header-item > a:active {
	background: #888;
	border-color: #888;	
}
.header-login {
	letter-spacing: 1px !important;
}
.page-content > p {
	margin-bottom: 2rem;
}
@media (max-width: 799px) {
	.header-nav .main-nav li {
		transition: border-color ease-in 150ms, background-color ease-in 150ms;
	}
	.header-nav .main-nav li a:hover, .header-nav .main-nav li a a:focus, .header-nav .main-nav li a:active {
		background: #777;
		border-color: #777;
	}
	.header-nav .main-nav {
		margin: 1rem 0;
	}
	.header-nav .main-nav li a {
	    padding: 0 1rem;
	    border-radius: 0.25rem;
	}
	.page-content > div, .page-content > p > img {
	    width: 100% !important;
	    display: block;
	    float: none;
	}	
	#address-bar .copy-url, #address-bar .input {
		display:none;
	}
}

#browser.mobile .copy-url, #browser.mobile .input {
		display:none;
}

ul.card-list {
    list-style-type: none;
    padding: 0;
    margin: 0 !important;
}
ul.card-list label {
	margin: 0;
	display: inline-block;
	width: 100px;
}
ul.card-list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
ul.card-list > li:last-of-type {
	border-bottom: none;	
}
ul.card-list .external_link {
	word-break: break-all;
}
.card-body .badge, .Hi5-button-toggle button {
    font-size: 16px;
    padding: 4px 12px;
    margin: 5px;
}
.Hi5-button-toggle {
    padding: 0 !important;
}
.Hi5Table td.reorder-handle > button {
    color: white;
    background: var(--color-red);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
}
.Hi5Table > tbody > tr > td.reorder-handle {
   /* width: 40px !important;
    min-width: 40px !important;
    text-align: center;*/
}
.table-info {
	display: none;
}


#browser {
	position: relative;
	background-color: black; /*rgba(0,0,0, 0.65);*/
	margin: 0;
	font-family: 'Titillium Web', sans-serif;
	height: 100%;
	max-width: calc(100% - 32px);
    overflow: auto;	
    padding: 0;
    border: 3px solid black;
    border-bottom-width: 30px;
    border-radius: 30px;
	box-shadow: 0 27px 24px 0 rgb(0 0 0 / 20%), 0 40px 77px 0 rgb(0 0 0 / 22%);
	padding-top: 46px;
	display: inline-block;
    width: auto;
    overflow:none;
}
#browser iframe {
    width: 100%;
    height: 100%;
    overflow:none;
	background-color: #fff;
	border: 1px inset;
	float: left;
}
#browser-window {
    overflow: auto;
    max-height: calc(100vh - 250px);
}
#frame-wrapper {
	display: block;	
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    /*-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;	
	border-radius: 15px;
	border: 15px solid black;
	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);	*/
	transition: width ease-out 0.6s, height ease-out 0.6s;
	/*max-width: 100vw;*/
	height: calc(100vh - 250px);
	min-height: 350px;
	/*max-width: 100%;*/
    overflow: auto;	
}	
#address-bar {
    position: absolute;
    top: 0;
    width: 100%;
    background: black;
    padding: 10px 35px 10px 25px;
}
#address-bar > span > i {
	color: white;
}
#address-bar > span.icon {
    width: 24px;
    height: 24px;
    color: white;
    font-size: 24px;
    line-height:24px;
}
#address-bar > span.view {
	width: 200px;
	float: right;
	max-width: calc(100% - 70px);
}
#address-bar > span.copy-url {
	width: 100px;
    margin: 0;
    text-align: center;
}
#address-bar > span.copy-url button {
	background: #333;
    color: white;
    width: 100%;
    border: none;
	padding: 2px 0 0 0;
    line-height: 22px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
#address-bar > span.refresh {
	width: 40px;
    margin: 0;
    text-align: center;
}
#address-bar > span.refresh button {
    background: #333;
    color: white;
    border: none;
    padding: 5px;
    text-transform: uppercase;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    line-height: 12px;
    font-size: 12px;
    outline: none !important;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
}
#address-bar > span.close-browser a:focus {
	background: firebrick;
}
#address-bar > span button:active {
	background: forestgreen;
}
#address-bar > span.copy-url > button > i {
    font-size: 11px;
    line-height: 11px;
}
#address-bar > span.input {
	width: calc(100% - 430px);
    margin-left: 5px;
}
#address-bar > span {
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
#address-bar > span > input {
	width: 100%;	
	background: #333;
    color: white;
    border: none;
    padding: 4px;
    line-height: 14px;
    font-size: 14px;
    outline: none !important;
}
#browser span.view select {
    background: #333;
    color: white;
    padding: 4px;
    border: none;
    text-transform: uppercase;
    outline: none !important;
    width: 100%;
    height: 24px;
}
#browser-section {
	max-width: 1500px;
	margin: -50px auto 200px auto;
	text-align: center;
}
th.Hi5-column-caption.text-center.col-narrow {
    width: 120px;
}
ul.dropdown-menu, .dropdown-accordion .panel-title {
    margin: 0 !important;
}
.card-footer {
    background: #eee;
}
.table-striped tbody tr:nth-of-type(odd) {
	background-color: transparent !important;
}
.Hi5Table tbody {
	border-top: none !important;
}
li.breadcrumb-item {
    font-size: 1.2rem;
}
.alert-danger {
	color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;	
}
.Hi5Form .alert-danger .card-content:before {
	content: "\e086";
    font-family: 'Glyphicons Halflings';
    font-size: 3rem;
    margin: 1rem 1rem 1rem 0.5rem;
    display: inline-block;
    color: white;
}
blockquote em {
    font-weight: normal;
    font-size: 80%;
    white-space: nowrap;
}
h4.card-title {
    text-transform: none !important;
}
ul.Hi5Error {
    margin-top: 5px;
}
.breadcrumb-item, h1, h2, h3, h4, h5, .btn, label, .header-item, .carousel-container {
    text-transform: lowercase;
}
.alert {
    border-radius: 0.5rem;
}
@media (max-width: 991px) {

	ul.card-list .external_link {
	    clear: both;
	    display: block;
	}
	.card-footer {
	    text-align: center;
	}	
	.card-footer .btn {
	    margin: 0.25rem;
	    width: calc(50% - 0.5rem);
	    float: left;
        white-space: nowrap;
	}
	.card-footer:after {
		content: "";
		display: table;
		clear: both;
	}
	.card-footer .btn-link {
    	float: none !important;
	}
	.card-body .row > div {
	    border: none !important;
	}	
	.card {
	    margin-top: 1rem;
	}	
}
@media (max-width: 991px) {
		
	#browser-section {
		margin-top: 2rem;		
	}
	
	
}