/* 
    
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;
}

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

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

.logo-body {
    margin-top: 5%;
    min-height:55px;
	padding: 0px 0px 10px 0px;
	width: 460px;
}

.logo-container {
    padding-left: 0px;
	/*background-color:#ffffff;*/
}

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

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

@media only screen and (max-width : 920px) {
	
.logo {
    /*background-image:url(images/logo_custom_overly.png);*/
}
	
}	

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

/* change style wizard */

.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-blue.png);
	background-color: transparent;
	color:#344051;
}

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

.body-wizard {
	background-color: #3f4e60;
	/*background: transparent url(images/Background02.jpg) no-repeat;*/
	/*background: linear-gradient(to bottom,#dafdd3 0,#42623d 100%);;*/
}


/* change style for ssrpm body */
.ssrpmbody {
    /*background:url(images/fons_punts.gif) ;*/
	background-color: #ffffff;
    border-color: transparent;
    position: relative;
	padding: 0px 0px 0px 0px;
	margin-top: 0px; 
    height: 550px;
    width: 460px;
    box-shadow: #909090 2px 2px 10px 1px;
    border-radius: 5px;
    margin: 0px, 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: #158ba0;
}

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

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

/* change the filling color of the curent progressbar steps */
.progressbar-step-current{
    background-color: #158ba0;
    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: #158ba0;
}

/* 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:#033a5b;
}


/* change the border color and text color of the back and forward buttons submit*/
.btn-submit {
	color:#FFFFFF;
    border-color:#158ba0;
	background-color:#158ba0;
	font-weight:bold;  
	text-transform: Uppercase;	
	font-size: 15px;
	height:45px;
    width: 170px;
	border: 0px solid #158ba0;
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
	border-top: 0px solid #158ba0;
	box-shadow: #c0c0c0 0px 0px 0px 0px;
}

/* change the hover color of the back and forward buttons */
.btn-submit:hover {
	color:#FFFFFF;
	border: 0px solid #158ba0;
	background-color:#033a5b;
	text-transform: Uppercase;	
	border-top: 0px solid #158ba0;
	box-shadow: #158ba0 0px 0px 0px 0px;
}

.btn-submit:active {
	color:#ffffff;
    border-color: #158ba0 !important;
	border: 0px solid #158ba0 !important;
	background-color:#158ba0;
}
    
.btn-submit-disabled {
	text-transform: Uppercase;
    background-color: #F5F5F5;
    color: #c0c0c0;
   /*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
    letter-spacing: 0.3px;
	font-size: 15px;
	height:45px;
    width: 170px;
    bottom: 0px;
    right: 130px;
	border: 1px solid #c0c0c0;
    border-radius: 2px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    cursor: not-allowed !important;
	border-top: 1px solid #c0c0c0;
	box-shadow: #c0c0c0 0px 0px 0px 0px;
}

input[type=submit]:focus {
    color: #ffffff;
    border-color: #158ba0 !important;
	border: 0px solid #158ba0 !important;
	background: #158ba0;

}


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

.btn-glyph-faq:hover {
    color: #033a5b;
}

.btn-faq {
    height:45px;
    width: 170px;
    float: none;
	font-size: 15px;
	font-weight:bold;  
	border: 0px solid #158ba0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #158ba0;
	color: #ffffff;
	text-transform: Uppercase;
	border-top: 0px solid #158ba0;
	box-shadow: #c0c0c0 0px 0px 0px 0px;
}

.btn-faq:hover {
	color:#ffffff;
    border-color:#033a5b;
	background-color:#033a5b;
	border-top: 0px solid #033a5b;
	box-shadow: #033a5b 0px 0px 0px 0px;
}

.btn-faq:focus {
    color: #ffffff;
    border-color: #158ba0;
	background: #158ba0;
}

.mailto-icon {
    display: none;
	color:#158ba0;
}

.mailto-icon:hover {
	color:#033a5b;
}

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

.tooltip-inner {
    background-color: #033a5b;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #033a5b;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #033a5b;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #033a5b;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #033a5b;
}


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

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

.formheader-text {
	color:#344051;
}

/* 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: #ffffff;*/
    background-size: cover;
}