:root{

    --dashboardAccentColor:var(--color1);/*#789F75*/
    --dashboardHeaderBackground:#fff;
    --dashboardBackground:#F5F6F8;

    /* sidebar */

    --dashboardSideHeaderBackground:none;
    --dashboardSideBackground:#fff;
    --dashboardSideItemColor:#3d5170;
    --dashboardSideItemColor_active:var(--dashboardAccentColor);
    --dashboardSideItemBackground_active:#fbfbfb;


    /*

    shadows from #A3A4A5 -> rgb(163,164,165)

    */
    --dashboardSideShadow:0 2px 150px rgba(163,164,165,.1),0 4px 8px rgba(163,164,165,.12),0 15px 22px rgba(163,164,165,.1),0 7px 35px rgba(163,164,165,.1);




    /* cards */
    --dashboardCardBackground:#fff;
    --dashboardCardShadow:0 7.5px 35px rgba(163,164,165,.1),0 15px 22.5px rgba(163,164,165,.1),0 4px 8.5px rgba(163,164,165,.12),0 2px 3px rgba(163,164,165,.1);




    --dashboardBackground:#EDEFF3;
    --dashboardCardShadow:0 1px 3px rgba(33,55,90,0.1),0 1px 1px rgba(33,55,90,0.1);


}

.dashboard .ticket {

    background: var(--dashboardAccentColor);

}
.dashboard #ticketLogoutHolder {

    /* hide "Not John Doe?", a logout button */
    display:none;

}

.dashboard.dashboardInContentMode{

    --dashboardBackground:transparent;    
    --dashboardSideBackground:transparent;
    --dashboardHeaderBackground:transparent;
    --dashboardSideHeaderBackground:transparent;
    
    --dashboardSideShadow:none;
    
    min-height: inherit;
        


}

.dashboardInContentMode .dashboardSide{z-index:2}
.dashboardInContentMode .dashboardHeader,
.dashboardInContentMode .dashboardSideLogo{box-shadow:none;height:0;border:none;display:none;}

.dashboardInContentMode .dashboardHeaderControls{;position:absolute;top:0;left:-70px;width:70px;height:36px;line-height:36px;padding:0;z-index:10}

.dashboardInContentMode .dashboardHeaderControls a{line-height:36px!important;height:36px!important;padding:0!important;border:none!important;border-radius:3px;float:none!important;text-align:center;}

.dashboardInContentMode .dashboardSideMenuHeader{}
.dashboardInContentMode .dashboardHeaderAvatar {
    
    float: none;
    border-radius:4px;
    line-height: 30px;
    width: 100%;
    height: 30px;
    margin: 0;
}

.dashboardInContentMode .dashboardHeaderControls a .d-none{display:none!important;float:none!important}


/*
display: block;
float: left;
height: 70px;
line-height: 70px;
text-decoration: none;
color: #3d5170;
font-size: 14px;
border-left: 1px solid #e1e5eb;
padding: 0 25px;
*/


/*
.dashboardInContentMode .dashboardSideMenu{height:inherit;overflow:auto;}

.dashboardInContentMode .dashboardBody{height:inherit;overflow:auto}
*/
.dashboardInContentMode .dashboardBody::after { display: none;}

.dashboardInContentMode .dashboardContainer{display:flex;flex-direction:row;height:inherit;width:100%;}



.dashboard{
    width:100%;background:var(--dashboardBackground);
}


.keditFullHeight .dashboard{

    min-height: 100vh;

}


.dashboardSide{

    /*position:fixed;top:0;left:0;bottom:0;*/
    position:relative;
    z-index:103;flex-shrink:0;
    min-width:100px;
    background:var(--dashboardSideBackground);
    box-shadow:var(--dashboardSideShadow);

}
.dashboardHeader{/*position:absolute;top:0;left:0;right:0;width:100%;*/
    
    height:70px;
    background:var(--dashboardHeaderBackground);
    box-shadow:0 0 30px rgba(0,0,0,0.08),0 0 10px rgba(0,0,0,0.05);
    position:relative;z-index:102
}

.dashboardSideLogo{height:71px;border-bottom:1px solid #eee;position:relative;z-index:10;background:var(--dashboardSideHeaderBackground);}
.dashboardSideLogo a{display:block;height:70px;width:100%;text-align:center;line-height:70px;}
.dashboardSideLogo img{ max-height:40px;}

.dashboardSideMenu{

    min-width: 100%;
    max-width: 33.33%;
    position:relative;

}

.keditFullHeight .dashboardSideMenu {

    overflow: hidden;
    height: calc(100% - 70px);
  
}

.dashboardSideMenu a,
#website #contentArea .dashboardSideMenu a,
#website #contentArea .dashboardBodySide a{

    display:block;padding:0 15px;text-align:left;line-height:1.2;font-size:15px;text-decoration:none;

    font-weight: 500;
    color: var(--dashboardSideItemColor);
    padding: 15px 25px;


}
#website #contentArea .dashboardBodySide a{padding:10px 15px;}

.dashboardSideMenu a.active,
.dashboardSideMenu a:hover{

    box-shadow: inset 5px 0 0 var(--dashboardAccentColor);




    background: var(--dashboardSideItemBackground_active);
    color: var(--dashboardSideItemColor_active)!important;

}

.dashboardBodySide a.active,
.dashboardBodySide a:hover{

    box-shadow: inset .1875rem 0 0 rgba(0,0,0,0.2);
    box-shadow: inset 5px 0 0 var(--dashboardAccentColor);
    background-color: #fff;
    color: #007bff;

}

.dashboardSideMenuHeader,
.dashboardBodySubtitle
{
    text-transform: uppercase;
    font-weight:700;
    font-size:13px;
    letter-spacing:2px;
    padding:10px 15px;
    min-width:20vw;
    color: #9ea8b9;
    border-bottom: 1px solid #e1e5eb;
    white-space: nowrap;
}
.dashboardBodySide .dashboardSideMenuHeader{
    
    padding-top:10px;

}

.dashboardBodySide{

min-width: 20vw;
max-width: 33.33%;


overflow:hidden;

}

.keditFullHeight .dashboardBodySide{

    height: calc(100vh - 70px);

}

.dashboardBodySide:empty{display:none;}

.dashboardBodySideList{}
.keditFullHeight .dashboardBodySideList{
    height:calc(100vh - 70px - 41.5px);overflow:auto;overflow-x:hidden;
}

.dashboardBodySideList a{max-width: 30vw;white-space:nowrap;  text-overflow: ellipsis; overflow:hidden;}

.dashboardBodySubtitle{border:0;padding-left:0;}

.dashboard .card:not(.whiteShadowContainer){
    background:  var(--dashboardCardBackground);
    border: none;
    border-radius: 5px;
    box-shadow: var(--dashboardCardShadow);
}

.dashboardContainer{
    
    display:flex;
    flex-direction:row;
    width:100%;

}


.keditFullHeight .dashboardContainer{

    height: 100vh;
    width: 100vw;

}


.dashboardMain{flex-grow: 1;}

.dashboardBody{position:relative;padding: 30px;}


.keditFullHeight .dashboardBody {

    padding-bottom:0;
    height: calc(100vh - 70px);
    overflow: auto;
    overflow-x: hidden;

}



.keditFullHeight .dashboardBody::after {

    content: "";
    height: 30px;
    display: block;

}



/* MOBILE */

.dashboardHeader .dashboardSideMenuHeader{display:block;}
.dashboardHeader a{display:block;padding:10px;}

#dashboardSideMenuMobile{
    background-color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 .46875rem 2.1875rem rgba(90,97,105,.1),0 .9375rem 1.40625rem rgba(90,97,105,.1),0 .25rem .53125rem rgba(90,97,105,.12),0 .125rem .1875rem rgba(90,97,105,.1);


    position: absolute;
    top: 45px;
    left: 0;
    min-width: 260px;

}

.dashboardHeader .navbar-toggler{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background:#fff;
}
#contentArea #dashboardSideMenuMobile a{
    
    text-decoration:none;
    white-space: nowrap;
    color:var(--bs-body-color);
    line-height: var(--bs-body-line-height);
    font-size: var(--bs-body-font-size);

    /*
      font-family: var(--bs-body-font-family);
  font-weight: var(--bs-body-font-weight);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  -webkit-text-size-adjust: 100%;
  */

}
#contentArea #dashboardSideMenuMobile a i{

    color: var(--color1);

}

/*

<div class="dashboardMain">
    <div class="dashboardHeader">asf</div>
    <div class="dashboardBody">

    */
#website .dashboardBody h4{font-weight: 400;}

.dashboardHeaderControls{float:right}
.dashboardHeaderControls a,
#website #contentArea .dashboardHeaderControls a{


    display:block;float:left;height:70px;line-height:70px;text-decoration:none;color:#3d5170;font-size:14px;

    border-left: 1px solid #e1e5eb;
    padding:0 25px;
}
.dashboardHeaderAvatar{text-align:center;border-radius:50px;display:block;float:left;line-height:40px;width:40px;height:40px;background:linear-gradient(to bottom,#e1e5eb,#c1c5db) ;padding:0;;position:relative;margin:15px 15px 0 0;}
.dashboardHeaderAvatar i{}

#website .dashboard .card h3,
#website .dashboard .whiteShadowContainer h3{
font-weight: 600;
color: #3d5170;
font-size: 22px;
}