/* vms css 21-08-26 */

:root {
    --vms_tiles_bgnd: #f8f8f8;
}






/*********************** Luxriot Info Boxes ************************/

/*
 * Each lux_info_row contains two grid_6 columns.
 * Flex makes both boxes in each row the same height.
 */
.lux_info_row {
    display: flex;
    align-items: stretch;
}


/*
 * Allow each grid_6 column to stretch to the full
 * height of its row.
 */
.lux_info_row .grid_6 {
    display: flex;
}


/*
 * Main information box
 */
.lux_info_box {
    width: 100%;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 10px;
    background-color: var(--vms_tiles_bgnd);

    display: flex;
    flex-direction: column;
}




/*
 * Box headings
 */
.lux_info_box h2 {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.25em;
}


/*
 * Box text
 */
.lux_info_box p {
    margin-bottom: 14px;
}


/*
 * Push the link to the bottom of the box.
 * This also keeps links aligned when the amount
 * of text differs between the two boxes.
 */
.lux_info_box .lux_info_link {
    margin-top: auto;
    margin-bottom: 0;
}


/*********************** Luxriot Mixed Camera Box ************************/

.lux_camera_box {
    width: 100%;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 10px;
    background-color: var(--vms_tiles_bgnd);
    text-align: center;
}


/* Heading */

.lux_camera_heading {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}


/* Camera manufacturer boxes */

.lux_camera_brands {
    width: 100%;
    text-align: center;
}

.lux_camera_brands span {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    padding: 9px 12px;
    margin: 3px;
}


/* Arrow between cameras and Luxriot EVO */

.lux_camera_arrow {
    font-size: 1.8em;
    line-height: 1em;
    margin: 10px 0;
}


/* Luxriot EVO destination box */

.lux_evo_target {
    width: 52%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-top: 4px solid #6d9e45;
    border-radius: 0 0 4px 4px;
    padding: 14px 15px 10px 15px;
	background-color: #fff;
}

.lux_evo_target p {
    margin: 5px 0 0 0;
}


.lux_info_heading {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.25em;
    margin: 0 0 12px 0;
    color: #333;
	text-transform:capitalize;
}


/* Space between paired Luxriot boxes */
.lux_info_row .grid_6:first-child {
    margin-right: 12px;
}


.lux_info_row {
	display: flex;
	align-items: stretch;
}

.lux_info_row .grid_6 {
	display: flex;
}

.lux_info_row .lux_info_box {
	width: 100%;
	height: auto;
}


.lux_support_cta {
	border-left: 4px solid #6aa342;
	padding: 20px 22px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.lux_support_cta .lux_info_heading {
	margin-bottom: 14px;
}

.lux_support_cta p {
	margin: 0 0 20px 0;
}

.lux_support_button {
	display: inline-block;
	padding: 11px 14px;
	background: #1768a0;
	color: #fff;
	text-decoration: none;
}

.lux_support_button:hover {
	text-decoration: none;
}


.lux_support_cta a.lux_support_button,
.lux_support_cta a.lux_support_button:visited,
.lux_support_cta a.lux_support_button:active {
	display: inline-block;
	padding: 11px 14px;
	background: #1768a0;
	color: #fff;
	text-decoration: none;
}

.lux_support_cta a.lux_support_button:hover {
	background: #125783;
	color: #fff;
	text-decoration: none;
}



.lux_analytics_flow {
	border: 1px solid #ccc;
	padding: 20px 16px;
	box-sizing: border-box;
	text-align: center;
}

.lux_analytics_flow_title {
	font-weight: bold;
	margin-bottom: 18px;
}

.lux_analytics_sources {
	display: flex;
	gap: 10px;
}

.lux_analytics_source {
	flex: 1;
	border: 1px solid #ccc;
	padding: 14px 10px;
	box-sizing: border-box;
}

.lux_analytics_source strong,
.lux_analytics_source span {
	display: block;
}

.lux_analytics_source span {
	margin-top: 7px;
	font-size: 0.9em;
}

.lux_analytics_arrow {
	margin: 10px 0;
}

.lux_analytics_evo {
	width: 48%;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-top: 3px solid #6aa342;
	padding: 14px;
	box-sizing: border-box;
}

.lux_analytics_evo strong,
.lux_analytics_evo span {
	display: block;
}

.lux_analytics_evo span {
	margin-top: 7px;
	font-size: 0.9em;
}

.lux_analytics_actions {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.lux_analytics_actions div {
	border: 1px solid #ccc;
	padding: 10px 12px;
}





@media only screen and (max-width: 767px) {

	.lux_analytics_sources,
	.lux_analytics_actions {
		display: block;
	}

	.lux_analytics_source,
	.lux_analytics_actions div {
		margin-bottom: 8px;
	}

	.lux_analytics_evo {
		width: 100%;
	}

}



.lux_page_nav {
	border: 1px solid #ccc;
	padding: 16px 18px;
	margin-bottom: 25px;
	box-sizing: border-box;
}

.lux_page_nav .lux_info_heading {
	margin-bottom: 12px;
}

.lux_page_nav a,
.lux_page_nav a:visited,
.lux_page_nav a:active {
	display: inline-block;
	margin: 0 18px 6px 0;
	color: #0055D5;
	text-decoration: none;
}

.lux_page_nav a:hover {
	text-decoration: underline;
}

#analytics-overview,
#analytics-detection,
#edge-vs-server,
#events-actions,
#integrations,
#applications {
	scroll-margin-top: 25px;
}

















/*********************** Mobile ************************/

@media only screen and (max-width: 749px) {

    .lux_camera_box {
        padding: 16px;
    }

    .lux_camera_brands span {
        padding: 7px 9px;
        margin: 3px 1px;
    }

    .lux_evo_target {
        width: 100%;
    }



    /*
     * Existing Videcom grid becomes stacked on mobile,
     * so remove the equal-height flex behaviour.
     */
     .lux_info_row {
        display: block;
    }

    .lux_info_row .grid_6 {
        display: block;
    }

    .lux_info_row .grid_6:first-child {
        margin-right: 0;
    }

    .lux_info_box {
        width: 100%;
        min-height: 0;
        padding: 16px;
    }

    .lux_info_box .lux_info_link {
        margin-top: 18px;
    }

}