/* font basics */

    .esdikay-font-tiny {
        font-size: 0.7em;
        line-height: 0.9em;
    }

    .esdikay-font-small {
        font-size: 0.8em;
        line-height: 1em;
    }

/* table DIV */
    .table-div {
        display: table; 
    }
    .table-div > div { 
        display: table-row; 
    }
    .table-div > div:hover { 
        background-color: azure;
    }
    .table-div > div > div { 
        display: table-cell;
        padding-left: 5px;
        padding-right: 5px;
    }
    .table-div > .th > div { 
        font-weight: bold;
    }

/* use to make textareas 100% of parent */
.boxsizingBorder, .textarea-fullwidth {
    width: 100%;
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* boxes and cards */
    .shadowbox {
        padding: 12px;
        border-radius: 5px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
        -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    }
    .card-1 {
        padding: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }
    .card-1:hover {
        padding: 12px;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    .card-2 {
        padding: 12px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    .card-3 {
        padding: 12px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    .card-4 {
        padding: 12px;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    .card-5 {
        padding: 12px;
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }

/* Vue */
    [v-cloak] > * { display:none; }
    [v-cloak]::before { content: "loading..."; }

/* make elements un-drag-selectable */
    .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Opera and Firefox */
    }

/* align items vertically in a row */
    .vertical-align {
        display: inline-block;
        vertical-align: middle;
      }

/* autofill hook 

    @animationstart="someFunction"
    in the function, check
    if(e.animationName == "onAutoFillStart")
*/
:-webkit-autofill {
    animation-name: onAutoFillStart;
}
:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}
@keyframes onAutoFillStart {
    from {
    }
    to {
    }
}
@keyframes onAutoFillCancel {
    from {
    }
    to {
    }
}

/* misc */
    a:hover { cursor:pointer; }
    img { max-width: 100%; }