/*
    
*/
.aj-inputfield{
  margin: 0px;
  outline: none;
  background-color: transparent;
  padding: 2px 2px 2px 2px;
  border: 0px;
}
.aj-inputfield:disabled{
  content: "disabled";
  background-color: transparent;
  color: grey;
}
  
.aj-menu{
  margin: 0px;
  padding: 5px 5px 5px 5px;
  position: absolute;
  background-color: #2d2d2df0;    
  box-shadow:  1px 1px 4px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  border:1px solid rgba(128, 128, 128,0.5);
  color:white;
  font-size: 15px;
  min-width: 120px;
  vertical-align: middle;
  transition: background-color 0.2s, border 0.2s,box-shadow 0.2s opacity 0.2s;
}
.aj-menu-hr{
    padding: 0 0 0 0;
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 0;
    border-right: 0;
    
}
.aj-menu-item,.aj-menu-caption{
    display: flex;
    width: 100%;
    align-items: center;
}
.aj-menu-caption{
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.aj-menu-item{
    padding: 5px 5px 5px 5px;
    cursor: pointer;
    transition: background-color 0.2s;    
}
.aj-menu-text{
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin: 2px;
}
.aj-menu-icon{
    width:18px;
    height:18px;
    vertical-align: middle;
}
.aj-flex-row{
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.aj-flex-item-row,.aj-flex-item-col,.aj-flex-item,.aj-flex-line{
    display: flex;
    flex-grow: 1;
}
.aj-flex-item-col{
    flex-direction: column;
}
.aj-flex-item-row{
    flex-direction: row;
}
.aj-flex-line{
  height: 3px;
  border-bottom:1px dashed #d6d6d6;
}
.aj-menu-item:hover{
    background-color:dimgray;
    border-radius: 4px;
}
.aj-n-cen,.aj-n, .aj-n-rb,.aj-n-rt,.aj-nt,.aj-n-b,.aj-n-t{
    margin: 2px;
    text-align: center;
    text-wrap: nowrap;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    position: absolute;
    border-radius: 5px;
    background-color: #5f6d5afa;
    font-size: 18px;
    color:white;
    border:1px solid rgb(128, 128, 128);
    pointer-events: none;
    width: fit-content;
}

.aj-n-cen{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}
.aj-n-rb{
    right:2px;
    bottom: 2px;
}
.aj-n-rt{
    right:2px;
    top: 2px;
}
.aj-n-b{
    left:50%;
    bottom: 2px;
    transform:translate(-50%, 0%);    
}
.aj-n-t{
    left:50%;
    top: 2px;
    transform:translate(-50%, 0%);    
}
.aj-win{
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px;
  position: absolute;
  pointer-events: all;
  flex-direction: column;
  display: flex;
  border-radius: 5px;
  border: 1px solid #0000008b;
  box-shadow: 0px 0px 3px #00000051;
}
.aj-win-head{
    display: flex;
    align-items: center;
    vertical-align: middle;
    padding: 0px 2px 0px 2px;
    background-color: #b3b3b3;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid #939393;
    flex-grow: 0;
    height: 36px;
    color: black;
    transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
}
.aj-win-content{
  display: flex;
  position: relative;
  flex-direction: column;
  border-radius: 0px 0px 4px 4px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px;
  flex-grow: 1;
}
.aj-win-bottom{
    height: auto;
    display: flex;
    padding: 4px 8px 4px 8px;
    align-items: center;
    flex-grow: 0;
    background-color: #cfcfcf;
    justify-content: end;
    border-radius: 0px 0px 4px 4px;
    border-top: 1px solid #7171715f;
    border-bottom: 0px solid none;
}
.aj-win-head-bt{
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 2px;
    margin: 2px;
    cursor: pointer;
}
.aj-win-head-bt:hover{
    background-color:#bfbfbff0;
}

.aj-img-bt{
    cursor: pointer;
    border: none;
    background-color: transparent;
    margin:1px 1px;
    display:flex;
    align-items: center;
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.aj-title-bt{
    border-radius: 4px;
    vertical-align: middle;
    font-size: 15px;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    align-content: center;
    padding: 3px 3px 3px 3px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: background-color 0.3s, border 0.2s,box-shadow 0.2s;
}
.aj-title-bt:hover{
    background-color:#95959580;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.aj-img-bt{
  height: fit-content;
  vertical-align: middle;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
  align-items: center;
  align-content: center;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
}
.aj-bt{
    background-color:rgb(87, 87, 87);
    border-radius: 4px;
    border:1px solid rgb(120, 120, 120);
    color:rgb(255, 255, 255);
    vertical-align: middle;
    font-size: 18px;
    text-align: center;

    align-items: center;
    align-content: center;

    margin: 0.2vh 0.2vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 0.5vh;
    padding-bottom:  0.5vh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
}
.aj-bt:hover{
    background-color:rgb(123, 123, 123);
    border:1px solid rgb(255, 255, 255);
    box-shadow:  0px 0px 4px #ffffffaf;
}
.aj-bt:disabled {
  pointer-events: none;
  background-color: transparent;
  color: grey;

  border:1px solid rgb(144, 144, 144);
}
.aj-fix-sz{
  height: 100%;
  width:100%;
  height: -webkit-fill-available;
  width:-webkit-fill-available;
}
.aj-hr{
  flex-grow: 1;
  padding: 0 0 0 0;
  border-bottom: 1px solid rgba(52, 52, 52, 0.099);
  border-top: 1px solid rgba(64, 64, 64, 0.777);
  margin-top: 5px;
  margin-bottom: 5px;
  border-left: 0;
  border-right: 0;
  
}
.aj-input {
    display:block;
    position: relative;
    padding-left: 28px;
    padding-right: 15px;
    
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:fit-content;
}

/* Hide the browser's default radio button */
.aj-input input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.aj-radio {
  position: absolute;
  top: calc(50% - 12px);
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  border: 2px solid rgb(60, 60, 60);
  box-sizing:content-box;
}

/* On mouse-over, add a grey background color */
.aj-input:hover input ~ .aj-radio {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.aj-input input:checked ~ .aj-radio {
  background-color: #5d825c;;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.aj-radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.aj-input input:checked ~ .aj-radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.aj-input .aj-radio:after {
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}   

.aj-check {
  position: absolute;
  top: calc(50% - 12px);
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 2px solid rgb(60,60,60);
  box-sizing:content-box;
}

/* On mouse-over, add a grey background color */
.aj-input:hover input ~ .aj-check {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.aj-input input:checked ~ .aj-check {
  background-color: #5d825c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.aj-check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.aj-input input:checked ~ .aj-check:after {
  display: block;
}

/* Style the checkmark/indicator */
.aj-input .aj-check:after {
  left: calc(50% - 3px);
  top:  calc(50% - 8px);
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.aj-input input:disabled ~ .aj-check {
    background-color: #cdcdcd;
    border: 2px solid rgb(130, 130, 130);    
}
select {

  /* styling */
  background-color: white;
  border: thin solid rgb(76, 76, 91);
  border-radius: 5px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.2em 3.5em 0.2em 1em;
  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}



select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(0.8em + 2px),
    calc(100% - 15px) calc(0.8em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1em;
  background-repeat: no-repeat;
}
option:disabled{
  color: rgba(174, 174, 174, 0.866);
}
select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 0.8em,
    calc(100% - 20px) 0.8em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1em;
  background-repeat: no-repeat;
  border-color: rgb(118, 147, 118);
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.aj-modal{
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000000f0;
  z-index:99999999999999;
  color: white;
  align-items: center;
}

.aj-state-bt{
  display: block;

  border: 1px solid transparent;
  background-color: transparent;
  color: white;
  align-self: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
  /*font size*/
  --min-size: 10;
  --max-size: 48;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((80cqw - 220px) / (1920 - 220))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
  margin: 0.2vh 0.2vw;
  padding-left: 0.8vw;
  padding-right: 0.8vw;
  padding-top: 0.2vh;
  padding-bottom:  0.2vh;
  
}
.aj-calendar-today{
  background-color:  #1a1a1af2;
}  
.aj-state-bt:hover,.aj-state-bt-active{
  border: 1px solid #ffffff;
}  
.aj-state-bt:disabled{
  color: #4d4d4d;
  pointer-events: none;
}
.aj-calendar-top{
  border-top: 1px solid #2f2f2f;
}   
.aj-calendar-current{
  background-color: #262626;
  border: 1px solid #b2b2b2;
}    
.aj-calendar-desc{
  /*font size*/
  --min-size: 6;
  --max-size: 28;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((60cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);  

  color: #a2a2a2;
  position: absolute;
  top: calc(50% + var(--font-size) * 1.5);
  left:0;
  right:0;
  text-align: center;
  pointer-events: none;
}    
.aj-loader {
  display: block;
  position: relative;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  width: 50px;
  height: 50px; 
  border: 15px solid #9c9a96;
  border-radius: 50%;
  border-top: 15px solid #9ed55a;

  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  box-shadow:  0px 0px 8px #00000060;;
}
  /* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.aj-loader-v {
  display: block;
  position: relative;
  left: calc(50% - 25px);
  top: calc(50% - 12.5px);
  width: 50px;
  height: 25px;
  padding: 0px 0px 0px 0px; 
}
.aj-loader-v div {
  position: absolute;
  top: 40%;
  width: 20%;
  height: 40%;
  border-radius: 50%;
  background: #718c51;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  box-shadow:  0px 0px 2px #fdffbacf;
}
.aj-loader-v div:nth-child(1) {
  left: 0%;
  animation: aj-loader-v 0.6s infinite;
}
.aj-loader-v div:nth-child(2) {
  left: 25%;
  animation: aj-loader-v 0.6s infinite;
  animation-delay: -0.1s;
}
.aj-loader-v div:nth-child(3) {
  left: 50%;
  animation: aj-loader-v 0.6s infinite;
  animation-delay: -0.2s;
}
.aj-loader-v div:nth-child(4) {
  left: 75%;
  animation: aj-loader-v 0.6s infinite;
  animation-delay: -0.3s;
}
@keyframes aj-loader-v {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.aj-loader-ring {
  display: block;
  position: relative;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px; 
  padding: 0px 0px 0px 0px;
}
.aj-loader-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  margin: 10%;
  border: 10px solid #9ad567;
  border-radius: 50%;
  animation: aj-loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #85ba56 transparent transparent transparent;

}
.aj-loader-ring div:nth-child(1) {
  animation-delay: -0.45s;

}
.aj-loader-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.aj-loader-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes aj-loader-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.aj-loader-progress{
    border-radius: 8px;
    border:none;
    background-color: #718c51;
    transition: width 0.3s, border 0.2s;
}
.aj-loader-progress div{
    border-radius: 8px;
    border:none;
    background-color: #718c51;
    transition: width 0.3s, border 0.2s;
}



.aj-tab-bt{
    display: flex;
    position: relative;
    flex-direction: row;
    max-width: 200px;
    border-radius: 5px;
    border:1px solid rgb(102, 130, 118);
    background-color:#cfcfcf;
    color:rgb(50, 50, 50);
    margin: 0px 0px;
    margin-right: -1px;
    margin-top: 1px;
    align-content: center;
    padding: 0px 4px 0px 4px;
    align-items: stretch;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.aj-tab-bt-active{
    background-color:#eeeeee;
    border-bottom: 1px solid rgba(0,0,0,0);
}
.aj-tab-bt:hover{
    background-color:rgb(255, 255, 255);
  /*  border:1px solid rgb(191, 191, 191);*/
    box-shadow:  0px 0px 4px #ffffffaf; 
}

.aj-text-tumb{
    display: flex;
    align-items: center;
    padding-left: 3px;
    padding-right: 3px;
    flex-grow: 1;
    word-break: keep-all;
}
.aj-tab-bt-close{
    position: absolute;
    display: flex;
    align-items: center;
    bottom:2px;
    height:16px;
    width:16px;
    top:calc(50% - 8px);
    right:2px;
    transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
    justify-content: center;
    border-radius: 4px;
}
.aj-tab-bt-close:hover{
    background-color: #cccccc8c;
}
.aj-tab-div{
    position: absolute;
    display: flex;
    flex-direction: column;
    top:0;
    right:0;
    left:0;
    bottom:0;
    padding: 0 0 0 0;
    margin: 0 0;
}
.aj-tab-head{
    position: relative;
    display: flex;
    flex-direction: row;
    height: 30px;
    padding: 1px 0 0 0;
    margin: 0 0;
}
.aj-flex-center{
    display: flex;
    align-items: center;
    align-self: center;
}
.aj-tab-content{
    display: flex;
    position: relative;
    flex-grow: 1;
    align-items: stretch;
    padding: 0 0 0 0;
    margin: 0 0;  
    overflow: auto;
}
.aj-tab-content-inner{
    display: block;
    position: absolute;
    padding: 0 0 0 0;
    margin: 0 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
}
.aj-tab-head-line{
    position: absolute;
    display: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 0 0 0 0;
    margin: 0 0;
    border-bottom: 1px solid #4a5e3c;
}

.aj-bt-number{
    position: absolute;
    display: block;
    top:2px;
    right:4px;
    width:fit-content;
    height: fit-content;
    padding: 2px 2px 2px 2px;
    font-size: 9px;
    background-color: #1d3971;
    color: white;
    border-radius: 25%;
    text-align: center;
    pointer-events: none;
}
.aj-active-state{
  border-radius: 25%;
  height: 10px;
  width: 10px;
  transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
}

.aj-debug-span-num{
  cursor: pointer;
  transition: background-color 0.2s, border 0.2s,box-shadow 0.2s;
}
.aj-debug-span-num:hover{
  background-color: #d1d1d1;
}