/* UX VAR*/
.ux-btn, .ux-btn svg, .ux-input-style, .ux-anim, .ux-anim-b:before {
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* INPUT */
.ux-input-style {
    padding: 0 10px;
    margin: 0;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    outline: none;
    font-size: 14px;
    line-height: 28px;
    border-radius: 3px;
    border: 1px solid #e4e4e4;
    background: #ffffff;
    color: #656565;
}

.ux-input-style:focus {
    border-color: #4caf50;
}
.ux-input-style:placeholder {
    color: #e4e4e4;
}
/* BTN */
.ux-btn {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}
.ux-btn,
.ux-btn p{
    line-height: 28px;
    font-size: 14px;
}

.ux-btn[disabled] {
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}

.ux-btn svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-linecap: square;
    stroke-linecap: round;
    stroke-width: 3px;
}
.ux-btn-def{
    border: 1px solid #2196f3;
    background-color: #2196f3;
    color: #fff;
}
.ux-btn-def:hover{
    border-color: #1d83d5;
    background-color: #1d83d5;
}
.ux-btn-ok {
    border: 1px solid #2196f3;
    background-color: #2196f3;
    color: #fff;
}

.ux-btn-ok:hover{
    border-color: #1d83d5;
    background-color: #1d83d5;
}

.ux-btn-cancel {
    border: 1px solid #ff5722;
    background-color: #ff5722;
    color: #fff;
}

.ux-btn-cancel:hover{
    border-color: #d4481b;
    background-color: #d4481b;
}
.ux-btn-cancel svg,
.ux-btn-def svg,
.ux-btn-ok svg{
	stroke: #fff;
}
.ux-btn-arrow svg {
    stroke: #9a9a9a;
    stroke-width: 2px;
}

.ux-btn-arrow:hover svg {
    stroke: #454545;
}
.ux-accordion-toggle svg {
    stroke: #9a9a9a;
    stroke-width: 2px;
}

.ux-accordion-toggle:hover svg {
    stroke: #454545;
}

/* ARROW */
.ux-arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 0;
}

.ux-arrow svg {
    width: 100%;
    height: 100%;
    margin: 0;
}

.ux-arrow line {
}

.ux-arrow polygon {
    fill: #fff;
}

/* VIEW */
.ux-view {
    position: absolute;
    width: auto;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
    border-radius: 3px;
}

.ux-view[position="down"] .ux-arrow {
    transform: rotate(0deg);
    top: -15px;
}

.ux-view[position="up"] .ux-arrow {
    transform: rotate(180deg);
    bottom: -15px;
}

.ux-view[position="left"] .ux-arrow {
    transform: rotate(90deg);
    right: -15px;
}

.ux-view[position="right"] .ux-arrow {
    transform: rotate(-90deg);
    left: -15px;
}

/* BACKDROP */
.ux-backdrop {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    background-color: rgb(0 0 0 / 80%);
    overflow: auto;
    opacity: 0;
}
.ux-backdrop.open{ 
    opacity: 1;
}
.ux-backdrop{
	scrollbar-width: thin;
	scrollbar-color: #2196f3 #fff0;
}
.ux-backdrop::-webkit-scrollbar {
  width: 5px;
}
.ux-backdrop::-webkit-scrollbar-track {
  
}
.ux-backdrop::-webkit-scrollbar-thumb {
  background-color: #2196f3;
  border-radius: 3px; 

}



/* SELECT */
.ux-select {
    display: block;
    position: relative;
}
.ux-select a {
    margin: 0;
    position: absolute;
    width: 30px;
    height: 100%;
    right: 0;
    top: 0;
    background-color: transparent;
}

.ux-select a svg {
    margin: 0 auto;
    width: 80%;
}
.ux-select input {
    padding: 0 30px 0 10px;
    cursor: default;
    pointer-events: none;
}
.ux-select input:focus{
    border-color: #e4e4e4;
}
.ux-select[search] input {
    cursor: text;
    pointer-events: auto;
}
.ux-select[position="down"] input{
    border-radius: 3px 3px 0 0;
}
.ux-select[position="up"] input{
    border-radius: 0 0 3px 3px;
}



.ux-select-view {
    border: 1px solid #e4e4e4;
    background-color: #fff;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    z-index: 100;
}

.ux-select-view[position="up"] {
    border-bottom: none;
}

.ux-select-view[position="down"] {
    border-top: none;
}

.ux-select-content {
    display: block;
    overflow: auto;
    max-height: 200px;
}

.ux-select-content::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.ux-select-content::-webkit-scrollbar-thumb {
    background: #2c2c2c;
    border: 0;
    border-radius: 5px
}

.ux-select-content .option,
.ux-select-content .optgroup label{
    display: block;
    padding: 5px;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    transition: none;
}
.ux-select-content .optgroup label {
    font-weight: bold;
    cursor: default;
}
.ux-select-content .option:hover, .ux-select-content:not(:hover) .option[selected] {
    color: #fff;
    background-color: #03A9F4;
}

.ux-select-content .option[focus] {
    color: #fff;
    background-color: #4dc7ff;
}

.ux-select-content .optgroup .option {
    padding-left: 15px;
}

/* MODAL */
.ux-modal {
    width: 500px;
    max-width: 90%;
    margin: 0 auto;
    display: block;
    position: fixed;
    /*
    top: 30%;
    left: calc(50% - 250px);
    */
    padding: 10px;
    padding-top: 20px;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05), 0px 2px 4px rgba(0,0,0,0.25);
    z-index: 100;
    opacity: 0;
    transform: translate3d(0px, 50%, 0px);
}

.ux-modal-header, .ux-modal-content, .ux-modal-footer {
    padding: 10px;
}

.ux-modal[content] {
    padding: 0px;
}

.ux-modal-header {
    background-color: #404040;
    padding-right: 40px;
    position: relative;
    color: #fff;
}

.ux-modal-header .ux-modal-close {
    top: calc(50% - 15px);
}

.ux-modal-header .ux-modal-close svg {
    stroke: #fff;
}

.ux-modal-footer {
    background-color: #f1f1f1;
}

.ux-modal:not([header]) .ux-modal-content {
    padding-top: 30px;
}

.ux-modal[content]:not([header]) .ux-modal-content, .ux-modal-header {
    border-radius: 3px 3px 0 0;
}

.ux-modal[content]:not([footer]) .ux-modal-content, .ux-modal-footer {
    border-radius: 0 0 3px 3px;
}

.ux-modal:not([content]), .ux-modal-content {
    background-color: #FFFFFF;
}

.ux-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.ux-modal-close svg {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    position: relative;
}

.ux-modal-close:hover svg {
    stroke: #F44336;
}

.ux-modal.open {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}
.ux-modal.close {
    opacity: 0;
    transform: translate3d(0px, -50%, 0px);
}
.ux-backdrop > .ux-modal {
    margin: 50px auto;
    position: relative;
    left: 0 !important;
    top: 0 !important;
}