/*Sortable table search field*/
.dataTables_filter {
    background: var(--first-brand-color);
    padding: 10px;
}

.dataTables_filter label{
    color: #f6f8f7;
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    margin-left: 10px;
}

.dataTables_filter input[type="search"]{
    margin-left: 12px;
    width: 300px;
    border-radius: 0;
    /* border: none; */
    border-color: #688796;
    background-color: #688796;
    box-shadow: none;
    color: #f6f8f7;
    font-size: 16px;
}
.form-control[readonly],input:read-only {
    background: #FFFFFF;
}

/*Checkboxes*/
/*Chekbox styles**************************************/
input[type=checkbox].material {
    visibility: hidden;
    position:absolute;
}

input[type=checkbox].material + label,
input[type=checkbox].material + input[type="hidden"] + label{
    cursor: pointer;
    position: relative;
    width: 16px;
    height: 16px;
    bottom: -3px;
    margin: 0;
    padding: 0;
    -moz-border-radius: 100%;
    border: 2px solid var(--first-brand-color);
    display: inline-block;
    border-radius: 2px;
    background-color:#FFF;
    margin-right:5px;
    margin-left:10px;
}

input[type=checkbox].material + label:after,
input[type=checkbox].material + input[type="hidden"] + label:after{
    opacity: 0;
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    background: transparent;
    bottom: 5px;
    left: 1px;
    border: 2px solid #FFF;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) scale(0);
    transition: all 0.15s;

}

input[type=checkbox].material:checked + label,
input[type=checkbox].material:checked + input[type="hidden"] + label{
    background-color: var(--second-brand-color);
    border-color: var(--second-brand-color);
}

input[type=checkbox].material:checked + label:after,
input[type=checkbox].material:checked + input[type="hidden"] + label:after{
    opacity: 1;
    transform: rotate(-45deg) scale(1);
}

input[type=checkbox].material:disabled + label,
input[type=checkbox].material:disabled + input[type="hidden"] + label
{
    background-color: #DDDDDD;
}

input[type=checkbox].material:checked:disabled + label,
input[type=checkbox].material:checked:disabled + input[type="hidden"] + label{
    border-color:#e797a7;
    background-color:#e797a7;
}

/*input[disabled=disabled].material:checked:disabled + label:after,
input[type=checkbox].material:disabled + label:after{
   border-color:#AAA;
}*/

.form-control {
    border-radius: 0;
    display: inline-block;
    margin-right: 5px;
    width: 100%;
    border-radius: 0;
    border-color: var(--table-border-color);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--form-control-focus-border-color);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-control-focus-shadow);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-control-focus-shadow);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-control-focus-shadow);
}

/*Placeholder*/
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-style:italic;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    font-style: italic;
}

.form-control:-ms-input-placeholder { /* IE 10+ */
    font-style: italic;
}

.form-control:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
}

/*Auto Complete*/
.ui-widget-content.ui-autocomplete {
    font-family: var(--font-default);
    font-size: 16px;
    border-top: none;
    border-color: var(--form-control-focus-border-color);
    -moz-box-shadow: 0 4px 4px var(--form-control-focus-shadow);
    -webkit-box-shadow: 0 4px 4px var(--form-control-focus-shadow);
    box-shadow: 0 4px 4px var(--form-control-focus-shadow);
    padding:0;
}

.ui-widget-content.ui-autocomplete .ui-menu-item{
    padding:5px 10px;
}

.ui-widget-content.ui-autocomplete .ui-menu-item.ui-state-focus{
    background:var(--first-brand-color);
    color:var(--font-dark-background-color);
    font-weight:300;
    border:none;
}

/******************************************************************/
/*Jquery Ui datepicker styles*/
/******************************************************************/

#ui-datepicker-div {
    font-family: Oswald;
}

#ui-datepicker-div.ui-widget {
    width: 300px;
    padding: 5px 10px;
    border-color: #EEEEEE;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.ui-widget-content .ui-state-default {
    border: 1px solid #007a82;
    background: #007a82;
    font-weight: normal;
    color: #fff;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    transition: all 0.2s;
}

.ui-widget-content .ui-state-highlight {
    border: 1px solid #f49700;
    background: #fffa90;
    color: #f49700;
}

.ui-widget-content .ui-state-default:hover, .ui-state-active, .ui-widget-content .ui-state-active {
    background: #FFF;
    color: #007a82;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 10px 0;
    top: -5px;
    border: none;
    margin-left: -5px;
    margin-right: -5px;
    border-radius: 0;
    background: #FFF;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    padding: 2px 4px;
    margin: 2px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover {
    top: 14px;
    background: #FFFFFF;
    border: none;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    background: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    font-weight: 300;
    top: -4px;
    font-size: 24px;
    color: #f49700;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width:47%;
}

.ui-datepicker .ui-datepicker-prev::after {
    content: '\f0a8';
    left: 2px;
}

.ui-datepicker .ui-datepicker-next::after {
    content: '\f0a9';
    right: 2px;
}