/* ajax */
.ui-ajax-editable, .ui-ajax-selectable {
        position: relative;
        border: 1px solid transparent !important;
        cursor: pointer;
        min-height: 30px;
        min-width: 32px;   
}

.ui-ajax-editable {
        padding: 2px;
        margin: -2px; 
}

.ui-ajax-selectable {
        padding: 2px;
        margin: -2px; 
}

.select-container {
        display:none;
}

.ui-ajax-editable:hover, .ui-ajax-selectable:hover {
        border: 1px dotted var(--sky) !important;
}

.ui-ajax-active {
        position: absolute;
        z-index: 9999;
        border: 1px solid var(--dark);
        padding: 1px 1px 1px 2px;
        margin: -1px;  
        background-color: var(--bright);  
        text-align:left !important;       
}

.ui-ajax-active input {
        padding: 0 !important;
        margin: 0 !important;
        border-width: 0 !important;
        background: transparent !important;
        width: 100%;  
        min-height: 24px;
        line-height: inherit;
}

.ui-ajax-active .select-wrapper {
        margin: 0 -2px !important;
        background: transparent !important;
}

.ui-ajax-active .select-wrapper::before {
        right: 0 !important;
        top: -2px !important; 
}

.ui-ajax-active select {
        padding: 1px 2px !important;
        border-width: 0 !important;
        background-color: var(--bright) !important;  
}

.ui-ajax-active .ui-ajax-tools {
        position: absolute;
        right:-1px;
        top:-1px;
        bottom:-1px;
        display:flex;
        padding: 0 8px;
        flex-flow: row nowrap;
        justify-content: center;
        align-items:center;
        background-color: var(--bright) !important; 
        border: 1px solid var(--dark) !important;  
        border-left-color: var(--bright) !important; 
}

.ui-ajax-buttons-inside.ui-ajax-active .ui-ajax-tools {
        left: auto;
        right:-1px;
}

.ui-ajax-active .ui-ajax-tools .ui-ajax-save {
        color: var(--green);
        font-size: 22px;
        line-height: 22px;
        vertical-align:top;
}

.ui-ajax-active .ui-ajax-tools .ui-ajax-cancel {
        color: var(--red);
        font-size: 22px;
        line-height: 22px;
        vertical-align:top;
}

.ui-ajax-hidden {
       /* display: none !important;      */
}

.ui-ajax-wait, .ui-ajax-wait * {
        cursor: progress !important;
}

.ui-ajax-delete:not(.inactive), .ui-ajax-delete-confirm:not(.inactive) {
        cursor: pointer;
}


/* filter */
.ui-filter-toggle {
        cursor:pointer;
}

.ui-remove-filter {
        cursor:pointer;
}

/* tables */
.ui-column-hidden {
        display:none;
}

.ui-table-row-hidden {
        display:none !important;
}

.ui-hidden {
        display:none;
}

.ui-language-hidden {
        display:none !important;        
}

.ui-toggle-language {
        position: absolute;
        right:0;
        top:0;
        cursor: pointer;
        height:32px;
        line-height:32px;
        text-align:center;
        vertical-align: middle;
}

.ui-language-toggle-active {
        display:inline-block;
        width:24px;
        height:24px;
        line-height:24px;
        border-radius:50%;
        background-color: var(--lighter);
        margin: 4px 0;
}

.ui-toggle-language.ui-toggle-visible:after {
        content: "\eab9";      
        font-family: IcoFont, sans-serif;
        font-weight: bold;
        font-size:24px;
        margin-left:4px;
}

.ui-toggle-language.ui-toggle-filled-only.ui-toggle-visible:after {
        content: "\efc0";      
        font-family: IcoFont, sans-serif;
        font-weight: bold;
        font-size:24px;
        margin-left:4px;
}

.ui-toggle-language.ui-toggle-hidden:after {
        content: "\eab2";     
        font-family: IcoFont, sans-serif;
        font-weight: bold;
        font-size:24px; 
        margin-left:4px;    
}

.ui-language-selector-toggle:hover {
        background-color: var(--hover-bg);
}


/* form settings */
.ui-form-responsive {
        min-width: 320px;
}  

.ui-form-responsive-limit {
        max-width: 640px;
} 

.ui-form-responsive input:not([type='checkbox']):not([type="radio"]):not([type="date"]):not([type="time"]) {
        width: 100%;
}

.ui-form-responsive select {
        width: 100%;
}

.ui-form-responsive button {
       /* width: 100%;  */
}

.ui-form-responsive textarea {
        width: 100%;
        white-space: pre-wrap;
}

/* droppable */
.ui-droppable-droptarget {
        border: 2px dashed var(--hover-bg) !important;
        width: 100%;
        min-height: 120px;  
        padding: 8px;
        margin-bottom: 8px;
}  

.ui-droppable-droptarget * {
        pointer-events: none;
}

.ui-droppable-droptarget[dragover="true"] {
        background-color: var(--hover-bg) !important;  
        border: 2px solid var(--hover-bg) !important;     
}

.ui-droppable label {
        overflow: hidden;
        position: relative;
        width: 100%; 
        display: block;
}

.ui-droppable label * {
        cursor: pointer;
}

/* hide html form input */
.ui-droppable input {
        display: block;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 0; 
}

.ui-droppable-preview * {
        max-width:100%;
}

.ui-droppable-remove-file {
        cursor:pointer;
}

/* modal */
.ui-modal.modal {
        padding: 16px !important; /* override jquery modal */
}


.ui-modal p {
        font-size: var(--font-size-default);
        line-height: 22px;
}
.ui-modal #modal-window-title {
        margin: -16px -16px 8px -16px;
        background-color: var(--lighter);
        padding: 8px 16px;
        border-radius: 8px 8px 0 0;
}
.ui-modal p:first-child {
        font-weight: 700;
}

.ui-button-internal {
        border-width: 0;
        border-radius: var(--input-button-border-radius);
        padding: var(--input-button-padding);
        padding-left: var(--input-button-padding-left);
        
        height: 32px;
        min-width: 160px;
        text-align: left;
        
        background-color: var(--grey);
        background-repeat: no-repeat;
        background-position: var(--input-button-background-position);
        color: var(--white);
        margin: 0 8px 0 0 !important;
        cursor: pointer;      
}

.ui-button-internal.ui-ajax-delete {
        background-color: var(--red);
        background-image: url('../icon/32/delete.png');
}

.ui-button-internal.close-modal-confirm {
        padding: var(--input-button-padding);
        padding-left: var(--input-button-padding-left);
        background-image: url('../icon/32/close.png');
        background-repeat: no-repeat;
        background-position: var(--input-button-background-position);
}

.ui-button-internal:hover {
        background-color: var(--hover-bg);
}

.ui-button-internal.delete {
        background-color: var(--red);
        background-image: url('../icon/32/delete.png');   
}
.ui-button-internal.delete {
        background-color: var(--red);
        background-image: url('../icon/32/delete.png');   
}


/* css icons */
.ui-icon-delete, .ui-icon-add {
        position: relative;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
}

.ui-icon-delete:before, .ui-icon-delete:after {
        content:'';
        position:absolute;
        width: calc(2rem - 8px);
        height: 2px;
        background-color:white;
        top: calc(1rem - 1px);
}
.ui-icon-delete:before{
        transform:rotate(45deg);
        left:4px;
}
.ui-icon-delete:after{
        transform:rotate(-45deg);
        right:4px;
}

.ui-icon-add:before, .ui-icon-add:after{
        content:'';
        position:absolute;
        width: calc(2rem - 10px);
        height: 2px;
        background-color:white;
        top: calc(1rem - 1px);
}
.ui-icon-add:before{
        transform:rotate(0);
        left:5px;
}
.ui-icon-add:after{
        transform:rotate(-90deg);
        right:5px;
}
.active .ui-icon-add:after{
        transform:rotate(0deg) !important;
        right:5px;
}