:root {
  --color-1: #221E71;
  --color-2: #8A171A;
}

.smart-forms .header-agency {
	background-color:var(--color-1);
	border-top:1px solid var(--color-2);
	border-bottom:5px solid var(--color-2);
}

/*
KEEP _ so these values are not changed with auto replace
221E71 = MAIN BAR
8A171A = TRIM
*/

.smart-forms .header-agency h4 { color:#FFFFFF; }

.smart-forms .header-agency .sub_header { color:#FFFFFF; }

.smart-forms .bar-agency > .bar { background-color: var(--color-2); }

.smart-forms .theme-agency .tagline span{ color:var(--color-2); }

.smart-forms .theme-agency .smart-link{ color:var(--color-2); }

/* @buttons ------------------------------------------------------ */

.smart-forms .btn-agency{background-color: var(--color-2);}

.smart-forms .btn-agency:hover, 
.smart-forms .btn-agency:focus{ background-color: var(--color-1); }

.smart-forms .btn-agency:active{background-color: var(--color-2); }

.smart-forms .btn-agency,
.smart-forms .btn-agency:hover, 
.smart-forms .btn-agency:focus,
.smart-forms .btn-agency:active{ color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.08); }

/* @hover | focus  ----------------------------------------------------- */

.smart-forms .theme-agency .gui-input:hover,
.smart-forms .theme-agency .gui-textarea:hover,
.smart-forms .theme-agency .select > select:hover,
.smart-forms .theme-agency .select-multiple select:hover, 
.smart-forms .theme-agency .gui-input:hover ~ .input-hint,
.smart-forms .theme-agency .file .gui-file:hover + .gui-input,
.smart-forms .theme-agency .gui-textarea:hover ~ .input-hint { border-color: var(--color-2); }

.smart-forms .theme-agency .gui-input:focus,
.smart-forms .theme-agency .gui-textarea:focus,
.smart-forms .theme-agency .select > select:focus,
.smart-forms .theme-agency .select-multiple select:focus{ border-color: var(--color-2); color: #3C3C3C; }

.smart-forms .theme-agency .gui-textarea:focus{  height: 120px; }

.smart-forms .theme-agency .select > select:focus { z-index:10; z-index:20\9; }

.smart-forms .theme-agency .gui-input:focus ~ .field-icon i,
.smart-forms .theme-agency .gui-textarea:focus ~ .field-icon i{ color:var(--color-2); }

.smart-forms .theme-agency .select-multiple select:focus, 
.smart-forms .theme-agency .gui-input:focus ~ .input-hint,
.smart-forms .theme-agency .gui-textarea:focus ~ .input-hint, 
.smart-forms .theme-agency .file .gui-file:focus + .gui-input{ border-color: var(--color-1); }

.smart-forms .theme-agency .select > select:focus + .arrow{ color:var(--color-1); }

/* @check + radio ------------------------------------------------------- */

.smart-forms .option-agency input:hover + .checkbox,  
.smart-forms .option-agency input:hover + .radio{ border-color: var(--color-2); }

.smart-forms .option-agency input:checked + .checkbox, 
.smart-forms .option-agency input:focus + .checkbox, 
.smart-forms .option-agency input:checked + .radio, 
.smart-forms .option-agency input:focus + .radio{ border-color: var(--color-2); }

.smart-forms .option-agency input:checked + .radio:before, 
.smart-forms .option-agency input:focus + .radio:before{  background: var(--color-2); }

.smart-forms .option-agency input:checked + .checkbox:before, 
.smart-forms .option-agency input:focus + .checkbox:before{ border-color: var(--color-2); }

/* @toggle-switch ------------------------------------------------------ */

.smart-forms .switch-agency > input:checked + .switch-label { background: #009933; border-color: #009933; }
.smart-forms .switch-agency > input:checked + .switch-label:after { color:#009933; }
.smart-forms .switch-agency > input:checked:focus + .switch-label { background: #009933; border-color: #009933; }

/* Smart Options -------------------------------------------------------------- */

.smart-forms .option > input:checked + .smart-option { background: var(--color-2); }

.smart-forms .option > input:checked + .smart-option,
.smart-forms input:checked + .smart-checkbox .iconc:before,
.smart-forms .option > input:checked + .smart-option .iconc { border-color:var(--color-1); }

.smart-forms input:checked + .smart-radio .iconc:before { background:var(--color-1); }

/* Modern switch  -------------------------------------------------------------- */

.smart-forms .modern-switch input:checked + .switch-toggle { background: var(--color-2); }

.smart-forms .modern-switch input:checked + .switch-toggle::before { background:var(--color-1); }

.smart-forms .modern-ios input:checked + .switch-toggle::before { background: #fff; }

.smart-forms .modern-switch:active input:checked + .switch-toggle::before,
.smart-forms .modern-switch input:checked + .switch-toggle:active::before { 
	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(155,89,182,0.2);
	-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(155,89,182,0.2); 
	-o-box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(155,89,182,0.2); 
	box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(155,89,182,0.2);  
}

/* @datepicker ------------------------------------------------------ */

.ui-datepicker { border:5px solid var(--color-2); }

.ui-datepicker:before{
	border-color:transparent transparent var(--color-2) transparent;   
	border-color:rgba(255,255,255,0) rgba(255,255,255,0) var(--color-2) rgba(255,255,255,0); 
}

.ui-timepicker-div .ui-widget-header,
.ui-datepicker .ui-datepicker-header { background:var(--color-2); }

.ui-monthpicker .ui-datepicker-today a, 
.ui-monthpicker .ui-datepicker-today a:hover,
.ui-datepicker .ui-datepicker-current-day a{
	background:var(--color-2)!important;
}

/* @steps
------------------------------------------------------ */
.steps-theme-agency .wizard > .actions a,
.steps-theme-agency .wizard > .actions a:hover,
.steps-theme-agency .wizard > .actions a:active,
.steps-theme-agency .wizard > .steps .current a,
.steps-theme-agency .wizard > .steps .current a:hover,
.steps-theme-agency .wizard > .steps .current a:active,
.steps-theme-agency .wizard > .steps .current:before,
.steps-theme-agency .wizard > .steps .current .number{
  background: var(--color-2);
	color: #fff;
}
.login_status{
	float: right;
    color: #fff;
}
.login_status a{
	color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.docs_uploaded_label{
	margin-right: 25px !important;
}
.mr-2{
	margin-right: 20px;
}
a.float-right{
	float: right;
}
div[class*="uploaded_"] {
	padding-right: 30px;
}
div[class*="uploaded_"] a i {
	font-size: 22px;
}
.disable_next{
	background : gray !important;
	pointer-events: none;
	opacity: 0.5;
}
.enable_next{
	background : 'var(--color-2)';
	pointer-events: auto;
	opacity: 1;
}