/* @Form Elements
===================================== */
input:not([type]),
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
    display: block;
    width: 100%;
    height: 38px;
	padding: 0 1.25em;
    margin: 0 0 20px;
	background-color: var(--white);
	position: relative;
	z-index: 1;
	
    font-family: inherit;
    font-size: 15px;
    color: var(--medium-gray);
	line-height: normal;
	
	border: 1px solid var(--muted-gray);
	-webkit-border-radius:  0.375rem;
	-moz-border-radius:  0.375rem;
	border-radius:  0.375rem;
	
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
}

input:not([type]).radius,
input[type=color].radius,
input[type=date].radius,
input[type=datetime-local].radius,
input[type=datetime].radius,
input[type=email].radius,
input[type=month].radius,
input[type=number].radius,
input[type=password].radius,
input[type=search].radius,
input[type=tel].radius,
input[type=text].radius,
input[type=time].radius,
input[type=url].radius,
input[type=week].radius,
textarea.radius {
    border-radius:  0.375rem;
}

input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
}

textarea[rows] {
    height: auto
}

textarea {
    min-height: 50px;
    max-width: 100%
}

/* Wrap selects in a div with class 'select' */
div.select {
    width: auto;
    position: relative;
    font-size: 1em;
}

/* Display Dropdown icon on right side of select */
.select:after {
    font-size: 22px;
    content: "\E313";
    font-family: 'Material Icons';
    color: #404040;
	
    position: absolute;
    z-index: 1;
    right: 0.55em;
    top: 0.475em;
    pointer-events: none;
    box-sizing: border-box;
}

select {
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    background-color: var(--white);
	background-image:none;
    padding: 0.125em 2.55em 0 1.25em !important;
    margin: 0 0 20px;
    
    width: 100%;
    height: 38px;
	position: relative;
    z-index: 1;
	
	color: var(--medium-gray);
    font-family: inherit;
    font-size: 15px;
    line-height: normal;
    
    border-style: solid;
    border-width: 1px;
    border-color: var(--muted-gray);
	-webkit-border-radius:  0.375rem;
	-moz-border-radius: 0.375rem;
	border-radius:  0.375rem;
}


select::-ms-expand {
    display: none;
}

select.radius {
    border-radius:  0.375rem;
}

select[multiple] {
    height: auto;
    padding: 0.25em 0.55em;
}

select[multiple] option{
	border-radius:  0.375rem;
    padding: 0.25em 0.55em;
	margin: 1px 0;
	
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

select[multiple] option:checked,
select[multiple] option:active,
select[multiple]:focus option:checked{
	background: var(--orange) linear-gradient(0deg, var(--muted-orange) 0%, var(--muted-orange) 100%);
	color: var(--white) !important;
}

select[multiple] option:hover{
	background: var(--muted-gray);
	color: var(--muted-gray);
}
/* @end Select
===================================== */

input[type=checkbox]+label,
input[type=radio]+label {
    display: inline-block;
    margin-left: .5rem;
    margin-right: 1rem;
    margin-bottom: 0;
    vertical-align: baseline;
	font-weight: normal;
	text-transform: inherit;
	font-size: 15px;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

.inputfile + label {
    width: auto;
	display: inline-block;
    height: 38px;
    padding: 0.45em 5em 0 1.25em !important;
    margin: 0 0;
    background-color: var(--white);
	position: relative;
	
    font-family: inherit;
    font-size: 15px !important;
    color: var(--medium-gray) !important;
    line-height: 1.65em !important;
	font-weight: 400 !important;
	text-transform: inherit;
	letter-spacing: 0;
	
    border: 1px solid var(--muted-gray);
    -webkit-border-radius:  0.375rem;
    -moz-border-radius:  0.375rem;
    border-radius:  0.375rem;
	
    -webkit-appearance: none;
    -moz-appearance: none;
	cursor: pointer;
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

.inputfile + label:after {
	font-size: 22px;
    content: "\E2C6";
    font-family: 'Material Icons';
    color: var(--dark-gray) !important;
    position: absolute;
    right: 0.45em;
    top: 0.255em;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}


.inputfile:focus + label:hover,
.inputfile.has-focus + label:hover,
.inputfile + label:hover {
	color: var(--medium-gray) !important;
	background-color: var(--muted-gray) !important;
	border: 1px solid var(--muted-gray);
}

.inputfile:focus + label,
.inputfile.has-focus + label{
    outline: 1px solid var(--light-gray);
    outline-offset: 1px;
    
    background-color: var(--muted-gray) !important;
	border: 1px solid var(--muted-gray);
}

.inputfile:focus + label:hover:after,
.inputfile.has-focus + label:hover:after,
.inputfile + label:hover:after {
	color: var(--medium-gray);
}

::-webkit-input-placeholder {
    color: var(--light-gray) !important;
}

:-moz-placeholder {
    color: var(--light-gray) !important;
}

::-moz-placeholder {
    color: var(--light-gray) !important;
}

:-ms-input-placeholder {
    color: var(--light-gray) !important;
}

.input-file:focus + label,
select:focus,
input:not([type]):focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
textarea:focus,
input:focus{
    background: var(--white);
    border: 1px solid var(--muted-gray);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
    outline: 1px solid var(--light-gray);
    outline-offset: 1px;
}

.input-disabled{
	color: var(--muted-gray) !important;
	background-color: var(--lighter-gray) !important;
} 

.custom-select.is-invalid, 
.form-control.is-invalid, 
.was-validated .custom-select:invalid, 
.was-validated .form-control:invalid {
    border-color: var(--dark-red);
}

.invalid-feedback {
    display: none;
    margin-top: .25em;
    font-size: .85em;
    color: var(--dark-red);
}


input[type=text].with-icon,
input[type=password].with-icon{
    padding-left: 2.55em;
    transition: none;
    box-shadow: none;
}

/* @end Form Elements
===================================== */

/* @ Checkbox / Radio
===================================== */
/* The container */
.radio-checkmark-container {
	color:var(--medium-gray) !important;
	font-size:15px;
	line-height: 1em;
	text-align:left;
	font-weight:normal;
	text-transform: none;
	text-decoration:none;
	
	width: auto;
	display: inline-block;
	margin-bottom: 0;
	background-color: var(--white);
	position: relative;
	cursor: pointer;
	
	-webkit-appearance: none;
	outline: 0 !important;
	
	-webkit-border-radius:  0.375rem;
    -moz-border-radius:  0.375rem;
    border-radius:  0.375rem;
	
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dashboard-options-menu .radio-checkmark-container,
.dashboard-options-menu .button-checkmark-label,
.dropdown-pane .radio-checkmark-container,
.dropdown-pane .button-checkmark-label,
.dashboard-options-menu .radio-checkmark-container,
.dashboard-options-menu .button-checkmark-label{
    width:100%;
    text-align: left;
}

/* Hide the browser's default checkbox */
.radio-checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    width: 100%;
	padding:1em 1.55em 0;
	
	border: 1px solid var(--muted-gray);	
	-webkit-border-radius:  0.375rem;
	-moz-border-radius:  0.375rem;
	border-radius:  0.375rem; 
	
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

.radio-checkmark-container:hover input ~ .radio-checkmark {
	background-color: var(--lighter-gray) !important;
}

.radio-checkmark-container:hover .button-checkmark-label{
	color: var(--medium-gray);
}

.radio-checkmark-container input:checked ~ .radio-checkmark {
	background-color: var(--orange)!important;
	border: 1px solid var(--orange);
}

.dashboard-options-menu .radio-checkmark-container input:checked ~ .radio-checkmark,
.dropdown-pane .radio-checkmark-container input:checked ~ .radio-checkmark {
	background-color: var(--muted-orange)!important;
	border: 1px solid var(--muted-orange);
    border-left: 4px solid var(--orange);
}

.radio-checkmark-container:hover .button-checkmark-label{
	color: var(--medium-gray);
}


.dashboard-options-menu .radio-checkmark-container,
.dropdown-pane .radio-checkmark-container {
    margin-bottom: 0.25em;
}


/* Create the checkmark/indicator (hidden when not checked) */
.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.radio-checkmark-container input:checked ~ .radio-checkmark:after {
    display: block;
}


/* Reviewed Button with Checkmark */
.radio-checkmark-container.reviewed input:checked ~ .button-checkmark-label{
    padding-right: 2.55em !important; 
}

.radio-checkmark-container.reviewed input:checked ~ .radio-checkmark {
	background-color: var(--muted-gray)!important;
	border: 1px solid var(--muted-gray);
}

.radio-checkmark-container.reviewed input:checked ~ .button-checkmark-label{
    color: var(--gray) !important;
}

.radio-checkmark-container.reviewed input:checked ~ .button-checkmark-label:after {
    font-family: 'Material Icons';
    font-size: 18px;
    content: "\e876";
    position: absolute;
    right:0.55em;
}
/*@end Reviewed Button with Checkmark */

.button-checkmark-label{
	position: relative;
	z-index: 10;
	display: inline-block;
	width:100%;
	height: 38px;
	padding:0.8em 1.25em 0;
	
	font-size: 15px;
    letter-spacing: 0;
    font-weight: 400;
    text-align: center;
	
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

.dashboard-options-menu li .button-checkmark-label{
    padding:0.8em 3em 0 1.25em;
}

.radio-checkmark-container input:checked ~ .button-checkmark-label{
	color: var(--white) !important;
}

.dashboard-options-menu .radio-checkmark-container input:checked ~ .button-checkmark-label,
.dropdown-pane .radio-checkmark-container input:checked ~ .button-checkmark-label{
	color: var(--medium-gray) !important;
    font-weight: 500;
}

.radio-checkmark-container input:focus ~ .button-checkmark-label{
    outline: 1px solid var(--light-gray);
    outline-offset: 1px;
    border-radius: 4px;
}

/* @ Checkbox /  Radio
===================================== */


/* @ Checkbox 
===================================== */
.checkmark-container {
	width: 25px;
    height: 25px;
    border: 1px solid var(--muted-gray);
    border-radius: 50%;
    margin: 0 0 -0.25em;
	
    display: inline-block;
    position: relative;

    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkmark-container input:focus ~ .checkmark{
    outline: 1px solid var(--light-gray);
    outline-offset: 1px;
}


/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 19px;
    width: 19px;
    margin: 0;
    background-color: var(--lighter-gray);
    border-radius: 50%;
	
	transition: all .25s ease-in-out; 
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

/* Hide the browser's default radio button */
.checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

/* On mouse-over */
.checkmark-container:hover input ~ .checkmark {
    background-color: var(--orange);
}

/* When the radio button is checked, add background */
.checkmark-container input:checked ~ .checkmark {
    background-color: var(--orange);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkmark-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.checkmark-container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}


.checkmark-label {
    top: -0.25em;
    margin: 0 0.55em;
    font-size: 15px;
    color: var(--medium-gray);
    font-weight: 400;
    text-transform: none;
    display: inline-block;
    position: relative;
}
/* @end Checkbox 
===================================== */

.riskscore-container {
    padding: 1px;
    width: 34px;
    height: 34px;
    display: inline-block;
    border: 1px solid var(--muted-gray);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.riskscore {
    width: 30px;
    height: 30px;
    padding-top: 1px;
    color: var(--white);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
	
    border: 1px solid var(--white);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.has-riskscore .riskscore-container {
    width: 30px;
    height: 30px;
    margin: 0 -0.55em 0 0.55em;
    position: relative;
}

.radio-checkmark-container.has-riskscore .riskscore-container {
    top: -0.55em;
    float: right;
}

.has-riskscore .riskscore {
    width: 26px;
    height: 26px;
    font-size: 0.9em;
}

.input-has-icon{
    padding-left: 2.75em !important;
}

.username,
.password{
    position: relative;
    z-index: 1;
}

.username:before {
    font-size: 24px;
    content: "\e7fd";
    font-family: 'Material Icons';
    color: var(--dark-gray);
    pointer-events: none;
    box-sizing: border-box;
    
    position: absolute;
    z-index: 2;
    left: 0.45em;
    top: 10px;
}

.password:before {
    font-size: 22px;
    content: "\e897";
    font-family: 'Material Icons';
    color: var(--dark-gray);
    pointer-events: none;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    left: 0.45em;
    top: 10px;
}

.show-password,
.hide-password{
    font-size: 13px;
    position: absolute;
    z-index: 2;
    right: 0.95em;
    top: 10px;
}

.search-wrapper{
	position: relative;
	display: block;
	width:100%;
	height: auto;
}

.search-wrapper .search-icon {
  	pointer-events: none;
    position: absolute;
    z-index: 10;
	right: 0.5em;
    top: 0.4em;
    font-size: 22px !important;
}

.search-wrapper input[type=text]{
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	width: 100%;
}

@media only screen and (max-width: 1080px) {
    select,
    input:not([type]),
    input[type=color],
    input[type=date],
    input[type=datetime-local],
    input[type=datetime],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea,
    input[type=checkbox]+label,
    input[type=radio]+label,
    .inputfile + label,
    .radio-checkmark-container,
    .button-checkmark-label,
    .checkmark-label {
        font-size: 14px;
    }
}