.gap-5{gap: 5px;}
	.full-width{width: 100%}

	/* flex  */
	.flex{display: flex;}
	.wrap{flex-wrap: wrap;}
	.nowrap{flex-wrap: nowrap !important;}
	.flex-col{display: flex;flex-direction: column;}
	.flex-row-rev{;flex-direction: row-reverse;}

	.align-start{align-items: flex-start;}
	.align-center{align-items: center;}
	.align-between{align-items: space-between;}
	.align-end{align-items: flex-end;}

	.justify-start{justify-content: flex-start;}
	.justify-center{justify-content: center;}
	.justify-between{justify-content: space-between;}
	.justify-end{justify-content: flex-end;}
	.flex-1{flex: 1 !important;}

	.gap-2{gap: 2px;}
	.gap-3{gap: 3px;}
	.gap-4{gap: 4px;}
	.gap-5{gap: 5px;}
	.gap-10{gap: 10px;}
	.gap-15{gap: 15px;}
	.gap-20{gap: 20px;}

	.p-0{padding: 0 !important}
	.px-16{padding: 0 16px !important;}


	/* Margin */

	/* Margin-top classes */
	.mt-0 { margin-top: 0px !important; }
	.mt-1 { margin-top: 1px; }
	.mt-2 { margin-top: 2px; }
	.mt-3 { margin-top: 3px; }
	.mt-4 { margin-top: 4px; }
	.mt-5 { margin-top: 5px; }
	.mt-6 { margin-top: 6px; }
	.mt-7 { margin-top: 7px; }
	.mt-8 { margin-top: 8px; }
	.mt-9 { margin-top: 9px; }
	.mt-10 { margin-top: 10px; }
	.mt-11 { margin-top: 11px; }
	.mt-12 { margin-top: 12px; }
	.mt-13 { margin-top: 13px; }
	.mt-14 { margin-top: 14px; }
	.mt-15 { margin-top: 15px; }
	.mt-16 { margin-top: 16px; }
	.mt-17 { margin-top: 17px; }
	.mt-18 { margin-top: 18px; }
	.mt-19 { margin-top: 19px; }
	.mt-20 { margin-top: 20px; }

	/* Margin-bottom classes */
	.mb-0 { margin-bottom: 0px !important; }
	.mb-1 { margin-bottom: 1px; }
	.mb-2 { margin-bottom: 2px; }
	.mb-3 { margin-bottom: 3px; }
	.mb-4 { margin-bottom: 4px; }
	.mb-5 { margin-bottom: 5px; }
	.mb-6 { margin-bottom: 6px; }
	.mb-7 { margin-bottom: 7px; }
	.mb-8 { margin-bottom: 8px; }
	.mb-9 { margin-bottom: 9px; }
	.mb-10 { margin-bottom: 10px; }
	.mb-11 { margin-bottom: 11px; }
	.mb-12 { margin-bottom: 12px; }
	.mb-13 { margin-bottom: 13px; }
	.mb-14 { margin-bottom: 14px; }
	.mb-15 { margin-bottom: 15px; }
	.mb-16 { margin-bottom: 16px; }
	.mb-17 { margin-bottom: 17px; }
	.mb-18 { margin-bottom: 18px; }
	.mb-19 { margin-bottom: 19px; }
	.mb-20 { margin-bottom: 20px; }

	/* Margin-left classes */
	.ml-0 { margin-left: 0px !important; }
	.ml-1 { margin-left: 1px; }
	.ml-2 { margin-left: 2px; }
	.ml-3 { margin-left: 3px; }
	.ml-4 { margin-left: 4px; }
	.ml-5 { margin-left: 5px; }
	.ml-6 { margin-left: 6px; }
	.ml-7 { margin-left: 7px; }
	.ml-8 { margin-left: 8px; }
	.ml-9 { margin-left: 9px; }
	.ml-10 { margin-left: 10px; }
	.ml-11 { margin-left: 11px; }
	.ml-12 { margin-left: 12px; }
	.ml-13 { margin-left: 13px; }
	.ml-14 { margin-left: 14px; }
	.ml-15 { margin-left: 15px; }
	.ml-16 { margin-left: 16px; }
	.ml-17 { margin-left: 17px; }
	.ml-18 { margin-left: 18px; }
	.ml-19 { margin-left: 19px; }
	.ml-20 { margin-left: 20px; }

	/* Margin-right classes */
	.mr-0 { margin-right: 0px !important; }
	.mr-1 { margin-right: 1px; }
	.mr-2 { margin-right: 2px; }
	.mr-3 { margin-right: 3px; }
	.mr-4 { margin-right: 4px; }
	.mr-5 { margin-right: 5px; }
	.mr-6 { margin-right: 6px; }
	.mr-7 { margin-right: 7px; }
	.mr-8 { margin-right: 8px; }
	.mr-9 { margin-right: 9px; }
	.mr-10 { margin-right: 10px; }
	.mr-11 { margin-right: 11px; }
	.mr-12 { margin-right: 12px; }
	.mr-13 { margin-right: 13px; }
	.mr-14 { margin-right: 14px; }
	.mr-15 { margin-right: 15px; }
	.mr-16 { margin-right: 16px; }
	.mr-17 { margin-right: 17px; }
	.mr-18 { margin-right: 18px; }
	.mr-19 { margin-right: 19px; }
	.mr-20 { margin-right: 20px; }



	/* Typography */

	.txt-logo {
		color: var(--primary-dark) !important;
	}

	.font-100{font-weight: 100 !important;}
	.font-200{font-weight: 200 !important;}
	.font-300{font-weight: 300 !important;}
	.font-400{font-weight: 400 !important;}
	.font-500{font-weight: 500 !important;}
	.font-600{font-weight: 600 !important;}



	/* Typography End */

	.main-logo {
	    padding: 20px 0;
	    text-align: center;
	    background-color: var(--logo-bg);
	}

	.main-logo img {
	    width: 22%;
	}

	.title{
		margin-bottom: 20px;
	}

	.title h1 {
	    font-weight: 600 !important;
	    font-size: 20px !important;
	    margin-bottom: 10px;
	    color: var(--primary-color);
	    margin-top: 0;
	}

	.title p {
	    margin: 0;
	    font-size: 14px;
	    color: var(--text-black);
	}

	.omf-icon {
	    position: absolute;
	    top: 20px;
	    right: 34px;
	    z-index: 10;
	    color: var(--primary-color);
	    font-size: 16px;
	}

	.secondary-dtls {
	    padding: 0 16px;
	}


	.user-name {
	    font-size: 18px;
	    margin-bottom: 2px;
	    line-height: 22px;
	}


	.copyright {
	    color: var(--light-grey);
	}


	a#signout_list {
	    color: var(--primary-dark);
	}

	ul.omf-sub-nav li{
		position: relative;
	}

	ul.omf-sub-nav li a {
	    color: #454545;
	    font-size: 14px;
	}

	ul.omf-sub-nav li::before {
	    content: '';
	    width: 8px;
	    height: 8px;
	    background-color: var(--primary-dark);
	    position: absolute;
	    border-radius: 50%;
	    top: 13px;
	    left: -16px;
	}


	/** HOMEPAGE OPENER STYLES */

	#opener {
		padding-top: 0 !important;
	}

	#opener .omf-tile {
	    width: 100%;
	    align-items: center;
	    column-gap: 10px;
	    margin-bottom: 0;
	    padding: 7px 10px !important;
	    border-bottom: 1px solid #e4e4e4;

	}

	#opener .omf-avatar-wrapper .omf-avatar img {
	    width: 60px !important;
	    height: 60px !important;
	    border-radius: 50px;
	}

	#opener .omf-tile h1 { margin: 0; }

	#opener h1 {
	   font-size: 1.10em !important;
	   line-height: 1.25em;
	}

	#opener p {
	    color: #7d7d7d;
	}

	#opener .omf-avatar {
	    width: 85%;
	}

	#opener .omf-avatar-wrapper {
	    width: 95px;
	    padding: 0;
	}

	#opener .omf-tile {
	    margin-bottom: 0;
	}

	#opener .omf-tile-nav i {
	    font-size: 2.25em;
	}


	.omf-group-hdr {
	    font-size: 16px;
	    font-weight: 500;
	    margin-bottom: 10px;
	    display: flex;
	    align-items: center;
	    line-height: 23px;
	    gap: 6px;
	    color: #000;
	}



	li.ui-menu-item.ui-state-focus {
	    background: var(--primary-dark) !important;
	}


	/* ================= Banner ================= */
	.banner-image{
	    position: relative;
	    height: 240px;
	    overflow: hidden;
	    border-radius: 0 0 24px 24px;
	}
	.banner-image img{
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
	.banner-image::after{
	    content:"";
	    position:absolute;
	    inset:0;
	    background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55));
	}
	



	/* Trigger install */

	/* Overlay styling */
	.overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.8);
	    display: flex;
	    justify-content: center;
	    align-items: flex-end;
	    z-index: 1010;
	    padding: 20px 16px;
	}

	/* Content box styling */
	.overlay-content {
	  background: #fff;
	  padding: 20px;
	  border-radius: 8px;
	  text-align: center;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	}

	.overlay-content h2 {
	  margin: 0 0 16px;
	}

	.overlay-content p {
	    margin: 10px 0 14px;
	    font-size: 16px;
	    color: #555;
	    line-height: 20px;
	}

	#continue-browser-button{
		margin-top: 10px !important;
	}

	button.omf-action-btn.secondary-btn {
	    background: #fff;
	    border: 1px solid var(--primary-color);
	    color: var(--primary-color);
	}

	/* ---------------------------------------------------- */






/* Resposnsive */

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

	.main-logo img {
	    width: 40%;
	}

	.title {
	    padding: 10px;
	}

	.title h1 {
	    /*font-size: 16px !important;*/
	    margin-bottom: 8px;
	}

	.title p {
	    font-size: 14px;
	}

}

@media screen and (min-width: 321px) and (max-width: 480px) {

	.main-logo img {
	    width: 90%;
	}

	.title {
	    padding: 10px;
	}

	.title h1 {
	    /*font-size: 16px !important;*/
	    margin-bottom: 8px;
	}


	.title p {
	    font-size: 14px;
	}


}

@media screen and (min-width: 481px) and (max-width: 575px) {

	.main-logo img {
	    width: 90%;
	}

	.title {
	    padding: 10px;
	}

	.title h1 {
	    font-size: 16px !important;
	    margin-bottom: 8px;
	}

	.title p {
	    font-size: 14px;
	}

}

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

	.main-logo img {
	    width: 40%;
	}

	.title {
	    padding: 10px;
	}

	.title h1 {
	    font-size: 16px !important;
	    margin-bottom: 8px;
	}

	.title p {
	    font-size: 14px;
	}

}

@media screen and (min-width: 768px) and (max-width: 991px) {

	.main-logo img {
	    width: 20%;
	}

}

@media screen and (min-width: 992px) and (max-width: 1199px) {

	.main-logo img {
	    width: 20%;
	}

}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
	
	.main-logo img {
	    width: 20%;
	}



}