/**********************************************************************
 * Variables
 **********************************************************************/
:root {

    --default-background-color-light: #d8e5f3;
    --default--border-color: #456591;

    --vw-wrapper--background-color: #ffffff;
    --vw-wrapper--border-color: #dddddd;
    --vw-wrapper-row-hover--background-color: #f5f5f5;

    --vw-user-avatar--font-color: #466692;

    --vw-norecords--font-color: #555555;

    /*--vw-content--padding: 0px;*/
    --vw-border-color: #456591;
    --vw-font-color: #456591;

}




/**********************************************************************
 * View Structure
 **********************************************************************/

/* View Body */
#vw-body{
    /*max-width: 840px;*/
    min-width: 400px;
    color: #35484c;
    /*border: solid 1px #cccccc;*/
}

/* View Header */
#vw-header{
    /*padding: 10px 0 20px 0;*/
    /*padding: 10px 0 20px 0;*/
    padding: 10px;
    /*border: solid 1px #000;*/
}

/* View Footer */
.vw-footer{
    /*height: 40px;*/
    padding: 20px;
    display: block;
    /*border-top: none;*/
    /*border: solid 1px;*/
}




/**********************************************************************
 * View Wrapper
 **********************************************************************/

/* View Wrapper */
.vw-wrapper{
    margin-bottom: 20px;
    background-color: var(--vw-wrapper--background-color);
    border: solid 1px var(--vw-wrapper--border-color);
    border-radius: 10px;

    /*margin: 20px 0;*/
    /*padding: 20px;*/
    /*border: solid 1px #bbb;*/
    /*border-radius: 5px;*/
    /*text-align: left;*/

}

.vw-wrapper-pad{padding: 20px;}

.vw-wrapper-top{}
.vw-wrapper-top-pad{padding: 20px;}

.vw-wrapper-middle{}
.vw-wrapper-middle-pad{padding: 20px;}

.vw-wrapper-bottom{}
.vw-wrapper-bottom-pad{padding: 20px;}

/* Wrapper Row */
.vw-wrapper-row{
    display: flex;
    align-items: center;
    min-height: 50px;
    border-top: solid 1px var(--vw-wrapper--border-color);
}

.vw-wrapper-row-hover:hover{
    background-color: var(--vw-wrapper-row-hover--background-color);
    cursor: pointer;
}

.vw-wrapper-row-left{flex: 20%; padding: 0 20px; font-size: .8rem;}
.vw-wrapper-row-center{flex: calc(80% - 100px); padding: 0 20px; font-size: .9rem}
.vw-wrapper-row-right{
    flex: 80px;
    align-items: center;
    height: 20px;
    width: 20px;
    padding: 0 10px;
    /*float: right;*/

    /*background: url('/images/icons/expand-01-blu_30x30.png') no-repeat;*/
    /*background-size: 20px;*/
    /*background-position-x: 40px;*/

    /*border: solid 1px;*/
}

.vw-wrapper-row-right-expand{
    background: url('/images/icons/expand-01-blu_30x30.png') no-repeat;
    background-size: 20px;
    background-position-x: 40px;
}

.vw-wrapper-row-right-delete{
    flex: 20px;
    align-items: center;
    height: 20px;
    width: 20px;
    /*padding: 0 10px;*/

    background: url('/images/icons/trash-01-blu_100x100.png') no-repeat;
    background-size: 20px;
    /*background-position-x: 40px;*/

    /*border: solid 1px;*/
}



/* Wrapper Grid */
.vw-wrapper-grid{
    display: block;
    /*padding: var(--vw-wrapper-content--padding);*/

    /*line-height: 1.5em;*/
    /*font-size: 1.3em;*/
    /*border: solid 1px;*/
}

.vw-wrapper-grid-left{
    flex: 50%;
    padding-right: 10px;
    /*border: solid 1px;*/
}

.vw-wrapper-grid-right{
    flex: 50%;
    /*border: solid 1px;*/
}

/* Cells */
.vw-wrapper-div{

}

.vw-cell{
    /*margin-bottom: 3px;*/
    padding: 0px;
    text-align: left;
    line-height: 1.5em;
    /*font-size: 1.2em;*/
    /*color: var(--vw-font-color);*/

    /*border: solid 2px;*/
}

.vw-norecords{
    width: calc(100% - 22px);
    /*height: 50px;*/
    /*margin: 10px auto;*/
    /*padding: 10px;*/
    text-align: left;
    /*border: solid 1px var(--vw-border-color);*/
    /*border-radius: 5px;*/
    /*background-color: #d8e5f3;*/
    /*font-size: 1.1em;*/
    color: var(--vw-norecords--font-color);
}



/**********************************************************************
 * View Text
 **********************************************************************/

.vw-wrapper-text{
    line-height: 1.5em;
    font-size: 1.1em;
}


.vw-wrapper-list{
    padding: 2px 0;
}

.vw-wrapper-name{
    margin: 0 3px;
    font-size: .9rem;
}

.vw-wrapper-heading{
    font-size: 1.7em;
}

.vw-wrapper-subheading{
    margin-top: 10px;
}




/**********************************************************************
 * Formatting
 **********************************************************************/
.vw-expand{
    position: relative;
    top: 3px;
    width: 20px;
    /*transition: transform 0.2s ease-in-out;*/
}

#vw-expand-household{transition: transform 0.2s ease-in-out;}
#vw-expand-client{transition: transform 0.2s ease-in-out;}




/**********************************************************************
 * View Elements
 **********************************************************************/

/*  Header */
#vw-header-title{
    font-size: 2em;
    line-height: 2em;
    text-align: center;
}

#vw-header-subtitle{
    width: 70%;
    font-size: 1.2em;
    text-align: center;
}


.vw-edit{
    display: inline-block;
    position: relative;
    top: 3px;
    margin-left: 10px;
    width: 25px;
    height: 25px;
    background: url('/images/icons/edit-01_100x100.png') no-repeat;
    background-size: 25px;
    cursor: pointer;
    /*border: solid 1px;*/
}

.vw-view{
    display: inline-block;
    position: relative;
    top: 7px;
    margin-left: 10px;
    width: 33px;
    height: 33px;
    background: url('/images/icons/search_32x32_blu.png') no-repeat;
    background-size: 33px;
    cursor: pointer;
    /*border: solid 1px;*/
}





/**********************************************************************
 * User
 **********************************************************************/

#vw-user{}


#vw-user-avatar-home{
    width: 100px;
    height: 100px;
    margin-top: 20px;

    background-color: var(--user-avatar-panel--background-color);
    background-size: 100px !important;

    border: solid 2px var(--vw-border-color);
    border-radius: 100%;

    text-align: center;
    font-size: 2.5em;

}

#vw-user-avatar-home:before{
    position: relative;
    top: 29px;
    left:1px;
    text-align: center;
    color: var(--vw-user-avatar--font-color)
}



#vw-user-avatar-profile{
    width: 60px;
    height: 60px;

    background-color: var(--user-avatar-panel--background-color);
    background-size: 60px !important;

    border: solid 1px var(--vw-border-color);
    border-radius: 100%;

    text-align: center;
    font-size: 1.4em;

}

#vw-user-avatar-profile:before{
    position: relative;
    top: 18px;
    left: 1px;
    text-align: center;
    color: var(--vw-user-avatar--font-color);
}












/**********************************************************************
 * Family/Household
 **********************************************************************/
#vw-household-bottom{
    display: none;
    position: relative;
    /*top: 1px;   !* this is to hide the top border from apearing with panel is collapsed. *!*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.3s ease-in-out;

    /*border: none;*/
}








/**********************************************************************
 * Clients/Organizations
 **********************************************************************/

#vw-client{}

#vw-client-top:hover{
    cursor: pointer;
}

#vw-client-bottom{
    display: none;
    /*display: flex;*/
    /*flex-direction: column;*/
    max-height: 0;
    /*padding-top: 20px;*/

    overflow: hidden;
    transition: max-height 1.3s ease-in-out;

    justify-content: center;
    /*text-align: center;*/

    /*border: none;*/
    /*border: solid 1px;*/
}

.vw-client-wrapper{
    /*display: flex;*/  /* only for media query below. */
    /* to account for 1px border on element. */
    /*width: calc(100% - 2px);*/
    width: calc(100% - 42px);
    /*width: calc(100% - 50px);*/
    /*width: 80%;*/
    /*margin: 10px auto;*/
    /*margin: 20px auto;*/
    margin-bottom: 20px;
    /*margin-top: 40px;*/
    padding: 5px 0;

    text-align: left;

    border: solid 1px var(--vw-border-color);
    border-radius: 5px;
}

.vw-client-wrapper:hover{
    background-color: var(--default-background-color-light);
    cursor: pointer;
}

.vw-client-wrapper-left{
    flex: 100%;
    display: flex;

    /*border: solid 1px;*/
}

.vw-client-avatar{
    flex: 125px;
    width: 50px;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;

    /*border: solid 1px;*/
}

.vw-client-name{
    flex: 100%;

    /*border: solid 1px;*/
}


.vw-client-wrapper-right{}

.vw-client-icons{
    position: relative;

    /*border: solid 1px blue;*/
}

.vw-client-icon{
    width: 40px;
    height: 40px;

    /*border: solid 1px red;*/
}

.vw-client-admin{
    background-image: url('/images/icons/admin-01-blu_100x100.png');
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: 8px 8px;
    border: solid 1px transparent;
}

.vw-client-admin:hover{
    background-color: var(--vw-wrapper--background-color);
    border: solid 1px var(--default--border-color);
    border-radius: 3px;
}

.vw-client-clipboard{
    background-image: url('/images/icons/clipboard-01-blu_100x100.png');
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: 6px 6px;
    border: solid 1px transparent;
}

.vw-client-clipboard:hover{
    background-color: var(--vw-wrapper--background-color);
    border: solid 1px var(--default--border-color);
    border-radius: 3px;
}

.vw-client-consumer{
    background-image: url('/images/icons/icon_conumers_blu_117x100.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: 6px 6px;
    padding: 0 42px 0 0;
    border: solid 1px transparent;
}

.vw-client-consumer:hover{
    background-color: var(--vw-wrapper--background-color);
    border: solid 1px var(--default--border-color);
    border-radius: 3px;
}



.vw-client-consumer_OLD{
    background-image: url('/images/icons/client-01-blk_100x100.png');
    background-size: 30px;
}

.vw-client-datapipe{
    background-image: url('/images/icons/upload-02-blu_100x100.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 6px 5px;
    border: solid 1px transparent;
}

.vw-client-datapipe:hover{
    background-color: var(--vw-wrapper--background-color);
    border: solid 1px var(--default--border-color);
    border-radius: 3px;
}


.vw-client-cell{
    display: flex;
    align-items: center;
    /*justify-content: left;*/

    width: 33%;
    height: 50px;

    /*vertical-align: middle;*/

    /*border: solid 1px red;*/
}

.vw-client-text{
    text-align: left;
    /*line-height: 1.2em;*/
    font-size: 1.2em;
    color: var(--vw-font-color);
}




/**********************************************************************
 * Media Size
 **********************************************************************/
@media (min-width: 600px){

    #vw-body{
        max-width: 100%;
    }

    .vw-wrapper-grid{
        display: flex;
    }


    #vw-user{
        /*display: flex;*/
        flex-direction: row;
    }

    #vw-purchase{
        /*display: flex;*/
        flex-direction: row;
    }

    .vw-client-wrapper{
        display: flex;
        width: calc(100% - 42px);    /* to account for 1px border on element. */
        /*margin: 10px auto;*/
        /*margin: 20px auto;*/
        /*margin-bottom: 20px;*/
    }

    .vw-client-wrapper-left{
        display: flex;
        width: 100%;
    }

}