/*demo CSS to clear up form*/

/*
# - declares an id (unique)
. - declares a class (can classify multiple elements)
*/


/* set global variables (just makes changing colours easier)*/
:root {
    --background: #363636;
}

/* make sure the entire background is consistant, even in case of anonymous access */
html, body {
	background-color: var(--background)!important;
}

#wrapperHeader{
    position: relative;
    background-image:url(images/header.png);
    background-color: #363636 !important;
    border-color: #363636 !important;
    color: white;
    font-family: Roboto;
    font-size: 14px;
}

/* div.page-head {
background-color: #363636 !important;
color: #FFF !important;
} */

.page-top {
    background-color: #737373 !important;
    color: white !important;
}

h2.workflowHeadingTitle {
    color: white !important;
    font-weight: 40px;
}

#header{
    left: 50%;
    margin-left: -500px;
    background-color: #737373 !important;
    background:url(https://www.accesscal.org/wp-content/uploads/2015/04/cdss.png) no-repeat;
    width:1000px;
    height:200px;
}

/* Form design*/
form#StageSubmitForm {
    background-color: #FFF !important;
    color: #000;
    background-image:url(https://municibid.com/nj/njbidders/assets/img/NJstatelogo.png) no-repeat;
}

/* Form heading*/
h3 {
    border-color: #000 !important;
    color: #000 !important;
}

/* Breadcrumb design*/
.section-breadcrumb-item.active {
    border-bottom: 5px solid #363636 !important;
    cursor: default;
    font-weight: 15px;
}

/*this is the "paper" which the form lives on - Primary Background*/
#workflow-wrapper {
	background-color: #363636 !important;
	padding: 50px 0px!important; /*add padding to the top of the form*/
	display: block!important; /*bring form up to the top of the page (used to be display: flex)*/
}

/*make the form centered and 1000px wide*/
#workflow-background-wrapper {
    float: none!important;
    margin: auto!important;
    width: 100%!important;
    border-right: none!important; /*removes grey verticle line on right of form*/
}

/*remove extra stuff that you don't need to see*/
.workflowRightTab, .infoSection, .page-head {
    /*use display and not visibility, so you totally remove the elements from taking space*/
    display:none!important;
}

/*reduce the space underneath the submit button*/
#formPartialDiv {
    margin-bottom: 50px!important;
}

/*style area, text fields and drop downs with clear background and lighter border*/
.formFieldWrapper.text-area-wrapper textarea.textarea-input, .form-element-wrapper.text-area textarea.field, .formFieldWrapper.text-box-wrapper input.input-text, .form-element-wrapper.text-box input.field, .select2-container--bootstrap .select2-selection {
    box-shadow: none;
    background-color: #FFF !important;
    border: 1px solid #000 !important;
    border-radius: 4px;
    outline: 0;
    font-family: Roboto;
    font-size: 16px;

}

/*style area, text fields and drop downs with clear background and lighter border*/
input[type="text"] {
	background-color: #FFF !important;
    border: 1px solid rgb(240, 240, 240);
}

/*line up elements at the top instead of on the bottom*/
.workflowContent .formFieldWrapper.align-block-30, .workflowContent .formFieldWrapper.align-block {
	vertical-align: top;
}

/* change color of submit/save/section buttons */
.form-save-button, .form-reset-button, .form-print-button, .form-change-section, .form-collaboration-stage-submit-button, .form-submit-button, #divWorkflowContent .buttonPopup.blue {
    border-color: #363636!important;
    background-color: #363636 !important;
    font-weight: 18px;
}

/*add pafding to top of buttons, looks a bit squished without it*/
.form-section-buttons {
	margin-top: 30px!important;
}

.withQTip.toCheck.input-text.textfield {
	width: 100%;
}

div.page-footer {
background-color: #363636;
color: #FFF;
}