.usercp_nav_item {
    display: block;
}

.usercp_nav_item a {
    color: #454545;
}

.usercp_nav_item:before {
    font-size: 16px;
    font-family: 'FontAwesome';
    color: #fff; /* color of icon */
    width: 28px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
}

.usercp_nav_composepm:before {
    content: "\f112";
}

.usercp_nav_pmfolder:before {
    content: "\f07c";
}

.usercp_nav_sub_pmfolder:before {
    content: "\f07b";
}

.usercp_nav_trash_pmfolder:before {
    content: "\f014";
}

.usercp_nav_pmtracking:before {
    content: "\f024";
}

.usercp_nav_pmfolders:before {
    content: "\f07b";
}

.usercp_nav_profile:before {
    content: "\f007";
}

.usercp_nav_email:before {
    content: "\f0e0";
}

.usercp_nav_password:before {
    content: "\f084";
}

.usercp_nav_username:before {
    content: "\f111";
}

.usercp_nav_editsig:before {
    content: "\f040";
}

.usercp_nav_avatar:before {
    content: "\f03e";
}

.usercp_nav_options:before {
    content: "\f085";
}

.usercp_nav_usergroups:before {
    content: "\f0c0";
}

.usercp_nav_editlists:before {
    content: "\f004";
}

.usercp_nav_attachments:before {
    content: "\f0c6";
}

.usercp_nav_drafts:before {
    content: "\f040";
}

.usercp_nav_subscriptions:before {
    content: "\f02e";
}

.usercp_nav_fsubscriptions:before {
    content: "\f03a";
}

.usercp_nav_notepad:before {
    content: "\f02d";
}

.usercp_nav_viewprofile:before {
    content: "\f007";
}

.usercp_nav_home:before {
    content: "\f015";
}

.usercp_nav_status:before {
    content: "\f118";
}

.usercp_nav_myalerts:before {
    content: "\f0f3";
}

.usercp_nav_myalerts_delete_all:before {
    content: "\f058";
}

.usercp_nav_myalerts_delete_read:before {
    content: "\f05c";
}

.usercp_nav_award:before {
    content: "\f091";
}

.usercp_notepad {
    width: 99%;
}

.usercp_container {
    margin: 5px;
    padding: 8px;
    border: 1px solid #CCC;
}

.pmspace {
    float: right;
    margin: -3px 5px;
}

.pmspace_container {
    background: #fff;
    border: 1px solid #ccc;
    width: 100px;
    display: inline-block;
}

.pmspace_used {
    display: inline-block;
    color: #fff;
    margin: -1px;
}

.pmspace_used.low {
    border: 1px solid #0c5a01;
    background: #167203;
}

.pmspace_used.medium {
    background: #ff862b;
    border: 1px solid #d7611e;
}

.pmspace_used.high {
    background: #e73c3c;
    border: 1px solid #c00;
}

.pmspace_unused {
    display: inline-block;
}

.pmspace_text {
    padding: 1px 5px;
    display: inline-block;
}

#toggle_slideview_left {
    position: fixed;
    z-index: 9;
    top: 10px;
    left: 10px;
    background: #3168aa;
    border: 1px solid #3168aa;
    margin: 0;
    padding: 10px 9px 8px;
}

#slideview_left {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #3168aa; /* #4289df; */
    width: 240px;
    height: 100%;
    overflow: auto;
    padding: 20px 0;
    margin: 0;
    list-style: none;
    z-index: 10; /* Make sure the z-index is lower than the #page */
    color: #7eb9ff;
}

#slideview_left::-webkit-scrollbar {
    display: none;
}

.slideview_heading {
    font-size: 18px;
    font-weight: 700;
}

/* Animations */

#page,#slideview_left {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.animating #slideview_left,.menu2-visible #slideview_left {
    display: block;
}

.animating #page {
    transition: transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
}

.animating.left #page {
    transform: translate3d(-240px,0,0);
    -webkit-transform: translate3d(-240px,0,0);
}

.animating.right #page {
    transform: translate3d(240px,0,0);
    -webkit-transform: translate3d(240px,0,0);
}

.animating #toggle_slideview_left {
    transition: transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
}

.animating.left #toggle_slideview_left {
    transform: translate3d(-240px,0,0);
    -webkit-transform: translate3d(-240px,0,0);
}

.animating.right #toggle_slideview_left {
    transform: translate3d(240px,0,0);
    -webkit-transform: translate3d(240px,0,0);
}

.menu2-visible #page {
    left: 240px;
}

.menu2-visible #slideview {
    display: none !important;
}

.menu2-visible #toggle_slideview_left {
    left: 250px !important;
}

ul.slideview_nav {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

ul.slideview_nav li {
    display: block;
}

ul.slideview_nav li a:link,ul.slideview_nav li a:visited {
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid #3B79C4;
    color: #fff;
}

ul.slideview_nav li a:hover {
    color: #bddbff;
}

#slideview_left2 {
    position: fixed;
    top: 0;
    right: 100%;
    margin: 0;
    margin-left: -260px;
    background: #3168AA;
    width: 260px;
    height: 100%;
    overflow: auto;
    padding: 20px 0 100px 0px;
    list-style: none;
    z-index: 99999;
/* Make sure the z-index is lower than the #page */
    color: #7eb9ff;
}

#slideview_left2 {
    transition: transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
}

#slideview_left2.animating.left  {
    transform: translate3d(-260px,0,0);
    -webkit-transform: translate3d(-260px,0,0);
}

#slideview_left2.animating.right {
    transform: translate3d(260px,0,0);
    -webkit-transform: translate3d(260px,0,0);
}

#slideview_left2 {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

#toggle_slideview_body {
    position: fixed;
    z-index: 9;
    top: 10px;
    right: 10px;
    background: #3168aa;
    border: 1px solid #3168aa;
    margin: 0;
    padding: 10px 9px 8px;
}

#toggle_slideview_close {
    position: absolute;
    left: 20px;
    top: 15px;
    background: transparent;
    border: transparent;
    margin: 0;
    padding:10px;
}

#toggle_slideview_left_body {
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 10px;
    background: #3168aa;
    border: 1px solid #3168aa;
    margin: 0;
    padding: 10px 9px 8px;
}










/* SCREEN IS MORE THAN 1000PX WIDE  */

@media only screen and (min-width: 1000px) {
    #page {
        margin-left: 240px;
    }

    .toggle_slideview_left {
        display: none;
    }

    #slideview_left2 {
        display: block;
        left: auto;
        right: auto;
        margin-left: 0;
    }

    #slideview_left2.animating.left  {
        transform: none;
        -webkit-transform: none;
    }

    #slideview_left2.animating.right {
        transform: none;
        -webkit-transform: none;
    }
    body#error #page {
        margin-left: 0;
    }

}