/*******************
* tabs ajax
*******************/
.tabs {}
.tabs>.tab-menu {display: flex; }
.tabs>.tab-menu>li {list-style: none;}
.tabs>.tab-menu>li.active {background: rgba(0,0,0,.1);}
.tabs>.tab-menu>li[disabled] {cursor:not-allowed!important;}
.tabs>.tab-menu>li:hover {background: rgba(0,0,0,.1);cursor:pointer;}
.tabs>.tab-content {}
.tabs>.tab-content>div {display: none;}
.tabs>.tab-content>div.active {display: block;}
/*******************
* loadsendform ajax
*******************/
.loading {cursor:progress; position:relative; display:block;color:gray;padding: 10px;}
.loading:before {content:''; background:rgba(0,0,0,.6); width:100%; height:100%; position:absolute; inset: 0;}
.loading:after {content: '';position: absolute; inset: 0; background: url('../img/loading.gif') center center no-repeat; background-size: 25px 25px;}
/******************************
* dialog
*******************************/
body:has(dialog[open]) {overflow: hidden;}
body:has([open-modal]:hover) {cursor: pointer;}
dialog.modal[open] {animation: open .5s forwards;} /*:open*/
dialog.modal:focus  {outline: none;}
dialog.modal {margin: auto;  position: fixed;  inset:0; border: none; background: none;min-width: 280px;max-width: min(500px, 90%); width:max-content;box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);max-height: 80vh}
dialog::backdrop {backdrop-filter: blur(2px);background: rgba(0, 0, 0, 0.2);}
dialog.modal .ModalWrapper {background: white;  color: #3c3c3c; font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; }
dialog.modal .ModalWrapper>.ModalHead {border-bottom: 1px solid #ddd; background-image: linear-gradient(to bottom,#fff 0,#eee 100%);display: flex;justify-content: space-between;padding: 8px 5px;}
dialog.modal .ModalWrapper>.ModalHead>strong {text-overflow: ellipsis; white-space: nowrap;  overflow: hidden;  padding: 0 5px;/*display: inline-block;*/}
dialog.modal .ModalWrapper>.ModalHead>a { color: #999;  cursor: pointer;background:none; border:none;font-size: 1rem!important; padding: 0 5px;}
dialog.modal .ModalWrapper>.ModalHead>a:hover {color:#666;}
dialog.modal .ModalWrapper>.ModalContent {padding: 10px;}
@keyframes open {
  from { opacity: 0;transform: translateY(-200%); }
  to   { opacity: 1;transform: translateY(0%); }
}

/******************************
* toFix
*******************************/
/*
.toFix {transition: 1s all;padding: 5vh 10px;}
.fixed {  position: fixed !important;  top: 0 !important;  z-index: 999; padding: 10px;}
*/
/******************************
* toFix
*******************************/
.toFix {transition: 1s all;}
.fixed {  position: fixed !important;  top: 0 !important;  z-index: 999;  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);animation: vvmfix 1s forwards;}
.fixed:before {content: ""; background: rgba(0, 0, 0, 0.32) none repeat scroll 0 0; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: 1;width: 100%; height: 100%;z-index: -1;}

@keyframes vvmfix {
  from {transform: translateY(-100%);}
  to {transform: translateY(0px);}
}