/*-------------------
    virtual select
---------------------*/
@keyframes vscomp-animation-spin {
    to {
        transform: rotateZ(360deg)
    }
}



.vscomp-dropbox-wrapper {
    left: auto;
    right: 0;
}

.vscomp-toggle-button {
    padding: 7px 10px 7px 30px;
}


.vscomp-arrow {
    right: auto;
    left: 0;
}

    .vscomp-arrow::after {
        transform: rotate(-45deg);
        border-right-color: transparent;
        border-left-color: #111;
    }



.vscomp-clear-icon::before, .vscomp-clear-icon::after {
    left: auto;
    right: 5px;
}

    .vscomp-clear-icon::before {
        transform: rotate(-45deg)
    }

    .vscomp-clear-icon::after {
        transform: rotate(45deg)
    }


.vscomp-clear-button {
    right: auto;
    left: 30px;
}



.vscomp-dropbox-close-button {
    left: auto;
    right: 50%;
    margin-left: initial;
    margin-right: -20px;
}

.vscomp-wrapper.has-clear-button .vscomp-toggle-button {
    padding-right: 10px;
    padding-left: 54px;
}
.vscomp-option.group-option {
    padding-left: initial;
    padding-right: 30px
}

.vscomp-new-option-icon {
    right: auto;
    left: 0;
}

    .vscomp-new-option-icon::before {
        border-left-color: initial;
        border-right-color: rgba(0,0,0,0);
        right: auto;
        left: 0;
    }

    .vscomp-new-option-icon::after {
        right: initial;
        left: 1px;
    }




.vscomp-wrapper .checkbox-icon.checked::after {
    transform: rotate(45deg) translate(1px, -4px);
    border-left-color: initial;
    border-right-color: rgba(0,0,0,0);
}

.vscomp-wrapper.show-as-popup .vscomp-dropbox-container {
    left: auto;
    right: 0;
}


.vscomp-wrapper.multiple .vscomp-option .vscomp-option-description {
    padding-left: initial;
    padding-right: 25px
}

.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after {
    transform: rotate(45deg) translate(1px, -4px);
    border-left-color: initial;
    border-right-color: rgba(0,0,0,0);
}

.vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-wrapper:focus .vscomp-toggle-button {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)
}



.vscomp-wrapper.keep-always-open .vscomp-toggle-button {
    padding-right: initial;
    padding-left: 24px
}

.vscomp-wrapper.keep-always-open .vscomp-clear-button {
    right: auto;
    left: 5px
}


.vscomp-wrapper.keep-always-open.focused, .vscomp-wrapper.keep-always-open:focus, .vscomp-wrapper.keep-always-open:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)
}

.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button {
    padding: 4px 10px 0 22px
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {

    margin: 0 0 4px 4px;
    padding: 2px 8px 2px 3px
}

    .vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count {
        padding-right: initial;
        padding-left: 8px
    }


.vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
    right: auto;
    left: 2px
}


.vscomp-wrapper.text-direction-rtl {
    direction: rtl
}

    .vscomp-wrapper.text-direction-rtl .vscomp-toggle-button {
        padding: 7px 30px 7px 10px
    }

    .vscomp-wrapper.text-direction-rtl .vscomp-arrow {
        left: auto;
        right: 0
    }

    .vscomp-wrapper.text-direction-rtl .vscomp-clear-button {
        left: auto;
        right: 30px !important
    }

    .vscomp-wrapper.text-direction-rtl .checkbox-icon {
        margin-left: 0;
        margin-right: 10px
    }

        .vscomp-wrapper.text-direction-rtl .checkbox-icon.checked::after {
            transform: rotate(45deg) translate(-4px, 1px)
        }

    .vscomp-wrapper.text-direction-rtl .vscomp-search-container {
        padding: 0 5px 0 15px
    }

    .vscomp-wrapper.text-direction-rtl .vscomp-toggle-all-label {
        text-align: left
    }

    .vscomp-wrapper.text-direction-rtl .vscomp-option {
        text-align: left
    }

        .vscomp-wrapper.text-direction-rtl .vscomp-option.group-option {
            padding-left: 30px
        }

    .vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon {
        left: auto;
        right: 0
    }

        .vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::before {
            border-left-color: rgba(0,0,0,0);
            border-right-color: #512da8
        }

        .vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::after {
            left: auto;
            right: 1px
        }

    .vscomp-wrapper.text-direction-rtl.multiple .vscomp-option.selected .checkbox-icon::after {
        transform: rotate(45deg) translate(-4px, 1px)
    }

    .vscomp-wrapper.text-direction-rtl.has-clear-button .vscomp-toggle-button {
        padding-left: initial;
        padding-right: 54px
    }

    .vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-toggle-button {
        padding-left: initial;
        padding-right: 24px
    }

    .vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-clear-button {
        left: auto;
        right: 5px
    }

    .vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-toggle-button {
        padding: 4px 22px 0 10px
    }

    .vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag {
        margin: 0 4px 4px 0;
        padding: 2px 3px 2px 8px
    }

        .vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag.more-value-count {
            padding-left: initial;
            padding-right: 8px
        }

    .vscomp-wrapper.text-direction-rtl.show-value-as-tags.has-value .vscomp-clear-button {
        left: auto;
        right: 2px
    }

.pop-comp-wrapper {
    left: auto;
    right: 0;
}


.pop-comp-arrow::before {
    left: auto;
    right: 8px;
    transform-origin: right top;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}


.pop-comp-wrapper.position-bottom > .pop-comp-arrow {
    margin-left: initial;
    margin-right: -8px;
    left: auto;
    right: 0;
}


.pop-comp-wrapper.position-top > .pop-comp-arrow {
    margin-left: initial;
    margin-right: -8px;
    left: auto;
    right: 0;
}

.pop-comp-wrapper.position-right > .pop-comp-arrow {
    left: auto;
    right: -15px
}

.pop-comp-wrapper.position-left > .pop-comp-arrow {
    right: auto;
    left: -15px
}
/*--------------------*/

.convert-controller .svg-container img {
    margin-right: initial !important;
    margin-left: 10px !important;
}
#reportrange {
    background: #fff url(/Images/calendar.svg) no-repeat right 7px center !IMPORTANT;
    background-size: 20px !IMPORTANT;
}
.contact-form-modal {
    right: auto !important;
    left: 0 !important;
}