// Variables
@import "ipcmd/data/colors"; 
@import "ipcmd/data/variables-b4";
@import "ipcmd/data/variables";  

//Global
@import "ipcmd/global"; 

$font-size: 15px;
$line-height: 2;
$lines-to-show: 1;


.main-content-wraper {
    // margin: 0px 10px 0 10px;
    // @media only screen and (max-width: 992px){
    //   margin: 0px 0 0;  
    // }
}
.top-action-icons {
        float: right;
        a{           
            font-weight: bold;
            padding: 0px 5px;
            margin: 0px 2px;
            display:inline-block; 
            opacity: 0.3;           
            &:hover{
                background: #fff;
                box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
                opacity: 1;
            }
            .material-icons{
                vertical-align: middle;
            }
        }
        
    }
.user-statistics {
    position: relative;
    
    .card{        
        &:hover{
             @extend .z-depth-2;
             transition: box-shadow .45s;
        }
        .card-block {
            clear: both;
            padding: 0.5rem;
            
            .material-icons{
                float: left;
                width: 40px;
                height: 40px;                
                font-size: 30px;
                line-height: 41px;
                color: #fff;
                text-align: center;               
                margin-right: 10px;  
                border-radius: 4px;             
            }
            h3.number{                
                font-size: 22px;
                font-weight: 600;
                color: lighten($primary-color,40%);                 
                display: block;   
                margin: 0;                        
            }
            h4.text{                
                font-size: 13px;
                font-weight: 600;
                color: lighten($primary-color,25%); 
                margin: 0;
            }
            .notes, .bookmarks, .heighlights{
                float: left;
                padding: 0 4px;
                h3.number, h4.text{
                    text-align: center;
                    float: none;
                }
            }
            .bookmarks {
                margin: 0 5px;
                border-left:1px solid lighten($primary-color,70%); 
                border-right:1px solid lighten($primary-color,70%); 
            }
            .login-data{
                display: inline-block;               
                color: lighten($primary-color,40%);
                font-size: 0.8rem;
            }
        }
    }
    
}


.my-activities{
     background: #fff;
    margin: 0;
    .nav-tabs{
       border-bottom: 0; 
       
       .nav-link {
           border: 0;
           font-size: 1.1rem;
           font-weight: bold;
            &.active{
              color: $link-hover-color; 
           }
       }       
       }
    .actions {
        float: right;           
           a{
               margin: 2px 2px 0 0;
               padding: 5px 7px 0 5px;
               display: inline-block;
                &:hover, &.active{
                 background:rgba(lighten($md-color,50%),.3);
                 border-radius: 2px;
                 color:$secondary-color;
             }
           } 
          .sort-dropdown {
              display: inline-block;
              vertical-align: middle;
              background: #fff;
              border-radius: 2px;
              border: 1px solid lighten($primary-color,65%);
              a {
                  padding:2px 4px 0 4px;
                  border-radius: 2px;
                .material-icons {
                    font-size: 1.2rem;
                    color:lighten($primary-color,40%);
                    }
              }
              &:hover a, a.active {
                 background: #fff; 
              }
              .dropdown-menu {
                  border:1px solid lighten($primary-color,65%); 
                  padding:0;
                  box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.1), 1px 1px 15px 0px rgba(0, 0, 0, 0.1);
                  h3.title{
                      background:lighten($primary-color,60%);
                      font-size: 14px;
                      font-weight: bold;
                      padding: 7px;
                      margin: 0;                      
                  }
                  label{
                      display: block;
                      padding: 5px 5px 5px 30px;                     
                      margin: 0;
                      line-height: 20px;
                    &:nth-child(odd) {
                        border-top:1px solid lighten($primary-color,72%);                        
                        border-bottom:1px solid lighten($primary-color,72%);                        
                        }
                        .c-indicator {
                            left:7px;
                            top: 7px; 
                            width: 1.2rem;
                            height: 1.2rem;
                            background-color: #fff;
                            border:1px solid rgba($primary-color,0.1);    
                            box-shadow: none;
                            border-radius: 50%;                                             
                        }
                        input:checked ~ .c-indicator {
                                background-color: $secondary-color;
                                border:1px solid rgba($secondary-color,0.1);
                            } 
                        input:checked ~ .text {
                               font-weight: bold;
                            }                
                        &:hover{
                           background: lighten($primary-color,65%);  
                        }
                  }
              }
              
          }         
           
       }
    .tab-content {
        min-height: 500px;
        position: relative;
        overflow: hidden;
       .nav-tabs{
       border-bottom: 1px solid #eee; 
       position: relative;       
       .nav-link {
           border: 0;
           padding: 0.7rem 1.2rem;
           font-size: 0.85rem;
           font-weight: bold;
           text-transform: uppercase;
           color: lighten($primary-color, 15%);
           &:hover {
               color:$secondary-color;
           }
           &.active{
               border-bottom: 2px solid $secondary-color;
               color: $link-hover-color;
               .label{
                    background:$secondary-color;
                    &::before {
                        border-right-color:$secondary-color;
                    }
               }
               
           }
           .label{
               background: lighten($primary-color,30%);
               border-radius:2px;
               position: relative;
               font-size: 12px;
               font-weight: normal;
               margin-left: 3px;
               vertical-align: middle;
               @extend .z-depth-1-half;
               
               &::before {
                    right: 100%;
                    top: 45%;
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                    border-color: rgba(136, 183, 213, 0);
                    border-right-color:lighten($primary-color,30%);
                    border-width: 5px;
                    margin-top: -5px;
                     }
           }
       } 
    }
  
    .toolbar-wrapper{
        background: lighten($primary-color,73%);
        
        .tab-title{
            color: lighten($primary-color,60%);
            float: left;
            margin: 0.5rem;
            font-size: 13px;            
            .title, .category, .shelf, .collection{
                padding: 2px 2px 0px 5px;
                line-height: 15px;                
            }
            .category, .shelf{                
                color: $secondary-color;                           
                background: #fff;
                border-radius: 2px;
                box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
                display: none;                    
                    a.close-selected{
                        font-weight: normal;
                        padding:0px 5px 2px;
                        color:#fff;
                        display: inline-block;
                        margin:0 0 2px 5px;
                        border-radius: 2px;
                        background: $secondary-color;                        
                        &:hover {
                            background: lighten($primary-color,40%);
                        }
                    }
                
            }
            .shelf{
                display: inline-block;
            }
            .collection{                
                color: lighten($primary-color,5%);
                font-weight: bold;
            }
        }
        
        .actions{
            .category-select-wrap {                              
                padding:0.4rem 0;
                float: left;                
                position: relative;                   
                }
                .shelf-select-wrap {                             
                padding:0.4rem 0;                
                position: relative;
                float: left;                                  
                }
                .search-sort-wrap {                           
                padding:0.44rem ;
                display: inline-block; 
                position: relative;                   
                }
            a{
                margin: 0px;
              }
        }
        .btn {
            line-height: 1.6rem;
        }
        }
    &.stack-view{
        .card-columns {
            -moz-column-width: 150px;
            -webkit-column-width: 150px;
            column-width: 150px;
            padding: 20px;
            -moz-column-gap: 1.5rem;
            -webkit-column-gap:1.5rem;
            column-gap: 1.5rem;
            .card{
            padding: 5px;
            text-align: left;
            position: relative;          
            cursor: pointer;
            overflow: hidden;           
            .cover-img{               
                position: relative;                  
                img {                       
                     max-width: 100%; 
                     width: auto;
                     height: auto;                    
                    margin: auto;
                    display: block;
                                                  
                } 
            }
          
          .more-details{         
              display: none;            
          }        
        }
        }
    }
    &.list-view{
       
        .card-columns {
           @media (min-width: 990px) {
            -moz-column-count: 2;
            -webkit-column-count: 2;
            column-count: 2;
             }             
            padding: 2%;
            -moz-column-gap: 1rem;
            -webkit-column-gap: 1rem;
            column-gap: 1rem;           
        .card{
          padding: 5px;
          text-align: left;
          position: relative;
          cursor: pointer;
          border: 1px solid lighten($primary-color,72%);
          box-shadow: none;
          &:hover{
              box-shadow: 1px 1px 15px rgba(0,0,0,0.2);
          }
           @media (max-width: 552px) {
               float: left;
           }
          .cover-img{ 
              float: left;                           
              margin-right: 1rem;
              img {
                  height: 100px;
              }             
          }          
          .title{
              font-size: 16px;
              font-weight: bold;              
              margin: 5px 0px 5px;
          }
          .more-details{
              background: #fff;
              font-size: 12px;                      
              display: block;
               .info{
                    float: left;
                    clear: right;
                    min-width: 70%;                    
                }
              .author-name{
                  font-size: 12px;
              }
              .sub-title, .author-name, .format{
                  display: block;
                  padding: 3px 0;
              }
              .btn {
                  margin: 0px;                  
                  font-size: 13px;                
              }
              hr{
                  margin: 0.5rem 0;
                  display: none;
              }
             
              .action-items {
                 float: left;
                     a{ 
                      color:$secondary-color; 
                      padding: 0 4px 0 3px;
                      border-right:1px solid lighten($md-color, 55%);
                        &:hover, &.active{ 
                            color: lighten($md-color, 15%);                      
                            }                        
                        &.icon-link {
                                position: absolute;
                                right: 0px;
                                top: 0px;
                                padding: 2px 5px 0;
                                margin:0  5px;
                                display: inline-block;
                                color: lighten($md-color, 15%); 
                                border-right: 0;
                                visibility: hidden;
                                opacity: 0;
                                transition: visibility 0.2s, opacity 0.2s linear;
                                .material-icons{
                                    font-size: 1.2rem;
                                    line-height: 16px;
                                }
                                &+.icon-link{
                                    top:30px;
                                    transition: visibility 0.6s, opacity 0.6s linear;
                                    visibility: hidden;
                                    opacity: 0;
                                }
                                &+.icon-link+.icon-link{
                                    top:60px;
                                    transition: visibility 0.8s, opacity 0.8s linear;
                                    visibility: hidden;
                                    opacity: 0;
                                }
                                &+.icon-link+.icon-link+.icon-link{
                                    top:90px;                                    
                                    visibility: hidden;
                                    opacity: 0;
                                }
                            &:hover, &.active{
                            background:rgba(lighten($md-color,50%),.3);
                            border-radius: 2px;
                            color:$secondary-color;
                            }
                        }
                     }
              }
               
              
          }
          &:hover{
              .action-items{
              a.icon-link {
                  visibility: visible;
                  opacity: 1;
                  &+.icon-link{
                       visibility: visible;
                        opacity: 1;
                    }
                    &+.icon-link+.icon-link{
                        visibility: visible;
                        opacity: 1;
                    }
                    &+.icon-link+.icon-link+.icon-link{
                        visibility: visible;
                        opacity: 1;
                        
                    }
              }
              }
          }
        }
        }
        .recent-activity, .shared-with-me{
            .cover-img{
                img{
                    height: 120px !important;
                }
            }
            .action-items{
                .activity-text, .shared-by{
                        display: block;
                        font-size:13px;                     
                        font-weight: bold;
                        margin-top: 5px;
                        span {
                            color: lighten($primary-color,20%);
                        }
                     }
            }
        }
    }
    &.title-view{
       
        .card-columns {
           @media (min-width: 990px) {
            -moz-column-count: 1;
            -webkit-column-count: 1;
            column-count: 1;
             }             
            padding: 2%;
            -moz-column-gap: 0px;
            -webkit-column-gap: 0px;
            column-gap: 0px;           
        .card{
          padding: 10px;
          text-align: left;
          position: relative;
          cursor: pointer;
          border: 1px solid lighten($primary-color,72%);
          box-shadow: none;
          border-bottom:0px;
          margin: -10px 0 0 0;
          &:first-child{
               margin: 0;
          }
          &:last-child{
             border: 1px solid lighten($primary-color,72%);
          }
          &:hover{
              background: lighten($primary-color,72%);
          }
           @media (max-width: 552px) {
               float: left;
           }
          .cover-img{ 
              display: none;                        
          }
          .title{
              font-size: 16px;
              font-weight: bold;              
              margin: 0px;
          }
          .more-details{
              background: #fff;
              font-size: 12px;                      
              display: block;
                     
              hr{ 
                 display: none;
                } 
                .info{
                    float: left; 
                }
              .author-name{
                   display: none;
              }
              .sub-title, .format{
                  display: block;
                  padding: 3px 0;
              }
              .btn {
                  margin: 0px;                  
                  font-size: 13px;                
              }
              hr{
                  margin: 0.5rem 0;
              }
             
              .action-items {
                 float: right;
                 vertical-align: middle;                
                     a{ 
                      color:$secondary-color; 
                      padding: 0 4px 0 3px;
                      border-right:1px solid lighten($md-color, 55%);
                      vertical-align: middle;    
                        &:hover, &.active{ 
                            color: lighten($md-color, 15%);                      
                            }                        
                        &.icon-link {                               
                                padding: 2px 5px 0;
                                margin:0  2px;
                                display: inline-block;
                                color: lighten($md-color, 15%); 
                                border-right: 0;
                                .material-icons{
                                    font-size: 1.2rem;
                                }
                            &:hover, &.active{
                            background:rgba(lighten($md-color,50%),.3);
                            border-radius: 2px;
                            color:$secondary-color;
                            }
                        }
                     }
              }
               
              
          }
          &:hover{
              .action-items{
              a.icon-link {
                  visibility: visible;
                  opacity: 1;
                  &+.icon-link{
                       visibility: visible;
                        opacity: 1;
                    }
                    &+.icon-link+.icon-link{
                        visibility: visible;
                        opacity: 1;
                    }
                    &+.icon-link+.icon-link+.icon-link{
                        visibility: visible;
                        opacity: 1;
                        
                    }
              }
              }
          }
        }
        }
        .recent-activity, .shared-with-me{            
            .action-items{
                .activity-text, .shared-by{
                        font-size: 13px;
                        font-weight: bold;
                        float: left;
                        padding: 3px 20px 0 0;
                        span {
                            color: lighten($primary-color,20%);
                        }
                     }
                     
            }
        }
        
    }
    .my-favorites {
            .empty-view-content-favorites{
                font-size: 1.2rem;
                font-weight: bold;
                display: none;
                text-align: center;
            }
        }
}
.collections {
    .card {
        position: relative;        
    }
 .view-collections-btn {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;    
    bottom: 0;
    height: auto;
    width: 100%;    
    color:$md-color;
    font-weight: bold;
    border: 0;
    background:transparent;
 }   
}
.view-collections {
    display: none;
    padding-top: 0px !important;
}
.back-to-collection {
    vertical-align: middle;
    display: none;
    margin: 15px 0 10px 20px;
   
    .material-icons{
        vertical-align: middle;
    }
}
.dropdown-menu {
    .c-inputs-stacked{
        label{
          margin:  5px 0; 
          display: inline-block; 
        }
    }
}
}

.modal-stack-view-details{ 
    font-size: 13px;
        .info{ 
            img{
                float:left;
                margin: 0 25px 0 0;
            }              
             .author-name{
                  font-size: 12px;
              }
              .sub-title, .author-name, .format{
                  display: block;
                  padding: 3px 0;
              }
        }
              
              hr{
                  margin: 0.5rem 0;
              }
             
              .action-items {
                     a{ 
                      color:$secondary-color; 
                      padding: 0 3px 0 3px;
                      border-right:1px solid lighten($md-color, 55%);
                        &:hover, &.active{ 
                            color: lighten($md-color, 15%);                      
                            }                        
                        &.icon-link {
                        padding: 2px 5px 0;
                        margin:0  2px;
                        display: inline-block;
                        color: lighten($md-color, 15%); 
                        border-right: 0;
                            &:hover, &.active{
                            background:rgba(lighten($md-color,50%),.3);
                            border-radius: 2px;
                            color:$secondary-color;
                            }
                        }
                     }
                     .dropup{
                         display: inline-block;                         
                         .share-dropdown{
                             width: 185px;
                             left:-85px;
                             padding: 7px;
                             box-shadow: 2px 2px 35px rgba(0,0,0,0.5);
                             border:1px solid lighten($primary-color,45%);
                             h3{
                                 font-size: 14px;
                                 font-weight: bold;
                                 margin-bottom: 10px;
                             }
                             .md-form {
                                 margin-bottom: 0px;
                                 label{
                                     font-size: 12px;                                     
                                 }
                                 .form-control {
                                     font-size: 12px;
                                     background: lighten($primary-color,75%);                                    
                                     height: 20px;
                                 }
                                 textarea.md-textarea {
                                   min-height: 1rem;  
                                   background: lighten($primary-color,75%);
                                   padding: 5px 0;
                                   font-size: 12px;
                                 }
                             }
                         }
                     }
              }
}