.mystoryboard>.nav {
    background: #485663;
    padding: 8px;
    border-radius: 5px 5px 0px 0px;
    border-bottom: none;
    color: #fff;
}
.mystoryboard>.nav>.nav-item>.active {
    background: #0279ff;
    border: none;
    border-radius: 5px;
    color: #fff;
}
.mystoryboard>.nav>.nav-item {
    margin: 0px 15px;
}
.mystoryboard>.nav>.nav-item>a:focus,.mystoryboard>.nav>.nav-item>a:hover{
    border:none;
}
.mystoryboard>.nav>.nav-item>a:focus, .mystoryboard>.nav>.nav-item>a:hover {
    border: none;
    background-color: #0279ff;
    color: #fff;
    border-radius: 6px;
}
.mystoryboard>.nav>.nav-item>a{
    color: #dbeafa
}
.mystoryboard>.tab-content {
        background: #fff;
    padding: 12px;
    height: calc(100vh - 18em );
}
.storycontent {
    height: calc(100vh - 19em );
    overflow-y: auto;
    font-size: 15px;
    padding: 8px;
}
.storycontent p{
    font-size: 13px;
}
.storyedit_btn {
    position: absolute;
    right: 20px;
    bottom: 8px;
}
.mystoryboard {
    margin-top: 10px;
}
.tab-pane p img,.storycontent p img {
    float: left;
    padding: 5px;
    width: 120px;
    padding: 6px;
    border: solid 1px #C2C2C2;
    margin: 5px 10px;
}
.myrole {
    height: 410px;
    overflow-y: auto;
}
 @media (min-width:768px) and (max-width:1024px) {
     .mystoryboard>.nav>.nav-item {
    margin: 0px 0px;
}
    }