/**********************************
* Jqx Dropdown List
***********************************/
.jqx-dropdownlist-state-normal {
    background: #474747;
}

/**********************************
* Jqx Dropdown List scroll color
***********************************/
.jqx-scrollbar-state-normal {
    background: var(--background-color);
}

#jqxScrollThumbverticalScrollBarinnerListBoxcomboRhythm {
    border-color: var(--line-01-color);
    background: var(--line-01-color);
}

.jqx-listitem-element {
    margin-top: 3px;
}

.jqx-listitem-element:last-child {
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/**********************************
* Jqx widget
***********************************/
.jqx-widget-header {
    background: var(--modal-01-color);
    border-color: var(--modal-01-color);
}

.jqx-widget-content {
    background: var(--modal-01-color);
    color: var(--text-01-color);
}

/**********************************
* Jqx Fill
***********************************/
.jqx-fill-state-focus {
    border-color: var(--modal-line-01-color);
}

.jqx-fill-state-normal {
    border-color:var(--line-01-color);
    background: var(--line-01-color);
}

span.jqx-fill-state-pressed {
    background: var(--box-06-color);
    color: var(--text-01-color);
    border: none;
}

span.jqx-fill-state-hover {
    background: var(--box-06-color);
    color: var(--text-01-color);
    border: none;
}

td.jqx-fill-state-pressed {
    background: var(--box-06-color);
    color: var(--text-01-color);
    border: none;
}

td.jqx-fill-state-hover {
    background: var(--box-06-color);
    color: var(--text-01-color);
    border: none;
}

/**********************************
* Jqx validator
***********************************/
.jqx-validator-error-label {
    text-align: right;
    pointer-events: none;
    color: var(--main_purple);
}

#newTestPopupContent .jqx-validator-error-label {
    margin-top: -23px;
    text-align: left;
    float: left;
 }

#newTestPopupContent .popupTitleSite .jqx-validator-error-label {
    margin-top: 0;
    text-align: left;
    float: left;
}

.jqx-validator-error-element {
    border-color: var(--main_purple) !important;
}

/**********************************
* Jqx calendar
***********************************/
.jqx-calendar-title-header td {
    color: rgba(255, 255, 255, 0.8);
}

.jqx-calendar table {
    background: var(--modal-01-color);
}

.jqx-calendar td {
    color: var(--text-01-color);
}

.jqx-calendar-column-cell {
    color: var(--text-01-color);
}

.jqx-calendar-cell-today {
    background: none;
    border: 1px solid var(--modal-line-01-color);
}

.jqx-calendar-cell-othermonth {
    color: var(--text-05-color);
}

.jqx-calendar-column-cell-sun {
    color: #ea8181 !important;
}

.jqx-calendar-column-cell-sat {
    color: #5ab2f0 !important;
}

.jqx-calendar-cell-weekend-sat {
    color: #5ab2f0 !important;
}

.jqx-calendar-cell-weekend-sun {
    color: #ea8181 !important;
}

.jqx-calendar-cell-disabled {
    cursor: default;
}

/**********************************
* Jqx input
***********************************/
.jqx-input {
    background: var(--box-01-color);
    border: solid 1px #cecece;
}

.jqx-input-content {
    background: var(--box-01-color);
    color: var(--text-04-color);
}

input[type=text].jqx-input {
    color: var(--text-01-color);
    margin-bottom: 22px;
    padding: 0 0 0 10px;
}

#inputinputDOB, #inputinputHookupDate {
    background-color: var(--modal-01-color);
    padding-left: 10px !important;
}

#inputsearchFromDate, #inputsearchToDate {
    padding-left: 10px !important;
}

#inputNote {
    padding: 10px 10px 4px 10px;
    margin-bottom: 19px;
    font-family: Inter;
}

input[type=text].jqx-input {
    font-family: Inter;
    border-radius: 2px;
    border: solid 1px var(--button-line-01-color);
}

input[type=text].jqx-input:focus {
    border: solid 1px var(--button-line-02-color);
}

input[type=text].jqx-input:hover {
    border: solid 1px var(--button-line-02-color);
}

textarea.jqx-input {
    border-radius: 2px;
    border: solid 1px var(--modal-line-01-color);
}

textarea.jqx-input:focus {
    /*background-color: rgba(0, 0, 0, 0.05);*/
    /*border: solid 1px #e7e7e7;*/
}

textarea.jqx-input:hover {
    /*border: solid 1px #e7e7e7;*/
}

.jqx-dropdownlist-state-normal {
    border-radius: 2px;
    border: solid 1px var(--line-02-color);
}

.jqx-dropdownlist-state-normal:focus {
    background-color: var(--background-color);
    border: solid 1px var(--button-line-hover);
}

.jqx-dropdownlist-state-normal:hover {
    border: solid 1px var(--button-line-hover);
}

.jqx-datetimeinput {
    border-radius: 2px;
    border: solid 1px var(--button-line-01-color);
}

.jqx-datetimeinput:focus {
    background-color: rgba(0, 0, 0, 0.05);
    border: solid 1px var(--button-line-hover);
}

.jqx-datetimeinput:hover {
    border: solid 1px var(--button-line-hover);
}

td.jqx-calendar-cell-today {
    background-color: #595959;
    border-radius: 50%;
    border: none;
}

td.jqx-calendar-cell-selected {
    background-color: #d3544e;
    border-radius: 50%;
    border: none;
}

.jqx-action-button {
    border: none;
    margin-left: -5px;
    width: 23px !important;
}

/*.jqx-listbox {*/
/*    padding-left: 6px !important;*/
/*}*/

.jqx-icon-calendar, .jqx-icon-calendar-hover, .jqx-icon-calendar-pressed, .jqx-icon-time {
    background: var(--calendar-img) round;
    background-size: contain;
    height: 16px !important;
    width: 16px !important;
    margin-right: 5px;
}

.jqx-icon-time {
	background: url(/spa/image/icn-time.png) round;
}

.disabled_calendar {
    background: var(--calendar-disabled-img) round !important;
    /*background-size: contain;*/
    cursor: default;
}

/**********************************
* Custom popup
***********************************/
.popup-cancel-button {
    width: 90px;
    height: 35px;
    font-family: Interstate-Bold;
    font-size: 14px;
    color: var(--modal-line-01-color);
    background-color: transparent;
    border: solid 1px var(--modal-line-01-color);
    border-radius: 20px;
    float: right;
    cursor: pointer;
    padding: 0;
}

.popup-cancel-button:hover {
    border: solid 1px var(--button-line-hover);
}

/**********************************
* Validator
***********************************/
#user_profile .jqx-validator-error-label {
    top: -3px !important;
    font-family: Arial;
    font-size: 8px;
    text-align: left;
    color: var(--main_purple);
}
#user_profile .jqx-validator-error-element {
    border: solid 1px var(--main_purple) !important;
    color: var(--main_purple);
}
#user_profile .jqx-validator-ok-label {
    top: -3px !important;
    font-family: Arial;
    font-size: 8px;
    text-align: left;
    color: #69d09b;
}
#user_profile .jqx-validator-ok-element {
    border: solid 1px #69d09b !important;
    color: #e7e7e7;
}

/**********************************
* Dropdownlist in profile
***********************************/
#innerListBoxmobileNo01 { width: 72px !important; }
#innerListBoxmobileNo01 .jqx-scrollbar { left: 62px !important; width: 7px !important; }
#innerListBoxmobileNo01 .jqx-scrollbar-state-normal { width: 7px !important; }
#innerListBoxmobileNo01 .jqx-scrollbar-button-state-normal { width: 7px !important; }
#innerListBoxmobileNo01 .jqx-scrollbar-thumb-state-normal { width: 7px !important; border: none !important; }
#listBoxContentinnerListBoxmobileNo01 { width: 61px !important; }
#listBoxContentinnerListBoxmobileNo01 .jqx-listitem-state-normal { width: 43px !important; }

#innerListBoxofficeNo01 { width: 72px !important; }
#innerListBoxofficeNo01 .jqx-scrollbar { left: 62px !important; width: 7px !important; }
#innerListBoxofficeNo01 .jqx-scrollbar-state-normal { width: 7px !important; }
#innerListBoxofficeNo01 .jqx-scrollbar-button-state-normal { width: 7px !important; }
#innerListBoxofficeNo01 .jqx-scrollbar-thumb-state-normal { width: 7px !important; border: none !important; }
#listBoxContentinnerListBoxofficeNo01 { width: 61px !important; }
#listBoxContentinnerListBoxofficeNo01 .jqx-listitem-state-normal { width: 43px !important; }

#innerListBoxofficeFaxNo01 { width: 72px !important; }
#innerListBoxofficeFaxNo01 .jqx-scrollbar { left: 62px !important; width: 7px !important; }
#innerListBoxofficeFaxNo01 .jqx-scrollbar-state-normal { width: 7px !important; }
#innerListBoxofficeFaxNo01 .jqx-scrollbar-button-state-normal { width: 7px !important; }
#innerListBoxofficeFaxNo01 .jqx-scrollbar-thumb-state-normal { width: 7px !important; border: none !important; }
#listBoxContentinnerListBoxofficeFaxNo01 { width: 61px !important; }
#listBoxContentinnerListBoxofficeFaxNo01 .jqx-listitem-state-normal { width: 43px !important; }

/* icon custom */
.jqx-icon-arrow-up, .jqx-icon-arrow-up-hover,
.jqx-icon-arrow-up-selected {
    background-image: var(--selectbox-icon-up);
    background-repeat: no-repeat;
    background-position: center
}

.jqx-icon-arrow-down, .jqx-icon-arrow-down-hover,
.jqx-icon-arrow-down-selected {
    background-image: var(--selectbox-icon-down);
    background-repeat: no-repeat;
    background-position: center
}

.jqx-icon-arrow-left, .jqx-icon-arrow-left-hover,
.jqx-icon-arrow-left-selected {
    background-image: var(--button-icon-left);
    background-repeat: no-repeat;
    background-position: center
}

.jqx-icon-arrow-right, .jqx-icon-arrow-right-hover,
.jqx-icon-arrow-right-selected {
    background-image: var(--button-icon-right);
    background-repeat: no-repeat;
    background-position: center
}