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

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

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

/* Add your logo. Make sure the height of the logo you load is 35px */
.logo {
    background-image:url(images/logo.png);
	background-repeat: no-repeat;
	height: 120px;
}

/* Change the thumbnail logo in the wizard title bar. Make sure the image width and height are 100px */
.wizard-title {
    background-image:url();
}

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

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

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

/* change the border color of the progressbar steps */
.progressbar-step {
    border-color: #0055a0;
}

.enroll-icon:before {
    color: #0055a0;
}

.reset-icon:before {
    color: #0055a0;
}

.change-icon:before {
    color: #0055a0;
}

.SSRPM-icon:before {
    color: #0055a0;
}

.user-icon:before {
    color: #0055a0;
}

.fa-question-circle:before {
    color: #0055a0;
}

.formheader-text {
    color: #0055a0;
}

/* change the filling color of the progressbar steps */
.progressbar-step-filled {
    background-color: #0055a0;
}

/* change the filling color of the curent progressbar steps */
.progressbar-step-current{
    background-color: #0055a0;
}

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

/* change the background color of the pop out wizard */
.body-wizard {
    background-color: #0055a0;
}

/* change the border color and text color of the back and forward buttons */
.btn-submit {
    border-color: #0055a0;
    /*text*/color:;
}

/* Change the border color of the SSRPM Box */
.ssrpmbody {
    box-shadow: rgb(0,85,160) 1px 1px 1px 1px;
}

/* change the hover color of the back and forward buttons */
.btn-submit:hover {
    background-color: #0055a0;
	border-color: #0055a0;
}

input[type=submit]:focus {
    background-color: #0055a0;
    border-color: #0055a0;
}

h1 {
	color: #0055a0;
}

h3 {
	color: #0055a0;
}


/* change the color of the label text */
label {
    color: #0055a0;
}

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

/* chang the hover color of the FAQ button*/
.btn-faq:hover {
    background-color: #0055a0;
	border-color: #0055a0;
}

/* chang the hover color of the FAQ button*/
.btn-faq {
    background-color: #0055a0;
	border-color: #0055a0;
}

/* 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: url(images/Background.jpg) no-repeat center fixed;
    background-size: cover;
}


/* -------------- */
/* Responsive Custom */

@media only screen and (max-width : 520px) {
    form {
        width: 100%!important;
        position: relative!important;
        padding: 0!important;
    }
}

@media only screen and (max-width : 520px) {
    .float-right-container {
        position: absolute;
        float: right;
        width: 95%;
        padding-right: 0px;
    }
}

@media only screen and (max-width : 520px) {
    .icon-container {
        height: 50px;
        /*height: 10vh;*/
        position: relative;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .formheader-vertical {
        top: 10px;
        left: 100px;
        position: absolute;
        height: 110px;
        min-width: 0;
        width:25vw;
        padding-left: 2%;
    }
    
    .valid-input-icon-test {
        margin-right: 22px;
        display:none;
    }
}
    
@media only screen and (max-width : 520px) {
    
    .form-icon:before,
    .adselfservice-icon:before,
    .change-icon:before,
    .unlock-icon:before,
    .reset-icon:before,
    .enroll-icon:before{
        font-size:45px!important;
    }

    .form-icon{
        left:33px!important;
    }    
}

@media only screen and (max-width : 520px) {
    form {
        width: 100% !important;
        position: relative !important;
        PADDING: 0 !IMPORTANT;
        height:100%!important;
    }
    
    .form-container {
        height: auto;
        margin-top: 0;
    }
    
    .form-control {
        border-radius: 0px;
        height:48px;
        padding: 6px 12px;
        display: block;
        width:100%;
    }

    .formheader {
        height: auto;
        display: inline-flex;
    }

    .formheader-text {
        width: 85vw;
		margin-right: 30px;
        margin-left: 10px;
        top: 20px;
        -webkit-transform-origin-x: 0;
        transform: translateY(-0%);
    }

    .form-body {
        top: 140px;
        clear: both;
    }

    .text-container {
        /* text-align: center; */
        white-space: initial;
        word-spacing: 3px;
        width: 100%;
        position: inherit;
        /* left: 18px; */
        margin-top: 20px;
        margin-bottom: 10%;
    }

    .btn-ok {
        margin-right: 0;
        float: right;
    }

    #BackBtn {
        margin-right: 0;
        width: 49%;
        display:inline;
    }

    #NextBtn {
        margin-right: 0;
        width: 49%;
        /*display:inline;*/
    }

    .nav-btn-group {
        float: NONE;
        padding: 0px 0px 0px 0px;
        position: absolute;
        width: 100%;
        margin-top: 27%;
    }

    .btn-submit {
        border-radius: 0;
        padding: 6px 12px;
        display: block;
        width: 100%;
        height: 48px;
        background-color: #02A0C0;
        color: #FFF;
        border: none;
        behavior: url(../Content/IE8/PIE.htc);
        background: #02A0C0;
    }

    .body-image {
        background: url(images/Background01.jpg) no-repeat center fixed;
        background-size: cover;
        overflow-y: auto;
        overflow-x: hidden;
        background: none!important;
    }

    .form-icon {
        position: inherit!important;
		display:none;
    }

    .form-icon:before,
    .adselfservice-icon:before,
    .change-icon:before,
    .unlock-icon:before,
    .reset-icon:before,
    .enroll-icon:before{
        font-size:45px!important;
    }

    .option-icons {
        color: #000001;
        width: 88vw;
        margin-top: 6%;
        padding-left: 0;
    }
    
    .logo-body {
      
        /* padding: 0px 2px 0px 7px; */
        /* position: absolute; */
        margin: 0;
        margin-top: 0;
        
		background: url(images/djiresponsive.png);
		background-position: right;
		 background-size: auto;
    }

    /* Responsive progress */
    .progress-div {
        position: inherit;
        height: 7vh;
        margin-top: 8%;
    }   

    .progress {
        width: 100%;
        margin: 0;
        top: 17px;
    }

    .progressbar-step {
        text-align: center;
        border: 2px solid RGB(0,0,0);
        line-height: 2;
        padding:0;
    }

    label {
        margin-left:0px;
		color: #000;
    }


    .ssrpm-label {
        width:60%;
    }

    label.form-group {
        margin-left: 0;
    }
 
    .alert-danger{
        width:auto;
    }

    .alert-group {
        float: inherit;
        left: auto;
        right: auto;
        margin: 0 auto;
        position: absolute;
        z-index: 1600;
        padding: 0px;
    }
    
    #dropdown-language {
        background-color: transparent;
        color: transparent;
        float: right;
        border-color: transparent;
        width: 50px;
        padding-right:0px;
        margin: 0px;
    }
    
    .dropdown-language {
        padding-right:0px;
        margin: 0px;
    }
    
    .language-choice-label{
        display:none;
        visibility:hidden;
    }

    .dropdown-toggle{
        width:40px;
    }
    
    .ssrpmbody {
        height: 70vh;
        width: 100%;
        padding: 0 6%;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0px;
        background-color: #FFF;
    }
    
    .form-icon {
        position: inherit!important;
    }

    .icon{
        margin-left:0!important;
    }
    
    .formheader-vertical {
        top: 0;
        left: 0;
        position: inherit;
        height: auto;
        min-width: 0;
        width: 0;
        padding-left: 0;
    }

    .valid-input-icon-test {
        margin-right: 22px;
        display:none;
    }
    
    .adselfservice-form-header {
        height: 100px;
        width: 100%;
        /* display: inline-block; */
    }

    .thumbnail-options {
        display: none;
    }

    .thumbnail-container{
        text-align: left;
    }

    .adselfservice-form-header {
        height: auto;
        text-align: center;
        margin: 6% 0 0;
    }

    .profile-text-container {
        width: 100%;
        display: block;
        margin: auto auto;
        padding: 4% 5%;
        color: #000058;
        height: inherit;
        vertical-align: top;
        text-align: left;
    }

    .adselfservice-form-container {
        width: auto;   
    }

    .input-profile {
        width: 84vw!important;
    }

    html {
        background-color: #FFF;
    }

    .btn-submit-disabled {
       display:none;
    }
    
    .form-body-optradio {
        padding: 0;
    }

    .optradio-text {
        width: 70vw!important;
    }
        
    .col-lg-12, .col-sm-12, .col-md-12{
       min-height: 100%;
    }

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

/* Change the color of the icons on the start page */

.enroll-icon:before {
    color: #000;
}

.reset-icon:before {
    color: #000;
}

.change-icon:before {
    color: #000;
}

.SSRPM-icon:before {
    color: #000;
}

.user-icon:before {
    color: #000;
}

.fa-question-circle:before {
    color: #000;
}

/* change the border color of the progressbar steps */
.progressbar-step {
    border-color: #000;
}

/* change the filling color of the progressbar steps */
.progressbar-step-filled {
    background-color: #000;
	color:#fff;
}

/* change the filling color of the curent progressbar steps */
.progressbar-step-current {
    background-color: #000;
}

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

/* change the background color of the pop out wizard */
.body-wizard {
    background-color: #000;
}


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

.password-rule-label {
    color: #000;
}

.formheader-text {
    color: #000;
}


	body {	
	color: #000;
}

.extratext {
	margin-top:150px;
	color:#000;
}

} /* end responsive */