/* 
    
The purpose of this stylesheet is to add custom styling to the SSRPM wizard. If you want to activate an selector you have te end the comment above by typing */ 

/* 
    
    /* Sections:
    1. Typography
    2. Logo
    3. Color
    4. Background

*/


/* 1. Typography
---------------------------------------
*/

html {
	/*font-variant: small-caps;*/
}

.form-control-bold{
    font-weight:bold;
}

body {
	/*font-family:"Open Sans", Helvetica, Arial, sans-serif;*/
  
   font-size: 10pt;
}

/* 2. Logo
---------------------------------------
*/

/* Add your logo. Make sure the height of the logo you load is 35px */

.logo-body {
    margin-top: 5%;
    min-height:101px;

}

.logo-container {
    padding-left: 0px;
	/*background-color:#016450;*/
	background: #ffffff;
	width: 450px;
	background-color:  rgba(255, 255, 255,0.80);
}

/*  if uploading a custom logo make sure height is 35px */
.logo {
    background-image:url(images/logo_custom.png);
	background-repeat: no-repeat;
	height:100px;
	margin-top: -40px;
    margin-left: 0px;
	background-position:center;
	display:block;
}

@media only screen and (max-width : 900px) {
.logo {
	 display:block;
	 
}
.logo-container {
    padding-left: 0px;
	/*background-color:#016450;*/
	background: transparent;
	width: 450px;
}
}

/* Change the thumbnail logo in the wizard title bar. Make sure the image width and height are 100px */

.wizard-style {
    z-index: 1500;
    background: #ffffff none repeat;
    width: 120%;
    height: 700px;
    position: absolute;
    margin-left: -10%;
    margin-top: -50%;
    box-shadow: -5px 21px 60px 10px #c0c0c0;
    -webkit-box-shadow: -5px 21px 60px 10px #c0c0c0;
}


.wizard-title {
	background-image: url(images/t4e-logo-grey.png);
	background-color: transparent;
	color:#000000;
}

/* change the background color of the pop out wizard */

.body-wizard {
    background-color: #eaebec;
	/*background: transparent url(images/body-wizard.jpg)repeat left fixed;*/
	/*background: linear-gradient(to bottom,#dafdd3 0,#f4f4f7 100%);;*/
}

/* change style for ssrpm body */
.ssrpmbody {
   background:url(images/fons_punts.gif) ;
	background-color: #ffffff;
    border-color: transparent;
    position: relative;
    height: 550px;
    width: 450px;
    box-shadow: #909090 0px 0px 0px 0px;
    border-radius: 0px;
    margin: 0 auto;
}

/*
    3. Color
---------------------------------------
*/

/* This wil change the text color in the formheader */
.formheader {
    color: ;
}

/* Change the color of the progress bar */
.progress-bar {
    background-color: #7b7c80;
}

/* change the border color of the progressbar steps */
.progressbar-step {
    border: 3px solid #7b7c80;
}

/* change the filling color of the progressbar steps */
.progressbar-step-filled {
    background-color: #7b7c80;
    color: #ffffff;
}

/* change the filling color of the curent progressbar steps */
.progressbar-step-current{
    background-color: #7b7c80;
    color: #ffffff;
}
.progressbar-step-empty {
    background-color: #fff;
    color: #c0c0c0;
	border: 3px solid #c0c0c0;
}


/* change the text color of the icon text on the start page */
.icon {
    color:;
}

.icon:hover {
    color:;
}

/* change the text color of the icon ssrpm */
.SSRPM-icon:before,
.enroll-icon:before,
.reset-icon:before,
.change-icon:before,
.unlock-icon:before,
.onboarding-icon:before,
.forgotusername-icon:before,
.user-icon:before
{
    color: #0ea6c6;
}

/* change the hover color of the icon ssrpm */
i.enroll-icon:hover:before,
i.reset-icon:hover:before,
i.change-icon:hover:before,
i.unlock-icon:hover:before,
i.onboarding-icon:hover:before,
i.forgotusername-icon:hover:before,
i.user-icon:hover:before
{
    color:#0ea6c6;
}


/* change the border color and text color of the back and forward buttons submit*/
.btn-submit {
	color:#ffffff;
    border-color:#80adb4;
	background-color:#80adb4;
	font-weight:normal;  
	text-transform: uppercase;	
	font-size: 15px;
	height:40px;
    width: 150px;
	border: 1px solid #80adb4;
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

/* change the hover color of the back and forward buttons */
.btn-submit:hover {
	color:#ffffff;
    border-color:#6098a1;
	background-color:#6098a1;
	text-transform: uppercase;	
}

.btn-submit:active {
	color:#ffffff;
    border-color: #6098a1;
	background-color:#6098a1;
}
    
.btn-submit-disabled {
	text-transform: uppercase;
    background-color: #c0c0c0;
    color: #f4f4f4;
   font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.3px;
	font-size: 15px;
    height: 40px;
	width: 150px;
    bottom: 0px;
    right: 150px;
    border: 0px #c0c0c0;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    cursor: not-allowed !important;
}

input[type=submit]:focus {
    color: #ffffff;
    border-color: #6098a1;
	background: #6098a1;

}

/* change the icon color/hover color of the faq icon and forward buttons style */
.btn-glyph-faq {
    color: #0ea6c6;
}

.btn-glyph-faq:hover {
    color: #0ea6c6;
}

.btn-faq {
    height:40px;
    width: 150px;
    float: none;
	border: 1px solid #80adb4;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #80adb4;
	color: #ffffff;
	text-transform: uppercase;
}

.btn-faq:hover {
	color:#ffffff;
    border-color:#6098a1;
	background-color:#6098a1;
}

.mailto-icon {
    display: none;
	color:#0ea6c6;
}

.mailto-icon:hover {
	color:#0ea6c6;
}

/* change the color of the tooltip/popover */

.tooltip-inner {
    background-color: #0ea6c6;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #0ea6c6;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #0ea6c6;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #0ea6c6;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #0ea6c6;
}

/* faq font size questions*/
h3 {
    font-size: 18px;
}

/* faq font size header */
h1 {
    font-size: 22px;
	font-weight:bold;
}

h3 {
    color: #221e20;
   font-family:"Open Sans", Helvetica, Arial, sans-serif;
}


h1 {
    color: #0ea6c6;
   font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
    font-style: italic;
	color: #76757C;
}


/* change the color of the label text */
label {
    color:#292c33;
	font-weight: normal;
}

/* change the color of the links on the home page when not using the wizard overlay*/
.ssrpm-label {
    color:#292c33;
}
.ssrpm-label:hover{
color:#292c33;
}

.formheader-text {
	color:#292c33;
}

/* - -------Custom footer Copyright ------ */

.help-block {
    display: block;
    color: #e3e6e7;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .72);
}


span.help-block {
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: .5;
    transform: translateX(-100%);
    background-color: #fff;
    text-shadow: none;
    min-height: 30px;
    padding: 3.5px 8px;
    color: grey;
    z-index: 1001;
    box-shadow: 0 0 64px rgba(0,0,0,.4);
    transition: transform .2s ease-out,opacity .1s ease-out
}

span.help-block:after {
    content: "\f05a";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 30px;
    right: -30px;
    line-height: 30px;
    border-top-right-radius: 3px;
    background-color: #fff
}

span.help-block:hover {
    opacity: .9;
    transform: translateX(0)
}

span.help-block:hover:after {
    border-left: 1px solid grey
}

/*do not display help-block Copyright in the overlay */

@media only screen and (max-width : 920px) {
	
span.help-block {
    display: none;
}
	
}

/* 4. Background
---------------------------------------
*/

/* This is the default background image. If you want to show custom images then override the default background images within the Images folder with an high-res image of your choosing */
.body-image {
	background: transparent url(images/Background01.jpg) no-repeat center fixed;
	/*background: #ffff;*/
    background-size: cover;
}