/* New Dark Theme Info Box Styles */
.info-box-container {
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: flex-start;
	position: relative;
}

.info-box-content {
	width: 100%;
	padding: 1rem 1rem 0rem 1rem;
	margin: 0rem 0rem 0.5rem 0rem;
	box-sizing: border-box;
	background-color: rgba(34, 34, 34, 0.80);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.2;
	max-height: 150px;
    overflow-y: auto;
}

.info-box-content::after {
	content: "";
	display: table;
	clear: both;
}

.info-box-content i {
    color: #fff;
    margin-right: 8px;
}

.info-box-content div {
	max-width: 100% !important;
	box-sizing: border-box;
	min-width: 0 !important;
}

.info-box-content div[style*="float: left"], .info-box-content div[style*="float:left"] {
	width: auto !important;
	max-width: 40% !important;
}

.info-box-content div[style*="margin-left"] {
	margin-left: 0 !important;
	width: auto !important;
	max-width: 58% !important;
	float: right !important;
}

.info-box-content p, .info-box-content span, .info-box-content a,
.info-box-content li, .info-box-content ul, .info-box-content b {
	white-space: normal !important;
	word-break: break-word !important;
	max-width: 100% !important;
	color: #fff;
}

.info-box-content a {
    color: #75aaff;
}

.info-box-expanded .info-box-content {
	position: absolute;
	width: 280px;
	right: 0;
	top: 0;
	z-index: 100;
	box-shadow: -2px 2px 10px rgba(0,0,0,0.3);
}

@media screen and (max-width: 1280px) {
	.info-box-content {
		width: 100% !important;
		min-width: 9.5rem !important;
	}
	
	.info-box-container {
		padding-bottom: 1rem;
	}
}

@media screen and (max-width: 1024px) {
	.info-box-content {
		width: 100% !important;
		min-width: 5.5rem !important;
	}
	
	.info-box-container {
		padding-bottom: 1rem;
	}
}

@media screen and (max-width: 992px) {
	.info-box-content {
		margin: 0.5rem 0rem 0rem 0rem !important;
		width: 100% !important;
	}
	
	.info-box-container {
		padding-bottom: 1rem;
	}
	
	.info-box-expanded .info-box-content {
		width: 240px;
	}
	
	.info-box-content div[style*="float"] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	
	.info-box-content div[style*="margin-left"] {
		margin-left: 0 !important;
		border-left: none !important;
		border-top: 1px solid #444 !important;
		margin-top: 1rem !important;
		padding-top: 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0rem 0rem 0rem 0.5rem !important;
	}
}

.info-box-toggle {
    position: absolute;
    right: 10px;
    top: 5px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 101;
}

@media screen and (max-width: 768px) {
    #infoBoxColumn {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 1rem;
    }
    
    .info-box-expanded .info-box-content {
        position: relative;
        width: 100%;
    }
}

@media print {
    .info-box-content {
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid #999 !important;
        background-color: #fff !important;
        color: #000 !important;
    }
    
    .info-box-content p, .info-box-content span, .info-box-content a,
    .info-box-content li, .info-box-content ul, .info-box-content b {
        color: #000 !important;
    }
}