*,
*:before,
*:after {
    box-sizing: inherit;
}

input, textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.uk-table th {
    font-size: 16px;
}
.uk-table.high-contrast tbody tr {
    background: #fff;
    color: #000;
}
.uk-select:not([multiple]):not([size]) option {
    color: #313236;
}

/*******************************************/
/* Custom Switch with Radio Button - Start */
/*******************************************/
.switch-field {
	display: flex;
	margin-bottom: 36px;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
    font: inherit;
	background-color: #323337;
	color: rgba(255, 255, 255, 0.5);
    padding: 0 25px;
    vertical-align: middle;
    line-height: 38px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
	margin-right: -1px;
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #00aaff;
	color: #fff;
	box-shadow: none;
}
.switch-field.danger input:checked + label {
	background-color: #f54f43;
}
/* Custom Switch with Radio Button - End */

.datepicker-panel ul li::before {
    display: none;
}

.only_year .ui-datepicker-calendar,
.only_year .ui-datepicker-month,
.only_year .ui-datepicker-next,
.only_year .ui-datepicker-prev{
    display: none;
}
.ui-datepicker.only_year  select.ui-datepicker-year{
    width: 100%;
}

.dataTables_wrapper .dataTables_processing{
    background: rgba(0, 170, 255, 0.8) !important;
    line-height: 2 !important;
    padding: 0 !important;
    font-weight: bold !important;
}

/* .benefits_area, .page_content:not(.single_sidebar):not(.double_sidebar) {
    -webkit-transform: unset !important;
    transform: unset !important;
} */

/* .headline_box {
    width: calc(100% - 0px);
} */

/* .mira_tab_btn{
    color: #00a1ce;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #00a1ce;
    font-weight: 400;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    letter-spacing: 0px;
    text-transform: uppercase;
    display: block;
    height: 39px;
    line-height: 39px;
    padding: 0 23px;
    text-align: center;
}
.mira_tab_btn:hover, .mira_tab_btn.active,
.qbutton.default:hover{
    cursor: pointer;
    color:#ffffff;
    border-color:#ffffff;
    background-color: #aaaaaa !important;
} */

/* form{
    color:#555555;
} */

/* label.miralabel{
    display: inline-block;
    color: #555555;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 45px;
} */

/* .irffiledownload {
display: flex;
align-items: center;
} */

/* input:not([type=checkbox]):not([type=radio]),
select:not([multiple]):not(.ui-datepicker-month):not(.ui-datepicker-year),
textarea{
    border: 0;
    border-radius: 0;
    background-color: rgba(238, 238, 238, 1);
    font: inherit;
}

input:not([type=checkbox]):not([type=radio]),
select:not([multiple]):not(.ui-datepicker-month):not(.ui-datepicker-year){
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
}

textarea{
    padding: 10px;
    line-height: 1.25;
}

select[multiple]{
    border: 0;
    border-radius: 0;
    background-color: rgba(238, 238, 238, 1);
    line-height: 45px;
}

input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="file"],
input[type="number"],
textarea{
    display: block;
    width: calc(100% - 0px);
} */

.currencyinput {
    display: block;
    width: 100%;
    line-height: 40px;
    height: 42px;
    padding-left: 10px;
    background-color: #eee;
    color: #313236;
    border: 1px solid rgba(0,53,79,.8);
}

.currencyinput input {
    width: calc(100% - 20px);
    display: inline-block;
    float: right;
    border: 0;
}

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
    display: block;
    width: 100%;
}

select[multiple] {
    padding: 10px 15px;
    height: auto;
    min-height: 200px;
}

select[multiple] option{
    padding: 8px 10px;
    font-size: 14px;
    line-height: 21px;
}

/* input[type="submit"] {
    border: 1px solid #fff !important;
    color: #000;
    background-color: #fff !important;
    width: 100%;
    height: 39px;
    line-height: 39px;
    font-size: 20px;
    padding: 0 23px;
    transition: color .1s linear,background-color .1s linear,border-color .1s linear;
    border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    font-weight: 500;
    text-align: center;
    -webkit-box-sizing: inherit !important;
    -moz-box-sizing: inherit !important;
    box-sizing: inherit !important;
}

input[type="submit"]:hover{
    border-color: #00a1ce !important;
    color: #000;
} */

label.error {
    display: none;
    /* color: #d90036; */
}

.errorbox{
    display: block;
    margin: 10px;
}

#warning {
    display: none;
    background: #d90036;
    padding: 10px 15px;
    width: calc(100% - 0px);
    color: #fff;
    margin-top: 30px;
}

fieldset.radio_fieldset {display: flex;}

table.dataTable{
    max-width: 100%;
}
table.dataTable tbody td {
    color: #1a1b23;
}

table.dataTable thead th,
table.dataTable tfoot th {
    color: #b4b5ba;
    transition: .1s ease-in-out;
    transition-property: all;
    transition-property: color,background-color,border-color,box-shadow;
    font-size: 14px;
    font-family: 'Montserrat';
}

.dataTable th {text-transform: uppercase;}
.dataTable th,
.dataTable td{
    text-align: left;
    padding: 10px !important;
}
.dataTables_length select{
    display: inline-block !important;
    width: auto !important;
    min-width: 70px;
    margin: 0 15px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {width: 50%;margin-bottom: 30px;}
.dataTables_wrapper .dataTables_filter input{width:70%;margin: 0 0 0 15px !important;}
.dataTables_wrapper .qbutton i {margin: 0;}
.dataTable .group.table-group td {
    background: #1b1c20;
    color: #fff;
    font-weight: 600;
}
table.dataTable tbody tr.even {background-color: #f8f8f8;}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate a{
    margin: 0 5px;
}
.dataTables_wrapper .dataTables_paginate a:last-child{
    margin-right: 0;
}

.group.group-start{
    background: #1b1c20;
}
.group.group-start td{
    color: #fff;
    font-weight: 600;
}

/* The Radio Button container */
.customradio {
    position: relative;
    padding: 0 20px 0 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
}

/* Hide the browser's default radio button */
.customradio input {
    position: absolute;
    opacity: 0;
    left: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.customradio .checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 50%;
}

td.customradio{text-align: center;}
td.customradio .checkmark {
    position: relative;
    display: inline-block;
}

/* On mouse-over, add a grey background color */
.customradio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a background */
.customradio input:checked ~ .checkmark {
    background-color: #fff;
}

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

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

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
    top: 1.5px;
    left: 1.5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0093d9;
}
td.customradio .checkmark:after {
    width: 15px;
    height: 15px;
}

.customradio label{line-height: 1;}

/* Customize the label (the container) */
/* .customcheck {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin: 0 10px 0 0;
} */

/* Hide the browser's default checkbox */
/* .customcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
} */

/* Create a custom checkbox */
/* .customcheck .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
} */

/* On mouse-over, add a grey background color */
/* .customcheck:hover input ~ .checkmark {
    background-color: #ccc;
} */

/* When the checkbox is checked, add a #00aaff background */
/* .customcheck input:checked ~ .checkmark {
    background-color: #00aaff;
} */

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

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

/* Style the checkmark/indicator */
/* .customcheck .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
} */

/* Custom Select */

/* select:not([multiple]):not(.ui-datepicker-month):not(.ui-datepicker-year):not(.ui-datepicker-month) {
    background: url('/wp-content/plugins/mira_intranet/img/arrow-down.svg') no-repeat;
    background-color: #eee;
    background-position: calc(100% - 15px) calc(0.5em + 12px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}
select:not([multiple]):not(.ui-datepicker-month):not(.ui-datepicker-year)::-ms-expand {display: none;} */

/* input[type="submit"],
a.qbutton.submitlink.default{
    font-size: 14px
}

a.qbutton.default {
    -webkit-box-sizing: inherit !important;
    -moz-box-sizing: inherit !important;
    box-sizing: inherit !important;
}

a.qbutton.submitlink.default {
    border: 1px solid #fff;
    color:#000;
    background-color:#fff !important;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 23px;
    transition: color .1s linear,background-color .1s linear,border-color .1s linear;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-weight: 500;
    text-align: center;
    -webkit-box-sizing: inherit !important;
    -moz-box-sizing: inherit !important;
    box-sizing: inherit !important;
}
a.qbutton.submitlink.default:hover {
    border-color: #00a1ce !important;
} */

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 15px;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: #1a1b23;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -150px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1a1b23 transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

.value_nbr {
    width: 40px;
    height: 40px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-weight: 600;
}

.qbutton.value_btn {
    padding: unset;
    text-align: center;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qbutton.value_btn i{margin: 0;}

.s-hidden {
    visibility:hidden;
    position: absolute;
}
.select {
    width: 100%;
    cursor:pointer;
    display:inline-block;
    position:relative;
}

.styledSelect {
    max-width: 100%;
    height: 45px;
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #eeeeee;
    background-color: #eeeeee;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 45px;
    padding: 0px 10px;
}

.styledSelect.active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.styledSelect:after {
    position: absolute;
    right: 10px;
    top: 18px;
    padding: 12px;
    content: "";
    background: url('/wp-content/plugins/mira_intranet/img/arrow-down.svg') no-repeat;
    background-color: #eee;
    border-radius: 0;
}

.styledSelectdiv:after {
    background-image: none !important;
}

.styledSelect:active, .styledSelect.active {
    background-color: #eeeeee;
    border-bottom: 1px solid;
    border-color: rgba(0, 0, 0, 0.1);
}
.options {
    display:none;
    position:absolute;
    right:0;
    left:0;
    z-index:999;
    list-style:none;
    border: 0;
    width: 100%;
    margin: 0;
}
.options li {
    background-color: #fff;
    padding: 0 10px;
    line-height: 35px;
    height: 35px;
    border: 1px solid;
    border-top: 0;
    border-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.options li:hover {
    background-color: #dddddd;
    border-color: #eee;
}

ul.options li[rel=""] {
    display: none;
}

table.miratable{width:100%;}
table.miratable td{border: 1px solid;text-align: left;vertical-align: middle;}
table.miratable td:first-child{border-left: 0px;}
table.miratable td:last-child{border-right: 0px;}

/* Overviews Toogles */
.toggle-button.active{
    color: #fff;
    background: #00aaff;
    border-color: #00aaff;
}

.dash_toggle{
    display: none;
}
.dash_toggle.active{
    display: block;
}