@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

@font-face {
    font-family: 'Unilever Shilling';
    src: url('../fonts/UnileverShilling-Bd.eot');
    src: url('../fonts/UnileverShilling-Bd.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UnileverShilling-Bd.woff2') format('woff2'),
        url('../fonts/UnileverShilling-Bd.woff') format('woff'),
        url('../fonts/UnileverShilling-Bd.ttf') format('truetype'),
        url('../fonts/UnileverShilling-Bd.svg#UnileverShilling-Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
body {
	font-family: 'Open-Sans',sans-serif;
	background-color: #fff;
}

h1 {
	font-family: 'Unilever Shilling',Arial,sans-serif;
	font-size: 30px;
	margin-top: 15px;
	margin-bottom: 25px
}

h2 {font-family: 'Unilever Shilling',Arial,sans-serif;}	
h3 {font-family: 'Unilever Shilling',Arial,sans-serif;}
h4 {font-family: 'Unilever Shilling',Arial,sans-serif;}
h5 {font-family: 'Unilever Shilling',Arial,sans-serif;}
h6 {font-family: 'Unilever Shilling',Arial,sans-serif;}

.btn-info {
	color:#fff;
}

.prel {
	position: relative;
}

.cUFSOrange { color: #ff5a00!important; }

.bgUFSOrange { background-color: #ff5a00!important;color: #fff!important; }
.borderRadius5 { border-radius: 5px; }
.orangeGradient {
	background: #e3581d;
	background: -moz-linear-gradient(top,#e3581d 0,#e3581d 20%,#fcab3e 100%);
	background: -webkit-linear-gradient(top,#e3581d 0,#e3581d 20%,#fcab3e 100%);
	background: linear-gradient(to bottom,#e3581d 0,#e3581d 20%,#fcab3e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3581d', endColorstr='#fcab3e', GradientType=0);
}

.contentDiv { background-color: #fff; margin-bottom: 60px; font-size: 16px; font-family: 'Roboto Condensed', sans-serif;}
.footerDiv { position: fixed; bottom:0; }
.nav-item { width:100%; font-family: 'Unilever Shilling',sans-serif; padding-left:15px; padding-right:15px; margin-bottom:3px; }
.nav-item a { color:#fff;  }
.nav-item a:hover { background-color: #efefef; color:#000; border-radius:4px; }
.nav-item  .active { background-color: #fff; color:#000; border-radius:4px; }
#navbarNavDropdown { margin-top: 15px; }


.navbar-light .navbar-toggler {
	color: #fff;
	background-color: transparent;
	border-color: transparent;
	border-width: 0!important;
	outline: none!important;
	border: none !important;
	background-color: transparent;
	box-shadow: none;
}
.navbar-light .navbar-toggler:hover {
	outline: none!important;
	border: none !important;
	background-color: transparent;
	box-shadow: none;
}
.navbar-light .navbar-toggler:focus{
	outline: none!important;
	border: none !important;
	background-color: transparent;
	box-shadow: none;
}

.logoImg {
	max-height: 45px;
}

.loggedinUser {  
	background-color: #fff;
	float: right;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 5px;
	color: #ff5a00;
	cursor:pointer;
}
.logoutBtn {
	background-color: #fff;
	float: right;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 5px;
	color: #ff5a00;
}
.logoutBtn:hover { color:#000; }

.accountBtn {
	background-color: #fff;
	float: right;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 5px;
	color: #ff5a00;
}
.accountBtn:hover { color:#000; }

.admBtn {
	background-color: #0866a0;
	float: right;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 5px;
	color: #fff;
}
.admBtn:hover { color:#0866a0; background-color: #fff;}

.fgpassPanel {
	color:#000;
}

.fgpassPanel a {
	color:#000;
	text-decoration: none;
}
.fgpassPanel .form-control {
	border-color: #ff5a00;
}
.fgpassPanelInner{
	margin-top: 5%;
	background-color: #f2f2f2;
	border-radius: 8px;
	padding: 15px;
}
.loginPanel {
	color:#000;
}

.loginPanel a {
	color:#000;
	text-decoration: none;
}
.loginPanel .form-control {
	border-color: #ff5a00;
}
.loginPanelInner{
	margin-top: 5%;
	background-color: #f2f2f2;
	border-radius: 8px;
	padding: 15px;
}
.btn-orange {
  color: #000;
  background-color: #ff5a00;
  border-color: #ff5a00;
}
.btn-orange:hover {
	color: #333;
}
.btn-red {
  color: #fff;
  background: #ff5a00;
  padding: 5px 7px;
  border-radius: 3px;
  border: 0;
  background: #cd0a2e;
  background: -moz-linear-gradient(top,#cd0a2e 0,#870019 100%);
  background: -webkit-linear-gradient(top,#cd0a2e 0,#870019 100%);
  background: linear-gradient(to bottom,#cd0a2e 0,#870019 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd0a2e', endColorstr='#870019', GradientType=0);
  border-color: #a30421;
}
.btn-red:hover {
	background: #ff5a00;
	color: #000;
}


.centerWrapper {
  display: table;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.centered {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

/*BLOCK CSS*/
.contentBlocks {}
.contentBlocks .blockrow { margin-bottom: 15px; }
.contentBlocks .pItem {}
.contentBlocks .htmlItem { padding-bottom:15px; }
.contentBlocks .imgItem {}
.contentBlocks .imgItem img { max-width:100%; width: 100%; margin-bottom: 5px; }
.contentBlocks .imgAItem {}
.contentBlocks .imgAItem img { max-width:100%; width: 100%; margin-bottom: 0px; }
.contentBlocks .imgGalItem {}
.contentBlocks .imgGalItem img { max-width:100%; width: 100%; margin-bottom: 5px; }
.contentBlocks .imgATxtItem {}
.contentBlocks .imgATxtItem { color : inherit; text-decoration: none; }
.contentBlocks .imgATxtItem:hover { color : inherit; text-decoration: none; }
.contentBlocks .imgATxtItemImgHolder {}
.contentBlocks .imgATxtItemImgHolder img { max-width:100%; width: 100%; margin-bottom: 5px; }
.contentBlocks .imgATxtItemContentHolder {}
.contentBlocks .h1Item { font-size: 30px; }
.contentBlocks .h2Item { font-size: 25px; }
.contentBlocks .h3Item {}
.contentBlocks .h4Item {}
.contentBlocks .h5Item {}
.contentBlocks .h6Item {}

#mainpage { margin-top:30px; }
.contentBlocks .mainpageblock  { margin-bottom:25px; margin-top:0;  position:relative;}
.contentBlocks .mainpageblock > a { border: 0px solid #efefef; display: inline-block;box-shadow: 0px 0px 10px #c4c4c4; }

#story { margin-top:30px; }
.contentBlocks .storyblock { margin-bottom:25px; margin-top:0;  position:relative; text-align: center;}
.contentBlocks .storyblock > a { border: 0px solid #efefef; display: inline-block;box-shadow: 0px 0px 10px #c4c4c4; }

#promotions { margin-top:30px; }
.contentBlocks .promotionblock  { margin-bottom:25px; margin-top:0;  position:relative; text-align: center;}
.contentBlocks .promotionblock > a { border: 0px solid #efefef; display: inline-block;box-shadow: 0px 0px 10px #c4c4c4; }

.contentBlocks .video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.contentBlocks .video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.contentBlocks .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#contactForm {}
#contactForm input[type=text]{ border:1px solid #ff5a00;}
#contactForm input[type=tel]{ border:1px solid #ff5a00;}
#contactForm input[type=email]{ border:1px solid #ff5a00;}
#contactForm textarea { border:1px solid #ff5a00; height:100px; width: 100%; }

.sendLinkMailBlock { position: absolute;background-color: transparent;display: inline-block;left: 15px;right: 20px;text-align: right;top: 10px; }
.sendLinkMailBlock > i { color: #ff5a00; padding: 9px;background-color: rgba(0, 0, 0, 0.11); border-radius: 50%;font-size: 13px; border: 1px solid #fff; } 
.sendLinkMailBlock > i:hover { padding: 9px;background-color: rgba(255,255,255,1); border-radius: 50%;font-size: 13px; cursor:pointer; border: 1px solid #ff5a00;} 

#sendpdflinkPanel {
	overflow: auto;
	overflow-x: hidden;
}

#floatingPanel {
	display:none;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
#floatingPanelWindow {
	background-color: #fff;
	width: 100%;
	max-width: 800px;
	min-height: 200px;
	margin: 5% auto;
	border: 1px solid #ff5a00;
	border-top: 0px;
}
#floatingPanelWindowCloseBtn {
	
	background-color: #fff;
	border-radius: 0;
}
#floatingPanelHead {
	background-color: #ff5a00;
	color:#fff;
	width: 100%;
	display: block;
	float: left;
}
#floatingPanelContent {
  border-bottom: 0px solid #ff5a00;
}
#floatingPanelContent .video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

#floatingPanelContent .video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

#floatingPanelContent .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#trainings-required {
	margin-top: 15px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	display:block;
	width:100%;
	border-bottom: 1px solid #ddd;
}
#trainings-optional {
	margin-top: 15px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	display:block;
	width:100%;
	border-bottom: 1px solid #ddd;
}

.trBlock {
	position: relative;
	margin-top: 10px;
	margin-bottom: 15px;
}
.trSign { display: block;position: absolute;right: 25px;top: 10px; z-index:6;}
.trSign i { margin-right: 5px; }
.trSignNew { color: #fff;background-color: rgba(51, 69, 251, 0.8);padding: 5px 10px; }
.trSignOk { color: #fff;background-color: rgba(9, 174, 66, 0.8); padding: 5px 10px; }
.trSignUnSucc { color: #000;background-color: rgba(255, 211, 101, 0.8); padding: 5px 10px; }
.trSignFailed { color: #fff;background-color: rgba(178, 6, 0, 0.8); padding: 5px 10px; }

.trainingDiv {
  background-color: #fff;
  margin-bottom: 60px;
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
}

.trainingDiv .btn {
	font-size:18px;
	font-weight: bold;
	padding: 10px 15px;
}

.trainingDiv .trName {
	font-size: 24px;border-bottom: 1px solid #000;margin-bottom: 25px;
}

.trainingDiv .trStep { }

.trainingDiv .trResultTitle { 
	color: #000;
	font-weight: bold;
	font-family: 'Unilever Shilling',Arial,sans-serif;
	font-size: 30px;
	margin-top: 15px;
	margin-bottom: 25px;
	border-bottom: 1px dotted #333;
	padding-bottom: 5px;
}

.trainingDiv .trResSuccess { 
	color: rgb(9, 174, 66)!important;
}


.trainingDiv .trResFailed { 
	color: rgb(178, 6, 0);
}

.trainingDiv .result-success { 
	background-color: rgba(9, 174, 66, 0.8) !important;
	color: #fff;
}

.trainingDiv .result-failed { 
	background-color: rgba(178, 6, 0, 0.8) !important;
	color: #fff;
}


.lessonName {
	color: #ff5a00;
	font-weight: bold;
	font-family: 'Unilever Shilling',Arial,sans-serif;
	font-size: 30px;
	margin-top: 15px;
	margin-bottom: 25px; 
	border-bottom: 1px dotted #333;
	padding-bottom:5px;
}
.lessonDesc {
	font-size:18px;
	font-weight: normal;
}
.lessonImg {}
.lessonImg > img {}

.qeQuestion {
	color: #ff5a00;
	font-weight: bold;
	font-family: 'Unilever Shilling',Arial,sans-serif;
	font-size: 30px;
	margin-top: 15px;
	margin-bottom: 25px; 
	border-bottom: 1px dotted #333;
	padding-bottom:5px;
}
.qeAnswers {
	font-size:18px;
	font-weight: normal;
}
.answLabel {width: 100%;margin-bottom: 10px;border-bottom: 1px solid #efefef;padding-bottom: 10px;}
.answChkBox { margin-right: 15px;scale: 1.5;}
.answText {}
.qeImg {}
.qeImg > img {}

.answResSign {
  font-size: 26px !important;
  float: left;
  margin-right: 15px;
}