/*-- VCBCard Structure --*/
vcbcard { display: inline-flex; }
vcbcard con {
    display: flex;
    flex-flow: row wrap;
    place-content: stretch;
    align-items: stretch;
}
vcbcard blk {
    overflow: visible;
    min-width: 1rem; min-height: 1rem;
    flex: 1 1 auto;

    display: flex;
    flex-flow: column;
}
vcbcard blk:nth-child(3) { width: 100%; }

/* for column flex flow blk */ 
blk.top { place-content: flex-start; }
blk.mid { place-content: center; }
blk.btm { place-content: flex-end; }
blk.l { align-items: flex-start;  max-width:60%; }
blk.c { align-items: center; }
blk.r { align-items: flex-end; max-width:60%; }

vcbcard itm { display: flex; flex-wrap: wrap; }


/*-- VCBCard Style --*/
vcbcard {
    --vcbcard-bg-color      : white;
    --vcbcard-border        : .125rem solid #aaa;
    --vcbcard-border-radius : .25rem;
    --vcbcard-min-width     : 6rem;
    --vcbcard-min-height    : 7rem;
    --vcbcard-max-width     : 8rem;
    --vcbcard-margin        : .25rem;
    --vcbcard-padding       : .25rem;

    --vcbcard-con-bg-color  : #eee;
    --vcbcard-con-min-width : 100%;
    --vcbcard-con-min-height: 100%;

    --vcbcard-fx-edge-size: .25rem;
    --vcbcard-fx-edge-color: lime;
    --vcbcard-hot-color: red;
    --vcbcard-mtsel-color: lime;
}

vcbcard { 
    background   : var(--vcbcard-bg-color);
    border       : var(--vcbcard-border);
    border-radius: var(--vcbcard-border-radius);

    min-width : var(--vcbcard-min-width);
    min-height: var(--vcbcard-min-height);
    max-width : var(--vcbcard-max-width);

    margin : var(--vcbcard-margin);
    padding: var(--vcbcard-padding);

    font-weight: bold;
    cursor:pointer;
}
vcbcard con { 
    background: var(--cardcon-bg-color);
    min-width : var(--vcbcard-con-min-width);
    min-height: var(--vcbcard-con-min-height);

    overflow: hidden;
}


/*-- fx & animation --*/
vcbcard.hot { 
    box-shadow: 0 0 0 var(--vcbcard-fx-edge-size) var(--vcbcard-hot-color);
}
vcbcard.fxedgefadeout { 
    transition: box-shadow 2s ease-in-out;
}

    @keyframes hotZoomOut {
        0%   { transform: scale(1); }
        100% { transform: scale(0); }
    }
    .hotzoomout {
        position: relative;
        animation: hotZoomOut 0.5s;
        animation-timing-function: cubic-bezier(.59,-0.21,.4,.89);
    }
    .slideOutH {
        width: 0%;
        min-width: 0%;
        transition: .2s all ease-out;
    }
    @keyframes hotZoomIn {
        0%   { transform: scale(0); }
        75%  { transform: scale(0); }
        100% { transform: scale(1); }
    }
    .hotzoomin {
        animation: hotZoomIn 1s;
        position: relative;
        animation-timing-function: cubic-bezier(.11,1.1,.72,1.37);
    }


vcbcard.multiSel { 
    box-shadow: 0 0 0 var(--vcbcard-fx-edge-size) var(--vcbcard-mtsel-color);
}
vcbcard.multiSel::after {}
vcbcard.multiSel.ghost {
    /*background-image: url(./assets/trash.svg);*/
}


vcbcard itm, editor {
    /* --itm-date-bg-color: #ccc; */
    /* --itm-date-color: black; */
    --itm-date-invalid-color: lightgray;
    
    /* --itm-type-bg-color: transparent; */
    /* --itm-type-color: black; */
    
    --itm-vnum-bg-color: white;
    /* --itm-vnum-color: black; */
    --itm-vnum-font-size: 1.5rem;
    
    /* --itm-vnum2-bg-color: transparent; */
    /* --itm-vnum2-color: black; */
    --itm-vnum2-font-size: 1.25rem;
    
    --itm-note-bg-color: #00f8;
    --itm-note-color: white;
    --itm-note-font-size: .75rem;
    --itm-note-font-weight: normal;
    
    /* --itm-serv-bg-color: transparent; */
    --itm-serv-color: red;

    /* --itm-plant-bg-color: transparent; */
    --itm-plant-color: blue;

    /* --itm-cfu-bg-color: transparent; */
    --itm-cfu-color: green;

    --itm-span-margin: .125rem;

}

vcbcard .date { background: var(--itm-date-bg-color); }
vcbcard .date:invalid { color: var(--itm-date-invalid-color); }
/*~~*/
vcbcard itm.date {
    place-content: flex-start;
    /* added the followings to wrap day count to new line*/
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
vcbcard itm.date::after { background-color: grey;
    color: white;
    content: attr(days);
    font-weight: strong;
    font-size: 1.2em;
    border-radius: .25em;
    padding: 0 .25em;
    /* mod the followings for wrapped day count*/
    margin: 0; /*0 .25em;*/
    /*align-self: center;*/
}
itm.date.hl1:after { background-color: yellow; color: red; }
itm.date.hl2::after { background-color: red; color: yellow; }

/*==*/

vcbcard .type { place-content: flex-end; text-align: end;}

vcbcard .vnum { background: var(--itm-vnum-bg-color); 
    font-size: var(--itm-vnum-font-size);
    /*white-space: normal; overflow-wrap: anywhere;*//* removed to not wrap */
    white-space: nowrap; /* avoid wrap after logo */
    flex-wrap: nowrap;
}
/** mod for VCB1
vcbcard itm.vnum::before {
    width: 1em; height: 1em;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: .05rem;
    opacity: 90%;
}
vcbcard.dept0 itm.vnum::before { background-image: url('../assets/logo/ambulance.svg'); }
vcbcard.dept1 itm.vnum::before { background-image: url('../assets/logo/police.svg'); }
vcbcard.dept2 itm.vnum::before { background-image: url('../assets/logo/postal.svg'); background-size: 125%; background-position: center top;}
vcbcard.dept3 itm.vnum::before { background-image: url('../assets/logo/wsd.svg'); }
== mod for VCB1*/
vcbcard .vnum2 { font-size: var(--itm-vnum2-font-size); }

vcbcard .note { background: var(--itm-note-bg-color);
    color       : var(--itm-note-color);
    font-size   : var(--itm-note-font-size);
    font-weight : var(--itm-note-font-weight);
    place-content: center;
}

vcbcard .serv { color: var(--itm-serv-color); 
                white-space: normal; overflow-wrap: anywhere; }

vcbcard .plant { color: var(--itm-plant-color);
                white-space: normal; overflow-wrap: anywhere; }

vcbcard .cfu { color: var(--itm-cfu-color);
                white-space: normal; overflow-wrap: anywhere;
                max-width: 100%; text-align: end;
            }

vcbcard span { margin: 0 var(--itm-span-margin); }


.dept0 con { background: #eee; } /** mod for VCB1*/
.dept1 con { background: rgb(200 200 255); }
.dept2 con { background: rgb(180 220 180); }/*#009E8F*/
.dept3 con { background: rgb(191 255 255); }



.viewer { 
    min-width: 20rem; min-height: 22rem;
    font-size: large;
    cursor: default;
}


.editor {
    min-width: 22rem; min-height: 22rem;
    cursor: default;

    /* flex-flow: column; */
    place-content: stretch;
}
.editor blk { max-width: 50%; }
.editor blk.mid { max-width: 100%; }

.editor input { -webkit-appearance: none; -moz-appearance: none; 
background:transparent; border: none; border-radius: .25rem;
font-weight: bold; }
.editor input[type='date']::-webkit-calendar-picker-indicator {
margin: 0;
}
.editor input[type='text'] { width:100%; display:inline; }
.editor input::placeholder { color: #0004; }



/*.editor .cf.l { min-width: 50%; min-height: 2.5rem; }*/
.editor .date { font-size: 1rem; padding: .5rem; min-height: 2.5rem; }
.editor .tagify.type { min-width: 50%; }
.editor .vnum { background: white; text-align: center; line-height: 3rem; }
.editor .vnum2 { text-align: center; line-height: 3rem; }
.editor .note { width: 75%; align-self: center;
        align-items: center; }
.editor .tagify.serv { width: 100%; }
.editor .tagify.plant { width: 100%; }
.editor .cfu  { text-align: right; font-size: 1rem; padding: .5rem; min-height: 2.5rem; }


editor {
    display: flex;
    flex-flow: column;
    place-content: stretch;
    align-items: center;
}

editmenu {
    display: flex;
    place-content: space-around;
    align-items: center;
}
editmenu.top {}
editmenu.btm { 
    margin-top: 2rem;
    align-self: stretch;
}

editmenu .btn { 
    color: white; 
    font-size: 1.5rem;
    border: none; border-radius: .5rem;
    padding: .5rem; margin: .5rem;
    cursor: pointer;
}
editmenu .btn:disabled { 
    background: grey !important; 
    color: lightgrey; 
    cursor: not-allowed;
}

editmenu #btn-cancel { background: green; min-width: 8rem; }
editmenu #btn-save { background: red; min-width: 8rem; }

editmenu #btn-trash { background: purple; 
    width: 4rem; height: 4rem;
    border: none; border-radius: 50%; padding: 1rem;

    position: absolute;
    right: -3rem;
}
editmenu #btn-trash img { filter: invert(100%); }

editmenu #info { 
    position: absolute; 
    left: 0;
}
editmenu #info ul { background: #FF8; width: 16rem;
    padding: 1rem 1.75rem; border-radius: .25rem;
    position: absolute; bottom: 1.5rem;
    font-size: 1rem;
    z-index: -1; }
editmenu #info li { text-align: left; font-weight: normal; }
editmenu #btn-info.btn-o { background: yellow; border: none;}

editmenu dropdown[name='dept'] {
    position: relative;
    font-size: 1.5rem;
    padding: .5rem;
    border-radius: .5rem;

    display: flex;
    flex-flow: column;
}
editmenu dropdown droplabel { padding: .125rem 1rem; display:block;}
editmenu dropdown#dept droplabel::before { 
    content: '?';
    color: white;
    line-height: 2em;
    font-weight: 900;
    background: #ddd;
    border-radius: 50%;
}
editmenu dropdown#dept droplabel::after { 
    content: 'DEPT...';
    font-weight: bold;
    color: #ccc;
}

editmenu dropdown droplist {
    position: absolute;
    top: 4rem;
    text-align: left;
    z-index: 10;
}


.strike span, span.strike {
	text-decoration: line-through;
}

.tagify { --tag-bg: #ddd; }
.tagify.note { justify-content: center;
  --tag-bg                  : #0002;
  --tag-hover               : #FFF2;
  --tag-text-color          : #FFF;
  --tags-border-color       : silver;
  --tag-text-color--edit    : var(--tag-text-color);
/*--tag-remove-bg           : var(--tag-hover);*/
  --tag-remove-btn-color    : var(--tag-text-color);
/*--tag-pad                 : .6em 1em;
  --tag-inset-shadow-size   : 1.3em;
  --tag-remove-btn-bg--hover: red;*/
}
.tagify.type { justify-content: flex-end; }
.tagify.serv { --tag-text-color: var(--itm-serv-color); }
.tagify.plant { --tag-text-color: var(--itm-plant-color); }


.tagify__input {
	min-width: 0;
	flex-grow: 0;
}
.tagify__input:empty { 
	min-width: 0; min-height: 2.5rem; padding: .3rem 1px;
}
.tagify__input:empty::before {
	line-height: 2.25rem;
}

.type .tagify__input:empty::before {
	text-align:right;
	position:absolute; right:0;
}


.tags-look .tagify__dropdown__item {
  display: inline-block;
  border-radius: .25rem;
  padding: .3rem .5rem;
  border: 1px solid #CCC;
  background: #F3F3F3;
  margin: .2rem;
  font-size: .85rem;
  color: black;
  transition: 0s;
}
.tags-look .tagify__dropdown__item.serv { color: red; }
.tags-look .tagify__dropdown__item.plant { color: red; }
.tags-look .tagify__dropdown__item--active {
  color: black;
}
.tags-look .tagify__dropdown__item:hover {
  background: lightyellow;
  border-color: gold;
}