*{
    margin:0;
    padding:0;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{

    background-color: #fff;
    font-family: 'Open Sans', arial;
    font-size: 14px;
    min-height: 100vh;
    color:#333;

}

a{ text-decoration: none;}
a:hover{ text-decoration: underline;}

.mws-shell{

   
    width:100%;
    
    

}

.mws-topbar-search-box{

    width:100%;
    height:70px;
    background-color: #333;
    display: flex;
    box-sizing: border-box;
    padding:20px 5px;
    color:#f5f5f5;

}


.mws-topbar-search-box > div{
    min-height:60px;
}
   

.mws-sp-icon-nav-box{
    flex:0 1 150px;
    font-size: 28px;
}

.mws-search-box{
    flex: 1 0 calc(100% - 300px);    
}

    .mws-search{
    position: relative;
    width:450px;
    margin:0 auto;
    border:0;
    border-radius: 10px;
    background:#f5f5f5;
    height:35px;
    }

    .mws-search input{
        outline: none;
        border:none;
        background-color: #f5f5f5;
        height:25px;
        padding:5px;
        margin:0px 10px 0px 30px;
        width:380px
    }

    .mws-search-box-icon{

        color:#666;
        position: absolute;
        left:10px;
        top:7px;
        font-size: 18px;

    }



.mws-top-icons-box{
    display: flex;
    flex:0 1 150px;
}
.mws-top-icons-box > div{
    color:#f5f5f5;
    flex: 0 1 50px;
    text-align: center;
    font-size: 24px;
   
}


.mws-container{

    width:100%;
    min-height: 100vh;
    display:flex;
    flex-flow: row nowrap;
    align-content: stretch;
    box-sizing: border-box;
    
}

.mws-sidenav{

    flex:1 0 60px;
    background-color: #f5f5f5;
    padding-top:20px;
    box-sizing: border-box;
    min-height: calc(100vh);
    position: relative;

}

    .mws-sidenav div{
        box-sizing: border-box;
        text-align: center;
        padding-top:10px;
        padding-bottom:10px;             
    }


    .mws-sidenav div img{
        cursor: pointer;
    }

    .mws-sidenav div.spacer-border{

        border-bottom: 1px dotted #999;
    }

                /* Modal Pops for SideNav */


                    .mws-sidenav-pops-modal{
                        position: absolute;
                        width:250px;
                        height:300px;
                        background-color: #f5f5f5;
                        top:0px;
                        left:50px;
                        z-index: 10;
                        padding:0px 20px 0px 10px;
                        display: none;
                        

                    }

                    .mws-sidenav-modal-box h3,  .mws-sidenav-modal-box ul li {
                        text-align: left !important;
                    }

                    .mws-sidenav-modal-box h3{
                        padding-top:17px;
                        font-size: 18px;
                    }

                    .mws-sidenav-modal-box ul li{
                        list-style: disc;
                        margin-left: 39px;
                        padding-bottom:10px;
                    }

                    div#sovops:hover ~ .mws-sidenav-pops-modal, .mws-sidenav-pops-modal:hover{
                        display: block;
                    } 

                   

.mws-contents-box{
    flex-grow:1;
    background-color: #fff;
    box-sizing: border-box;
    
}

.mws-header-box{
    height: 150px;
    background-color: #013857;
    color:#f5f5f5;
}

.mws-top-nav{
    height:40px;
    background-color:#01496F ;
    
}

    .mws-top-nav ul{
    list-style-type: none;  
    }

    .mws-top-nav ul li{
        display: inline-block;
        padding:10px 20px;
    }

    .mws-top-nav ul li a{
        color:#fff;
    }


    


.mws-logo-title-nav{
    height: 100px;
    display:flex;
    flex-flow: row nowrap;
}

.mws-logo-box{

    flex:0 1 70px;
    padding:25px 20px;

}

.mws-title-nav-box{

    flex-grow:1;
    height: 100px;

}

    .mws-page-title{ 

        height: 60px;
        font-size: 2.0em;
        line-height: 60px;

    }

    .mws-page-nav{

        height:40px;
        position: relative;

    }

        .mws-page-nav{
        list-style-type: none;  
        }
    
        .mws-page-nav ul li{
            display: inline-block;
            padding:10px 20px;
           
        }

       
     
        .mws-page-nav ul li a, .mws-page-nav ul li a:hover{
            color:#fff;     
            text-decoration: none;             
        }

        
       .nav-services:hover ~ div.mws-subnav.subnav-services, div.mws-subnav.subnav-services:hover{
            display: block;
            top:40px;
            left:100px;
        } 
      
        .nav-tools:hover ~ div.mws-subnav.subnav-tools, div.mws-subnav.subnav-tools:hover{
            display: block;
            top:40px;
            left:180px;
        } 

        .nav-reports:hover ~ div.mws-subnav.subnav-reports, div.mws-subnav.subnav-reports:hover{
            display: block;
            top:40px;
            left:280px;
        } 
        .nav-libraries:hover ~ div.mws-subnav.subnav-libraries, div.mws-subnav.subnav-libraries:hover{
            display: block;
            top:40px;
            left:380px;
        } 
       

      
        .mws-subnav{
            position: absolute;
            min-width:100px;
            min-height:100px;
            z-index: 30;
            background-color: #f5f5f5;
            color:#333;
            padding:20px;
            box-shadow: 1px 5px 10px #ccc;
            display: none;
            border-radius: 10px;            
        }

      

        .subnav-list ul li{

            display: block;
            list-style: none;
            padding-left: 20px !important;          

        }
        .subnav-list ul li a:hover{
            color:#333;
        }

        .subnav-list ul li a{
            color:#333;
        }



.mws-alert-icons-box{
    flex:0 1 140px;
    display: flex;
    flex-flow: row nowrap;
    margin-right:20px;
    position: relative;
}

    .mws-alert-icons-box > div{
        position: relative;
        flex:0 0 70px;
        text-align: center;
        padding-top: 30px;
    }

    .mws-alert-icons-box div img{
        opacity:0.7 ;
        width:45px;
    }

    .mws-alert-icons-box div img:hover{
        opacity: 1.0;
        cursor: pointer;

    }

    .icon-notif-box{
        position: absolute;
        top:23px;
        right:0px;
    }

    .icon-notif-box img{
        opacity:1.0 !important;
        width:25px !important;
    }


        .mws-alertdetails-box{
            position: absolute;
            min-width:200px;
            min-height:100px;
            background-color: #f5f5f5;
            box-shadow: 1px 5px 10px #ccc;
            border-radius: 10px;
            text-align: left;
            padding:20px 15px;
            z-index:40;
            font-size: 12px;
            display: none;
        }

        .mws-alertdetails-box h4{
            color:#007db7;
            font-size:12px;
        }

        .mws-notifalertbox{
            padding:10px;
        }
       
        .mws-notifalertbox ul li{
           
            padding:5px 0px;

        }

        .alertviewall{
            color:#333;
            text-align: right;
            padding-top:10px;
        }

        .alertviewall a{
            color:#007db7;
        }

        .useralert{
            display: flex;
            flex-flow: row nowrap;
            margin-top:15px;
            padding-bottom:10px;
            border-bottom: 1px dashed #ddd;;
           
        }
        .userpic{
            width:20px;
            flex:0 0 20px;
        }

        .userpic img{
            width:30px !important;
        }

        .msgsnip{
            color:#333;
            padding-left:20px;
        }

        .notifbtn:hover ~ div.mws-alertdetails-box.notifbox, div.mws-alertdetails-box.notifbox:hover  {
            display: block;
            top:76px;
            left:-80px;
        } 

        .msgbtn:hover ~ div.mws-alertdetails-box.msgbox, div.mws-alertdetails-box.msgbox:hover  {
            display: block;
            top:76px;
            left:-150px;
        } 



.mws-contents{

   /* height:calc(100vh - 230px); */
    display:flex;
    box-sizing: border-box;

}

.mws-contents-items-container{
    flex-grow:1;
}


.mws-items-box{

    flex-grow:1;
    
    flex-flow: row nowrap;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    padding:20px;
    
}

.mws-items{

    min-width:calc(100% / 3);
}

.mws-items-50{
    min-width:calc(100% / 2);
}

.mws-items, .mws-items-50{

    box-sizing: border-box;
   /* background-color:#f5f5f5; */
    min-height:100px;
    padding:20px; 

}


        .mws-items-header{
            padding-bottom:10px;   
            position:relative;     
        }
            .mws-items-seeall{
                position: absolute;
                right:10px;
                top:15px;
                font-size: 12px;
            }

            .mws-items-seeall a{
                color:#01496F;
            }

        .mws-items-header h1{
            font-size:30px;
            font-weight: 600;
            color:#007db7;
        }

        .mws-item-content-box{
            display: flex;            
            width:100%;
            flex-flow:row nowrap;
            min-height:100px;
            margin-top:10px;
            margin-bottom:15px;
            box-sizing: border-box;
        }

            .mws-item-img{
                flex: 0 0 160px;               
            }

            .mws-item-datebox{
                flex: 0 0 110px;               
            }

                .mws-item-date{
                    width:100px;
                    height:100px;
                    background-color: #007db7;
                    border:0;
                    border-radius: 5px;
                    text-align: center;
                    box-sizing: border-box;
                    padding-top:20px;
                    line-height: 28px;
                    font-size: 24px;
                    color:#fff;
                }


            .mws-item-details-box{ 
                flex: 0 1 auto;
                font-size: 14px;

            }

                .mws-item-details{
                    padding:0px 10px 10px 10px;
                    flex: 1 0 auto;
                    
                }
                .mws-item-details h4{
                    padding-bottom:5px;
                }

                .mws-item-authordate{
                    font-size: 12px;
                    font-weight:600;
                    margin-top:15px;
                    padding-top:5px;
                    border-top:1px dashed #ccc;
                }

        /* for task items - i really didnt know why i made this different - arrghh - so new styles - omg */

                .mws-taskbox{ 
                    border:0;
                    background-color: #fff;
                    border-radius:10px;
                    padding:15px;
                    box-sizing: border-box;
                    box-shadow: 1px 5px 10px #ccc;
                    position: relative;
                    margin-bottom:20px;
                }

                .mws-task-details-box{ 
                    flex: 1 1 auto;
                    font-size: 14px;
    
                }


                .mws-fixedauthor{
                  position: absolute;
                  bottom:18px;
                  border:0px;           
                }

                .mws-task-img{
                    flex: 0 1 100px;  
                    width:100px;             
                }

        /* for Feed items - now im baking background images to DIV sheesh */

        .mws-feeds-box{ 
            border:0;
            border-radius:10px;
            padding:20px;
            box-sizing: border-box;
            box-shadow: 1px 5px 10px #ccc;
            position: relative;
            margin-bottom:20px;
            min-height:130px;
            max-height: 130px;
        }

        .mws-feeds-box p{
            line-height:18px;
        }

        .mws-feeds-item-bg1{
            background:#fff url(../img/img-myfeeds1.png) no-repeat right !important;
        }

        .mws-feeds-item-bg2{
            background:#fff url(../img/img-myfeeds2.png) no-repeat right !important;
            
        }

        .mws-feeds-item-bg3{
            background:#fff url(../img/img-myfeeds3.png) no-repeat right !important;
            
        }

        .mws-feeds-img{
            flex: 0 1 180px;  
            width:100px;             
        }

        /* a bit of a stretch - shrinking item img for the Recent Files */

        .mws-recentfiles-img{

            flex:0 0 50px;

        }






.mws-contents-right-box{

    flex:1 0 410px;
    width:410px;
    background-color: #015A87;
    box-sizing: border-box;
    padding:20px;

}

.mws-contents-right-box > div{

    width:100%;
    box-sizing: border-box;
    min-height:100px;
    margin-bottom:20px;
    color:#f5f5f5;   
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;

}

.mws-contents-right-box > div > h1{
    font-size:2em;
    font-weight:600;
    margin-bottom: 20px;
}

.mws-whatsnew-box img{
    border:1px solid #f5f5f5;
    border-radius: 10px;
}

.mws-team-item{
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    margin-bottom: 20px;
}

.mws-team-img{
    width:50px;
    flex:0 1 50px;
}

.mws-team-member{
    font-size:16px;
    font-weight: 600;
}

.mws-team-details{
    flex:1 0 auto;
    padding-left:10px;
    box-sizing: border-box;
}

.icon-team-status{
    display: flex;
    font-size: 12px;
}

.status-img{
    width:10px;
    height:10px;
    background-color: red;
    border-radius: 50px;
    margin-top:3px;
}

.status-text{
    padding-left:7px;
    font-weight: 600;
}

.status-avail{ background-color:#66ff66;}
.status-meeting{ background-color:#cc0033;}
.status-leave{ background-color:#ccc;}

.mws-knowledge-searchbox{
    position: relative;
    width:100%;
    height:45px;
    background-color:#F3FBFF;
    border:0;
    border-radius: 50px;
    box-sizing: border-box;
    padding:10px 40px 10px 20px;
}

.mws-knowledge-searchbox > div{
    position: absolute;
    top:5px;
    right:10px;
}

.mws-knowledge-searchbox input{
    width:95%;
    height:25px;
    font-size:16px;
    border:0px;
    outline:none;
    background-color:#F3FBFF;
}

.mws-knowledge-results{

    margin-top: 30px;
    border-top: 3px solid #BADDEF;
    padding-top:30px;
}

.mws-knowledge-results-box{

    padding:15px;
    background-color: #f5f5f5;
    color:#333;
    border:0px;
    border-radius: 10px;
    margin-bottom: 30px;

}

.mws-knowledge-results-box h3{
    color:#007db7;
    font-size: 18px;
}

.knowledge-links{
    margin-top:20px;
    padding:10px 0px;
    border-top:1px dotted #ccc;
}

.mws-knowledge-results a{
    color:#007db7;
}








.mws-footer-box{
    height:50px;
    background-color: #011627;
    text-align: center;
    line-height: 50px;
    color:#fff;
    font-size: 12px;
}