/* @import url("/express/appstack/dist/css/light.css"); */
@import url("/express/appstack/dist/css/app.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"); 

.activecard
{
  color: #0000ff;

}
.activep
{
    color:royalblue;
    font-weight: 600;
}
.activeparam
{
    color:royalblue;
    font-weight: 600;
    font-size: 13px;
}
.activeparamcard
{
    color:royalblue;
    font-weight: 600;
    font-size: 13px;
}
.activerow
{
    background-color: royalblue;
    color: rgba(255, 255, 255, 0.801)!important; 
    cursor: default;
}

.arrow-dx::after
{
  position: absolute;
  content: "\25B6"; 
  right: 0;
  top: 50%;
  margin-right: 9px;
  transform: translateY(-50%);
}
.asterism
{
  content: "\2042" !important;
}
.badge-ft 
{
  font-size: 15px;
  font-weight: 700;
}

.bdg
{
    background-color: navy;
    color: white;
    font-size: 11px;
}

.bg-blue-dark {
  background-color: #062e5b !important;
}
.bg-gray-100
{
  background-color: #f8f9fa !important;
}
.bg-gray-200
{
  background-color:#e9ecef !important;
}
.bg-gray-300
{
  background-color:#dee2e6 !important;
}
.bg-gray-400
{
  background-color:#ced4da !important;
}
.bg-gray-500
{
  background-color:#adb5bd !important;
}
.bg-gray-600
{
  background-color:#6c757d !important;
}
.bg-gray-700
{
  background-color:#495057 !important;
}
.bg-gray-800
{
  background-color:#343a40 !important;
}
.bg-gray-900
{
  background-color:#212529 !important;
}
.bg-aliceblue{
  background-color:aliceblue !important;
}
.bg-azure
{
  background-color:azure !important

}
.bg-cadetblue{
  background-color: cadetblue !important;
}
.bg-cornflowerblue{
  background-color: cornflowerblue !important;
}
.bg-chocolate
{
  background-color: chocolate !important;
}
.bg-coral
{
  background-color: coral !important;
}
.bg-cyan{
  background-color:cyan !important;
}
.bg-darkorange {
  background-color:darkorange !important;
}
.bg-darkseagreen {
  background-color:darkseagreen !important;
}
.bg-dimgray {
  background-color:dimgray !important;
}
.bg-dodgerblue
{
  background-color: dodgerblue !important;
}
.bg-gainsboro{
  background-color:gainsboro !important;
}
.bg-gray{
  background-color:gray !important;
}

.bg-lightseagreen
{
  background-color: lightseagreen !important;
}
.bg-indigo {
  background-color:indigo !important;
}
.bg-ivory{
  background-color:rgb(252, 251, 223)  !important;
}
.bg-magenta {
  background-color:magenta !important;
}
.bg-maroon {
  background-color:maroon !important;
}
.bg-mslateblue
{
  background-color:mediumslateblue!important;
}
.bg-navy {
  background-color:navy !important;
}
.bg-nocolor
{
  background: none !important;
}
.bg-olive
{
  background-color: olive !important;
}
.bg-pink {
  background-color:#d63384 !important;
}
.bg-purple {
  background-color:purple !important;
}
.bg-red {
  background-color:red !important;
}
.bg-royalblue {
  background-color:royalblue !important;
}
.bg-snow{
  background-color: snow !important;
}
.bg-steelblue
{
  background-color: steelblue !important;
}

.bg-teal {
  background-color:teal !important;
}
.bg-violet {
  background-color:blueviolet !important;
  /* background-color:var(--bd-violet) !important; */
}
.bg-whited
{
  background-color:#ddd !important;
}

.bg-whitesmoke{
  background-color: whitesmoke !important;
}

.bg-yellow {
  background-color:yellow !important;
}

.bold
{
    font-weight: bold;
}



.btnOpen
{
    border: 1px solid #dee2e6 !important;
    width: 30px;
    margin-left: 1px;
    font-size: 8px;
    text-align: center ;
}


.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

.canceled
{
 opacity: 60%;
 text-decoration: line-through;
}
.captionapp
{
  font-size: 14px;
  font-weight: 500;
  min-height: 36px;
}

.cur-move
{
  cursor: move !important;
}
.cur-def
{
  cursor: default !important;
}
.cur-grab
{
  cursor: grab !important;
}
.cur-grabbing
{
  cursor: grabbing !important;
}
.cur-pointer:not(:disabled):hover
{
  cursor: pointer !important;
}
.cur-progr
{
  cursor: progress !important; 
}

.dt-placeh:placeholder-shown::before
{
  content: attr(placeholder);
} 

.dt-placeh:focus::before
{
  content: "" !important;
  display: none;
} 


.fsz-9
{
  font-size: 9px  !important; 
}

.fsz-10
{
  font-size: 10px  !important; 
}

.fsz-11
{
  font-size: 11px  !important; 
}

.fsz-12
{
  font-size: 12px  !important; 
}

.fsz-13
{
  font-size: 13px  !important; 
}
.fsz-14
{
  font-size: 14px  !important; 
}
.fsz-16
{
  font-size: 16px  !important; 
}
.fsz-18
{
  font-size: 16px  !important; 
}
.fsz-20
{
  font-size: 20px  !important; 
}
.fsz-24
{
  font-size: 24px  !important; 
}
.fsz-32
{
  font-size: 24px  !important; 
}


.highlightrow
{
    background-color:gainsboro;
    cursor: default;
}

.ic
{
    background-color: #f8f9fa !important; 
    cursor: pointer;
    font-style:normal;
    font-size: 12px;
    height: auto;
    width: 26px;
    text-align: center ;
}

.icb
{
    cursor: pointer;
    font-style:normal;
    font-size: 12px;
    height: auto;
    width: 26px;
    text-align: center ;
}
.inactive
{
  background-color: lightcoral !important;

}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.just
{
  text-align: justify !important;
}

/* .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: transparent !important;
  } */

.mnu-ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.mnu-caret
{
  color: #343a40 !important;
  padding-left: 24px;
  cursor: pointer;  
}
.mnu-caret::before 
{
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
}
.mnu-caret-down::before
{
  content: "\25E2";  
  outline-width: 0; 
}

.mnu-nested
{
  /* margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0; */
  list-style-type: none;
  display: none;
  outline-width: 0;
}
.mnu-show
{
  list-style-type: none;
  display: block;
  outline-width: 0;
  margin: 0;
}
  
.modal-backdrop-off {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: transparent !important;
}
.modal-backdrop-off-grayed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color:  rgba(41, 48, 66, 0.8) !important; 
}

.no-out:focus
{
  outline-width: 0 !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
}

.no-pointer-ev
{
  pointer-events:none;
  opacity: 60%;
}

.op-80
{
  opacity: 80%;
}
.op-70
{
  opacity: 70%;
}
.op-60
{
  opacity: 60%;
}
.op-50
{
  opacity: 50%;
}
.op-40
{
  opacity: 40%;
}
  
  
.ovflow-y-scroll
{
  overflow-y: scroll;
}

.popmenu
{
  font-size: 12px;
  font-weight: normal;
  line-height: 0px !important;
  list-style-type: none;
  outline-width: 0 !important;
  height: auto;
  padding-left: 8px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 0;
  min-width: 140px;
  margin-bottom: 8px;
}

.popmenu:not(:disabled) a:hover
{
  /* background-color:aliceblue; */
  color: royalblue; 
  font-weight: bolder;
}

.popmenu a
{
  color: #343a40;
  font-size: 12px;
  padding: 0;
  text-decoration: none;
  text-align: start;
  outline-width: 0 !important;
  border: 0 !important; 
}
.popmenu hr
{
  padding: 0 !important;
  margin-top: 3px !important;
  margin-bottom: 2px !important;
  height: 1px !important;
}

.popmenu i
{
  font-size: 14px;
}
.popmenu li
{
  padding: 0;
}


.side-b:hover
{
  color:rgb(63, 128, 234)!important; 
}
.size-xs
{
  width: 300px !important;
}
.size-sm
{
  width: 400px !important;

}
.size-md
{
  width: 600px !important;
}
.size-lg
{
  width: 900px !important;
}
.size-xl
{
  width: 1200px !important;
}

.std-caret, .std-caret-w
{
  cursor: pointer;  
}

.std-caret::before 
{
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
}

.std-caret-down::before
{
  content: "\25E2";  
  outline-width: 0; 
}

.std-caret-w::before 
{
  content: "\25B7";
  display: inline-block;
  margin-right: 6px;
}
.std-caret-down-w::before
{
  content: "\25BC";  
  outline-width: 0; 
}


.std-nested
{
  list-style-type: none;
  display: none;
  outline-width: 0;
}
.std-show
{
  list-style-type: none;
  display: block;
  outline-width: 0;
}

.tbl-alpha
{
  overflow-y: auto !important;
}
.tbl-alpha thead
{
  vertical-align: middle;
  position: sticky; 
  top: 0;
  background-color: #f8f9fa !important;
}
.tbl-alpha tfoot
{
  vertical-align: middle;
  position: sticky; 
  bottom:  0;
  background-color: #f8f9fa !important;
}
.tbl-alpha th
{
  padding-left: 3px;
  padding-right: 3px;
}

.tbl-drpd table
{
  font-size: 12px;
  border-collapse: collapse;
  width: 100%;
  overflow: auto;
}

.tbl-drpd td, .tbl-drpd tr {
  border: 1px solid #ddd;
  padding: 8px;
  box-sizing: content-box;
  /* width: fit-content;    */
  vertical-align: middle;
}
.tbl-drpd th  {
  border: 1px solid #ddd;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: left;
  /* background-color:  #495057; */
  background-color:  #6c757d;
  color: white;
  font-weight: 400;
  vertical-align: middle;
  position: sticky; 
  top: 0;
}

.tbl01  {
    font-size: 12px;
    border-collapse: collapse;
    width: 100;
    /* overflow-y: auto; */
    overflow: auto;
    color:black;
}

.tbl01 td, .tbl01 tr {
    border: 1px solid #ddd;
    padding: 8px;
    box-sizing: content-box;
    width: fit-content; 
    vertical-align: middle;
}

.tbl01 th  {
    border: 1px solid #ddd;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: left;
    background-color:  #495057;
    color: white;
    font-weight: 400;
    vertical-align: middle;
    position: sticky; 
    top: 0;
}

.tbl01 caption {
    padding-top: 17px;   
    padding-left: 3px;
    padding-right: 3px;
    caption-side: top;
    min-height: 54px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    border: 0px;
    background-color:white;
    color: #495057;
    width: auto;
}
.tblbody  {
  font-size: 11px;
  border-collapse: collapse;
  width: 100;
  /* overflow-y: auto;  */
  overflow: auto;
}

.tblbody td, .tbl01 tr {
  border: 1px solid #ddd;
  padding: 8px;
  box-sizing: content-box;
  width: fit-content; 
  vertical-align: middle;
}

.tblbody th  {
  border: 1px solid #ddd;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: left;
  background-color:  dimgray;
  color: white;
  font-weight: 400;
  vertical-align: middle;
  position: sticky; 
  top: 0;
}

.tblbody caption {
  padding-top: 17px;   
  padding-left: 3px;
  padding-right: 3px;
  caption-side: top;
  min-height: 54px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  border: 0px;
  background-color:white;
  width: auto;
}
.text-blue
{
  color: blue !important;
}
.text-blue-dark {
  color: #062e5b !important;
}
.text-cyan {
  color: cyan !important;
}
.text-gray-100
{
  color: #f8f9fa !important;
}
.text-gray-200
{
  color:#e9ecef !important;
}
.text-gray-300
{
  color:#dee2e6 !important;
}
.text-gray-400
{
  color:#ced4da !important;
}
.text-gray-500
{
  color:#adb5bd !important;
}
.text-gray-600
{
  color:#6c757d !important;
}
.text-gray-700
{
  color:#495057 !important;
}
.text-gray-800
{
  color:#343a40 !important;
}
.text-gray-900
{
  color:#212529 !important;
}

.text-dimgrey {
  color:dimgray !important;
}
.text-gain {
  color:gainsboro !important;
}

.text-indigo {
  color:indigo !important;
}

.text-kakhi
{
  color:khaki!important;
}
.text-magenta {
  color:magenta !important;
}

.text-maroon {
  color:maroon !important;
}

.text-navy {
  color:navy !important;
}
.text-olivedrab {
  color:olivedrab !important;
}

.text-orange{
  color:orange !important
}

.text-darkorange{
  color:darkorange !important
}
.text-purple{
  color:purple !important
}
.text-red
{
  color:red !important
}
.text-royalblue
{
  color:royalblue !important
}
.text-slategray {
  color:slategray !important;
}
.text-violet
{
  color:blueviolet !important;
}
.text-yellow{
  color:yellow !important
}

.text-teal {
  color:teal !important;
}

.tw-root
{
  font-size: 13px;
  font-weight: normal;
  list-style-type: none;
  margin: 0;
  padding: 0;
  outline-width: 0;
}

.tw-caret
{
    cursor: pointer;  
}

.tw-caret::before 
{
  content: "\25B7";
  display: inline-block;
  margin-right: 6px;
}

.tw-caret-down::before
{
    content: "\25E2";  
    /* -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);  */
    outline-width: 0; 
}
.tw-folder
{
    cursor: default;  
    outline-width: 0;
    user-select: none;
}

.tw-item
{
    cursor: default;
    outline-width: 0; 
    user-select: none;
}

.tw-item-disabled
{
    user-select: none;
    opacity: 40%;
    border:none;
    cursor: none;  
}

.tw-item-unavailable
{
    color: grey;
    opacity: 90%;
}

.tw-sel 
{
    font-weight: 600;
    outline-width: 0;
    color:maroon;
}
.tw-sel:before
{   
    content: "\25CF";
    padding-right: 6px;
}

.tw-sbar
{
    font-size: 11px;
    color: white;
    background-color: #062e5b;
    width: auto;
    height: auto;
    min-height: 26px;
    user-select: none;
}

.tw-sbar-secondary
{
  font-size: 11px;
  color: white;
  background-color: #3a3f44;;;
  width: auto;
  height: auto;
  min-height: 26px;
  user-select: none;
}

.tw-span:hover
{
  border-width: 0.1px;
  border-left: 0;
  border-right:0 ;
  border-style: dotted;  
}
.tw-nested
{
  list-style-type: none;
  display: none;
  outline-width: 0;
}
.tw-show
{
  list-style-type: none;
  display: block;
  outline-width: 0;
}
.tw-caption
{
  background-color: #062e5b;
  color: white;
}

.us-no 
{
  user-select: none;
}


.drop-pos
  {
    position: fixed !important;
  }
.drop-w {
    min-width: fit-content !important;
  }
.drop-minfit {
    min-width: min-content !important;
  }
.drop-clamp {
    min-width: clamp(275px, 90vw, 700px) !important;
  }
.drop-clamp-500 {
    min-width: clamp(275px, 90vw, 500px) !important;
  }
.drop-clamp-375 {
    min-width: clamp(275px, 90vw, 375px) !important;
  }
.hide-sm-md {
    display: block;
  }
.hide-sm {
    display: block!important;
  }
.hide-xs {
  display: block!important;
}
.hide-cell-xs {
  display: table-cell!important;
}

.pos-top-90
{
  position: sticky!important;
  width: 100%;
  z-index: 1022;
  top: 0px;
}
.pos-top-93-bg
{
  position: relative;
  top: 0px;
}

.pos-top-0
{
  position: sticky!important;
  background-color: white;
  width: 100%;
}
.pos-top-1
{
  position: sticky!important;
  background-color: white;
  width: 100%;
}

@media only screen and (min-width: 1400px) 
  {
    .drop-w {
      min-width:fit-content !important;
    }
  }

@media screen and (max-width: 1200px) 
{
    .hide-sm-md {
      display: none !important;
    }
}

@media screen and (max-width: 767.98px) 
{
    .hide-sm-md {
      display: none !important;
    }
    .hide-sm {
      display: none !important;
    }
}

@media screen and (max-width: 575.98px) 
{
    .just
    {
      text-align: left !important;
    }
}

@media screen and (max-width: 450px) 
{
    .pos-top-90
    {
      position: fixed!important;
      background-color: transparent!important;
      width: 100%;
      flex: content;
      justify-content: center;
      top: 93%;
    }
    .pos-top-93-bg
    {
      position: fixed!important;
      background-color: white!important;
      flex: content;
      width: 100%;
      top: 90%;
    }
    .pos-top-93-bg .btn
    {
      background-color: navy;
    }
    .pos-top-93-bg .btn-toolbar
    {
      float:right ;
      margin-right: 16px;
    }
  
    .pos-top-0
    {
      position: fixed!important;
      max-width:95% ;
      height: 100%;
      z-index: 1021;
      top: -.5%;
    }
    .pos-top-1
    {
      position: fixed!important;
      max-width:95% ;
      height: 100%;
      z-index: 1023;
      top: -.5%;
    }
    .drop-pos
    {
      position: absolute!important;
    }
    .drop-w {
      min-width: min-content !important;
    }
    .hide-xs {
      display: none !important;
    }
    .hide-cell-xs {
      display: none!important;
    }
}

@media screen and (max-width: 1199px)
{
  .size-xl
  {
    max-width:  100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }
}

@media screen and (max-width: 899px)
{
  .size-lg
  {
    max-width:  100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }
}
@media screen and (max-width: 599px)
{
  .size-md
  {
    max-width:  100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }

}
@media screen and (max-width: 399px)
{
  .size-sm
  {
    max-width:  100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

  }

}