/*
centeredthree.css
is a reusable core css file.
Do not modify this file. instead,
add styles in each purpose-driven
css files which would be located
below this file at the DOM structure
*/

body{
	height:100%;
    overflow:hidden !important;
    background-color: #f2f2f2;
}

/*
   ===
   CORE STRUCTURE
   ===
*/

/*tablet laptop desktop*/
.hmd_three_sections_container{
	max-width:1100px;
	width:100%;
	/*width:1100px;*/
    margin:40px auto 0;
    display:flex;
    gap: 10px;
    box-sizing:border-box;
}

/*mobile*/
@media (max-width:768px){
	.hmd_three_sections_container{
        width:100%;
        margin:40px 0 0;
        padding:0 10px;
    }
}


/*tablet laptop desktop*/
.hmd_left{
	flex:0 0 235px;
	transition:all .25s ease;
}

/*mobile*/
@media (max-width:768px){
    .hmd_left{
        position:fixed;
        top:65px;
        left:-250px;       /* hidden */
        width:235px;
        height:calc(100vh - 65px);
        background:#fff;
        z-index:1000;
        transition:left .25s ease;
        box-shadow:0 0 20px rgba(0,0,0,.15);
    }
}

/*tablet laptop desktop*/
.hmd_center{
	flex:0 0 495px;
}

/*Mobile*/
@media (max-width:768px){
    .hmd_center{
        flex:1 1 auto;
        width:100%;
        min-width:0;
    }
}

/*tablet laptop desktop*/
.hmd_right{
	flex:1 1 295px;
	min-width:180px;
}
/*Mobile*/
@media (max-width:768px){
	.hmd_right{
        display:none;
    }
}

/*dynamic independent height 
  for each left/right/center section*/

/*tablet laptop desktop*/
.hmd_independentoverflow{
	height: calc(100vh - 65px);
	overflow-y: auto;
}

/*tablet*/
@media (max-width:1050px){

    .hmd_left{
        flex-basis:60px;
    }

    .hmd_left .hmd_nav_text{
        display:none;
    }

}
/* - - - main sections end - - - */

/*
   ===
   COMPONENTS
   ===
*/


.hmd_nav_icon{
    display:inline-block;
    width:24px;
    text-align:center;
}

.hmd_nav_text{
    display:inline-block;
    white-space:nowrap;
}

.hmd_nav_item a{
    display:flex;
    align-items:center;

    min-height:66px;      /* Apple & Google touch target */
    padding:0 14px;

    border-radius:8px;

    color:inherit;

    text-decoration:none;

    transition:
        background-color .18s ease,
        color .18s ease;
    ;
}

.hmd_nav_item a:hover{
    background:#f3f5f7;
}

.hmd_nav_item .hmd_nav_text{
    color:#17375D;
}

.hmd_identity_card{

    padding:18px 16px;

    text-align:center;

}

.hmd_identity_image{

    width:84px;
    height:84px;

    margin:0 auto 12px;

    overflow:hidden;

}

.hmd_identity_image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

}

.hmd_identity_name{

    font-weight:600;

    line-height:1.3;

}

.hmd_account_type{

    margin-top:4px;

    color:#666;

    font-size:.9em;

}

.hmd_sidebar_section{
    margin-bottom:24px;
}

.hmd_sidebar_title{
    
    margin:0 0 8px;

    font-weight:700;

    color:#777;
}

.hmd_sidebar_item a{
    display:block;

    padding:7px 0;
    padding-left:6px;

    color:#333;

    text-decoration:none;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    border-radius:4px;
}

.hmd_sidebar_item a:hover{
    
    background:#f5f5f5;
}

.hmd_sidebar_more{
    display:inline-block;

    margin-top:4px;
    padding:4px 0;

    font-size:.88rem;
    font-weight:600;

    color:#337ab7;      /* Bootstrap 3 primary link */

    text-decoration:none;

    transition:
        color .18s ease,
        padding-left .18s ease;
}

.hmd_sidebar_more:hover{
    color:#23527c;
    text-decoration:none;
    padding-left:4px;
}

.hmd_subscription{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
}

.hmd_subscription_image{
    flex:0 0 30px;
    width:30px;
    height:30px;
    overflow:hidden;
}

.hmd_subscription_image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    border-radius:6px;
}

.hmd_subscription_name{
    flex:1;
    min-width:0;
}




.basic_hmd_panel{
	background-color: white;
	margin-bottom:20px;
}

.hmd_textcontainer{
	padding: 5px 5px 5px 5px;
}

.hmd_ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Mobile*/
@media (max-width:768px){

    .hmd_left.hmd_open{
        left:0;
    }

    .hmd_left .hmd_nav_text{
        display:inline-block;
    }

}

img.all_width {
	width: 100%;;
  /*max-width: 100%;*/
  height: auto;
  display: block; /* Removes unwanted bottom whitespace */
}

img.crop-top-square{
	aspect-ratio: 1 / 1;
	width: 100%/*225px*/; 
	object-fit: cover;
	object-position: center top;
}

/*Cards*/
.hmd_card{
    display:flex;
    gap:10px;
}

.hmd_card_image{
    flex:0 0 120px;
}

.hmd_card_image img{
    width:100%;
    display:block;
}

.hmd_card_text{
    flex:1;
    min-width:0;
}

.hmd_tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background-color: #4f46e5;
    border-radius: 999px;
    text-decoration: none;
}

.hmd_pocketeer_container{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}

/* Individual pocketeer (cpocket user) card */
.hmd_pocketeer{
    background:#fff;
    
    box-sizing:border-box;
    overflow:hidden;
    text-align:center;
}

/* Image wrapper */
.img_pocketeer{
    width:60%;
    margin:0 auto 6px; /* centers horizontally */
    aspect-ratio:1 / 1;
    overflow:hidden;

}

/* Actual image */
.img_pocketeer img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left top; /* keep top and left when cropping */
    display:block;
    border-radius:50%;
}

/* Person / company name */
.hmd_pocketeer_name{
    font-weight:600;
    font-size:0.9rem;
    padding:5px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:2px;
}

/* Member count */
.hmd_pocketeer_members{
    font-size:0.8rem;
    color:#666;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/*two lines card*/
.hmd_twolines_card{
	display:flex;
	/*padding: 5px 5px 5px 5px;*/
	gap:10px;
	overflow:hidden;
}

/* Left image */
.hmd_twolines_image{
    flex:0 0 40px;          /* change to 30-50px as desired */
    width:40px;
    height:40px;
    overflow:hidden;
}

.hmd_twolines_image img{
	width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.hmd_twolines_card_content{
    flex:1;
    min-width:0; /* required for ellipsis */
}

/*
Mobile font sizes
*/
@media (max-width:768px){

    body{
        font-size:16px;
    }

    .guideline-title{
        font-size:22px;
    }

}