:root {
	--scgj-white: rgb(256, 256, 256);
    --scgj-black: rgb(0, 0, 0);
    --scgj-grey: rgb(169, 169, 169);
    --text-dark-grey: rgb(0,0,0);
    --ui-grid-shade:rgb(252, 252, 252);
    --error-message-background: #ffeef0;
    --error-color: #d0454c;
    --success-message-background: #dff0d8;
    --success-color: #3c763d;
    --scgj-grey-shade1 : slategrey;
    --login-background-light-grey:rgb(248, 248,248);
	--scgj-light-blue-background:#f8f8f8;
    --scgj-dark-blue: rgb(68,84,106);
    --ui-grid-shade:rgb(252, 252, 252);
    --scgj-text-white: rgb(256, 256, 256);
    --scgj-light-grey-shade1:rgb(242, 242,242);
    --scgj-light-red:rgb(135, 137, 137);
    --scgj-light-grey-shade3:rgb(217,217,217);
    --error-message-background: #ffeef0;
    --error-color: #d0454c;
    --success-message-background: #dff0d8;
    --success-color: #3c763d;
    --processing-message-backgournd: lightgoldenrodyellow;
    --processing-color: #FFD700;
    --light-blue:rgb(0,125,254);
    --status-blue:rgb(0, 85, 172);
     --set-bg-dark-orange: rgb(181, 68, 7);
     --set-light-green:rgb(0,176,80);
     --set-dark-green:#36821a;
     --set-orange: rgb(245,141,78);
    --success-message-background: #dff0d8;
    --success-color: #3c763d;  
    --error-color: #a94442;
	--error-box-color: #f2dede;
	--error-border-color: #ebccd1;
	 --scgj-grey-color:rgb(96,96,96);
	 --scgj-dim-grey-color:rgb(80,80,80);
}
.btn{
	font-size:1em;
	color: var(--scgj-white);
}
html{
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
body{
	font-family: 'Roboto', sans-serif;
	color: var(--text-dark-grey);
	font-weight: 300;
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

.update-password-card{
    margin-top: 10%;
    border: 1px solid var(--scgj-grey);
    background-color: var(--scgj-white);
    margin-left: auto;
    margin-right: auto;
}
.submit-btn{
	display: block;
    width: 10em;
    border-radius: 6px;
    color: var(--scgj-white);
    background-color: var(--scgj-dark-blue);
    padding: 6px;
    cursor: pointer;
    border: none;
}

.form-group{
	margin-left: auto;
    margin-right: auto;
}

.verify-user-heading{
	font-size: 2em;
	font-weight: 500;
	margin-bottom: 1em;
}






h1 {
  line-height: 1.25;
  margin: 2em 0 0;
}
p {
  margin: .5em 0;
}

#switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: fit-content;
}
#switcher li {
  float: right;
  width: 30px;
  height: 30px;
  margin: 0 15px 15px 0;
  border-radius: 30px;
  border: 3px solid black;
}

#grayButton {
  background: #ffff00;
}
#whiteButton {
  background: #ff33ff;
}
#blueButton {
  background: blue;
}
#limeButton {
  background: #00FF00;
}
#blackButton {
  background: #000000;
}
.accessbilityFeaturesDiv {
	padding: 0.5em;
	background-color: var(--scgj-dark-blues);
	font-size: 1em;
}
 .activeNavItem{
     background: var(--scgj-dim-grey-color);
     border-left: 6px solid var (--scgj-grey-color);
     width: 107%;
     position: relative;
     margin-left: -2rem !important;
     padding: 0.4rem 0;
     padding-left: 1.1rem;
}
.screenReaderButton {
	border: none;
    background: none;
    color: var(--login-background-light-grey);
/** margin-left: 80%; */
    cursor: pointer;
}
.screenReaderButton:focus{
	border: 2px solid var(--login-background-light-grey);
}
.screenReaderButton:active{
	border: none;
}
label.accessibleOption{
	font-weight: bold;
	color: var(--login-background-light-grey);
}
button.accessibleOption{
	background: var(--scgj-white);
	color: var(--scgj-black);
}
button.accessibleOption:hover, button.accessibleOption:focus, button.accessibleOption:active{
	outline-width: 1px;
}
.otherPortalsHeading{
	font-size:1.75em;
}
.btn{
	font-size:1em;
	color: var(--scgj-white);
}
input, textarea, select {
    padding: 8px 10px !important;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--scgj-grey)!important;
    color: var(--scgj-black) !important;
    background-color: var(--scgj-white) !important;
}
.ui-grid-row:nth-child(odd) .ui-grid-cell{
	background-color: var(--ui-grid-shade);
}
.contactUsButton {
    border: none;
    background: var(--scgj-dark-purple);
    color: var(--scgj-white);
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 400;
    margin-top: 10%;
    cursor: pointer;
}

.contactUsButton:focus, .contactUsButton:hover {
    border: 2px solid var(--scgj-dark-purple);
    background: none;
    color: var(--scgj-dark-purple);
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 600;
    margin-top: 10%;
    cursor: pointer;
}

.backButton {
	border: none;
	background: none;
	margin-bottom: 5%;
    margin-left: -2%;
}

.backButton:focus, .backButton:hover {
	border: 2px solid var(--text-dark-grey);
	background: none;
	margin-bottom: 5%;
    margin-left: -2%;
}

.backButtonSET {
	border: none;
	background: none;
	margin-bottom: 5%;
    margin-left: -2%;
}

.backButtonSET:focus, .backButtonSET:hover {
	border: 2px solid var(--text-dark-grey);
	background: none;
	margin-bottom: 5%;
    margin-left: -2%;
}
.dropdown-menu li{
	background-color: var(--scgj-white);
	color: var(--scgj-black);
}
.dropdown-menu li:active, .dropdown-menu li:hover
{
	background-color:var(--scgj-light-purple);
	border: 1px solid var(--scgj-grey);
}

.dropdown-menu li.active
{
	background-color:var(--scgj-light-purple);
}

.dropdown-menu li
{
	padding:0.5%;
}

.multiple-options{
	padding: 3%;
    border: 1px solid var(--scgj-light-purple);
    border-radius: 5px;
}
.removeDisabilityButton
{
	position: absolute;
    right: 2%;
    top: 0;
    border: 0px;
    background-color: transparent;
    cursor: pointer !important;
}
.removeDisabilityButton:focus{
	outline: 1px solid;
}
.multiple-options-label{
	background: var(--scgj-white);
	font-size: 1em;
    width: auto;
    margin-bottom: 0;
}
.disabilityTypeTab
{
	width: 100%;
    padding: 2% 7%;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid var(--scgj-grey);
    margin: 1%;
    display:inline-block;
    background-color: var(--scgj-light-purple);
    color: var(--scgj-black);
    position: relative;
}
.disabilityTypeTab i{
	color: var(--scgj-black);
}
input[type="radio"], input[type="checkbox"]{
	width:auto;
}

input[type=radio]:checked + *{
	color: var(--scgj-dark-blue);
}

input[type="radio" i]:focus, input[type="checkbox"]:focus {
    outline-offset: 2px;
    outline-width: 1px;
}
input:focus, textarea:focus, select:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid var(--scgj-dark-blue) !important;
    outline-width: 0;
}

button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0;
}

.card {
    border-radius: 0;
    border: none;
    box-shadow: 0px 1px 2px 0px var(--scgj-grey);
    background: var(--scgj-white);
}
.card1 {
    width: 50%;
    padding: 30px 30px 10px 30px;
}

.card2 {
    width: 50%;
    /**background-image: linear-gradient(to right, #FFD54F, #D500F9)*/
    background-color: var(--scgj-orange-blur);
    color: var(--text-dark-grey);
}

#logo {
    height: 60px;
}

.heading {
    margin-bottom: 60px !important;
}

::placeholder {
    color: var(--scgj-black) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--scgj-black) !important;
}

::-ms-input-placeholder {
    color: var(--scgj-black) !important;
}

.msg-info {
    padding-left: 15px;
    margin-bottom: 30px;
}

.btn-color {
    border-radius: 50px;
    color: var(--scgj-white);
    background-color: var(--scgj-dark-blue);
    padding: 12px;
    cursor: pointer;
    border: 2px solid var(--scgj-dark-blue) !important;
    margin-top: 20px;
}

.btn-color:hover, .btn-color:focus {
    color: var(--scgj-dark-blue);
    background-color: var(--scgj-white);
    font-weight: 600;
}

.btn-white {
    border-radius: 50px;
    color: var(--scgj-dark-blue);
    background-color: var(--scgj-white);
    padding: 8px 40px;
    cursor: pointer;
    border: 2px solid var(--scgj-dark-blue) !important;
}

.btn-white:hover, .btn-white:focus {
    color: var(--scgj-white);
    background-color: var(--scgj-dark-blue);
    font-weight: 600;
}

a {
    color: var(--scgj-black);
}

a:hover {
    color: var(--scgj-black);
}
.controlPasswordVisibility {
    position: absolute;
    top: 0%;
    background: none;
    cursor: pointer !important;
    left: 80%;
    color: var(--scgj-black);
}
.controlPasswordVisibility:hover, .controlPasswordVisibility:focus, .controlPasswordVisibility:active{
	color: var(--scgj-black);
}
.registrationPasswordSectionDiv{
	position:relative;
}
.controlPasswordVisibilityLogin
{
	position: absolute;
    top: 0%;
    background: none;
    right: 5%;
    cursor: pointer !important;
    color: var(--scgj-black);
}
.passwordSectionDiv{
	position:relative;
}
.controlPasswordVisibiltyResetPassword
 {
 	padding-right: 10px;
    background: none;
    cursor: pointer !important;
    color: var(--scgj-black);
    font-size: 1.3em;
}

.controlPasswordVisibilityResetPassword
 {
    position: absolute;
    top: 19%;
    background: none;
    right: 5%;
    cursor: pointer !important;
    color: var(--scgj-black);
    padding-right: 10px;
    font-size: 1.3em;
}

.controlPasswordVisibilityResetPasswordUpdated
{
	position: absolute;
    top: 68%;
    background: none;
    right: 5%;
    cursor: pointer !important;
    color: var(--scgj-black);
    padding-right: 10px;
    font-size: 1.3em;
}
.bottom {
    width: 100%;
    margin-top: 20px !important;
}

.sm-text {
    font-size: 0.94em;
}
.portal-thumbnail{
	background: var(--scgj-white);
    padding: 0.5%;
    text-align: center;
    display: inline-block !important;
    width: 30%;
    /* margin-top: 5%; */
    border-radius: 2%;
    margin: 1%;
    margin-top: 5%;
}

.applicationHyperLink
{
	margin-top:2%;
}

.activate-account-thumbnail {
    background: var(--scgj-white);
    padding: 0.5%;
    text-align: center;
    display: inline-block !important;
    width: 30%;
    /* margin-top: 5%; */
    border-radius: 2%;
    margin: 1%;
    margin-top: 4%;
}
.activate-account-thumbnail img{
	height: 20vh;
	width: 15vw;
}

.otherDisabilityType
{
	margin-top:5%;
	cursor:text;
}
.portal-thumbnail img{
	height: 106px;
	width: 100%;
}
.alertBox {
	border-left: 6px solid #00458b;
    font-size: 1em;
    line-height: 1;
    margin: 0 0 20px;
    max-width: 100%;
    overflow: auto;
    padding: 20px;
    width: 100%;
    background-color:var(--error-message-background);
    border-color: var(--error-color);
}
.successBox{
	background-color:var(--success-message-background);
    border-color: var(--success-color);
}
.processingBox{
	background-color: var(--processing-message-backgournd);
    border-color: var(--processing-color);
}
.user-card{
    padding-bottom: 2%;
}
.role-card{
	margin: 4% 2%;
    box-shadow: 0px 0px 3px 0px var(--scgj-grey);
    border-radius: 2px;
    padding: 1.5%;
    cursor: pointer;
}
.role-card-img{
	text-align: right;
}
.role-card img{
	height: 60px;
	width: auto;
}
.role-card p{
	margin-bottom: 0;
    padding: 5%;
    font-size: 1.5em;
    color: var(--text-dark-grey);
}
.formHeading{
	color: var(--text-dark-grey);
	text-align: left;
	font-size: 2em;
}
#registrationForm .formHeading{
	text-transform: capitalize;
}
.margin-50{
	margin-top: 50%;
}
.preText{
	position: absolute;
    margin: 2.5% 3%;
    border-right: 1px solid var(--text-dark-grey);
    padding-right: 1%;
    width: 14%;
    text-align: center;
}
#mobile{
	padding-left: 20% !important;
}
.mainCard{
	width: 100%;
    padding: 30px 30px 10px 30px;
    height: 80vh;
}
.tick-mark{
	height: 8rem;
}
.successTitle{
	margin: 3%;
    color: var(--green);
    font-size: 2em;
}
.errorTitle{
	margin: 3%;
    color: var(--error-color);
    font-size: 2em;
}
.errorDiv{
	background-color: var(--scgj-white);
}
.back-button{
	text-align: left;
    width: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 2%;
    color: var(--scgj-black);
}
.back-button:focus{
	border: 1px solid var(--scgj-dark-blue) !important;
	border-radius: 50px !important;
}
.update-password-card{
    margin-top: 10%;
    border: 1px solid var(--scgj-grey);
    background-color: var(--scgj-white);
    margin-left: auto;
    margin-right: auto;
}
.verify-account-subit-btn{
	display: block;
    width: 30%;
    border-radius: 6px;
    color: var(--scgj-white);
    background-color: var(--scgj-dark-blue);
    padding: 6px;
    cursor: pointer;
    border: 2px solid var(--scgj-dark-blue) !important;
    margin-top: -7%;
}
.password-fields-section
{
	width:100% !important;
}

.reset-password-text
{
	margin-top: 9%;
    font-size: 1.25em;
    color: var(--gray-dark);
    font-weight: 600;
}

.employerRegistrationText {
    margin-top: 13%;
    display: inline-block;
}
.employerRegistrationBtn{
    padding: 1% 6%;
}

.loadingGif {
    margin-left: auto;
    margin-right: auto;
    width: 10%;
}
.downloadingGif{
	width: 30px !important;
}
/** ----------MEDIA QUERIES ------------------ **/

@media screen and (max-width: 1199px) and (min-width: 993px) {
 	.controlPasswordVisibility 
	{
	    left: 75%;
	}
    
}

@media screen and (max-width: 992px) {
    .card1 {
        width: 100%;
        padding: 40px 30px 10px 30px;
    }
    .card2 {
        width: 100%;
    }

    .right {
        margin-top: 100px !important;
        margin-bottom: 100px !important
    }
    
}

@media screen and (max-width: 991px) {
 	.controlPasswordVisibility 
	{
	    left: 84%;
	}
	.employerRegistrationBtn{
	    padding: 1% 7%;
	}
    
}

@media screen and (max-width: 768px) {
    .container {
        padding: 10px !important;
    }

    .card2 {
        padding: 50px;
    }

    .right {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
    }
    .preText {
    	margin: 2% 3%;
    }
    .activate-account-thumbnail img 
    {
	    height: 20vh;
	    width: 20vw;
	}
	.controlPasswordVisibility 
	{
	    left: 84%;
	}
	.employerRegistrationBtn{
	    padding: 1% 7%;
	    margin-bottom: 5%;
	}
	.employerRegistrationText {
	    margin-top: 15%;
	}
}

@media screen and (max-width: 480px){
    .menuActive{
        padding-left: 7% !important;
    }
	.card2 {
	    padding: 5%;
	}
	.login-form{
		padding: 0 !important;
    	padding-top: 7% !important;
	}
	.employerRegistrationText 
	{
		font-size:1em;
    	margin-top: 12%;
	}
    .activate-account-thumbnail img 
    {
	    height: 13vh;
	    width: 24vw;
	    margin-top: 20%;
	}
	.activate-account-thumbnail 
	{
		width: 30% !important;
	}
	.controlPasswordVisibility 
	{
	    left: 80%;
	}
	.employerRegistrationBtn{
	    padding: 1% 10%;
	}
}
@media screen and (max-width: 390px)
{
	.activate-account-thumbnail 
	{
		width: 40% !important;
	}
	.role-card img 
	{
	    height: 40px !important;
	    width: auto !important;
	}
	.role-card p 
	{
		font-size:1em !important;
		padding: 6%;
	}
	.employerRegistrationText 
	{
		font-size:1em;
    	margin-top: 10%;
	}
	.formHeading 
	{
    color: var(--text-dark-grey);
    text-align: left;
    font-size: 1.25em;
	}
   .activate-account-thumbnail img 
   {
	    height: 10vh;
	    width: 20vw;
	}
	.hyperlinkText
	{
		font-size:0.63em;
	}
	.controlPasswordVisibility 
	{
    	left: 76%;
    	top: 0%;
	}
	.employerRegistrationBtn{
	    padding: 1% 10%;
	    margin-bottom: 17%;
	}
}

  
 @media screen and (max-width: 320px)
 {
   .controlPasswordVisibilityResetPassword
 	{
    	top: 16%;
   	}
   	.controlPasswordVisibilityResetPasswordUpdated
   	{
   		top:73%;
   	}
   	.successTitle
   	{
   		font-size:medium;
   	}
   	.employerRegistrationBtn{
	    padding: 1% 10%;
	}
 }








[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
:root{
	--grey-box-shadow: rgb(181,181,181);
	--dark-blue-box-shadow:#293240;
	--sems-red:rgb(229,85,22);
	--sems-dark-blue:rgb(47,85,151);
	--sems-orange:rgb(252, 186, 99);
	--scgj-green:rgb(189, 213, 69);
	--sems-light-grey:rgb(242, 242,242);
	--sems-white:rgb(255,255,255);
	--sems-card-grey-text:rgb(105,103,103);
	--sems-light-blue:rgb(0,125,254);
	--sems-fade-light-blue:rgb(50,150,253);
	--sems-light-green:rgb(0,176,80);
	--sems-green-shade2:rgb(0,142,52);
	--sems-grey-background:rgb(251,251,251);
	--sems-modal-content-blue:rgb(46,117,182);
	--sems-text-black:rgb(0,0,0);
	--sems-text-dark-grey:rgb(59,56,56);
	--sems-active-orange:rgb(243,149,19);
	--sems-fade-orange:rgb(244,169,65);
	--sems-partial-background-grey:rgb(249,249,249);
	--sems-light-grey-shade1:rgb(217,217,217);
	--sems-light-grey-shade2:rgb(127,127,127);
	--sems-light-grey-shade3:rgb(118,113,113);
	--sems-light-grey-shade4:rgb(166,166,166);
	--sems-partial-tab-grey-shadow:rgb(156,156,156);
	--sems-green-text:rgb(112,173,71);
	--sems-blue-shade2:rgb(0,112,192);
	--sems-pink:rgb(255,139,139);
	--sems-grey-button-background:rgb(105,102,101);
	--sems-orange-button:rgb(237,125,49);
	--sems-fade-tan:rgb(182,147,137);
	--sems-brown:rgb(165,121,109);
	--sems-fade-blue-grey:rgb(88,118,171);
	--dark-blue:#2b2b5e;
    --light-blue:rgb(0,125,254);
 	--status-blue:rgb(0, 85, 172);
 	--set-dark-blue:#44546A;
    --set-dark-grey:rgb(89,89,89);	
    --set-light-grey-shade1:#ededed;
	--set-light-grey-shade2:rgb(118,113,113);
	--set-light-grey-shade3:rgb(217,217,217);
	--set-light-grey-shade4:rgb(127,127,127);
 	  
}
html{
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    font-size: 14px;
}
body{
	font-family: 'Roboto', sans-serif;
	color:var(--sems-text-dark-grey);
	font-weight:300;
	overflow-x: hidden; 
}
select{
	background:var(--sems-white);
	outline:none;
	
}
option{
	font-weight:300 !important;
}
.btn:active:focus, .btn:focus{
	outline:none;
}

#loadingPage{
	width:100%;
	height:100vh;
	position:fixed;
	background: var(--sems-white);
	z-index:99999;
	display: flex;
    justify-content: center;
    align-items: center;
}
.logoImagePreLoader {
    height: 4em;
    margin-left: 0.5%;
}
.marginForTitle{
	margin-left:-20%;
}
#left {
    flex: 1;
    background-color: white;
}
* {
    box-sizing: border-box;
}
#right {
    display: flex;
    background: url(../images/bg.png) no-repeat center center / cover;
    flex-direction: column;
    flex: 1;
    align-items: center;
    /* justify-content: center; */
    height: 100vh;
}
#showcase {
    display: flex;
    background-size: cover;
    height: 100%;
}

.carousel {
    position: relative;
}

.bottomSpace {
    position: absolute;
    bottom: 8px;
}
.carousel-indicators li {
    display: inline-block;
    width: 30px;
    height: 5px;
    margin: 1px;
    border-radius: 1px;
    border: 1px solid  #ffff;
    background-color:var(--sems-light-blue);   
}


.carousel-indicators .active {
    width: 30px;
    height: 5px;
    margin: 1px;
    border: 1px solid  #ffff;
}
.carousel-indicators {
    bottom: -0.5em;
}

* {
    box-sizing: border-box;
}

/* ---------------- TOP MENU BAR STYLES -------------------------- */
.topMenuBarStyle{
	box-shadow: 0px 0px 4px 0px var(--grey-box-shadow);
	padding:1%;
}
.topMenuBarOptions{
	cursor:pointer;
	font-size: 1.1em;
}
.homeScgjlogo{
	width:38%;
}
.dashBoardLogo{
	width:17%;
	margin-top:-0.8%;
}
.dashBoardText{
	color:var(--sems-text-dark-grey);
	margin-left:2%;
	margin-top:0.8%;

}
.headerMenuSection{
	padding:0.5%;
}
.topMenuBarHomeIcon{
	font-size: 0.7em;
    margin-right: 2%;
}
.topMenuBarDashboardIcon{
	font-size: 1em;
    margin-right: 2%;
}
.topMenuBarTextStyle{
    font-weight: bold;
    left: 0.2em;
    font-size:0.8em;
}
.selectedMenuRed{
	color: var(--sems-red);
}
.label{
	font-weight:400;
    font-size: 1.1em;
    margin-left: 0%;
    margin-bottom: 3.5%;
    color: var(--set-dark-grey);
}

/* ---------------- CAROUSEL STYLES STARTS-------------------------- */
.largeScreenBannerImage{
	display:block;
}
.smallScreenBannerImage{
	display:none;
}
.bannerImage{
	width:100%;
	height: 25em;
}
.bannerImageContent{
	color:var(--sems-white);
	position: absolute;
    top: 12em;
    left: 4.5%;
}
.bannerImageHeading{
	font-weight: 500;
    font-size: 2em;
    letter-spacing: 1px;
    margin-bottom: 3.5%;
}
.bannerImageText{
	font-weight: 100;
    font-size: 1.9em;
    margin-bottom:-1%;
}
.joinForFreeButton{
	margin-top: 6.5%;
    padding: 2% 7%;
    font-size: 1.3em;
    border-radius: 3px;
    background: var(--sems-orange-button);
    border: none;
    outline:none;
}

.joinForFreeButton:focus, .joinForFreeButton:active{
	outline:none;
}
.commonBox{
	width:100%;
    border-left:none;
    border-right:none;
    background: var(--sems-dark-blue);
    text-decoration: underline;
    color: var(--sems-white);
	font-weight: 400;
	height:2.5em;	
}

.onlineCoursesText{
	margin-left:1.9%;
	margin-top:0.7%;
}
.webAuthoringContentText{
	margin-top:0.7%;
}
.publishedOnValue{
    margin-left: -10%;
    margin-top: -3.5%;
    font-size: 0.89em;	
}
.publishedOnText{
    margin-left:5%;
    margin-top:-2%;	

}
.adminNameText{
    margin-top:10%;
    font-weight:normal;

}
.adminNameDiv{
	font-size: 0.8em;
    font-weight:350;
}

.contentSectionForViewSection {
    padding: 1.5% 2%;
    background: var(--sems-white);
    border:1px solid var(--sems-light-grey-shade1);
}
.templatePartialForViewSection {
    background: var(--set-partial-background-grey);
    min-height: 88vh;
    margin-top: 0.4%;
    padding: 2% 1% 2% 2%;
}
.thumbnailWebContentImageForViewSection{
	width:60%;
	margin-left:20%;
}
.fileUploadContentForViewSection{
	width: 60%;
	text-align: center;
}
.trainingThumbnailImageForViewSection {
	width:60%;
	margin-top:2%;
	height: 20em;
}
.downloadGlyphiconsForViewSection{
	margin-left:10%;
}
.titleTextForViewSection{
	margin-left:10%;

}
.titleTextForViewSection2{
	margin-left:0%;

}
.resourceCategoryForViewSection{
	color:#78BE21;
	font-size: 0.8em;
    font-weight: bold;
	margin-left:2%;

}
#viewWebDownloadButton{
	margin-left:50%;
}
.category2ForViewSection{
	background-color:#E5F6DF;
	padding:0.5%;
	border-radius:2px;
}

.viewResourceTitle{
	margin-left:1%;
}
.requiredAsterik{
	position:absolute;
	color:red;
	font-weight:400;
	font-size:15px;
	right:1.8em;
	top:-0.5em;
}
.homepage-education-selected-div{
	display: inline-block;
    padding: 0.2% 1.5% !important;
    border: 1px solid var(--sems-modal-content-blue);
    background-color:var(--sems-modal-content-blue);
    margin: 0.8%;
    margin-left:2%;
    margin-top:1%;
    border-radius: 4px;
    color: var(--scgj-white);
}
.homepage-divForMultipleEducationQualifications{
  margin-left:45%;
  margin-top:-8.5%;
  border: 1px solid black;
  border-radius: 4px;
  padding:-4%;
  width:50%;
}
.publishTab{
	color:white;
	font-size:1em;
}
.selectedResourceTitle{
	margin-left:-2%;
}
/* ---------------- CAROUSEL STYLES ENDS-------------------------- */

/* ----------------------- UPCOMING TRAINING SECTION STYLES ------------------------*/
.upcomingTrainingSection{
	background:var(--sems-grey-background);
	min-height: 80vh;
}
.upcomingTrainingHeading{
	font-size:1.2em;
	font-weight:bold;
}
.cardTrainingName{
	font-size: 1em;
    font-weight: bold;
	margin-bottom: 1%;
}
.cardBottomButtonSection{
	position: absolute;
    width: 97%;
    bottom: 1em;
}
.cardTrainingDurationText{
	font-size: 0.7em;
	overflow-wrap: break-word;
	color:var(--sems-card-grey-text);
}
.cardTrainingCost{
	font-size: 1em;
    font-weight: bold;
     margin-bottom: 11%;
}
.cardTrainingDescription {
    font-size: 0.8em;
    height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cardsBoxContainer{
	margin-bottom:4%;
}
#headingUnderline{
	padding-bottom: 0.2%;
    border-bottom: 3px solid var(--sems-active-orange);
}

.upcomingTrainingHeadingDiv{
    padding:2% 3% 1% 3%;
}
.upcomingTrainingThumbnailImage{
	width: 100%;
    height: 10em;
    margin-bottom: 3%;
}
.cardButton {
    width: 34%;
    padding: 0%;
    border-radius: 2px;
}
.cardButton:focus, .cardButton:hover{
	outline: none;
}
.trendingTagStyle{
	position: absolute;
    top: 1em;
    left: 0em;
}
.trendingBackgroundImage{
	width: 35%;
}
.trendingImageText{
	position: absolute;
    top: 0.1em;
    left: 1.5em;
}
.loadMoreButton{
	background: white;
    border: 2px solid var(--sems-dark-blue);
    border-radius: 26px;
    padding: 0.2% 2%;
    margin-bottom: 3%;
    font-weight: bold;
}
.loadMoreButton:focus,.loadMoreButton:hover,.loadMorButton:active
{
	outline: none !important;
}
.noUpcomingTrainingError {
    font-weight: bold;
    height: 50vh;
    margin-top: 5%;
    display: flex;
    justify-content: center;
}

.standardCardContainer {
    width: 97.6%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.cardContentContainer{
	padding:1% 3%;
}

/* --------------- STANDARD STYLES ------------------------------*/
.standardViewButton{
	background:var(--sems-light-blue);
	color:var(--sems-white);
}
.standardViewButton:hover, .standardViewButton:focus{
	background:var(--sems-light-blue);
	color:var(--sems-white);
	outline:none;
}
.standardActionButton{
	background:var(--sems-green-shade2);
	color:var(--sems-white);
}
.standardActionButton:hover, .standardActionButton:focus{
	background:var(--sems-green-shade2);
	color:var(--sems-white);
	outline:none;
}
#onlineCoursesUnderline:hover{
	cursor:pointer;
}
#webAuthoringContentUnderline{
	cursor:pointer;
}
.goBackBtn{
	cursor:pointer;
}
.tooltipForTitle{
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted var(--sems-card-grey-text);
	color:var(--sems-card-grey-text);
	font-weight:normal;
}
.marginForPublishLabel{
	margin-top:-2%;
	margin-left:-1.7%;

}



@media (min-width:1676px){
	.marginForPublishLabel{
		margin-top:-4.5%;
		margin-left:-4%;

	}
}
@media (min-width:1160px) and (max-width:1200px){
	.marginForPublishLabel{
		margin-top:-4.5%;
		margin-left:-4%;
	}
}
@media (min-width:854px) and (max-width:980px){
	.marginForPublishLabel{
		margin-top:-4.5%;
		margin-left:-4%;
	}
}
@media (min-width:685px) and (max-width:767px){
	.marginForPublishLabel{
		margin-top:-4.5%;
		margin-left:-4%;
	}
}
@media (min-width:377px) and (max-width:577px){
	.marginForPublishLabel{
		margin-top:-4.5%;
		margin-left:-4%;
	}
}
	
.cardEnrollButton, .cardEnrollButton:hover, .cardEnrollButton:focus{
	background:var(--sems-light-green);
	color:var(--sems-white);
	outline:none;
	border:none;
}
.standardCards {
    background: var(--sems-white);
    padding: 0%;
    width: 21%;
    border-radius: 4px;
    margin: 1% 1% 1% 3%;
    box-shadow: 1px 0px 5px 0px var(--grey-box-shadow);
}
.filterIcon
{
	height:1.75em;
	width: auto;
	cursor:pointer;
}

.standardCards:hover{
	box-shadow: 5px 5px 5px 5px var(--grey-box-shadow);
}
.textWhite{
	color:var(--sems-white);
}
.rowMargin-0{
	margin:0;
}
.margin-top-3 {
	margin-top: 3%;
}
.padding-0{
	padding:0;
}
.float-right {
	float: right;
}
.standardSelectInputBox{
	width: 90%;
    padding: 2%;
}
.filterOptionsDiv{
	margin-bottom:2% !important;
	margin-left:2%;
}
.errorContainer{
	width: 80%;
    margin: 3% auto 0 auto;
}
.errorMessageBox{
    padding: 0.5% 2%;
    margin-bottom: 0%;
}
.footer{
	width:100%;
	position:relative;
	bottom:0;
	background:var(--sems-dark-blue);
	color:var(--sems-white);
	font-size: 0.7em;
    padding: 0.2%;
}


/*--------------------------VIEW DETAILS MODAL STYLE ------------------------------------*/
.fade {
    opacity: 0;
    -o-transition: opacity .85s ease;
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all 0.85s ease;
    -o-transition: all 0.85s ease;
    transition: all 0.85s ease;
}

.fade.in {
    opacity: 1;
    transform: scale(1);
    transition: all 0.85s ease;
}
.modal-backdrop {
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
    z-index: unset;
    background-color: #000;
}
.pop-up-box {
    background-color: rgba(0,0,0,0.8);
}

.modalCloseButton {
    position: absolute;
    right: 0.5em;
    font-size: 1.5em;
    top: 0.5em;
    cursor: pointer;
}
#viewTrainingModal{
	padding-right:0% !important;
	display: flex;
    justify-content: center;
    align-items: center;
}
.modalContentContainer{
	padding:3%;
	padding-bottom: 4%;
}
.modalDialogBox{
	width:65vw;
}
.modalTrainingNameHeading{
	font-weight:bold;
	font-size:1.2em;
	color:var(--sems-modal-content-blue);
	margin-bottom: 3%;
}
.modalEnrollButton {
    padding: 0.2% 4%;
    border-radius: 3px;
    margin-right: 2%;
}
.modalBrochureButton {
    padding: 0.2% 1.5% !important;
}
.modalWarningTextDiv{
	margin-top:2%;
	font-size: 0.9em;
	font-weight: bold;
    color: var(--sems-modal-content-blue);
}
.modalWarningTextDiv:hover{
    text-decoration: underline;
	cursor:pointer;
}
.modalLoginToEnrollDiv{
	margin-top:2%;
	font-size: 0.9em;
    color: var(--sems-modal-content-blue);
}
.enrollSuccessImage{
	width:14%;
	margin-right:3%;
	padding: 2%;
}
.sessionInfoHeading{
	font-size:1.1em;
	color:var(--sems-modal-content-blue);
}
.gridSection{
	width:61vw;
}
.modalGridTable {
    width: 98%;
    font-size: 0.9em;
}
#viewSessionDetailSmallScreenGrid{
	display:none;
	height:60px;
}
#viewSessionDetailLargeScreenGrid{
	display:block;
	height:60px;
}

#landingPageWrapper{
    height: 100vh;
}

/* ------------------------ MY PROFILE SECTION STYLES ------------------------------ */
.myProfileSection{
	display: flex;
    height:88.8%;
}
.loginLeftImageSection{
	flex:1;
}
.loginLeftImage{
	width:100%;
	height:100%;
}
.loginFormSection {
    width: 50%;
    background: var(--sems-light-grey);
    margin-top: 0.2%;
    padding:3%;
    padding-left:5%;
    
}
.loginFormHeading{
	margin-top:5%;
	color:var(--set-dark-grey);
	font-size:25px;
}
.regisForm{
	margin-top:7%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.userLoginForm{
	margin-top:5%;
	margin-bottom: 3%;
}
.loginInputBox{
	border: 1px solid black;
    border-radius: 4px;
    margin-bottom:1%;
}
.loginFormButton,.loginFormButton:hover,.loginFormButton:active,.loginFormButton:focus{
	background: var(--set-dark-blue);
    color: var(--sems-white);
    border: none;
    padding: 1% 6%;
    border-radius:6px;
    width: 20%;
    margin-top:-1%;
}

.signinShowPassword {
    cursor: pointer;
    pointer-events: all;
    color: var(--dark-grey);
    position: relative;
    margin-left:-10%;
    z-index:2;
    
}
.mobileNumberPrefix{
    position: absolute;
    left: 1.5em;
    top: 0.65em;
}
#phoneNumberLoginInput{
	padding-left: 2.2em;
}

.linkText{
	font-weight:bold;
	cursor:pointer;
}
.linkText:hover{
	cursor:pointer;
}
.registerHereText{
	color: var(--set-dark-grey);
	font-size: 0.9em;
}
.resendOtpText{
	display: inline-block;
    position: absolute;
    top: 1.5em;
    right: 2em;
    color: var(--sems-dark-blue);
    font-size: 0.95em;
}
.resendOtpText:hover{
	text-decoration:underline;
	cursor:pointer;
}
.rollingGif{
	width: 2em;
    margin-top: 8%;
}
.loginErrorPanel{
	background: white;
    color: var(--sems-text-dark-grey);
    text-align: left;
    padding: 0.5% 2%;
    margin-bottom: 0%;
    width: 46%;
    border: 1px solid var(--sems-red);
    position: absolute;
    right: 2em;
    bottom: 4em;
}
.loginErrorText{
	margin-top:0.5%;
	font-weight:bold;
}

.registerInputBox{
	border-radius: 4px;
    border: 1px solid var(--sems-light-grey-shade2);
    margin-bottom: 5%;
    padding:2%;
    margin-top: 2%;
    margin-left:2%;
    box-shadow: 0px 0px 2px 0px var(--grey-box-shadow);
}
.errorMessageImage{
	width:2em;
}
.registerErrorPanel {
    border: 1px solid var(--sems-red);
    background: var(--sems-white);
    padding: 0.8%;
    border-radius: 4px;
    width:95%;
    margin-top: 4%;
}
.registerSuccessPanel {
    border: 1px solid var(--sems-light-green);
    background: var(--sems-white);
    padding: 0.8%;
    border-radius: 4px;
    margin-top: 4%;
    width:95%;
    
}
.errorMessageFlexBox{
	display:flex;
	align-items:center;
}

.successAlertImage{
	width:1.5em;
}
.homepage-education-selected-div{
	display: inline-block;
    padding: 0.2% 1.5% !important;
    border: 1px solid var(--sems-modal-content-blue);
    background-color:var(--sems-modal-content-blue);
    margin: 0.8%;
    margin-left:2%;
    margin-top:1%;
    border-radius: 4px;
    color: var(--scgj-white);
}
.homepage-divForMultipleEducationQualifications{
  margin-left:45%;
  margin-top:-8.5%;
  border: 1px solid black;
  border-radius: 4px;
  padding:-4%;
  width:50%;
}
.carouselSlide {
	    height: auto;
	}
.carouselSlideForRegistration {
	 height:105vh;
     width: 100%;
    object-fit: cover;
    object-position: center;	    
	}

a:link { text-decoration: none; }
/* --------------------------- MEDIA QUERIES ---------------------------------------- */
@media (min-width:2000px){
	.homepage-divForMultipleEducationQualifications{
		  margin-left:45%;
		  margin-top:-5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:42%;
		}
}
@media (min-width:1400px) and (max-width:2000px){
	.homepage-divForMultipleEducationQualifications{
		  margin-left:45%;
		  margin-top:-6.5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:42%;
		}
}

@media (min-width:1500px) {
	.commonBox{
		width:100%;
	    border-left:none;
	    border-right:none;
	    background: var(--sems-dark-blue);
	    text-decoration: underline;
	    color: var(--sems-white);
		font-weight: 410;
		height:3.5em;	
	}
	.resourceCategoryForViewSection{
		color:#78BE21;
		font-size: 0.8em;
	    font-weight: bold;
		margin-left:2%;
		margin-top:-1.5%;

	}
	.trainingThumbnailImageForViewSection {
		height: 27em;
		margin-top:1%;
		margin-bottom:2%;
	}
}
@media (min-width:1800px){
	.dashBoardLogo{
		width:12%;
		height:1.4em;
	}
}
@media (min-width:1366px){
	.dashBoardLogo{
		width:15%;
		height:1.3em;
	}
}
@media all and (device-width: 1366px) and (device-height: 1024px) and (orientation:landscape) {
	.myProfileSection {
	    display: flex;
	    min-height: 95%;
	    height: auto;
	}
	.dashBoardLogo{
		width:8%;
	}
}

@media (max-width:1300px){
	.myProfileSection {
	    display: flex;
	    min-height: 95%;
	    height: auto;
	}
	#phoneNumberLoginInput {
	    padding-left: 2.3em;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 1.5em;
	    top: 0.5em;
	}
}

@media (min-width: 992px) and (max-width:1199px){
	.homepage-divForMultipleEducationQualifications{
		  margin-left:55%;
		  margin-top:-9.5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:42%;
		}
	.cardTrainingCost {
	    font-size: 1.1em;
	    font-weight: bold;
	    margin-bottom: 11%;
	}
	.upcomingTrainingHeadingDiv {
	   padding:3% 4% 2% 3%;
	}
	.loadMoreButton {
	    margin-bottom: 4%;
	}
	/* --STANDARD STYLES --*/
	.filterOptionsDiv {
	    margin-bottom: 2% !important;
	    margin-left:2%;
	}
	.standardCards {
	    width: 31%;
	    margin: 1% 1% 5% 1%;
	}
	.standardCardContainer {
	    width: 95.6%;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    margin-left: 2.2%;
	    align-items: stretch;
	}
	.templateTopMenuStyle {
	    box-shadow: 0px 0px 4px 0px var(--grey-box-shadow);
	    padding: 1.5% 1%;
	}
	/** LOGIN STYES -- */
	.mobileNumberPrefix {
	    position: absolute;
	    left: 1.5em;
	    top: 0.5em;
	}
	.loginFormSection {
	    width: 50%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 3%;
	}
	.myProfileSection {
	    display: flex;
	    height: auto;
	    min-height: 100%;
	}
	#registrationFormPrefix {
	    position: absolute;
	    left: 8%;
	    font-size: 1em;
	    top: 15%;
	}
}


@media (min-width: 801px) and (max-width:991px){
   .carouselSlide {
	    height:auto;
	}
	.carouselSlideForRegistration {
	    height:auto;
	}
	.dashBoardLogo{
		width:15%;
		margin-top:-0.8%;
	}
	.dashBoardText{
		color:var(--sems-green-shade2);
		margin-left:3.5%;
		margin-top:10%;

	}
	.homepage-divForMultipleEducationQualifications{
		  margin-left:50%;
		  margin-top:-9.5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:50%;
		}
	.requiredAsterik{
		right:2.5em;
	}
	.headerMenuSection {
	    padding: 1% 2%;
	}
	.topMenuBarStyle {
	    padding: 2% 0%;
	}
	.topMenuBarHomeIcon {
	    font-size: 0.8em;
	    margin-right: 6%;
	}
	.topMenuBarMyProfileIcon {
	    font-size: 1em;
	    margin-right: 4%;
	}
	.topMenuBarTextStyle {
	    font-weight: bold;
	    left: 0.2em;
	    font-size: 1em;
	}
	.homeScgjlogo {
	    width: 37%;
	    margin-top: 0%;
	    margin-left: 0%;
	}
	.topMenuBarOptions {
	    cursor: pointer;
		font-size: 1.5rem;
	}
	.myProfileOptionDiv{
		padding:0%;
	}
	.bannerImageContent {
	    color: var(--sems-white);
	    position: absolute;
	    top: 15em;
	    left: 4.5%;
	}
	.bannerImageHeading {
	    font-size: 1.8em;
	}
	.bannerImageText {
	    font-size: 1.5em;
	}
	.cardTrainingCost {
	    font-size: 1.1em;
	    font-weight: bold;
	    margin-bottom: 11%;
	}
	.trendingImageText {
	    position: absolute;
	    top: 0.3em;
	    left: 1.5em;
	}
	.cardButton {
	    width: 28%;
	    padding: 0%;
	    border-radius: 2px;
	}
	.upcomingTrainingHeadingDiv {
	   padding: 3% 4%;
    	font-size: 1.1em;
	}
	.filterOptionsDiv {
	    margin-bottom: 2% !important;
	    margin-left:3%;
	}
	.loadMoreButton {
	    margin-bottom: 4%;
	}
	.modalDialogBox {
	    width:auto;
	}
	.modalGridTable {
	    width: 94%;
	    font-size: 0.9em;
	}
	.gridSection {
    width: 90vw;
}
	/* --STANDARD STYLES --*/
	.standardCardContainer {
	    width: 89.6%;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    margin-left: 4.2%;
	    align-items: stretch;
	}
	.standardCards {
	    width: 45%;
	    margin: 1% 1% 5% 1%;
	}
	
	/**-- LOGIN STYLES --*/
	.loginErrorText {
	    margin-top: 0%;
	    font-size: 0.9em;
	    margin-left: 2%;
	    font-weight: bold;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 1.5em;
	    top: 17%;
	}
	.loginFormSection {
	    width: 50%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 3%;
	}
	.loginErrorPanel{
		right:1em;
	}
	.errorCloseBtnDiv{
		padding-right:0%;
	}
	.resendOtpText {
	    display: inline-block;
	    position: absolute;
	    top: 2em;
	    right: 4em;
	    color: var(--sems-dark-blue);
	    font-size: 0.95em;
	}
	.myProfileSection {
	    display: flex;
	    height: auto;
	    min-height: 100%;
	}
	#registrationFormPrefix {
	    position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 15%;
	}
	.fileUploadContentForViewSection{
		width: 82%;
		text-align: center;
		margin-left:9%;
	}
}

@media (min-width: 768px) and (max-width:800px){
	.homepage-divForMultipleEducationQualifications{
		  margin-left:50%;
		  margin-top:-9.5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:45%;
		}
		.carouselSlide {
	    height:auto;
	}
	.carouselSlideForRegistration {
	    height:auto;
	}
	.requiredAsterik{
		right:3.8em;
	}
	.trainingThumbnailImageForViewSection {
		height: 17em;
	}
	.onlineCoursesText{
		margin-left:1.9%;
		margin-top:0%;
	}
	.webAuthoringContentText{
		margin-top:0%;
	}
	.headerMenuSection {
    	padding: 1.5% 4%;
	}
	.topMenuBarStyle {
	    padding: 1% 0%;
	}
	.homeScgjlogo {
	    width: 36%;
	    margin-top: 1%;
	    margin-left: -3%;
	}
	.topMenuBarOptions {
	    cursor: pointer;
		font-size: 1.5rem;
	}
	.topMenuBarHomeIcon {
	    font-size: 0.95em;
	    margin-right: 2%;
	}
	.topMenuBarTextStyle {
	    font-weight: bold;
	    left: 0.2em;
	    font-size: 1em;
	}
	.myProfileOptionDiv{
		padding:0%;
	}
	#landingPageWrapper{
	    height: 100%;
	}
	.largeScreenBannerImage{
		display:none;
	}
	.bannerImage {
	    width: 100%;
	    height: 25em;
	}
	.bannerImageHeading {
	    font-weight: 500;
	    font-size: 1.5em;
	    letter-spacing: 1px;
	    margin-bottom: 3.5%;
	}	
	.bannerImageText {
	    font-weight: 100;
	    font-size: 1.3em;
	    margin-bottom: -1%;
	}
	.smallScreenBannerImage{
		display:block;
	}
	.upcomingTrainingHeadingDiv {
	   padding: 3% 5%;
    	font-size: 1.1em;
	}
	.cardTrainingCost {
	    font-size: 1.1em;
	    font-weight: bold;
	    margin-bottom: 11%;
	}
	.filterOptionsDiv {
	    margin-bottom: 2% !important;
	    margin-left:3%;
	}
	.loadMoreButton {
	    margin-bottom: 4%;
	}
	#viewSessionDetailSmallScreenGrid{
		display:block;
	}
	#viewSessionDetailLargeScreenGrid{
		display:none;
	}
	.modalDialogBox {
	    width: 90vw;
	}
	.gridSection {
	    width: 84vw;
	}
	.modalGridTable {
	    width: 98%;
	    font-size: 0.9em;
	}
	.modalEnrollButton {
	    padding: 0% 4%;
	    font-size: 0.9em;
	    border-radius: 3px;
	    margin-right: 3%;
	}
	.enrollSuccessImage {
	    width: 17%;
	}
	/* --STANDARD STYLES --*/
	.errorContainer {
	    width: 95%;
	    margin: 3% auto 0 auto;
	}
	.errorMessageBox {
	    font-size: 0.85em;
	    padding: 0.5% 4%;
	    margin-bottom: 0%;
	}
	.standardCards {
	    width: 45%;
	    margin: 1% 1% 5% 1%;
	}
	.standardCardContainer {
	    width: 89.6%;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    margin-left: 4.2%;
	    align-items: stretch;
	}
	/*---- LOGIN PAGE STYLES --*/
	.loginLeftImageSection{
		display:none;
	}
	.loginFormSection {
	    width: 100%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 5% 9%;
	    min-height:100vh;
	}
	.loginFormButton {
	    padding: 1% 7%;
	    margin-top: 2%;
	    width: 55%;
	}

	#phoneNumberLoginInput {
	    padding-left: 9%;
	    font-size: 1em;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 18%;
	}
	.loginInputBox {
	    font-size: 1em;
	    width:80%;
	}
	.loginErrorPanel {
	    width: 80%;
	    right: unset;
	}
	.loginErrorText {
	    margin-top: 0.5%;
	    font-weight: bold;
	    padding-left: 5%;
	}
	.loginFormHeading {
	    margin-top: 7%;
	    margin-bottom: 5%;
	}
	.resendOtpText {
	    display: inline-block;
	    position: absolute;
	    top: 1.5em;
	    right: 12em;
	    color: var(--sems-dark-blue);
	    font-size: 0.95em;
	}
	.registerHereText {
	    color: var(--set-dark-grey);
	    font-size: 0.95em;
	    margin-left: 1%;
	}
	.myProfileSection {
	    display: flex;
	    height: auto;
	    min-height: 100%;
	}
	#registrationFormPrefix {
	    position: absolute;
	    left: 4%;
	    font-size: 1em;
	    top: 18%;
	}
	.fileUploadContentForViewSection{
		width: 82%;
		text-align: center;
		margin-left:9%;
	}
}
@media (min-width: 700px) and (max-width:767px){
.signinShowPassword {
	    position: fixed;
	    margin-left: 40%;
        margin-top: 53%;
	    z-index:2;
   }
}
@media (min-width: 661px) and (max-width:699px){
.signinShowPassword {
	    position: fixed;
	    margin-left: 40%;
        margin-top: 55%;
	    z-index:2;
   }
}
@media (min-width: 600px) and (max-width:660px){
.signinShowPassword {
	    position: fixed;
	    margin-left: 40%;
        margin-top: 58.5%;
	    z-index:2;
   }
}
@media (min-width: 578px) and (max-width:599px){
.signinShowPassword {
	    position: fixed;
	    margin-left:38%;
        margin-top: 60%;;
	    z-index:2;
   }
}
@media (min-width: 531px) and (max-width:576px){
.signinShowPassword {
	    position: fixed;
	    margin-left:38.5%;
        margin-top: 68%;
	    z-index:2;
   }
}
@media (min-width: 500px) and (max-width:530px){
.signinShowPassword {
	    position: fixed;
	    margin-left:38%;
        margin-top:71%;
	    z-index:2;
   }
}
@media (min-width: 470px) and (max-width:499px){
.signinShowPassword {
	     position: fixed;
	    margin-left:38%;
        margin-top:75%;
	    z-index:2;
   }
}
@media (min-width: 431px) and (max-width:469px){
.signinShowPassword {
	    position: fixed;
	    margin-left:37%;
        margin-top:77%;
	    z-index:2;
   }
}
@media (min-width: 406px) and (max-width:430px){
.signinShowPassword {
	     position: fixed;
	    margin-left:37.5%;
        margin-top:91%;
	    z-index:2;
   }
}
@media (min-width: 376px) and (max-width:406px){
.signinShowPassword {
	    position: fixed;
	    margin-left:37%;
        margin-top:94%;
	    z-index:2;
   }
}
@media  (max-width:375px){
.signinShowPassword {
	    position: fixed;
	    margin-left:37%;
        margin-top:94%;
	    z-index:2;
   }
}
@media (min-width: 577px) and (max-width:767px){
	
	.homepage-divForMultipleEducationQualifications{
		  margin-left:50%;
		  margin-top:-9.5%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:45%;
		}
	
	.requiredAsterik{
		right:0em;	
	}
	.trainingThumbnailImageForViewSection {
		height: 14em;
	}
	.headerMenuSection {
	    padding: 0.5% 2%;
	}
	.topMenuBarStyle {
	    padding: 1%;
	}
	.filterIcon
	{
		height:1.5em;
	}
	.homeScgjlogo {
	    width: 48%;
	    margin-top:2%;
	    margin-left: -3%;
	}
	.topMenuBarOptions {
	    cursor: pointer;
		font-size: 3rem;
	}
	.topMenuBarTextStyle{
		display:none;
	}
	
	.topMenuBarMyProfileIcon {
	    font-size: 0.85em;
	    margin-right: 2%;
	}
	#landingPageWrapper{
	    height: 100%;
	}
	.largeScreenBannerImage{
		display:none;
	}
	.smallScreenBannerImage{
		display:block;
	}
	.bannerImage {
	    width: 100%;
	    height: 19em;
	}
	.bannerImageContent {
	    top: 10.5em;
	    left: 4.5%;
	}
	.bannerImageHeading {
	    font-size: 1.3em;
	    letter-spacing: normal;
	    margin-bottom: 7.5%;
	}
	.bannerImageText {
	    font-size: 1.2em;
	    margin-bottom: -1%;
	}
	.joinForFreeButton {
	    margin-top: 10.5%;
	    padding: 1% 6% 1% 6%;
	    font-size: 0.9em;
	}
	.cardTrainingCost {
	    margin-bottom: 6%;
	}
	.cardButton {
	    width: 28%;
	    font-size: 1em;
	}
	.trendingImageText {
	    position: absolute;
	    font-size: 1em;
	    left: 1.5em;
	    top: 0.3em;
	}
	.trendingBackgroundImage {
	    width: 40%;
	}
	.upcomingTrainingHeadingDiv {
	   padding: 3% 0%;
    	font-size: 1.3em;
	}
	.upcomingTrainingHeading {
	    margin: 2%;
	    font-size: 1em;
	    font-weight: bold;
	}
	.filterOptionsDiv{
		margin-bottom:6% !important;
		margin-left:0%;
	}
	.loadMoreButton {
	    margin-bottom: 6%;
	}
	#viewSessionDetailSmallScreenGrid{
		display:block;
	}
	#viewSessionDetailLargeScreenGrid{
		display:none;
	}
	.modalDialogBox {
	    width:auto;
	}
	.gridSection {
	    width: 88vw;
	}
	.modalGridTable {
	    width: 94%;
	    font-size: 0.8em;
	}
	.modalTrainingInformationText{
		font-size:0.8em;
	}
	.modalEnrollButton {
	    padding: 0% 4%;
	    font-size: 0.85em;
	    border-radius: 3px;
	    margin-right: 1%;
	}
	.modalTrainingNameHeading{
		margin-bottom: 5%;
	}
	.enrollSuccessImage {
	    width: 25%;
	    margin-right: 3%;
	}
	/* -- STANDARD STYLES --*/
	.errorContainer {
	    width: 95%;
	    margin: 3% auto 0 auto;
	}
	.errorMessageBox {
	    font-size: 0.8em;
	    padding: 0.5% 4%;
	    margin-bottom: 0%;
	}
	.standardSelectInputBox {
	    width: 100%;
	    padding: 2%;
	    font-size: 1em;
	}
	.standardCards {
	    width: 44%;
	    margin-bottom: 3%;
	}
	/*---- LOGIN PAGE STYLES --*/
	.loginLeftImageSection{
		display:none;
	}
	.loginFormSection {
	    width: 100%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 5% 9%;
	    min-height:100vh;
	}
	.loginFormButton {
	    padding: 1% 7%;
	    font-size:0.9em;
	    margin-top: 2%;
	    width: 52%;
	}
	#phoneNumberLoginInput {
	    padding-left: 9%;
	    font-size: 1em;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 18%;
	}
	.loginInputBox {
	    font-size: 1em;
	    width:80%;
	}
	.loginErrorPanel {
	    width: 80%;
	    right: unset;
	}
	.loginErrorText {
	    margin-top: 0.5%;
	    font-weight: bold;
	    padding-left: 5%;
	}
	.errorCloseBtnDiv{
		padding-right:0%;
	}
	.loginFormHeading {
	    margin-top: 7%;
	    margin-bottom: 5%;
	}
	.resendOtpText {
	    top: 1.2em;
	    right: 11em;
	}
	#registrationFormPrefix {
	    position: absolute;
	    left: 4%;
	    font-size: 1em;
	    top: 17%;
	}
	.myProfileSection {
	    display: flex;
	    height: auto;
	    min-height:95%;
	}
	.fileUploadContentForViewSection{
		width: 82%;
		text-align: center;
		margin-left:9%;
	}
}

@media (min-width: 578px) and (max-width:664px){
	.homepage-education-selected-div{
		display: inline-block;
	    padding: 0.1% 0.7% !important;
	    border: 1px solid var(--sems-modal-content-blue);
	    background-color:var(--sems-modal-content-blue);
	    margin: 0.8%;
	    margin-left:2%;
	    margin-top:3%;
	    border-radius: 4px;
	    color: var(--scgj-white);
	    font-size:1em;
	}
	.homepage-divForMultipleEducationQualifications{
	  margin-left:53%;
	  margin-top:-11.5%;
	}
}

@media (min-width: 481px) and (max-width:576px){
 
	.dashBoardLogo{
		width:50%;
		height:1.2em;

	}
	.modalDialogBox {
	    width:auto;
	}

	.requiredAsterik{
		right:0em;	
	}
	.trainingThumbnailImageForViewSection {
		height: 11em;
	}
	.topMenuBarStyle {
	    padding: 3% 0%;
	}
	.filterIcon
	{
		height:1.5em;
	}
	.homeScgjlogo {
	    width: 53%;
	    margin-top:2%;
	    margin-left: -3%;
	}
	.topMenuBarOptions {
	    cursor: pointer;
		font-size: 2.3rem;
	}
	.topMenuBarTextStyle{
		display:none;
	}
	.topMenuBarMyProfileIcon {
	    font-size: 0.9em;
	    margin-right: 2%;
	}
	.topMenuBarHomeIcon {
	    font-size: 0.8em;
	    margin-right: 2%;
	}
	.topMenuBarMyProfileIcon {
	    font-size: 0.95em;
	    margin-right: 2%;
	}
	.largeScreenBannerImage{
		display:none;
	}
	.smallScreenBannerImage{
		display:block;
	}
	.bannerImage {
	    width: 100%;
	    height: 19em;
	}
	.bannerImageContent {
	    top: 10.5em;
	    left: 4.5%;
	}
	.bannerImageHeading {
	    font-size: 1.1em;
	    letter-spacing: normal;
	    margin-bottom: 7.5%;
	}
	.bannerImageText {
	    font-size: 1em;
	    margin-bottom: -1%;
	}
	.joinForFreeButton {
	    margin-top: 10.5%;
	    padding: 1% 6% 1% 6%;
	    font-size: 0.9em;
	}
	.carouselTextHeading{
		font-size:1em;
	}
	.carouselText{
		font-size:0.85em;
		margin:0;
	}
	.carouselTextBorderBottom{
		width: 10em;
	    margin-bottom: 2%;
	    margin-top: 1%;
	}
	.cardTrainingCost {
	    font-size: 1em;
	    margin-bottom: 10%;
	}
	.cardTrainingDescription {
	    font-size: 0.9em;
	}
	.cardTrainingDurationText {
	    font-size: 0.8em;
	}
	.cardTrainingName {
	    font-size: 1em;
	}
	.cardButton {
	    width: 35%;
	    font-size: 0.85em;
	}
	.trendingBackgroundImage {
	    width: 30%;
	}
	.upcomingTrainingHeadingDiv {
	    padding:3%;
	}
	.upcomingTrainingHeading {
	    margin: 2%;
	    font-size: 1em;
	    font-weight: bold;
	}
	.filterOptionsDiv{
		margin-bottom:6% !important;
	}
	.loadMoreButton {
	    margin-bottom: 10%;
	}
	#viewSessionDetailSmallScreenGrid{
		display:block;
	}
	#viewSessionDetailLargeScreenGrid{
		display:none;
	}
	.modalDialogBox {
	    width:auto;
	}
	.gridSection {
	    width: 88vw;
	}
	.modalGridTable {
	    width: 94%;
	    font-size: 0.77em;
	}
	.modalTrainingInformationText{
		font-size:0.8em;
	}
	.modalEnrollButton {
	    padding: 0% 4%;
	    font-size: 0.85em;
	    border-radius: 3px;
	    margin-right: 1%;
	}
	.enrollSuccessImage {
	    width: 25%;
	    margin-right: 3%;
	}
	.modalTrainingNameHeading{
		margin-bottom: 5%;
	}
	/* -- STANDARD STYLES -- */
	.errorContainer {
	    width: 95%;
	    margin: 3% auto 0 auto;
	}
	.errorMessageBox {
	    font-size: 0.8em;
	    padding: 0.5% 4%;
	    margin-bottom: 0%;
	}
	.standardSelectInputBox {
	    width: 100%;
	    padding: 2%;
	    font-size: 0.85em;
	}
	.standardCardContainer {
	    justify-content: center;
	}
	.standardCards {
	    width: 80%;
	    margin-bottom: 8%;
	}
	
	/*---- LOGIN PAGE STYLES --*/
	.loginLeftImageSection{
		display:none;
	}
	#landingPageWrapper{
	    height: 100%;
	}
	.loginFormSection {
	    width: 100%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 9%;
	    min-height:100vh;
	}
	.loginFormButton {
	    padding: 1% 7%;
	    font-size:0.85em;
	    margin-top: 6%;
	    width: 52%;
	}
	#phoneNumberLoginInput {
	    padding-left: 11%;
	    font-size: 1em;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 16%;
	}
	.loginInputBox {
	    font-size: 1em;
	}
	.loginErrorPanel {
	    width: 85%;
	}
	.loginErrorText {
	    margin-top: 0.5%;
	    font-weight: bold;
	    padding-left: 5%;
	}
	.errorCloseBtnDiv{
		padding-right:0%;
	}
	.loginFormHeading {
	    margin-top: 7%;
	    margin-bottom: 8%;
	}
	.resendOtpText {
	    top: 1.8em;
	    right: 5em;
	}
	.myProfileSection {
	    display: flex;
	    height: 100%;
	}
	.registerInputBox {
	    font-size: 1em;
	}
	#registrationFormPrefix{
		position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 17%;
	}
	.fileUploadContentForViewSection{
		width: 86%;
		text-align: center;
		margin-left:8%;
	}
}

@media (min-width:400px) and (max-width:492px){
	.commonBox{
		font-weight:400;
		height:2.5em;
		font-size:8px;
	    background: var(--sems-dark-blue);
	}
}
@media (min-width:324px) and (max-width:480px){
	.dashBoardLogo{
		width:90%;
		height:1.2em;
	}
}

@media (max-width:480px){

	.homepage-divForMultipleEducationQualifications{
		  margin-left:38%;
		  margin-top:-4%;
		  border: 1px solid black;
		  border-radius: 4px;
		  padding:-4%;
		  width:60%;
		}
	
	.homepage-education-selected-div
	{
		display: inline-block;
	    padding: 0.1% 0.7% !important;
	    font-size:0.8em;
	}
	.fileUploadContentForViewSection{
		width: 86%;
		text-align: center;
		margin-left:8%;
	}
	
	.requiredAsterik{
		right:0em;
	}
	.trainingThumbnailImageForViewSection {
		height: 9em;
	}
	.topMenuBarStyle {
	    padding: 3% 0%;
	}
	.homeScgjlogo {
	    width: 60%;
	    margin-top: 3%;
	    margin-left: -3%;
	}
	.topMenuBarOptions {
	    cursor: pointer;
		font-size: 2.3rem;
	}
	.topMenuBarTextStyle{
		display:none;
	}
	.largeScreenBannerImage{
		display:none;
	}
	.bannerImage {
	    width: 100%;
	    height: 19em;
	}
	.bannerImageContent {
	    top: 10.5em;
	    left: 4.5%;
	}
	.bannerImageHeading {
	    font-size: 0.9em;
	    letter-spacing: normal;
	    margin-bottom: 7.5%;
	}
	.bannerImageText {
	    font-size: 0.8em;
	    margin-bottom: -1%;
	}
	.joinForFreeButton {
	    margin-top: 10.5%;
	    padding: 1% 6% 1% 6%;
	    font-size: 0.9em;
	}
	.filterIcon{
		height:1.5em;
	}
	.smallScreenBannerImage{
		display:block;
	}
	.trendingBackgroundImage {
	    width: 30%;
	}
	.cardTrainingCost {
	    font-size: 0.95em;
	    margin-bottom: 10%;
	}
	.cardTrainingDescription {
	    font-size: 0.8em;
	}
	.cardTrainingDurationText {
	    font-size: 0.7em;
	}
	.cardTrainingName {
	    font-size: 0.95em;
	}
	.cardButton {
	    width: 35%;
	}
	.upcomingTrainingHeadingDiv {
	    padding: 4%;
	}
	.upcomingTrainingHeading {
	    margin: 2%;
	    font-size: 1em;
	    font-weight: bold;
	}
	.filterOptionsDiv{
		margin-bottom:6% !important;
	}
	.loadMoreButton {
	    margin-bottom: 10%;
	}
	#viewSessionDetailSmallScreenGrid{
		display:block;
	}
	#viewSessionDetailLargeScreenGrid{
		display:none;
	}
	.modalDialogBox {
	    width:auto;
	}
	.gridSection {
	    width: 88vw;
	}
	.modalGridTable {
	    width: 82vw;
	    font-size: 0.77em;
	}
	.modalTrainingInformationText{
		font-size:0.8em;
	}
	.modalEnrollButton {
	    padding: 0% 4%;
	    font-size: 0.85em;
	    border-radius: 3px;
	    margin-right: 3%;
	}
	.enrollSuccessImage {
	    width: 25%;
	    margin-right: 3%;
	}
	.modalTrainingNameHeading{
		margin-bottom: 5%;
	}
	.modalWarningTextDiv{
		margin-top:4%;
		font-size: 0.8em;
	}
	.modalLoginToEnrollDiv{
		margin-top:4%;
		font-size: 0.8em;
	}
	#landingPageWrapper{
	    height: 100%;
	}
	/* --STANDARD STYLES --*/
	.standardSelectInputBox {
	    width: 100%;
	    padding: 2%;
	    font-size: 0.75em;
	}
	.standardCardContainer {
	    justify-content: center;
	}
	.standardCards {
	    width: 80%;
	    margin-bottom: 8%;
	}
	.errorContainer {
	    width: 95%;
	    margin: 3% auto 0 auto;
	}
	.errorMessageBox {
	    font-size: 0.8em;
	    padding: 0.5% 4%;
	    margin-bottom: 0%;
	}
	
	/*---- LOGIN PAGE STYLES --*/
	.loginLeftImageSection{
		display:none;
	}
	.loginFormSection {
	    width: 100%;
	    background: var(--sems-light-grey);
	    margin-top: 0.2%;
	    padding: 9%;
	    min-height: 100vh;
	}
	.loginFormButton {
	    padding: 1% 7%;
	    font-size:0.85em;
	    margin-top: 6%;
	    width: 52%;
	}
	#phoneNumberLoginInput {
	    padding-left: 11%;
	    font-size: 1em;
	}
	.mobileNumberPrefix {
	    position: absolute;
	    left: 6%;
	    font-size: 1em;
	    top: 15%;
	}
	.errorMessageImage {
	    width: 2em;
	    margin-left: -1em;
	}
	.errorCloseBtnDiv{
		padding-right:0%;
	}
	.loginErrorPanel {
	    width: 85%;
	}
	.loginErrorText {
	    margin-top: 0.5%;
	    font-weight: bold;
	    padding-left: 5%;
	}
	.loginInputBox {
	    border: 1px solid black;
	    border-radius: 4px;
	    margin-bottom: 4%;
	    font-size: 0.9em;
	}
	.loginFormHeading {
	    margin-top: 7%;
	    margin-bottom: 8%;
	}
	.resendOtpText {
	    top: 1.5em;
	    right: 4em;
	}
	.myProfileSection {
	    display: flex;
	    height: 100%;
	}
	.registerInputBox {
	    font-size: 1em;
	}
	#registrationFormPrefix{
		position: absolute;
	    left: 7%;
	    font-size: 1em;
	    top: 14.5%;
	}
}
@media (max-width:400px){
	.commonBox{
		font-weight:400;
		height:2.5em;	
		font-size:8px;
	    background: var(--sems-dark-blue);
	}
	
}	

@media (max-width:324px){
	.dashBoardLogo{
		width:95%;
		height:1.2em;
	}
}
@media (max-width:375px){
	.bannerImageContent {
	    top: 8.5em;
	    left: 4.5%;
	}
	.bannerImage {
	    width: 100%;
	    height: 16em;
	}
}