/*============= NAV HEADER STYLE START ==============*/
@import url('../fonts/icons/office365-icons.css');
@import url('../fonts/icons/cust-fonts.css?v=5120_09');

:root {
    /*This varibale for header and info page top postion */
    --infoPaneHeight: 30px;
    --headerHeight: 50px;
    --infoAndHeaderHeight: calc(val(--infoPaneHeight) + var(--headerHeight));
    --breadCrumbDefaultTop: 49px;
    --headerDefaultTop: 0px;
}


.header {
	text-align: right;
	/*background-color: rgba(13, 44, 59, 0.98);*/
    background-color: #0a2334;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
}

#header{
	cursor: default;
	height: 50px;
	left: 0;
	top: 30px;
	position: absolute;
	text-align: right;
	width: 100%;
	z-index: 1000;
	color: white;
	transition:all 0.2s ease-in-out;
    background: #0a2334;
}
.header-fixed{
	position: fixed !important;
}
#header .logo {
	display: inline-block;
	font-weight: 400;
	/*height: inherit;*/
	/* left: 15px; */
	/* line-height: inherit; */
	margin: 0;
	padding: 0;
	/* position: absolute; */
	/* top: 10px; */
	/* font-size: 1.95em; */
	/*font-family: comforta-regular, Arial, sans-serif;*/
	/*line-height: 2.25em*/
    width: 165px;
    border-bottom: none;
}
#header .logo img{
    width: 100%;
}

#header a {
	/* display: inline-block; */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 2px; */
	/* padding: 10px; */
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
	/* font-family: work-sans-regular,Arial, sans-serif; */
	/* border-bottom: 2px solid transparent; */
	/* -moz-transition: border-bottom 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-webkit-transition: border-bottom 0.2s ease-in-out, background-color 0.2s ease-in-out;
	-ms-transition: border-bottom 0.2s ease-in-out, background-color 0.2s ease-in-out;
	transition: border-bottom 0.2s ease-in-out, background-color 0.2s ease-in-out; */
}

nav#nav{
    height: 100%;
    /* letter-spacing: 0.25px; */
}

/* Navigation pane latest changes START */

#nav .nav-item-wrap{
    display: flex;
    align-items: center;
    height: inherit;
}

#nav .nav-item{
    display: flex;
    align-items: center;
    gap: 4px;
    height: inherit;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    padding: 10px;
    color: inherit;
    font-size: 0.9em;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.nav-item .product-icon{
    width: 1rem;
    height: 1rem;
    margin-left: 8px;
}

body:has(.nav-item-wrap[data-state=open]){
    /* position: fixed;
    overflow-y: scroll; */
}

.dropdown-items-container{
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 999;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    background-color: #162D40;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}

.dropdown-items-container .menu-container{
    height: fit-content;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 8px 28px #00000045;
    transition: 0.3s 0.2s ease-in-out;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    overscroll-behavior: contain;
}

.dropdown-items-container .menu-container::-webkit-scrollbar{
    width: 6px;
    background-color: transparent;
}

.dropdown-items-container .menu-container::-webkit-scrollbar-thumb{
    width: 6px;
    background-color: #183553;
    border-radius: 8px;
}

.dropdown-items-container .menu-footer{
    width: 100%;
    padding: 12px 2rem;
    border-top: 1px solid #ffffff0a;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn-link{
    font-size: 0.9em;
    border-radius: 99px;
    background-color: #132638;
    border: 1px solid #183C59;
    padding: 8px 1rem;
}

.nav-item-wrap.active .dropdown-items-container{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.nav-item-wrap.active .dropdown-items-container .menu-container{
    opacity: 1;
    visibility: visible;
}

.dropdown-items-container .products-wrapper{
    display: flex;
    gap: 1rem;
    text-align: left;
    padding: 1.5rem 2rem;
}

.dropdown-items-container .products-selector{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    height: fit-content;
    position: sticky;
    top: 1.5rem;
}

.product-item{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.product-item.active{
    background-color: #0C3860;
}

.product-item:not(.active):hover{
    background-color: #0c37606c;
}

.product-item .product-item-info{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-item .right-arrow{
    transition: transform .3s ease-in-out;
}

.product-item .product-icon{
    width: 1.3rem;
    height: 1.3rem;
    max-height: 1.3rem;
}

.product-item .product-item-info-title-desc{
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff
}

.product-item-info-title{
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-item-info-desc{
    font-size: 0.8em;
    color: #cdcdcd;
}

.product-info-container-wrapper{
    flex: 1;
}

.product-info-container-outer-wrapper{
    display: none;
} 

.product-info-container{
    display: flex;
    gap: 1rem;
}

.product-solutions-container-wrapper .product-top-label{
    padding-inline: 12px;
}

.product-solutions-container-wrapper,
.product-services-explore-wrapper{
    background-color: #ffffff0a;
    border-radius: 8px;
    padding: 1rem;
    padding-bottom: 2rem;
}

.product-solutions-container-wrapper{
    display: flex;
    flex: 4;
}

.product-services-explore-wrapper{
    flex: 1;
    min-width: 270px;
}

.product-solutions-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
}

.product-solutions-container:first-child{
    padding-right: 2.5rem;
    border-right: 1px solid #ffffff0a;
}

.product-solutions-container:last-child{
    padding-left: 2.5rem;
}

.solution-card-items-wrapper{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solution-card-item{
    padding: 1rem;
    display: flex;
    gap: 1rem;
    border-radius: 8px;
}

.solution-card-item i{
    font-size: 1.6em;
    color: #2fa3d4;
    /* margin-top: 0.2rem; */
}

.solution-card-item .solution-card-info{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solution-card-item .solution-card-title{
    font-size: 1.045em;
}
.solution-card-item .solution-card-desc{
    font-size: 0.9em;
    color: #CDCDCD;
    line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.solution-cards-info-small-wrapper{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.825em;
    padding-left: 8px;
    margin-top: 8px;
}

.solution-cards-info-small-wrapper .solution-card-item{
    background-color: #ffffff08;
    border-radius: 99px;
    padding: 8px 16px;
    height: fit-content;
    width: fit-content;
    gap: 8px;
}

.product-top-label{
    text-transform: uppercase;
    color: #8e9aa3;
    font-size: 0.775em;
}

.product-listgroup-wrapper{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-listgroup-wrapper:first-child{
    padding-bottom: 1rem;
    border-bottom: 1px solid #ffffff0a;
}
.product-listgroup-wrapper:last-child{
    padding-top: 1rem;
}

.product-list-view-cards{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-list-view-card{
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875em;
}

.product-list-view-card .svg-icon{
    width: 20px;
    height: 20px;
}

.header-link-item{
    transition: 0.3s ease-in-out;
}

.header-link-item:hover{
    background-color: #ffffff0f;
}

.header-link-item.active{
    /* background-color: #0C3860; */
    /* background-color: #193f6b; */
    background-color: #1c45758f;
    /* border: 1px solid #ffffff29; */
    border-left: 2px solid rgb(23, 178, 178);
    border-radius: 0;
}

.header-link-item.active .header-link-item i{
    color: #24cbff;
}

/* Navigation pane latest changes END */

nav{
	/* margin-right: 1em; */
	line-height: normal;
	
	/* display: inline-block !important; */
    display: flex;
    align-items: center;
    gap: 5px;
}

#header nav{
    display: flex;
    align-items: center;
    gap: 8px;
}

#nav .nav-item-wrap:hover .nav-item {
	border-bottom: 2px solid rgba(23, 178, 178, 0.473);
	background-color: rgba(23, 178, 178, 0.048);
}
#nav .nav-item.active{
	border-bottom: 2px solid rgb(23, 178, 178);
	background-color: rgba(23, 178, 178, 0.1);
}
#nav .no-highlight:hover{
    cursor:default;
}
#nav .no-highlight:not(.active):hover{
	border-bottom: 2px solid transparent;
}
.navPanelToggle{
	font-size: 1.5em !important;
	color: gainsboro !important;
	padding: 10px 15px !important;
	display: none;
}
#navPanel.visible {
    /* -moz-transform: translatex(0);
    -webkit-transform: translatex(0);
    -ms-transform: translatex(0);
    transform: translatex(0); */
    box-shadow: 0px 0px 8px 4px #00000045 !important;
    visibility: visible;
    display: block;
    right: 0;
}
#navPanel.visible .nav-close{
	display: block;
	position: fixed;
	top: 8px;
	right: 16px;
	font-size: 1.5em;
	color: #a4a4a4;
    z-index: 999;
}
#navPanel.visible .nav-item-wrap.active .dropdown-items-container{
    max-height: fit-content !important;
}
#navPanel{    
    -moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition: right 0.3s ease-in-out, visibility 0.2s ease-in-out;
    -webkit-overflow-scrolling: touch;   
    right: 0;
    top: 0;
    /* background-color: rgba(13, 44, 59, 0.95);  */
    color: white;
    height: 100%;    
    z-index: 11;
    /* display: block; */
    overflow:visible;
    display: flex;
    align-items: center;
	/*background-color: #022a48;*/
    /*background-color: #0a2334;*/
    /* background-image: url(../images/fr-AzureOverview-images/footer-bg-img.png); */
}

#navPanel::-webkit-scrollbar{
    width: 6px;
    background-color: transparent;
}
#navPanel::-webkit-scrollbar-thumb{
    width: 6px;
    background-color: rgb(50 68 87);
    border-radius: 8px;
}

.nav-close{
	display: none;
}
.nav-explore-tab{
    /*cursor:pointer;*/
    /* position:relative; */
    display: inline-table;
    overflow:visible;
    user-select:none;
    /* padding: 6px 0; */
    height: 100%;
}
.nav-explore-category {
    /* display: none; */
    position: absolute;
    left: -2%;
    border-radius: 5px;
    width: 205%;
    max-width: 200px;
    text-align: left;
    background: #0d2c3b;
    background: #0d2b41;
    background: #0a2030;
    padding: 10px;
    box-shadow: 0 30px 30px 0 rgba(0, 0,0, 0.1);
    font-size: 0.9em;
    top: 120%;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #0e374bc4;
    transition: all 0.3s ease-in-out;
}

.nav-explore-category-title {
    font-family: work-sans-regular,Arial, Helvetica, sans-serif;
    padding: 7px;
}


.nav-arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 14px solid #0d2b41;
    border-color: #0a2030;
    background: transparent;
    top: -20px;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    pointer-events: none;
}
.nav-explore-tab:hover .nav-explore-category{
    top: 100%;
    opacity: 1;
    visibility: visible;
}
#nav .nav-explore-category .nav-category-link{
    display: block;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92em;
    height: fit-content;

}
#nav .nav-explore-category .nav-category-link.active{
    background: none;
    color: white;
    color: #3cd9db;
}
#nav  .nav-explore-category .nav-category-link:hover{
    border:none;
    background-color:rgba(23, 178, 178 ,0.1);

}
#nav  .nav-explore-category .nav-category-link:hover i{
    opacity: 0.9;
}
.nav-feature-new {
    border-radius: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #e91e63;
    background: #009688;
    background: linear-gradient(135deg, #009688, #4dd0e1);
    background: linear-gradient(135deg, #009688, #4dd0e1);
    background: #374b59;
    color: white;
    padding: 2px 5px;
    padding-left: 5px;
    padding-top: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    /* transform: rotate(30deg); */
}
.explore-button i{
    float:right;
    color:#cdcdcd;
    transition:all 0.3s linear;
    padding-left: 4px;
    pointer-events: none;
}

.nav-btn-wrap .btn-demo{
	animation: none;  
}
.nav-btn-wrap .btn-dwn{   
	animation: none;
}
.nav-btn{
	display: inline-block;
	line-height: normal;    
	padding: 7px 10px;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
    border-radius: 3px;
    font-size: 13px;
}
.nav-btn-wrap{
	/* display: inline-block; */
    display: flex;
    align-items: center;
    /* gap: 10px; */
	/* margin-right: 10px; */
}
.nav-btn-wrap a{
	padding: 0px !important;
}
#header .nav-btn-wrap a{
    border-bottom: none;
}
.nav-wrap{
	/* display: inline-block; */
	/* padding-right: 10px; */
    gap: 1rem;
}

#SolutionsNavCategory {
    display: flex;
    gap: 40px;
    width: 360%;
    max-width: 380px;
}

    #SolutionsNavCategory hr {
        border: none;
        height: 2px;
        background-color: #ffffff38;
    }

#SolutionsNavCategory .nav-category-link{
    display: flex !important;
    align-items: center;
    gap:5px;
}
#SolutionsNavCategory .nav-category-link i{
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.6;
}
#SolutionsNavCategory .nav-category-link i.m365-icon-email{
     width: 20px;
     height: 20px;
     margin-right: 2px;
}

#SolutionsNavCategory .nav-category-link i:is(.m365-icon-onedrive ,.m365-icon-yammer,.m365-icon-stream){
    width: 24px;
    height: 24px;
    margin-right: -2px;
}
#SolutionsNavCategory .nav-category-link.active i{
    opacity: 0.8;
}
#SolutionsNavCategory .nav-category-link a{
    padding-top: 12px;
}


@media(max-width:1550px){
    .dropdown-items-container .menu-container{
        font-size: 0.95em;
    }

    .product-item{
        padding: 0.8rem;
    }

    .solution-card-items-wrapper{
        gap: 4px;
    }

    .solution-card-item{
        padding: 0.8rem;
    }

    .product-list-view-card{
        padding: 4px 8px;
    }

    .product-solutions-container:first-child{
        padding-right: 0.5rem;
    }
   .product-solutions-container:last-child{
        padding-left: 0.5rem;
    }
}

@media(max-width:1400px){
    .products-selector{
        max-width: 240px;
    }
}


@media(min-width:1201px){
    
    #Solutions a.nav-category-link .nav-category-title {
        margin-bottom: 7px;
    display: inherit;
    font-size: 1.18em;
    color: #10e39d;
    background: linear-gradient(45deg, #132a40, transparent);
    border-radius: 3px 0px 0px 3px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}
#nav #Solutions .nav-explore-category .nav-category-link {
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92em;
    width: 218px;
    vertical-align: text-top;
    border-bottom: none;
    position: relative;
    min-height: 210px;
    width: 170px;
    background: #092132;
    transition: all 0.2s ease-in-out;
    padding-top: 12px;
}
#Solutions .nav-explore-category {
    position: absolute;
    border-radius: 5px;
    text-align: left;
    background: #0e3243;
    background: #123a56;
    padding: 12px;
    box-shadow: 1px 0px 30px 0 rgba(0, 0, 0, 0.15);
    font-size: 0.9em;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    width: max-content;
    gap: 0.5em;
    max-width: 700px;
    left: 3px;
    border: 1px solid #ffffff14;
    max-width: 1255px;
    padding: 8px;
    left: -643%;
    max-height: calc(100vh - 130px);
    overflow: auto;
}

#Solutions .nav-arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 14px solid #1b3955;
    background: transparent;
    top: -20px;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    pointer-events: none;
    right: 558px;
}
#Solutions a.nav-category-link p {
    font-size: 0.95em;
    line-height: 1.6em;
}

#Solutions span.nav-category-icon .zmdi {
    position: relative;
    top: 5px;
}
#Solutions span.nav-category-icon .zmdi-assignment-check zmdi{
    top: 7px;
}
#Solutions a.nav-category-link .nav-category-icon {
    display: flex;
    padding: 3px;
    color: #ffffff14;
    position: absolute;
    font-size: 1.3em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    font-size: 4.5em;
    justify-content: flex-start;
    bottom: 0px;
    right: 1px;
    transition: color 0.3s ease-in-out;
}
#nav #Solutions .nav-explore-category .nav-category-link:hover {
    background-color: rgb(11, 28, 43);
    transform: translateY(-4px);
}
#nav #Solutions .nav-category-link:hover .nav-category-icon {
    color: #ffffff30;
}
#nav #Solutions .nav-explore-category .nav-category-link.active {
    background: #ffffff12;
    background: rgb(11, 28, 43);
    color: white;
    border: 1px solid #ffffff33;
}
#nav #Solutions .nav-category-link.active .nav-category-icon {
    color: #ffffff30;
}
#Solutions .nav-category-link:nth-child(2) .nav-category-title{
    color: #1dc8d0;
}
#Solutions .nav-category-link:nth-child(3) .nav-category-title{
     color: #18cb82;
}
#Solutions .nav-category-link:nth-child(4) .nav-category-title{
     color: #2599e8;
}
#Solutions .nav-category-link:nth-child(5) .nav-category-title{
     color: #cd982a;
}
#Solutions .nav-category-link:nth-child(6) .nav-category-title{
     color: #b368ff;
}
#Solutions .nav-category-link:nth-child(7) .nav-category-title{
     color: #9a86ff;
}
#Solutions .nav-category-link:nth-child(8) .nav-category-title{
    color:#ec5cbc ;
}
#Solutions .nav-category-link:nth-child(9) .nav-category-title {
    color: #8cc63f;
}
#Solutions .nav-category-link:nth-child(10) .nav-category-title {
    color: #ba68c8;
}
#Solutions .nav-category-link:nth-child(11) .nav-category-title {
    color: #5dd27c;
}
#Solutions .nav-category-link:nth-child(12) .nav-category-title {
    color: #55d2d5;
}
#Solutions .nav-category-link:nth-child(13) .nav-category-title {
   color: #2599e8;  
}
#Solutions .nav-category-link:nth-child(14) .nav-category-title {
    color: #fcb941;
}
#Solutions .nav-category-link:nth-child(15) .nav-category-title {
    color:  #2dc4b2;
}
#Solutions .nav-category-link:nth-child(16) .nav-category-title {
    color: #d252ff;
}

#SolutionsNavCategory {
    display:flex !important;
}

}

@media(max-width:1200px) {
    #Solutions span.nav-category-icon {
       display: none;
    }
    #Solutions .nav-category-content p {
       display: none;
    }

    #SolutionsNavCategory {
        display: none;
    }

    .nav-explore-category-title {
        background: #ffffff0f;
        width: 51%;
    }

    #SolutionsNavCategory hr {
        width: 51%;
    }
}



/*============= NAV HEADER STYLE END ==============*/


/*==============TOP INFO BANNER STYLES START ====================*/
#top-info-banner{
    position: sticky;
    top: 0px;
    z-index: 1000;
}

#top-info-banner .top-info-banner-content{
    text-align: center;
    background: #396783;
    padding: 5px;
    font-family: work-sans-regular,Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #ededed;
}

#top-info-banner .top-info-banner-content a{
    background: linear-gradient(46deg, #5ff377, #00fffe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 1px solid #4cd795;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
}

#top-info-banner .top-info-banner-close{
    float: right;
    position: relative;
    right: 10px;
    font-family: 'work-sans-medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
    color: #d1d1d1;
}


@media(max-width:698px){
    #top-info-banner{
        display: none !important;
    }
    .fr-bread-crumbs-section{
        top: var(--breadCrumbDefaultTop) !important;
    }
    #header{
        top: var(--headerDefaultTop) !important
    }
    .release-note-sub-card .release-note-version-container {
        top: 50px;
    }
}

/*==============TOP INFO BANNER STYLES END ====================*/





/*==================== FOOTER STYLE START ==================*/

#footer {
	/* background-color: #0a2a39;
    background: repeating-radial-gradient(circle, #00294c , #04365c , #02213c ); */
	padding-top: 20px;
	padding-bottom: 7px;
	background-color: #022a48;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    /* background-image: url(../images/fr-AzureOverview-images/footer-bg-img.png); */
}
.footer-wrap{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	color: rgba(255, 255, 255, 0.46);
}
.footer-wrap a{
	color: inherit !important;
}
.footer-wrap a:hover {
	color: rgba(255, 255, 255, 0.6) !important;
	text-decoration: underline;
}
.footer-pane, .footer-pane-h{
	margin: 10px 15px;
	font-size: 13px;
}
.footer-pane > span:first-child{
	color: white;
	text-transform: uppercase;
}
.footer-pane,.footer-pane-h span{
	padding: 5px 0px;
	display: block;
}
.footer-pane-h h2{
   font-weight: normal;
}
.footer-pane-h h2:first-child{
	color:white;
	text-transform: uppercase;
 }
.footer-pane ul{
	margin-left: 20px;
	margin-top: 7px;
	max-width: 180px;
}
.footer-pane li{
	padding: 6px 0px;
	line-height: 18px;
}
.footer-pane div i{
	font-size: 20px;
}
.footer-pane div *{
	color: darkgray;
	display: inline-block !important;
	vertical-align: middle;
}
.footer-pane div script{
	display: none !important;
}
.news{
	max-width: 265px !important;
}
.footer-more-news{
    text-align: right;
    margin-right: 28px;
    padding: 4px 5px 5px;
    font-size: 1.01em;
    display: flex;
    align-items: center;
    justify-content: end;
}

.footer-more-news a::after {
    font-family: "office365icons";
    content: '\e054';
    font-size: inherit;
    font-weight: 400;
    display: inline-block;
    width: 10px;
    margin-right: -10px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.1em;
}
.social{
	margin-top: 15px;
}
.social span{
	padding: 20px 10px;
	cursor: pointer;
	color: grey;
	transition: 0.3s;
}
.social span:hover i{
	color: white;
}

.partner-label {
    width: 245px;
}
.partner-label img {
    width: 100%;
}

.footer{
	margin-top: 30px;
	text-align: center;
	color: darkgray;
	font-size: 11px;
	border-top: 1px solid #08384e;
	padding-top: 8px;
}
.footer a:hover{
	color: rgba(255, 255, 255, 0.6) !important;
	text-decoration: underline;
}

/*==================== FOOTER STYLE END ==================*/



/*============= COOKIE BAR STYLE START ==============*/
.coockie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(14, 57, 78, 0.97);
	color: white;
	z-index: 13;
	padding: 8px;
	font-family: work-sans-regular,Arial,sans-serif;
	display: none;
	font-size: 13px;
	text-align: center;
}
.coockie-bar span {
	vertical-align: middle;
	display: inline-block;
}
.coockie-bar button {
	vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    border: none;
    padding: 5px 8px;
    border-radius: 2px;
    background-color: #1b96ac;
    color: white;
    cursor: pointer;
}
.coockie-bar  a{
    color: white;
}

/*============= COOKIE BAR STYLE END ==============*/



/*======== Pricing page styles start =============
=========================================================*/
.webite-license-page .license-app{
    background: none !important;
    margin-top: 10px;
}
.webite-license-page .license-app:before{
    background-color: transparent;
}
.webite-license-page#license-app{
    background: url(../images/bg/banner.jpg) no-repeat center center fixed;
    background-size: cover;
    position: relative;
    margin-top: 50px;
    z-index: 1;
}
.webite-license-page#license-app:before{
    content: "";
    position: absolute;
    background:radial-gradient(#112539fa, rgb(10 23 39 / 98%));
    height: 100%;
    width: 100%;
    z-index: -1;
    /* Need to comment the below */
    background: #e5edf0;
    background: white;
}
.webite-license-page .droid-section-outer-wrapper{
    font-size: 15px;
    color: #ebebeb;
    padding-top: 80px;
}
.prcn-for-website {
    /* color: rgba(255, 255, 255, 0.7); */
    font-size: 13px;
    min-height: calc(55vh);
    background: #edf2f5;
}
.prcn-for-website {
    background-image: url('../images/bg/top-wave.svg');
    background-size: cover;
    background-position: -500px;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.prcn-for-website > *:not(.pricing-page-header):not(.license-notificaion-subtitle-subpane):not(.pricing-page-admidroid-tag-line):not(.form-popup-container):not(.license-top-nav-container){
    /* max-width: 1500px; */
    margin: auto;
}
.prcn-for-website .prcn-checkout-container.new-design-0 {
    margin: 90px auto;
    max-height: calc(100% - 140px);
    height: max-content;
    min-height: auto;
}
.prcn-for-website .quick-pay .prcn-popup-header {
    text-align: left;
}
.prcn-for-website .quick-pay {
    margin: 6px;
}
.prcn-for-website .pricing-page-body,
.prcn-for-website .pricing-addons-page-container,
.prcn-for-website .pricing-addons-info-container {
    margin-bottom: 0;
}
/* 

.prcn-for-website  .prcn-wrapper {
    background: white;
    border-radius: 10px;
    max-width: 1400px;
    margin-top: -57px;
    position: relative;
    padding: 10px 0;
    box-shadow: 0 0 5px #e4d2ff;
}
*/
.prcn-for-website .prcn-top-svg {
    position: fixed;
    top: -150px;
    right: -140px;
    width: 30%;
    height: auto;
    opacity: 0.2;
    display: none;
}

.prcn-for-website .pricing-page-admidroid-tag-line{
    /* background: #e9dbff; */
    padding-top: 25px;
    padding-bottom: 70px;
}
.prcn-for-website .pricing-page-title {
    background: linear-gradient(346deg, #505eff, #a734ff);
    background-clip: text;
    color: transparent;
}

.prcn-license-addon-container {
    max-width: 1400px;
    background: white;
    position: relative;
    top: -50px;
    /* border-radius: 60px 60px 0 0; */
    box-shadow: 0 0 10px #e7e7e7;
    border-radius: 25px;
    padding-bottom: 20px;
}

.prcn-for-website .license-top-nav-container.prcn-sticky-nav {
    border-radius: 0 0 50px 50px;
    border-radius: 25px 25px 0 0;
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(230, 213, 255, 0.1);
    padding-bottom: 2px;
    /*background: rgba(255, 255, 255, 0.1);*/
    /*backdrop-filter: blur(5px);*/
    box-shadow: none;
}
.prcn-for-website .license-top-nav-container.prcn-sticky-nav  .prcn-buy-options-pane {
    display: none;
}

.prcn-for-website .license-top-nav-container.prcn-sticky-nav .navbar-v2 {
    background: #1b3949;
    background: #e2ecff;
    max-width: fit-content;
    margin: auto;
    padding: 0 30px;
    border-radius: 0 0 25px 25px;
}


.prcn-for-website .prcn-sticky-nav {
    position: sticky;
    top: 80px;
    z-index: 5;
}
.prcn-for-website .license-top-nav-container {
    max-width: 1400px;
    margin-top: 5px;
    border-radius: 10px;
    box-shadow: 0 0px 5px rgba(218, 193, 255, 0.75);
}
.prcn-for-website .navbar-v2 .prcn-sub-nav {
    padding: 13px;
    justify-content: center;
    flex-wrap: wrap;
}
.prcn-for-website .navbar-v2 .sub-tab {
    padding: 3px 12px;
    background-color: rgba(146, 196, 247, 0.15);
    /* color: aliceblue; */
    border: 1px solid rgba(11, 74, 139, 0.15);
    opacity: 0.9;
    background: white;
}
.prcn-for-website .prcn-addon-prdt-main-body .prdt-tab.active {
    background: #18447d;
    color: aliceblue;
}

.prcn-for-website .prcn-addon-prdt-main-body .prdt-tab.active .prcn-addon-prdt-icon::after {
    background: unset;
}
.prcn-for-website .pricing-page-main-container {
    /* border: 1px solid #e3e3e3; */
    background: white;
    /* border: none; */
    border: 1px solid #eef2f5;
    border-top: 2px solid #18447d;
    box-shadow: none;
    overflow: unset;
    /* box-shadow: 0 1px 7px rgba(183, 212, 229, 0.25); */
} 
.prcn-for-website .license-pricing-packs-container{
    background: #edf2f5;
}
.prcn-for-website .pricing-buy-now-pane {
    display: none;
}

.prcn-for-website .license-feature-pack-card {
    /* background: #1b3949; */
    /* color: #f0f8ffe0; */
    /* color: #cbcbcb; */
}
.prcn-for-website .license-pricing-packs-container .prcn-count {
    background: rgba(143, 151, 226, 0.15);
    padding: 10px;
    border-radius: 40px;
    /* color: white; */
    text-align: center;
}
.prcn-for-website  .prcn-pack-title{
    font-size: 1.4em;
    background: rgba(248, 243, 255, 0.05) !important;
}

.prcn-for-website .license-feature-pack-card[pack-name="freePack"] .prcn-pack-title {
    /* color: #28ef64; */
}
.prcn-for-website .license-feature-pack-card[pack-name="standardPack"] .prcn-pack-title {
    /* color: #27c1ff; */
}
.prcn-for-website .license-feature-pack-card[pack-name="proPack"] .prcn-pack-title {
    /* color: #e473ff; */
    background: rgba(114, 50, 250, 0.1);
}
.prcn-for-website .license-feature-pack-card[pack-name="proPlusPack"] .prcn-pack-title {
    /* color: #ff45f8; */
    background: rgba(197, 20, 179, 0.1);
}
.prcn-for-website .license-feature-pack-card[pack-name="standardPack"] .prcn-count {
    background: aliceblue;
}
.prcn-for-website .license-feature-pack-card[pack-name="proPlusPack"] .prcn-count {
    background: #fff4fe;
}
.prcn-for-website .license-feature-pack-card[pack-name="freePack"] .prcn-count {
    background: #f0fff5;
}
.prcn-for-website .license-feature-pack-card[pack-name="proPack"] .prcn-card-buy {
    background: #8a53ff;
}
.prcn-for-website .license-feature-pack-card[pack-name="proPlusPack"] .prcn-card-buy {
    background: #e71dd3;
}

.prcn-for-website .free-benefits {
    color: #31b458;
    border-radius: 5px;
    border: 1px solid #bfe5cab0;
    margin: auto;
    /* background: unset; */
}

.prcn-for-website .prcn-card-buy{
    border-radius: 5px;
}


.pricing-page-title {
    background: linear-gradient(346deg, #505eff, #a734ff);
    background-clip: text;
    color: transparent;
}
.prcn-for-website .m365-sevices-pane{
    opacity: 0.75;
}

/* comparison */
.prcn-for-website .edition-comaprison-header-contianer {
    top: 130px;
    width: auto;
}

.prcn-for-website #edition-comparision-table-main {
    top: 180px;
}

.prcn-for-website .new-compare-feature-module-column {
    top: 180px;
}

.prcn-for-website .new-compare-feature-report-table-container thead {
    top: 183px;
}

.prcn-for-website .new-compare-feature-tier-header-table {
    top: 180px;
}

/* Addons */
.addon-info-main-wrap {
    background: white;
}
.theme-white{
    background: white;
}
.theme-whitesmoke{
    background: whitesmoke;
}

.prcn-for-website .get-quote-btn.for-website {
    display: inline-block;
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}

.prcn-for-website .prcn-addons-card-main-body {gap: 12px;}

.prcn-for-website .pricing-addons-info-container {
    border: 1px solid #eef2f5;
    box-shadow: none;
    margin-bottom: 20px;
}
.prcn-for-website .prcn-addon-prdt-container .prcn-addon-legend {
    margin-left: 0;
    padding: 8px 10px 0;
    border-bottom: 2px solid #18447d;
}



/*.webite-license-page .droid-main-header-wrapper i{
    position: absolute;
    left: -10px;
    font-size: 10.2em;
    z-index: 0;
    top: 0;
    color: #ffffff0d;
    top: -66px;
    z-index: -1;
}*/
.webite-license-page .droid-banner-desc-cntr{
    font-size: 1.6em;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
    letter-spacing: 0.4px; 
}
.webite-license-page#license-app :is(.prcn-container .card-title, .prcn-dis-wrap-header) {
    border-radius: 8px 8px 0 0;
}
.webite-license-page#license-app :is(.prcn-container,.prcn-dis-wrap-container){
    border-radius: 8px;
    border: 1px solid rgb(255 255 255 / 10%);
}
.webite-license-page#license-app .prcn-btm-pane{
    border-radius: 0px 0px 8px 8px;
}
.webite-license-page#license-app .droid-banner-title-cntr{
    background: linear-gradient(90deg,#967ae5,#46b4ef);
    color: transparent;
    -webkit-background-clip: text;
    font-family: poppins-medium,Arial,Helvetica,sans-serif;
}
/* temp height adjustment cause of top-info-bar */
.webite-license-page#license-app .form-maincontainer{
    max-height: calc(100% - 120px);
}
.webite-license-page#license-app .invoice-view{
    max-height: calc(100vh - 120px);
}
.webite-license-page#license-app .ember-flash-message-container{
    top: 80px;
}
.webite-license-page#license-app .form-maincontainer{
    margin-top: 90px;
}
.webite-license-page#license-app .invoice-view {
    margin-top: 90px;
}
/* temp top-info-bar */
.prcn-for-website .ember-basic-dropdown{
    color: #5e5e5e;
}
/*======== Pricing page styles End =============
=========================================================*/

/* BUTTON COMMON STYLES (LIVE DEMO, DOWNLOAD) START */

.btn-df {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    color: white;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 1.1em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-demo{
	/*background-color: #17b2b2;*/
	
    background: linear-gradient(340deg, #0361f4, #2fa350);    
}
.btn-dwn{   
	margin-left: 10px;
	/*background-color: #ff6b00;*/
	
    background: linear-gradient(160deg, #f50285, #8424c3);
}
.btn-demo:hover{
	/*background-color: darkcyan;*/
    opacity: 0.9 !important;
}
.btn-dwn:hover{   
	/*background-color: #dd5d02;*/
    opacity: 0.9 !important;
}

/* BUTTON COMMON STYLES (LIVE DEMO, DOWNLOAD) END */



/*=========== OTHER COMMON CSS STYLES START =============*/
html{
    overflow-x: visible !important;   /*These syles is given to avoid the position sticky not work*/
}

html, body {
    margin: 0px;
    padding: 0px;
    color: #5e5e5e;
    font-family: work-sans-regular, Arial, sans-serif;
    /* overflow-x: visible !important; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit !important;
    font-weight: inherit !important;
}


*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

input, textarea, select, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    font-family: inherit;
    display: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/*a:focus, a:active,*/ a:hover {
    outline: none !important;
    color: inherit;
    text-decoration: inherit;
}

a:hover {
    text-decoration: none;
}

button:active, button:active, button:hover, button:focus {
    outline: none !important;
}

ul, li {
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

* {
    margin: 0px;
    padding: 0px;
}

a:hover {
    color: inherit;
}

input[type="radio"]:target {
    padding-top: 70px;
    margin-top: -70px;
}

.anchor:before {
    content: "";
    display: block;
    margin-top: -285px;
    height: 285px;
    visibility: hidden;
    pointer-events: none;
}

.anchor:before {
    content: " ";
}

#scrollbar {
    z-index: 999 !important;
    top: 0px !important;
}

#scrollbar .nicescroll-cursors {
    border: none !important;
    border-radius: 0 !important;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    min-width: 100px;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid rgba(0, 0, 0, 0.46) !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    transform: rotate(90deg);
    border-bottom: none;
    top: 42% !important;
}

.btn:hover, .btn:focus {
    color: inherit !important;
    text-decoration: inherit !important;
}

.underline {
    text-decoration: underline;
}

.text-bl-l9 {
    color: rgba(0, 0, 0, 0.9);
}
.disp_inline{
		display:inline-block;

}
.fr {
    float: right;
}

.fl {
    float: left;
}

.txtl {
    text-align: left;
}

.txtr {
    text-align: right;
}
strong {
    font-weight: normal;
}

.download-btn{
	font-size: 1.8em;
    padding: 10px 23px;
    /*background-color: #2e55a9;*/
    display: inline-block;
    color: white;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    background: linear-gradient(160deg, #f50285, #8424c3);
	border-radius: 5px;

}
.download-btn:hover{
	/*background-color: #0f3b9a;*/
    opacity: 0.9 !important;
}
.download-btn i{
	padding: 0 3px;
}



/*rsn pane content design styles start*/

.rsn-adm-wrap{
	width: 100%;
	justify-content: center;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
}
.rsn-adm-sub-wrap{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1020px;
	justify-content: center;
}

.rsn-adm-pane{
	max-width: 300px;
	margin: 20px;    
}

.rsn-adm-pane span{
	color: #00aeda;
	font-size: 3.3em;
}
.rsn-adm-content{
	padding-top: 20px;
}
.rsn-adm-content p{
	padding-top: 10px;
	font-size: 14px;
	line-height: 22.4px;
	color: #43484e;
}

/*rsn pane content design styles end*/


/*slider chevron placements*/

.cl-tbl-wrap-tbl-navigation{
    position: absolute;
    z-index: 2;
    top: 50%;
    font-size: 35px !important;
    color: rgba(191, 191, 191, 0.585);
    cursor: pointer;
    transition: color .3s;
    transform: translateY(-50%);
}
.cl-tbl-wrap-tbl-navigation:active{
    opacity: 0;
}
.nav-diabled{
    opacity: 0.08;
    pointer-events: none;
}

.overview-inner .fa-chevron-left {
    left: 15px;
}

.overview-inner .fa-chevron-right {
    right: 15px;
}

.cl-tbl-wrap-tbl {
    overflow: auto;
    border-collapse: separate;
    border-spacing: 10px;
    max-width: calc(100% - 100px);
    display: inline-block;
    padding-bottom: 10px;
}
.cl-tbl-wrap {
	font-family: roboto-regular,Arial, sans-serif;
	display: table-row;
	width: 100%;
	justify-content: center;
	text-align: center;
	padding: 30px 10px;
}

.cl-tile-wrap{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4,128px);
    grid-gap: 15px;
    justify-content: unset;
    text-align: unset;
    width: fit-content;
}

.cl-tbl-pane {
	max-width: 200px;
	text-align: left;
	width: calc(100% - 30px);
	background-color: rgba(0, 0, 0, 0.18);
	padding-bottom: 10px;
	transition: 0.3s;
	display: table-cell;
	min-width: 200px;
	vertical-align: top;
    border-radius: 5px;
       
}
.cl-tbl-pane span, .cl-tbl-pane div{
	word-wrap: break-word;
	display: block;
	line-height: 1.4em;
	padding: 6px 10px;
	font-size: 13px;
	font-family: work-sans-regular, Arial, Helvetica, sans-serif;
}
.cl-tbl-pane div li {
        /* display: block; */
    margin-left: 30px;
    padding: 2px 0px;
    margin-top: 3px;
}
.cl-tbl-pane div p {
    padding: 4px 4px;
    background: #1f2f47;
    border-radius: 4px;
}
.cl-tbl-pane div li::marker{
    content: "- ";
}

.cl-tbl-pane span:nth-child(2){
	border-bottom: 1px solid gainsboro;
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 10px;
	padding: 0px 10px 5px 10px;
	background-color: rgba(255, 255, 255, 0.1);
	font-family: poppins-regular, Arial, Helvetica, sans-serif;
    
}

.cl-tbl-pane span:first-child{
	padding: 10px 10px 0px 10px;
	font-size: 2em;
	color: gainsboro;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px 5px 0px 0px;
    min-height: 50px;
}

.cl-tbl-wrap-tbl::-webkit-scrollbar {
    height: 0px;
}
.cl-tbl-wrap-tbl::-webkit-scrollbar-track {
    background: #052738;
}

.cl-tbl-wrap-tbl::-webkit-scrollbar-thumb {
    background: #888;
}

.cl-tbl-wrap-tbl::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/*========== OPEN SANS FONT =========*/
/* @font-face {
    font-family: open-sans-regular;
    src: url('../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: open-sans-light;
    src: url('../fonts/opensans/OpenSans-Light.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: open-sans-semibold;
    src: url('../fonts/opensans/OpenSans-Semibold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: open-sans-bold;
    src: url('../fonts/opensans/OpenSans-Bold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
} */


/*========== ROBOTO FONT =========*/
/*@font-face {
    font-family: roboto;
    src: url('../fonts/roboto/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto/Roboto-Light-webfontd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Light-webfont.woff') format('woff'), url('../fonts/roboto/Roboto-Light-webfont.ttf') format('truetype'), url('../fonts/roboto/Roboto-Light-webfont.svg#icon') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: roboto-bold;
    src: url('../fonts/roboto/Roboto-Bold-webfont.eot');
    src: url('../fonts/roboto/Roboto-Bold-webfontd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Bold-webfont.woff') format('woff'), url('../fonts/roboto/Roboto-Bold-webfont.ttf') format('truetype'), url('../fonts/roboto/Roboto-Bold-webfont.svg#icon') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: roboto-light;
    src: url('../fonts/roboto/roboto.light.ttf') format('truetype');
}

@font-face {
    font-family: roboto-regular;
    src: url('../fonts/roboto/roboto.regular.ttf') format('truetype');
}

@font-face {
    font-family: roboto-medium;
    src: url('../fonts/roboto/roboto.medium.ttf') format('truetype');
}

@font-face {
    font-family: roboto-thin;
    src: url('../fonts/roboto/roboto.thin.ttf') format('truetype');
}*/



/*========== COMFORTA FONT(for logo) =========*/
@font-face {
    font-family: comforta-regular;
    src: url('../fonts/Comfortaa-Regular.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}



/*============ WORK SANS FONT =============*/
@font-face {
    font-family: work-sans-light;
    src: url('../fonts/Worksans/WorkSans-Light.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: work-sans-regular;
    src: url('../fonts/Worksans/WorkSans-Regular.woff2') format('woff2'), url('../fonts/Worksans/WorkSans-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: work-sans-medium;
    src: url('../fonts/Worksans/WorkSans-Medium.woff2') format('woff2'), url('../fonts/Worksans/WorkSans-Medium.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: work-sans-semibold;
    src: url('../fonts/Worksans/WorkSans-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: work-sans-bold;
    src: url('../fonts/Worksans/WorkSans-Bold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}


/*============ POPPINS FONT ==============*/
@font-face {
    font-family: poppins-light;
    src: url('../fonts/Poppins/Poppins-Light.woff2') format('woff2') ,url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: poppins-regular;
    src: url('../fonts/Poppins/Poppins-Regular.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: poppins-medium;
    src: url('../fonts/Poppins/Poppins-Medium.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: poppins-semibold;
    src: url('../fonts/Poppins/Poppins-SemiBold.woff2') format('woff2'), url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: poppins-bold;
    src: url('../fonts/Poppins/Poppins-Bold.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}


/*========= MATERIAL DESIGN ICONIC FONT START==============
==================================================================*/
@font-face {
    font-family: Material-Design-Iconic-Font;
    src: url(../fonts/Material-Design-Iconic-Font.ttf) format('truetype');
    font-display: swap;
}

.zmdi {
    display: inline-block;
    font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.zmdi-hc-fw {
    width: 1.28571429em;
    text-align: center;
}
.zmdi-comment-video:before{
    content: '\f264';
}
.zmdi-settings:before {
    content: "\f1c6";
}
.zmdi-lock-outline:before {
    content: '\f190';
}
.zmdi-alert-triangle:before {
    content: "\f1f4";
}
.zmdi-chart:before {
    content: "\f131";
}
.zmdi-puzzle-piece:before {
    content: '\f1b1';
}
.zmdi-devices:before {content: '\f295';}
.zmdi-refresh-sync:before, .zmdi-refresh:before {
    content: "\f1b8";
}
.zmdi-traffic:before {
    content: "\f1e2";
}
.zmdi-link:before {
    content: "\f18e";
}
.zmdi-share:before {
    content: "\f35b";
}
.zmdi-calendar:before {
    content: '\f332';
}
.zmdi-traffic:before {
    content: "\f1e2";
}

.zmdi-videocam:before {
    content: '\f2e0';
}

.zmdi-storage:before {
    content: '\f1d2';
}

.zmdi-file-text:before {
    content: "\f222";
}

.zmdi-key:before {
    content: "\f183";
}

.zmdi-lock-open:before {
    content: "\f18f";
}

.zmdi-search-in-file:before {
    content: '\f1c0';
}
.zmdi-calendar-check:before {
    content: '\f32f';
}

.zmdi-download:before {
    content: '\f220';
}

.zmdi-account:before {
    content: '\f207';
}

.zmdi-smartphone-setup:before {
    content: "";
}

.zmdi-ticket-star:before {
    content: '\f1df';
}

.zmdi-shield-security:before {
    content: '\f1c8';
}

.zmdi-accounts:before {
    content: '\f20d';
}

.zmdi-traffic:before {
    content: '\f1e2';
}

.zmdi-key:before {
    content: '\f183';
}
.zmdi-apps:before {
    content: "\f313";
}
.zmdi-cloud-done:before {
    content: '\f219';
}
.zmdi-labels:before {
    content: "\f188";
}
.zmdi-folder:before {
    content: "\f228";
}
.zmdi-shield-check:before {
    content: "\f1c7";
}
.zmdi-swap:before {
    content: "\f30d";
}
.zmdi-swap-vertical:before {
    content: '\f30c';
}
.zmdi-smartphone-iphone:before {
    content: "\f2cc";
}
.zmdi-laptop:before {
    content: "\f2a7";
}
.zmdi-assignment-check:before {
    content: '\f108';
}
.zmdi-fullscreen::before{
    content: "\f16d";
}
.zmdi-mail-send::before{
    content: '\f194';
}
.zmdi-close::before{
    content: '\f136';
}
.zmdi-check-circle::before{
    content: '\f269';
}
.zmdi-info::before{
    content: '\f1f8';
}

/*========= MATERIAL DESIGN ICONIC FONT END==============
==================================================================*/




/*========= FONT AWESOME iCONS START  ===============
==================================================================*/

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-filter:before {
    content: "\f0b0";
}

.fa-calendar:before{
    content: "\f073"
}
.fa-filter:before{
    content:"\f0b0";
}
.fa-github:before{
    content: "\f09b";
}
.fa-reddit-alien:before{

    content: "\f281";
}
.fa-youtube-play:before{

    content: "\f16a";
}
.fa-search:before {
    content: "\f002";
}
.fa-caret-right:before {
    content: "\f0da";
}

.fa-shield:before {
    content: "\f132";
}
.fa-building-o:before {
    content: "\f0f7";
}

.fa-globe:before {
    content: "\f0ac";
}

.fa-group:before, .fa-users:before {
    content: "\f0c0";
}

.fa-refresh:before {
    content: "\f021";
}

.fa-download:before {
    content: "\f019";
}

.fa-facebook-official:before {
    content: "\f230";
}

.fa-facebook-f:before, .fa-facebook:before {
    content: "\f09a";
}

.fa-twitter-square:before {
    content: "\f081";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-linkedin-square:before {
    content: "\f08c";
}

.fa-linkedin:before {
    content: "\f0e1";
}

.fa-google-plus-square:before {
    content: "\f0d4";
}

.fa-google-plus:before {
    content: "\f0d5";
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
}

.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d";
}

.fa-arrow-up:before {
    content: "\f062";
}

.fa-user:before {
    content: "\f007";
}

.fa-user-o:before {
    content: "\f2c0";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-envelope-o:before {
    content: "\f003";
}

.fa-shopping-cart:before {
    content: "\f07a";
}

.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d";
}

.fa-check-circle:before {
    content: "\f058";
}

.fa-comment-o:before {
    content: "\f0e5";
}

.fa-dashboard:before, .fa-tachometer:before {
    content: "\f0e4";
}

.fa-clock-o:before {
    content: "\f017";
}

.fa-flag:before {
    content: "\f024";
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-chevron-left:before {
    content: "\f053";
}

.fa-exclamation-triangle::before {
    content: "\f071";
}

.fa-heart:before {
    content: "\f004";
}

.fa-world:before {
    content: "\f0ac";
}

.fa-smile-beam:before {
    content: "\f5b8";
}

.fa-quote-left:before {
    content: "\f10d";
}
.fa-quote-right:before {
    content: "\f10e";
}
.fa-sitemap:before {
    content: "\f0e8";
}
.fa-cogs:before{
    content: "\f085";
}
.fa-bell:before {
    content: "\f0f3";
}
.fa-clipboard-check:before {
    content: "\f46c";
}
.fa-list-dots:before, .fa-list-ul:before {
    content: "\f0ca";
}
.fa-expand:before{
    content: "\f065";
}
.fa-spinner:before{
    content: "\f110";
}
.fa-frown-o:before {
    content: "\f119";
}
/*========= FONT AWESOME iCONS END  ===============
==================================================================*/




/*========= CUSTOM FONT ICONS START ==========
================================================================*/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/cust-fonts/cust-fonts.woff2');
    src: url('../fonts/cust-fonts/cust-fonts.woff2') format('woff2'), url('../fonts/cust-fonts/cust-fonts.ttf?nq4nvb') format('truetype'), url('../fonts/cust-fonts/cust-fonts.woff?nq4nvb') format('woff'), url('../fonts/cust-fonts/cust-fonts.svg?nq4nvb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="icomoon-"], [class*=" icomoon-"],
[class^="custom-icon-"], [class*=" custom-icon-"],
[class^="ms-Icon1--"]:before, [class*=" ms-Icon1--"]:before{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icomoon-azure-ad:before {
    content: "\e9a4";
}

.icomoon-exchange:before {
    content: "\e9a5";
}

.icomoon-onedrive:before {
    content: "\e9a6";
}

.icomoon-power-bi:before {
    content: "\e9a7";
}

.icomoon-sharepoint:before {
    content: "\e9a8";
}

.icomoon-stream:before {
    content: "\e9a9";
}

.icomoon-teams:before {
    content: "\e9aa";
}

.icomoon-yammer:before {
    content: "\e9ab";
}

.icomoon-yammer:before {
    content: '\e9ab';
}

.icomoon-yammer:before {
    content: '\e9ab';
}

.icomoon-usage:before {
    content: "\e913";
}

.icomoon-insights:before {
    content: "\e914";
}

.icomoon-no-key:before {
    content: "\e90b";
}

.icomoon-server:before {
    content: "\e903";
}

.icomoon-multi-tool:before {
    content: "\e904";
}

.icomoon-easy-nav:before {
    content: "\e905";
}

.icomoon-no-admin:before {
    content: "\e906";
}

.icomoon-time-manage:before {
    content: "\e907";
}

.icomoon-user-friendly:before {
    content: "\e908";
}

.icomoon-support:before {
    content: "\e909";
}
.icomoon-lock-issue:before {
    content: "\ea49";
}
.custom-icon-master-card:before {
    content: "\e935";
}
.custom-icon-assets:before {
    content: "\e953";
}
.custom-icon-secure-processing:before {
    content: "\e92d";
}
.custom-icon-medical:before {
    content: "\e92e";
}
.custom-icon-shield-procession:before {
    content: "\e92c";
}
.custom-icon-cjis:before {
    content: "\e9e1";
}
.ms-Icon1--aad::before {
    content: '\e9a4';
}

.ms-Icon1--exchange::before {
    content: '\e9a5';
}

.ms-Icon1--sharepoint::before {
    content: '\e9a8';
}

.ms-Icon1--onedrive::before {
    content: '\E9a6';
}

.ms-Icon1--TeamsLogoInverse:before {
    content: '\e9aa';
}

.ms-Icon1--StreamLogo:before {
    content: '\e9a9';
}

.ms-Icon1--PowerBILogo:before {
    content: '\e9a7';
}

.ms-Icon1--YammerLogo::before {
    content: '\e9ab';
}
/*========= CUSTOM FONT ICONS END ==========
================================================================*/




/*============ OFFICE 365 ICONS START===========
=================================================================*/
@font-face {
    font-family: 'office365icons';
    src: url('../fonts/office-icons/office365icons.woff2') format('woff2'),
         url('../fonts/office-icons/office365icons.woff') format('woff'),
         url('../fonts/office-icons/office365icons.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/office-icons/office365icons.ttf') format('truetype'), 
         url('../fonts/office-icons/office365icons.svg?#office365icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="ms-Icon--"]:before, [class*="ms-Icon--"]:before,
[class^="o365-icon-"]:before, [class*=" o365-icon-"]:before, [class^="o365-icon-"]:after, [class*=" o365-icon-"]:after  {
    font-family: "office365icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;

}

.ms-Icon--search:before{
    content: '\e039';
}
.ms-Icon--quote:before {
    content: '\e18f';
}

.ms-Icon--dashboard:before {
    content: '\e164';
}

.ms-Icon--teams:before {
    content: '\E379';
}

.ms-Icon--mail:before {
    content: '\e009';
}

.ms-Icon--newsfeed:before {
    content: '\e08d';
}

.ms-Icon--people:before {
    content: '\e00e';
}

.ms-Icon--work:before {
    content: '\e120';
}

.ms-Icon--mailCheck:before {
    content: '\e22c';
}

.ms-Icon--onlineJoin:before {
    content: '\e02f';
}

.ms-Icon--person:before {
    content: '\e008';
}

.ms-Icon--listCheck:before {
    content: '\e226';
}

.ms-Icon--delveAnalytics:before {
    content: '\e318';
}

.ms-Icon--infoCircle:before {
    content: '\e00a';
}

.ms-Icon--key:before {
    content: '\e06f';
}

.ms-Icon--share2:before {
    content: '\e29b';
}
.ms-Icon--share:before {
    content: '\e078';
}

.ms-Icon--peopleError:before {
    content: '\e24c';
}

.ms-Icon--alert:before {
    content: '\e00b';
}

.ms-Icon--quote:before {
    content: '\e18f';
}

.ms-Icon--refresh:before {
    content: '\e034';
}

.ms-Icon--copy:before {
    content: '\e26f';
}

.ms-Icon--org:before {
    content: '\e125';
}

.ms-Icon--caretDown:before {
    content: '\e052';
}
.ms-Icon--chart:before {
    content: '\e16f';
}
.ms-Icon--circleChart:before {
    content: '\e30b';
}
.ms-Icon--skypeCircleClock:before {
    content: '\e311';
}
.ms-Icon--filter:before {
    content: '\e11a';
}
.ms-Icon--peopleRemove:before {
    content: '\e0a3';
} 
.ms-Icon--unsubscribe:before {
    content: '\e09d';
}
.ms-Icon--admin:before {
    content: '\e081';
}                                                                   
.ms-Icon--mailUnread:before {
    content: '\e213';
}
.ms-Icon--mailPause:before {
    content: '\e24a';
}
.ms-Icon--gear:before {
    content: '\e035';
}
.ms-Icon--mailPublic:before {
    content: '\e272';
}
.ms-Icon--barChartVertical:before {
    content: '\e402';
}
.ms-Icon--page:before {
    content: '\e17f';
}
.ms-Icon--circleInfo:before {
    content: '\e27d';
}
.ms-Icon--arrowLeft:before {
    content: '\e049';
}
.ms-Icon--arrowRight:before {
    content: '\e04a';
}
.ms-Icon--globe:before {
    content: '\e222';
}
.ms-Icon--link:before {
    content: '\e08f';
}
.ms-Icon--mail2:before {
    content: '\e399';
}
.ms-Icon--mailSync:before {
    content: '\e248';
}
.ms-Icon--mailRead:before {
    content: '\e214';
}
.ms-Icon--arrowUpRight:before {
    content: '\e283';
}
.ms-Icon--mailOpen:before {
    content: '\e00d';
}
.ms-Icon--mailError:before {
    content: '\e249';
}
.ms-Icon--shoppingList:before {
    content: '\e41a';
}
.ms-Icon--onedrive:before {
    content: '\e016';
}

.ms-Icon--office365Preview:before {
    content: '\e057';
}

.ms-Icon--sharepoint:before {
    content: '\e072';
}

.ms-Icon--skype:before {
    content: '\e199';
}

.ms-Icon--aad:before {
    content: '\e20d';
}

.ms-Icon--exchange:before {
    content: '\e224';
}

.ms-Icon--touch:before {
    content: '\e104';
}

.ms-Icon--lock:before {
    content: '\e038';
}

.ms-Icon--mailSend:before {
    content: '\e024';
}

.ms-Icon--office:before {
    content: '\e055';
}

.ms-Icon--dynamicsSMB:before {
    content: '\e32c';
}
.ms-Icon--peopleCheck:before {
    content: '\e242';
}
.ms-Icon--personRemove:before {
    content: '\e09e';
}
.ms-Icon--graph:before {
    content: '\e162';
}

.ms-Icon--teams:before {
    content: '\e379';
}

.ms-Icon--yammer:before {
    content: '\e064';
}

.ms-Icon--defenderAtp:before {
    content: '\e350';
}

.ms-Icon--officeThreshold:before {
    content: '\e055';
}

.ms-Icon--arrowRight:before {
    content: '\e04a';
}

.ms-Icon--money:before {
    content: '\e161';
}

.ms-Icon--ticket:before {
    content: '\e299';
}

.ms-Icon--subscribe:before {
    content: '\e09c';
}

.ms-Icon--partner:before {
    content: '\e080';
}

.ms-Icon--arrowUp:before {
    content: '\e047';
}

.ms-Icon--chevronLeft:before {
    content: '\e089';
}

.ms-Icon--chevronRight:before {
    content: '\e08a';
}

.ms-Icon--oneNoteEdu:before {
    content: '\e280';
}

/*============ OFFICE 365 ICONS END===========
=================================================================*/




/*============ OFFICE 365 ICONS ALL START===========
=================================================================*/

@font-face {
    font-family: 'office365iconsall';
    src: url('../fonts/office-icons/O365-icons.woff2') format("woff2"), 
         url('../fonts/office-icons/O365-icons.woff') format("woff"), 
         url('../fonts/office-icons/O365-icons.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="ms-Icons-"]:before, [class*=" ms-Icons-"]:before,
[class^="office365-icon-"]:before, [class*=" office365-icon-"]:before, [class^="office365-icon-"]:after, [class*=" office365-icon-"]:after  {
    font-family: "office365iconsall";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-align: center;
    font-variant: normal;
    text-transform: none;
}
.ms-Icons-TeamsLogoInverse:before {
    content: '\F27A';
}

.ms-Icons-PowerBILogo::before {
    content: '\EA1E';
}

.ms-Icons--YammerLogo::before {
    content: '\ED19';
}

.ms-Icons--DefectSolid::before {
    content: '\F449';
}

.ms-Icons--EmojiDisappointed::before {
    content: '\EA88';
}

.ms-Icons--OfficeLogo::before {
    content: '\EB6E';
}

.ms-Icons--Completed::before {
    content: '\E930';
}

.ms-Icons--Permissions::before {
    content: '\E8D7';
}

.ms-Icons--PermissionsSolid::before {
    content: '\F349';
}

.ms-Icons--StreamLogo::before {
    content: '\F329';
}

.ms-Icons--Tag::before {
    content: '\E8EC';
}

.ms-Icons--World::before {
    content: '\E909';
}

.ms-Icons--HeartFill::before {
    content: '\EB52';
}

.ms-Icons--Emoji2::before {
    content: '\E76E';
}

.ms-Icons--Info::before {
    content: '\E946';
}
/*============ OFFICE 365 ICONS ALL END===========
=================================================================*/



/*========== FONT FAMILY CLASS ==========*/
.robo-light {
    font-family: roboto-light,Arial, sans-serif;
}

.robo-regular {
    font-family: roboto-regular,Arial, sans-serif;
}

.robo-medium {
    font-family: roboto-medium,Arial, sans-serif;
}

.robo-bold {
    font-family: roboto-bold,Arial, sans-serif;
}

.robo-thin {
    font-family: roboto-thin,Arial, sans-serif;
}

.robo {
    font-family: roboto,Arial, sans-serif;
}

.open-sans-regular {
    font-family: open-sans-regular,Arial, sans-serif;
}

.open-sans-light {
    font-family: open-sans-light,Arial, sans-serif;
}

.open-sans-bold {
    font-family: open-sans-bold,Arial, sans-serif;
}

.open-sans-medium {
    font-family: open-sans-semibold,Arial, sans-serif;
}

/* font size */
.f1 {
    font-size: 1em;
}

.f2 {
    font-size: 2em;
}

.f1-5 {
    font-size: 1.5em;
}

.f0 {
    font-size: 0px;
}

.f11 {
    font-size: 11px;
}

.f12 {
    font-size: 12px;
}

.f13 {
    font-size: 13px;
}

.f14 {
    font-size: 14px;
}

.f15 {
    font-size: 15px;
}

.f16 {
    font-size: 16px;
}

.f17 {
    font-size: 17px;
}

.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}

.f24 {
    font-size: 24px;
}

.f26 {
    font-size: 26px;
}

.f28 {
    font-size: 28px;
}

.f30 {
    font-size: 30px;
}

.f35 {
    font-size: 35px;
}

.f40 {
    font-size: 40px;
}

.f45 {
    font-size: 45px;
}

/* Margins    */
.m0 {
    margin: 0px;
}

.mt0 {
    margin-top: 0px;
}

.mb0 {
    margin-bottom: 0px;
}

.m5 {
    margin: 5px;
}

.mt5 {
    margin-top: 5px;
}

.mr5 {
    margin-right: 5px;
}

.mb5 {
    margin-bottom: 5px;
}

.ml5 {
    margin-left: 5px;
}

.m10 {
    margin: 10px;
}

.mt10 {
    margin-top: 10px;
}

.mr10 {
    margin-right: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.ml10 {
    margin-left: 10px;
}

.m15 {
    margin: 15px;
}

.mt15 {
    margin-top: 15px;
}

.mr15 {
    margin-right: 15px;
}

.mb15 {
    margin-bottom: 15px;
}

.ml15 {
    margin-left: 15px;
}

.mt18 {
    margin-top: 18px;
}

.m20 {
    margin: 20px;
}

.mt20 {
    margin-top: 20px;
}

.ml20 {
    margin-left: 20px;
}

.mb20 {
    margin-bottom: 20px;
}
.mb30{
    margin-bottom: 30px;
}
.mb50 {
    margin-bottom: 50px;
}

.mr20 {
    margin-right: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.ml30 {
    margin-left: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt40 {
    margin-top: 40px;
}
.mt45 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml45 {
    margin-left: 45px;
}

.mr30 {
    margin-right: 30px;
}

.ml60 {
    margin-left: 60px;
}

.ml90 {
    margin-left: 90px;
}

.ml210 {
    margin-left: 210px;
}

/* vertical align */

.v_align_m {
    vertical-align: middle;
}

.v_align_t {
    vertical-align: top;
}

.v_align_b {
    vertical-align: bottom;
}


/* text align */

.t_align_c {
    text-align: center;
}

.t_align_r {
    text-align: right;
}

.t_align_l {
    text-align: left;
}

/*color*/

.red {
    color: red;
}

.blue {
    color: #0081c4;
}

/* box shadow */
.bx-shw-l1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.14), 0 0px 1px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.14), 0 0px 1px -1px rgba(0, 0, 0, 0.12);
}

/* paddings */
.p5 {
    padding: 5px;
}

.pt5 {
    padding-top: 5px;
}

.pr5 {
    padding-right: 5px;
}

.pb5 {
    padding-bottom: 5px;
}

.pl5 {
    padding-left: 5px;
}

.p10 {
    padding: 10px;
}

.pt10 {
    padding-top: 10px;
}

.pr10 {
    padding-right: 10px;
}

.pb10 {
    padding-bottom: 10px;
}

.pl10 {
    padding-left: 10px;
}

.p15 {
    padding: 15px;
}

.pt15 {
    padding-top: 15px;
}

.pr15 {
    padding-right: 15px;
}

.pb15 {
    padding-bottom: 15px;
}

.pl15 {
    padding-left: 15px;
}

.p20 {
    padding: 20px;
}

.pt20 {
    padding-top: 20px;
}

.pl20 {
    padding-left: 20px;
}

.pr20 {
    padding-right: 20px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb500 {
    padding-bottom: 500px;
}

.pr30 {
    padding-right: 30px;
}

/* max width */
.max-w-auto {
    max-width: calc(100% - 20px);
}

.mw50 {
    max-width: 50px;
}

.max-w350 {
    max-width: 350px;
}

.max-w300 {
    max-width: 300px;
}

.max-w550 {
    max-width: 550px;
}

/* line height */
.lh0-4 {
    line-height: 0.4em;
}

.lh1 {
    line-height: 1em;
}

.lh1-2 {
    line-height: 1.2em;
}

.lh1-3 {
    line-height: 1.3em;
}

.lh1-4 {
    line-height: 1.4em;
}

.lh1-5 {
    line-height: 1.5em;
}

.lh1-6 {
    line-height: 1.6em;
}

.lh-nr {
    line-height: normal;
}

/* min width */
.min-w100 {
    min-width: 100px;
}

.min-w75 {
    min-width: 75px;
}

/* text transform */
.caps {
    text-transform: uppercase;
}

/* z-index */

.znl-1 {
    z-index: 1;
}

.znl-2 {
    z-index: 2;
}

.znl-3 {
    z-index: 3;
}

.znl-4 {
    z-index: 5;
}

.znl-5 {
    z-index: 10;
}

/*text color */

.red-text {
    color: indianred;
}

.grey-text {
    color: darkgrey;
}

.grey-text1 {
    color: grey;
}

.green-text {
    color: green;
}

.white-txt {
    color: white;
}

.bl-txt {
    color: black;
}

.web-link-hover-color:hover {
    color: #048c9e;
    text-decoration: underline;
}

/* background colors */

.bg-white {
    background-color: white;
}

.bg-smoke {
    background-color: whitesmoke;
}

.bg-grey {
    background-color: grey;
}

.bg-alice {
    background-color: #d6eafb;
}

/* table view */

.tbl-view {
    display: table;
}

.tbl-col {
    display: table-cell;
}

.tbl-row {
    display: table-row;
}

.tbl-h {
    display: table-header-group;
}

.tbl-f {
    display: table-footer-group;
}

.disp-inline-imp {
    display: inline-block !important;
}

.disp-none {
    display: none;
}

.disp-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* zero count items */
.items-disabled {
    opacity: 0.6;
    cursor: default;
}

/* default hover effect */
.df-hover:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

.df-hover1:hover {
    background-color: whitesmoke;
    cursor: pointer;
    border: 1px solid #eeeeee;
}
/* text overflow - */

.txt-flow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
}

.txt-flow-r {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

/* cursor points  */
.df-cpntr {
    cursor: default;
}

.cpntr {
    cursor: pointer;
}

.disp_inline {
    display: inline-block;
}

.pos_rel {
    position: relative;
}

.popup-parent {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.highlighted-title{
    color: rgb(157, 255, 125);
}
.highlight-white-bg{
    /*color: #24a345;
    color: #00c3ba;*/
    color: #dd9511;
}
a.interlinking{
    /* color: cyan; */
    color: #00d0ff;
    text-decoration: underline currentcolor;
}

a.interlinking-white-bg{
    /*color: #1346ff;*/
    /* color: #14b5af; */
    color: #00a4d7;
    text-decoration: underline currentcolor;
}

.link {
    text-decoration: underline;
    color: #0AB6D0;
}

.no-wrap {
    white-space: nowrap;
}

.un-line {
    text-decoration: underline;
}

/* css checkbox */
/* The container */
.container {
    width: inherit !important;
    position: relative;
    padding: inherit !important;
    margin: inherit !important;
}

.check-box input:checked ~ .checkmark {
    background-color: gainsboro;
}

.check-box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.check-box .checkmark {
    content: "";
    padding: 0px 0px;
    left: 0px;
    top: 22px;
    height: 20px;
    width: 38px;
    position: absolute;
    background-color: gainsboro;
}

    .check-box .checkmark::after {
        content: "";
        position: absolute;
        display: none;
    }

.check-box input:checked ~ .checkmark::after {
    display: block;
}

.check-box .checkmark::after {
    left: 16px;
    top: 0px;
    width: 7px;
    height: 16px;
    border: solid green;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(43deg);
    -ms-transform: rotate(43deg);
    transform: rotate(43deg);
}

label {
    content: "";
    font-weight: normal !important;
}

.draw_line {
    width: 100%;
    font-size: 20px;
    color: inherit;
    font-family: roboto-regular,Arial, sans-serif;
}

    .draw_line:after {
        content: ' ';
        margin-left: 10px;
        border-bottom: 1px solid;
        border-color: gainsboro;
        display: inline-block;
        width: 100%;
        margin-right: -100%;
        vertical-align: middle;
}

/*Scroll top icon style start*/
#scroll-top{
    position: fixed;
    bottom: 50px;
    right: 20px;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    display: none;
    z-index: 11;
    cursor: pointer;
    padding: 8px 11px;
    background-color: rgba(0, 139, 139, 0.5);
    border-radius: 50%; 
    background: linear-gradient(273deg, #2ac2d4, #1094cc);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0 ,0.1);
    transition: transform 0.2s ease-in-out;
    overflow: hidden;
}

#scroll-top i{
    display: inline;
}
#scroll-top:hover{
    transform: translateY(-5px)
}

/*Scroll top icon style end*/


/* =========== KEY FRAME ANIMATIONS ============= */
.fadeIn {
    animation: fadeIn 0.5s ease-in-out;
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0.001;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leftToRight{
	from{ opacity: 0.001;transform: translateX(-100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@-webkit-keyframes leftToRight{
	from{ opacity: 0.001;transform: translateX(-100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@-o-keyframes leftToRight{
	from{ opacity: 0.001;transform: translateX(-100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@keyframes rightToLeft{
	from{ opacity: 0.001;transform: translateX(100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@-webkit-keyframes rightToLeft{
	from{ opacity: 0.001;transform: translateX(100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@-moz-keyframes rightToLeft{
	from{ opacity: 0.001;transform: translateX(100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@-o-keyframes rightToLeft{
	from{ opacity: 0.001;transform: translateX(100px)}
	to{ opacity: 1;transform: translateX(0)}
}

@keyframes fadeIn{
	from { opacity: 0.001; }
	to{ opacity: 1; }
}

@-webkit-keyframes fadeIn{
	from { opacity: 0.001; }
	to{ opacity: 1; }
}

@-moz-keyframes fadeIn{
	from { opacity: 0.001; }
	to{ opacity: 1; }
}

@-o-keyframes fadeIn{
	from { opacity: 0.001; }
	to{ opacity: 1; }
}

/* =========== KEY FRAME ANIMATIONS ============= */



/*============= NEW COMMON CSS CLASS START ===========*/

.droid-section-main-title {
    font-size: 2.2em;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

.droid-section-main-title-desc {
    font-size: 1.1em;
    padding: 5px 0px 5px 20px;
    line-height: 1.6em;
}

.droid-section-sub-title {
    font-size: 1.2em;
    margin-bottom: 8px;
    letter-spacing: 0.25px;
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

.droid-section-sub-title-desc {
    font-size: 1.05em;
    line-height: 1.6em;
}

.droid-section-outer-wrapper {
    padding: 40px 15px;
    text-align: center;
}

.droid-main-content-wrapper {
    padding: 20px 0px;
    text-align: center;
}

.droid-btn {
    display: inline-block;
    vertical-align: middle;
    color: white;
    cursor: pointer;
    padding: 6px 12px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease-in-out;
}

.droid-bgc-teal-btn {
    background-color: #17b2b2;
}

.droid-bgc-teal-btn:hover {
    background-color: #008b8b;
}

.droid-bgc-orange-btn {
    background-color: #ff6b00;
}

.droid-bgc-orange-btn:hover {
    background-color: #dd5d02;
}

.droid-container {
    max-width: 1400px;
    margin: 0 auto;
}

.droid-banner-title-cntr { /*only for center banner title*/
    font-size: 2.7em;
    margin-bottom: 15px;
    letter-spacing: 0.2px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}
.droid-banner-desc-cntr{
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
}

.droid-banner-title { /*only for lhs banner layout title*/
    padding: 20px 0px;
    font-size: 2.3em;
    line-height: 1.4em;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

.droid-banner-lg-title {
    font-size: 1.2em;
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

.droid-banner-desc {
    font-size: 1.1em;
    line-height: 1.6em;
    margin: 30px 0px;
}

.droid-main-header-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 10px;
}


.poppins-light {
    font-family: poppins-light, Arial, Helvetica, sans-serif;
}

.poppins-regular {
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}

.poppins-medium {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

.poppins-semibold {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

.poppins-bold {
    font-family: poppins-bold, Arial, Helvetica, sans-serif;
}

.montserrat-regular{
    font-family: montserrat regular, Arial, Helvetica, sans-serif;
}
.montserrat-semibold{
    font-family: montserrat semibold, Arial, Helvetica, sans-serif;
}

.work-sans-regular {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
}

.work-sans-medium {
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
}

/*============= NEW COMMON CSS CLASS END ===========*/

/* Logo's */
.m365-icon-azure:before{ content: url('/images/m365-new-icons/azure-new.svg');}
.m365-icon-security:before{ content: url('/images/m365-new-icons/security-new.svg');}
.m365-icon-exchange:before{ content: url('/images/m365-new-icons/exchange-new.svg');}
.m365-icon-email:before{ content: url('/images/m365-new-icons/email-purple.svg');}
.m365-icon-outlook:before{ content: url('/images/m365-new-icons/outlook-new.svg');}
.m365-icon-teams:before{ content: url('/images/m365-new-icons/teams-new.svg');}
.m365-icon-sharepoint:before{ content: url('/images/m365-new-icons/sharepoint-new.svg');}
.m365-icon-onedrive:before{ content: url('/images/m365-new-icons/onedrive-new.svg');}
.m365-icon-powerBI:before{ content: url('/images/m365-new-icons/powerBI-new.svg');}
.m365-icon-yammer:before{ content: url('/images/m365-new-icons/yammer-new.svg');}
.m365-icon-stream:before{ content: url('/images/m365-new-icons/stream-new.svg');}
.m365-icon-office-old:before{ content: url('/images/m365-new-icons/office-new.svg');}
.m365-icon-office:before{ content: url('/images/m365-new-icons/new-office.svg');}
.m365-icon-skype:before{ content: url('/images/m365-new-icons/skype-new.svg');}
.m365-icon-usage-reporting:before{ content: url('/images/m365-new-icons/usage-reporting-new.svg');}
.m365-icon-audit-sync:before{content: url('/images/m365-new-icons/audit-sync.svg');}
.ad-robot-head::before{ content: url('/images/m365-new-icons/robot-head.svg');}

/*active directory icons */

.ad-icon-m-letter:before{ content: url('/images/ad-new-icons/m-letter.svg');}
.ad-icon-user:before{ content: url('/images/ad-new-icons/user.svg');}
.ad-icon-computer:before{ content: url('/images/ad-new-icons/computer.svg');}
.ad-icon-group:before{ content: url('/images/ad-new-icons/group.svg');}
.ad-icon-contact:before{ content: url('/images/ad-new-icons/contact.svg');}
.ad-icon-active-directory:before{ content: url('/images/ad-new-icons/active-directory.svg');}
.custom-icon-active-directory-filled:before{ content: url('/images/ad-new-icons/active-directory.svg');}
.ad-icon-active-directory-other:before{ content: url('/images/ad-new-icons/active-directory-other.svg');}
.ad-icon-activedirectory:before{ content: url('/images/ad-new-icons/activedirectory.svg');}
.ad-icon-active-directory-new:before{ content: url('/images/ad-new-icons/active-directory-new.svg');}
.ad-icon-domain:before{ content: url('/images/ad-new-icons/domain.svg');}
.ad-icon-active-directory-audit:before{ content: url('/images/ad-new-icons/active-directory-audit.svg');}
.ad-icon-active-directory-insights:before{ content: url('/images/ad-new-icons/active-directory-insights.svg');}

/* Error Guides Svg Icons */
.guides-stacked-books:before{ content:url('/images/error-images/guides.svg');}
.guides-mail-exclamation:before{ content:url('/images/error-images/mail-exclamation.svg');}
.guides-powershell-errors:before{ content:url('/images/error-images/powershell.svg');}
.guides-ui-errors:before{ content:url('/images/error-images/UI.svg');}
.guides-error-codes:before{ content:url('/images/m365-new-icons/entra.svg');}


/* Next Page Link Start */

.main-footer.show-next{
    position: relative;
}

/*.main-footer:not(.show-next) .go-to-next-container{
    display: none;
}*/



.go-to-next-wrapper {
    position: absolute;
    top: -35px;
    right: 35px;
    font-size: 13px;
    /* width: 100%; */
    background: transparent;
    text-align: right;
}
.go-to-next-container {
    font-family: poppins-regular;
    font-size: 1em;
    /*color: aliceblue;*/
    /* color: aqua; */
    color: #00d0ff;
    opacity: 0.8;
    display: flex;
    justify-content: flex-end;
    padding: 0px 10px;
    align-items: baseline;
}
.go-to-next-container:hover{
    /*color: aliceblue;*/
    color: #00d0ff;
    opacity: 1;
}
.go-to-next-container:active{
    opacity:0.75;
}
.go-to-next-container p{
    text-overflow: ellipsis;
    /* width: 90%; */
    white-space: nowrap;
    overflow: hidden;
}
.go-to-title {
    font-family: poppins-semibold;
    font-size: 1.1em;
    text-decoration: underline;
}
.go-to-next-icon {
    font-size: 11px;
    margin-left: 5px;
}

@media(max-width:768px){
    .go-to-next-wrapper {
        right: 15px;
    }
    .go-to-next-container{
        font-size: 0.9em;
    }
}
@media(max-width:450px){
    .go-to-next-wrapper {
        right: 15px;
    }
    .go-to-next-container{
        font-size: 0.85em;
    }
}

/* Next Page Link End */


/* ==============  Bg-loader Animation Starts here  ============== */

.load-anime {
    position: absolute;
    top: 100px;
    opacity: 0.13;
}

.loader {
    width: 40px;
    height: 40px;
    color: #f03355;
    background: conic-gradient(from -45deg at top 20px left 50%, #0000, currentColor 1deg 90deg, #0000 91deg), conic-gradient(from 45deg at right 20px top 50%, #0000, currentColor 1deg 90deg, #0000 91deg), conic-gradient(from 135deg at bottom 20px left 50%, #0000, currentColor 1deg 90deg, #0000 91deg), conic-gradient(from -135deg at left 20px top 50%, #0000, currentColor 1deg 90deg, #0000 91deg);
    animation: l4 5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes l4 {
    50% {
        width: 60px;
        height: 60px;
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.loader1 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}

    .loader1:before,
    .loader1:after {
        content: "";
        grid-area: 1/1;
        border-radius: 50%;
        background: #f03355;
        -webkit-mask: repeating-linear-gradient(#000 0 5px,#0000 0 10px);
        animation: l35 5s infinite;
    }

    .loader1:after {
        -webkit-mask: repeating-linear-gradient(#0000 0 5px,#000 0 10px);
        --s: -1;
    }

@keyframes l35 {
    0%, 10% {
        transform: translate(0) rotate(0)
    }

    35% {
        transform: translate(calc(var(--s,1)*50%)) rotate(0)
    }

    66% {
        transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))
    }

    90%, 100% {
        transform: translate(0) rotate(calc(var(--s,1)*180deg))
    }
}

.loader2 {
    --c: no-repeat linear-gradient(orange 0 0);
    background: var(--c) 0 0, var(--c) 0 50%, var(--c) 0 100%, var(--c) 50% 0, var(--c) 50% 50%, var(--c) 50% 100%, var(--c) 100% 0, var(--c) 100% 50%, var(--c) 100% 100%;
    background-size: 16px 16px;
    animation: l31 2s infinite alternate;
}

@keyframes l31 {
    0%,20% {
        width: 45px;
        height: 45px
    }

    90%,100% {
        width: 65px;
        height: 65px
    }
}


.loader3 {
    width: 60px;
    aspect-ratio: 1.154;
    --c: #0000,#25b09b 2deg 59deg,#0000 61deg;
    --c1: conic-gradient(from 149deg at top,var(--c));
    --c2: conic-gradient(from -31deg at bottom,var(--c));
    background: var(--c1) top, var(--c1) bottom right, var(--c2) bottom, var(--c1) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    animation: l37 3s infinite;
}

@keyframes l37 {
    80%,100% {
        background-position: bottom right,bottom left,bottom,top
    }
}


.loader4 {
    width: 40px;
    aspect-ratio: 1;
    display: flex;
}

    .loader4:before,
    .loader4:after {
        content: "";
        flex: 1;
        background: #f03355;
        animation: l21 2s infinite;
        border-radius: 100px 0 0 100px;
        transform-origin: top right;
        transform: translateY(calc(var(--s,1)*0%)) rotate(0);
    }

    .loader4:after {
        transform-origin: bottom left;
        border-radius: 0 100px 100px 0;
        --s: -1;
    }

@keyframes l21 {
    33% {
        transform: translate(0,calc(var(--s,1)*50%)) rotate(0)
    }

    66% {
        transform: translate(0,calc(var(--s,1)*50%)) rotate(-90deg)
    }

    90%, 100% {
        transform: translate(calc(var(--s,1)*-100%),calc(var(--s,1)*50%)) rotate(-90deg)
    }
}


.loader5 {
    width: 40px;
    height: 20px;
    background: orange;
    /*position: relative;*/
    animation: l19-0 1.5s infinite linear;
}

    .loader5:before,
    .loader5:after {
        content: "";
        position: absolute;
        background: inherit;
        bottom: 100%;
        width: 50%;
        height: 100%;
        animation: inherit;
        animation-name: l19-1;
    }

    .loader5:before {
        left: 0;
        --s: -1,1;
    }

    .loader5:after {
        right: 0;
    }

@keyframes l19-0 {
    0%,30% {
        transform: translateY(0) scaleY(1)
    }

    49.99% {
        transform: translateY(-50%) scaleY(1)
    }

    50% {
        transform: translateY(-50%) scaleY(-1)
    }

    70%,100% {
        transform: translateY(-100%) scaleY(-1)
    }
}

@keyframes l19-1 {
    0%,10%,90%,100% {
        transform: scale(var(--s,1)) translate(0)
    }

    30%,70% {
        transform: scale(var(--s,1)) translate(20px)
    }

    50% {
        transform: scale(var(--s,1)) translate(20px,20px)
    }
}


.loader6 {
    height: 45px;
    --c: no-repeat linear-gradient(#514b82 0 0);
    background: var(--c) left, var(--c) center, var(--c) right;
    background-size: 16px 100%;
    animation: l33-1 2s infinite, l33-2 2s infinite;
}

@keyframes l33-1 {
    0%,100% {
        width: 45px
    }

    35%,65% {
        width: 65px
    }
}

@keyframes l33-2 {
    0%,40% {
        transform: rotate(0)
    }

    60%,100% {
        transform: rotate(90deg)
    }
}

.loader7 {
    width: 40px;
    height: 40px;
    display: grid;
    animation: l6-0 2s infinite linear;
}

    .loader7:before,
    .loader7:after {
        content: "";
        grid-area: 1/1;
        background: #514b82;
        animation: l6-1 2s infinite linear, l6-2 2s infinite linear;
    }

    .loader7:after {
        --s: -1;
        animation-direction: reverse;
    }

@keyframes l6-0 {
    0%,9%,91%,100% {
        background: #514b82
    }

    10%,90% {
        background: #0000
    }
}

@keyframes l6-1 {
    0%,33% {
        clip-path: polygon(0 0,50% 100%,100% 0,100% 100%,0 100%)
    }

    66%,100% {
        clip-path: polygon(50% 0,50% 100%,50% 0,100% 100%,0 100%)
    }
}

@keyframes l6-2 {
    0%,10%,90%,100% {
        transform: scale(var(--s,1)) translateY(0)
    }

    33%,66% {
        transform: scale(var(--s,1)) translateY(50%)
    }
}


.loader8 {
    --c: no-repeat linear-gradient(orange 0 0);
    background: var(--c),var(--c),var(--c), var(--c),var(--c),var(--c), var(--c),var(--c),var(--c);
    background-size: 16px 16px;
    animation: l32-1 3s infinite, l32-2 3s infinite;
}

@keyframes l32-1 {
    0%,100% {
        width: 45px;
        height: 45px
    }

    35%,65% {
        width: 65px;
        height: 65px
    }
}

@keyframes l32-2 {
    0%,40% {
        background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0, 50% 50%
    }

    60%,100% {
        background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0, 50% 50%
    }
}

/* ==============  Bg-loader Animation Ends here  ============== */