#overview-page {
    font-family: Lato, Open Sans, Helvetica, Arial, sans-serif;
}

    /*Filter area*/
    #overview-page .filter-area {
        border: 1px solid #ddd;
        padding: 1em 1%;
        background-color: #f5f5f5;
        width: 98%;
        float: left;
        margin-bottom: 2em;
        font-weight: bold;
        clear: both;
        border-radius: 4px;
    }

        #overview-page .filter-area .filter {
            float: left;
            width: 23%;
            margin: 0 1%;
            position: relative;
        }

            #overview-page .filter-area .filter > input,
            #overview-page .filter-area .filter > button {
                width: 96%;
                padding: 0.5em 2%;
            }

            #overview-page .filter-area .filter > input,
            #overview-page .filter-area .filter > button,
            #overview-page .filter-area .filter md-datepicker {
                margin-top: 0.5em;
            }

            #overview-page .filter-area .filter.filter-username .fa,
            #overview-page .filter-area .filter.filter-textsearch .fa,
            #overview-page .filter-area .filter.filter-companyname .fa {
                position: absolute;
                right: 0.4em;
                bottom: 0.4em;
                font-size: 1.5em;
            }

            #overview-page .filter-area .filter.filter-companyname {
                float: right;
            }

            #overview-page .filter-area .filter.filter-autocomplete-options {
                position: absolute;
                background: white;
                width: 99.5%;
                box-shadow: 2px 2px 5px 0px #7f7d7d;
                border: 1px solid lightgrey;
                margin: 0;
                z-index: 20;
            }

                #overview-page .filter-area .filter.filter-autocomplete-options .autocomplete-options {
                    position: absolute;
                    background: white;
                    width: 99.5%;
                    box-shadow: 2px 2px 5px 0px #7f7d7d;
                    border: 1px solid lightgrey;
                    margin: 0;
                    z-index: 20;
                }

            #overview-page .filter-area .filter.filter-resetfilters {
                float: right;
                /*uncomment if reactivating customer/company filter in overview page*/
                /* clear: both; */
                margin-top: 1.5em;
            }

                #overview-page .filter-area .filter.filter-resetfilters .filter-resetbutton,
                #overview-page .filter-area .filter.filter-resetfilters .filter-searchbutton {
                    width: 25%;
                    padding: .5em 0;
                    float: right;
                    margin-left: 0.5em;
                    font-size: 1.1em;
                }

            /*md-datepicker*/
            #overview-page .filter-area .filter md-datepicker {
                display: block;
                width: 100%;
                max-width: 100% !important; /*mddatepicker sets this on the element*/
                overflow: visible;
            }

                #overview-page .filter-area .filter md-datepicker .md-button.md-icon-button {
                    margin: 0;
                    max-height: 33px;
                    min-height: 0;
                    min-width: 0;
                    line-height: 24px;
                    padding: 0;
                    width: 20%;
                }

                #overview-page .filter-area .filter md-datepicker .md-datepicker-input-container {
                    width: auto;
                    width: 80%;
                    background: white;
                    margin: 0;
                    position: relative;
                }

                    #overview-page .filter-area .filter md-datepicker .md-datepicker-input-container .md-datepicker-input {
                        padding: 6px 0 5px;
                        border-radius: 3px;
                        color: #555;
                        padding: 5px 2%;
                        font-weight: bold;
                        font-family: Open Sans, Helvetica, Arial, sans-serif;
                        border: 1px solid #aaa;
                        outline: 0;
                        box-shadow: 0 0 3px #aaa, 0 10px 15px #f7f7f7 inset;
                        font-size: 13.3333px;
                        width: 100%;
                        padding: 0.5em 2%;
                    }

                #overview-page .filter-area .filter md-datepicker .md-datepicker-triangle-button.md-button.md-icon-button {
                    height: 36px;
                    width: 36px;
                    position: absolute;
                    padding: 0;
                    right: 1em;
                }

                #overview-page .filter-area .filter md-datepicker .md-datepicker-triangle-button .md-datepicker-expand-triangle {
                    transform: scale(1.5) translate(-0.3em, -0.1em);
                }



    /*tbl layout*/
    #overview-page .table-area-header .header,
    #overview-page .table-area-row .item {
        margin-right: 1%;
    }

        #overview-page .table-area-header .header.column-id,
        #overview-page .table-area-row .item.column-id {
            width: 8%;
        }

        #overview-page .table-area-header .header.column-companyname,
        #overview-page .table-area-row .item.column-companyname {
            width: 29%;
        }

        #overview-page .table-area-header .header.column-updateddate,
        #overview-page .table-area-row .item.column-updateddate {
            width: 15%;
        }

        #overview-page .table-area-header .header.column-owner,
        #overview-page .table-area-row .item.column-owner {
            width: 20%;
        }

        #overview-page .table-area-header .header.column-status,
        #overview-page .table-area-row .item.column-status {
            width: 15%;
        }

        #overview-page .table-area-header .header.column-buttons,
        #overview-page .table-area-row .item.column-buttons {
            width: 7%;
        }

    #overview-page .table-area-row.overview-quote {
        cursor: pointer;
    }

    #overview-page .table-area-row .item > div {
        margin-top: 0.66em;
    }

        #overview-page .table-area-row .item > div.edit-dropdown-area {
            margin-top: 0;
        }

    #overview-page .table-area-row .item.column-buttons {
        display: flex;
        -o-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

        #overview-page .table-area-row .item.column-buttons .column-button {
            min-width: 2em;
            margin-top: 0.4em;
        }

        #overview-page .table-area-row .item.column-buttons .fa {
            font-size: 2em;
            color: black;
        }

    /*open close status filter*/
    #overview-page .filter-area .filter-status .filter-status-toggle-dropdown {
        color: #777;
        font-weight: bold;
        border: 1px solid #aaa;
        outline: 0;
        box-shadow: 0 0 3px #aaa, 0 10px 15px #f7f7f7 inset;
        font-size: 13.3333px;
        background: white;
        overflow: hidden;
        height: 33.3px;
        width: 100%;
    }


    #overview-page .filter-area .status-filter-container {
        position: absolute;
        z-index: 9;
        background: #f5f5f5;
        margin: 0;
        width: 91.5%;
        height: 0;
        border: 1px solid #aaa;
        border-top: none;
        border-radius: 0 0px 4px 4px;
        top: 55px;
    }

        #overview-page .filter-area .status-filter-container.close {
            animation: closeStatus, openStatusRemovePadding;
            animation-duration: .2s, .2s;
            animation-delay: 0s, .2s;
            animation-fill-mode: backwards;
        }

        #overview-page .filter-area .status-filter-container.open {
            animation: openStatus, openStatusAddPadding;
            animation-duration: .2s, .2s;
            animation-fill-mode: forwards;
        }

    /*username & comapnyname autocompletes dropdowns*/
    #overview-page .filter-area .filter-status-dropdown {
        background: white;
        margin-top: 5px;
        padding: 6px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #ddd;
        display: none;
        opacity: 0;
    }

        #overview-page .filter-area .filter-status-dropdown.close {
            animation: hideStatus;
            animation-duration: .2s;
            display: none;
        }

        #overview-page .filter-area .filter-status-dropdown.open {
            animation: showStatus;
            animation-duration: .2s;
            animation-delay: .2s;
            animation-fill-mode: forwards;
            display: block;
        }


        #overview-page .filter-area .filter-status-dropdown:hover {
            background-color: #ececec;
        }

        #overview-page .filter-area .filter-status-dropdown.selected {
            transition: background-color 1s ease-in;
            background-color: #afca05;
        }






@keyframes openStatusAddPadding {
    from {
        padding: -1px 10px 5px 10px;
    }

    to {
        padding: 1px 10px 5px 10px;
    }
}

@keyframes openStatusRemovePadding {
    from {
        padding: 1px 10px 5px 10px;
    }

    to {
        padding: -1px 10px 5px 10px;
    }
}

@keyframes openStatus {
    from {
        height: 0;
    }

    to {
        height: 250px;
    }
}

@keyframes closeStatus {
    from {
        height: 250px;
    }

    to {
        height: 0;
    }
}

@keyframes showStatus {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideStatus {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}