/*
    This file contains CSS for components in Flintab.Common.Blazor (fcb)
*/

.fcb-size-A4 {
    width: 21cm;
    min-height: 29.7cm;
}

.fcb-size-A4R {
    width: 29.7cm;
    min-height: 21cm;
}

.fcb-size-Report {
    min-width: 21cm;
    min-height: 21cm;
}

/* customization of fontawsome icons */
svg.svg-inline--fa {
    color: rgba(0,0,0,.5) !important
}

/******************************************
    Component FlDropDown, FlSelect
*/
.flselect,
.fldropdown {
    clear: both;
    content: "";
    position: relative;
}
    .flselect button,
    .fldropdown button {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flselect ol,
    .fldropdown ol {
        /*position: sticky;*/
        position: absolute;
        float: left;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        min-width: 100%;
        font-size: 1rem;
        color: #212529;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-wrap: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
    }

    .flselect li,
    .fldropdown li {
        margin: .5rem;
        border-bottom: 1px solid rgba(0,0,0,.15);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* mouse over row*/
    .flselect li:hover,
    .fldropdown li:hover {
        background-color: #C3C3C3;
    }

    .flselect li.active,
    .fldropdown li.active {
        background-color: rgba(108,161,189,.5);
    }

/******************************************
Component FlDataSearch
*/
.fldatasearch {
position: relative;
display: inline-block;
}

    .fldatasearch input {
        min-width: 30rem;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem
    }

    .fldatasearch table {
        position: sticky;
        /* position:absolute;*/
        float: left;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        margin: 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        border-top: none;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* the first row is the header*/
    .fldatasearch tr:first-child {
        background-color: #E3E3E3;
        font-size: .875rem;
    }

    /* let last column use all remaining space*/
    .fldatasearch td:last-child {
        width: 100%;
    }

    /* mouse over row except the first*/
    .fldatasearch tr:not(:first-child):hover {
        background-color: #C3C3C3;
    }

    .fldatasearch tr.active {
        background-color: rgba(108,161,189,.5);
    }

.fl-backdrop {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
}


/******************************************
    Component FlInputFloat
*/
/*
* Make the field a flex-container, reverse the order so label is on top.
*/
.flinputfloat {
    clear: both;
    content: "";
    display: flex;
    flex-flow: column-reverse;
}
    /**
    * Add a transition to the label and input.
    */
    .flinputfloat label, .flinputfloat input, .flinputfloat textarea {
        transition: all 0.2s;
    }

    .flinputfloat label {
        font-size: 0.8em;
        padding-left: 0.2em;
        margin-bottom: 0;
    }

    .flinputfloat input {
        font-size: 1em;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    .flinputfloat textarea {
        font-size: 1em;
        border: 1px solid #ccc;
    }

    /**
    * Change input border on focus.
    */
    .flinputfloat input:focus, .flinputfloat textarea:focus {
        outline: 0;
        border-bottom: 1px solid #666;
    }

    .flinputfloat textarea:focus {
        outline: 0;
        border: 1px solid #666;
    }

    /**
    * When the label follows an input or textarea matching :placeholder-shown...
    * 1. Make sure the label is only on one row, at max 80% of the
    *     field—to make sure it scales properly and doesn't wrap.
    * 2. Fix the cursor.
    * 3. Translate down and scale the label up to cover the placeholder.
    */
    .flinputfloat input:placeholder-shown + label,
    .flinputfloat textarea:placeholder-shown + label {
        /* [1] */
        max-width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* |2] */
        cursor: text;
        /* [3 */
        transform-origin: left bottom;
        transform: translate(0, 1.6em) scale(1.25);
    }

    /**
    * By default, the placeholder should be transparent. Also, it should 
    * inherit the transition.
    */
    .flinputfloat ::-webkit-input-placeholder {
        transition: inherit;
        opacity: 0;
    }

    /**
    * Show the placeholder when the input is focused.
    */
    .flinputfloat input:focus::-webkit-input-placeholder, 
    .flinputfloat textarea:focus::-webkit-input-placeholder {
        opacity: 1;
    }

    /**
    * 1. When the element is focused, remove the label transform.
    *     Also, do this when the placeholder is _not_ shown, i.e. when there's something in the input at all.
    *     and also, do this when the browser has autofilled the input,
    * 2. ...and set the cursor to pointer.
    */
    .flinputfloat input:not(:placeholder-shown) + label, .flinputfloat input:focus + label, .flinputfloat input:-webkit-autofill + label,
    .flinputfloat textarea:not(:placeholder-shown) + label, .flinputfloat textarea:focus + label {
        transform: translate(0, 0) scale(1); /* [1] */
        cursor: pointer; /* [2] */
    }