﻿.screenSizeLblPos /* used to show Screen size Media quiries read out */
{
	position:fixed;
	top:250px;
	left:0;
	background-color: #b200ff;
	color:White;
	width:50px;
	height:auto;
	z-index:999;
	padding-left:5px;
}

/***********************************************************/
/* The below shows for Bootstrap 4 - 31-05-2022         */
/***********************************************************/
.hidden-SSP {
	display: none !important;
}
.show-xs {
	display: block !important;
}

/*@media (max-width: 330px)*/ /* col-xs-xx */ /* 320px is about right for portrait width of phone, set to 330px to cover slightly larger screens */
/*{
	.hidden {
		display: none !important;
	}

	.show-xs {
		display: block !important;
	}
}*/

/* col-sm */
@media (min-width: 576px) and (max-width: 767px) {
	.hidden-SSP {
		display: none !important;
	}

	.show-sm {
		display: block !important;
	}
}

/* col-md */
@media (min-width: 768px) and (max-width: 991px) {
	.hidden-SSP {
		display: none !important;
	}

	.show-md {
		display: block !important;
	}
}

/* col-lg */
@media (min-width: 992px) and (max-width: 1199px) {
	.hidden-SSP {
		display: none !important;
	}

	.show-lg {
		display: block !important;
	}
}

/* col-xl */
@media (min-width: 1200px) {
	.hidden-SSP {
		display: none !important;
	}

	.show-xl {
		display: block !important;
	}
}

/*

	<!-- Screen size Media quiries read out -->
    <div class="d-print-none">
        <div class="screenSizeLblPos">
            col-xs
        </div>
        <div class="screenSizeLblPos d-none d-sm-block d-md-none">
            col-sm
        </div>
        <div id="screenSizeLblPosMD" class="screenSizeLblPos d-none d-md-block d-lg-none d-xl-none">
            col-md
        </div>
        <div id="screenSizeLblPosLG" class="screenSizeLblPos d-none d-lg-block d-xl-none">
            col-lg
        </div>
        <div id="screenSizeLblPosXL" class="screenSizeLblPos d-none d-xl-block">
            col-xl
        </div>
        <div id="screenSizeLblPosXXL" class="screenSizeLblPos d-none d-xl-none d-xxl-block">
            col-xxl
        </div>
    </div>
	<!-- end of Screen Size -->

*/
