:root {
    --default-font-size: 14px;
}
html,body {width: 100%; height:auto; max-width: 100%; min-height: 100%; font-family:Helvetica, Arial, sans-serif; line-height:22px; text-shadow:none; font-size:14px; font-style:normal; color: var(--main-font-color); margin:0px; padding:0px; background-color: var(--main-bg-color); overflow:hidden; overscroll-behavior-x: none; overscroll-behavior-y: none;}

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
*[contenteditable] { -webkit-user-select: text; user-select: text; }

table tr td{padding: 0px;}
button{position:relative; top:0px; left:0px; width:auto; height:auto; margin: 0px; padding: 3px 5px 3px 25px; font-size: 14px; line-height: 20px; border: 1px solid var(--border-color); background-color: var(--button-bg-color); color: var(--button-font-color); border-radius: 5px; outline: 0px;}
button:hover{background-color: var(--button-hover-bg-color); border: 1px solid var(--button-hover-border-color);}
button:active{background-color: var(--button-active-bg-color); outline-width:0px;}
button:focus{border:1px solid var(--button-focus-border-color) !important; outline-width:0px;}
button:disabled{background-color: var(--button-disabled-bg-color); color: var(--button-disable-font-color); -webkit-filter: grayscale(100%); filter: grayscale(100%);}
button:disabled:hover{background-color: var(--button-disabled-hover-bg-color) !important; border-color: var(--button-disabled-hover-border-color);}
button:before{content: ""; position:absolute; top: 50%; left: 5px; width:auto; height:auto; display:block; transform:translateY(-50%); font-size: 16px; font-family: "Font Awesome 5 Pro"; font-weight: 400; color: var(--default-light-color);}

figure.table tr td{vertical-align: top; padding: 5px;}
figcaption{color: var(--figcaption-font-color); font-style: italic;}
fieldset{border-collapse: collapse; border: 1px solid var(--border-color);}
fieldset legend{color: var(--label-font-color); font-size: 14px; margin: 0px 5px;}

input[type='text'], input[type='password'], select{position:relative; top:0px; left:0px; width: 100%; height:30px; padding: 3px; border-radius: 5px; border: 1px solid var(--input-border-color); background-color: var(--input-bg-color); outline:0px; font-size:inherit;
                                                   -webkit-appearance: none; color: var(--main-font-color);
}
input[type='text'].keyword, input[type='text'].search-keyword{padding: 3px 23px 3px 3px; background-repeat:no-repeat; background-position:right 4px center; background-size: 16px 16px; background-image:url(../images/search-icon-disabled.png);}
input[type='checkbox']{width:16px; height: 16px; background-color: var(--input-checkbox-bg-color); border: 1px solid #8f8f9d; border-radius: 3px; outline: 0px; position: relative; display: inline-block; vertical-align: middle; -moz-appearance:none; -webkit-appearance:none;}
input[type='checkbox']:checked{-moz-appearance:checkbox; -webkit-appearance:checkbox;}
input[type='text'].date, input[type='text'].datetime{padding-left: 32px; background-image: url(../images/calendar.svg), linear-gradient(to left, var(--input-bg-color) calc(100% - 28px), var(--input-title-bg-color) 28px);
                                                     background-position: 5px center, left top; background-repeat: no-repeat, no-repeat; background-size: 16px 16px, auto;
}
input[type='text'].date.right, input[type='text'].datetime.right{padding-right: 32px; padding-left: 3px; background-image: url(../images/calendar.svg), linear-gradient(to right, var(--input-bg-color) calc(100% - 28px), var(--input-title-bg-color) 28px);
                                                     background-position: right 5px center, left top; background-repeat: no-repeat, no-repeat; background-size: 16px 16px, auto;
}
input[type='text'][data-type='currency']{text-align:right;}
textarea{position:relative; top:0px; left:0px; width: 100%; height:100px; padding: 3px; border-radius: 5px; border: 1px solid var(--input-border-color); background-color: var(--input-bg-color); color: var(--main-font-color); outline:0px; resize:none; font-size: 14px; font-family:inherit; -webkit-appearance: none;}
input:focus, textarea:focus, select:focus{border-color: var(--input-focus-border-color);}
label{color: var(--label-font-color); position: relative; vertical-align: middle;}
select{-moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; background-color: var(--input-bg-color); background-image: url(../images/select-down-icon.png); background-repeat: no-repeat; background-position: center right 5px; padding-right: 18px; background-size: 10px 10px;}
h1{font-size: 28px; line-height: 32px;}
img{object-fit:contain; object-position:center;}

.form-login{background-image: url(../images/loginbg12.jpg); background-repeat:no-repeat; background-position: center center; background-size:cover;}
.unselect, span, div{-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default;}
.selectable, .selectable *{-webkit-touch-callout:initial; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
.highlighted{position:relative; display:inline-block; max-width:unset !important; background-color: var(--highlighted-bg-color); color: var(--highlighted-font-color); vertical-align: top !important;}
.invalid{border:1px solid var(--invalid-border-color) !important;}
.required{color: var(--required-font-color) !important; border-color: var(--required-font-color) !important;}
.warning, .warning .invalid{color: var(--warning) !important; border-color: var(--warning) !important;}
.hidden{display:none !important;}
.block{display:block !important;}
.inline-block{display:inline-block !important; transition: transform .1s linear;}
.inline{display:inline !important;}
/*.blur-main{ -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.15;}*/
.blur-popup{ -webkit-filter: grayscale(100%); filter: grayscale(100%); 
             border-color: var(--blur-popup-border-color) !important; box-shadow: 0 0 10px 1px var(--blur-popup-shadow-color) !important; 
}
.blur-popup.popup .popup-header{background-color: #999;}

.text-align-right{text-align:right;}
.text-align-left{text-align:left;}
.text-align-justify{text-align:justify;}
.text-align-center{text-align:center;}
.text-bold{font-weight:bold;}
.text-itanic{font-style: italic;}
.no-radius, .no-radius *{border-radius: 0px !important;}
.no-padding{padding: 0px !important;}
.no-padding-left{padding-left: 0px !important;}
.no-padding-right{padding-right: 0px !important;}
.no-padding-top{padding-top: 0px !important;}
.no-padding-bottom{padding-bottom: 0px !important;}

.btn-save:before {content: "\f0c7"; font-weight: 300;}
.btn-refresh:before, .btn-reset:before, .btn-sync:before{content: "\f2f1";}
.btn-del:before, .btn-delete:before{content: "\f2ed";}
.btn-replace:before, .btn-paste:before { content: "\f0ea"; }
.btn-ok:before{content: "\f00c"; color: var(--success);}
.btn-add:before{content: "\f067";}
.btn-edit:before{content: "\f303";}
.btn-cancel:before, .btn-close:before{content: "\f00d"; color: var(--red); font-size: 20px; font-weight: 300;}
.btn-config:before{content: "\f013";}
.btn-upload:before{content: "\f093";}
.btn-download:before{content: "\f019";}
.btn-data-transfer:before{content: "\f074";}
.btn-select:before, .btn-select-all:before{content: "\f14a";}
.btn-unselect:before{content: "\f0c8";}
.btn-aws:before{content: "";}
.btn-search:before{content: "\f002";}
.btn-print:before{content:"\f02f";}
.btn-start:before{content:"\f04b";}
.btn-view:before{content: "\f06e";}
.btn-select-file, .btn-file-select{position:absolute !important; top: auto !important; left: auto !important; right: 5px; bottom: 5px; min-width: 24px; min-height: 26px; height: 28px; border:1px solid var(--border-color)!important; border-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: var(--button-bg-color);}
.btn-excel {content: "\f1c3";}

.btn-drop{background-color: var(--main-bg-color); border-color: var(--border-color); border-radius: 5px; padding: 5px 30px 5px 26px; width:auto; height: auto; overflow:hidden;}
.btn-drop:active i:last-child:hover{background-color: var(--button-hover-border-color);}
.btn-drop i:last-child{position:absolute; top: 0px; left: auto; right: 0px; bottom: 0px; width: 20px; font-size: 16px; color: var(--border-color); padding-top: 3px; text-align: center;}
.btn-drop:hover i:last-child{color: var(--main-font-color);}
.btn-drop i:last-child:hover{background-color: var(--button-active-bg-color); color: var(--main-font-color);}
.btn-drop img{position:relative; top: 0px; left: 0px; width: 16px; height: 16px; margin-right: 5px; pointer-events:none; object-fit: contain; display: inline-block; vertical-align: middle;}
.btn-drop span{position:relative; top: 0px; left: 0px; width: auto; height:auto; display: inline-block; vertical-align: middle; max-width: calc(100% - 21px); overflow:hidden; text-overflow:ellipsis;}
.btn-drop i:first-child{display:inline-block; vertical-align: middle;}

.btn-row-inline{position:absolute; top: auto; left:auto; right: 5px; bottom: 5px; width:auto; height: 28px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}

.checkbox{position: relative; width: max-content; height:auto; max-width: 100%; border: 1px dashed transparent; border-radius: 5px; border-collapse: collapse; outline: 0px; padding: 1px;}
.checkbox:focus{border-color: #ababab;}
.checkbox *{pointer-events:none;}
.checkbox input{display:none;}
.checkbox input:checked + span:before{content: "\f14a"; color: #0071c2; font-weight: 900;}
.checkbox span{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding-left: 25px; cursor: default;}
.checkbox span:before{content: "\f0c8"; position:absolute; top: 50%; left: 0px; width:auto; height:auto; transform:translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px;}

.rotate-right{animation: rotate-right 10s infinite ease-in-out both;}
.rotate-left{animation: rotate-left 5s infinite ease-in-out both;}

.hide-scroll-bar{-ms-overflow-style: none; scrollbar-width: none;}
.hide-scroll-bar::-webkit-scrollbar{display:none;}

.glass-effect{background-color: transparent !important; overflow: hidden !important; z-index: 1;}
.glass-effect:before{content: ''; position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; background-color: var(--glass-effect-bg-color);}


@supports ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) {
  .glass-effect {
        backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important;
    }
}

@supports ( not (backdrop-filter: blur(1px)) ) and (background: -moz-element(#MainControl)) {
  .glass-effect:after{content: ''; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; width: auto; height: auto;  
                        background-color: #fff; background-attachment:fixed; background-size:auto; background-position:top left; 
                        background-image: -moz-element(#MainControl); background-image: element(#MainControl); 
                        background-repeat:no-repeat; z-index: -1; 
                        -webkit-filter: blur(30px); filter: blur(30px);}
}

.spinner {
  position:absolute; top:0px; left:0px;
  height: 20px;
  width: 30px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  background: rgba(0,0,0,0.28);
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.btn-touch:active:after{
    position:absolute; content: ''; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; border: 0px; border-radius: 50%; background-color: rgba(1, 115, 199, 0.2); animation: fadeOut 0.1s; -webkit-animation: fadeOut 0.1s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn2 {
    0%, 100% {opacity: 0.2;}
    30%{opacity: 0.6;}
    50%, 60%{opacity: 1;}
    80%{opacity: 0.6;}
}

@keyframes fadeIn2 {
    0%, 100% {opacity: 0.2;}
    30%{opacity: 0.6;}
    50%, 60%{opacity: 1;}
    80%{opacity: 0.6;}
}

@-webkit-keyframes fadeOut {
    from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1.0)
  }
}

@keyframes fadeOut {
    from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-webkit-keyframes rotate-right {
    0% {
    -webkit-transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.5);
  }
  100%{-webkit-transform: rotate(360deg) scale(1);}
}

@keyframes rotate-right {
    0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.5);
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}

@-webkit-keyframes rotate-left {
    from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes rotate-left {
    from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes blinker {
  50%{opacity: 0.1;}
}

@keyframes blinker {
  50%{opacity: 0.1;}
}


@media (max-width: 768px) {
    html, body{overflow-y: auto; overflow-x:hidden;}
    .buttonlist button, .button-list button, .btnlist button, .btn-list button{border-radius: 5px; padding: 8px 10px 8px 25px; background-position: center left 10px; height: auto;}
    .buttonlist, .button-list, .btnlist, .btn-list{padding: 5px; margin-top: 10px; text-align: right;}
}