// Variables
@import "ipcmd/data/colors"; 
@import "ipcmd/data/variables-b4";
@import "ipcmd/data/variables"; 
@import"ipcmd/journal-pastissues";
@import"ipcmd/_htmlrange-slider";

  
$font-size: 18px;
$line-height:1.2; 
$lines-to-show: 2;
$d-font-size: 14px;
$d-line-height:1.5; 
$d-lines-to-show: 2;
$st-font-size: 14px;
$st-line-height:1; 
$st-lines-to-show: 1;    
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn-animated {
    -webkit-animation: fadeIn 2s; 
    -moz-animation: fadeIn 2s; 
    -ms-animation: fadeIn 2s;
    -o-animation: fadeIn 2s; 
    animation: fadeIn 2s;  
}
.ellipsis-1{    
    display: -webkit-box;       
    display: block; /* Fallback for non-webkit */     
    height: $st-font-size*$st-line-height*$st-lines-to-show; /* Fallback for non-webkit */            
    font-size: $d-font-size;
    line-height: $st-line-height;
    -webkit-line-clamp: $st-lines-to-show;
    -webkit-box-orient: vertical;
    overflow: hidden;                    
    text-overflow: ellipsis; 
}


.journal-home{    
    margin: 0;
    
    .middle-section {
        margin: 15px 0 0;
        background:color('shades','white');  
    }
.journals-header{      
            display: block;             
            margin: 1% 0 1% 0;
            .cover-img{ 
                float: left;                           
                margin-right: 1rem;
                @media (max-width:768px){
                    margin: 0;
                    text-align: center;
                    float: none;
                    display: block;
                }
                img {
                    display: inline-block;
                    max-width: 100%;
                    height: auto;
                    max-height: 300px;
                    padding: .25rem;
                    line-height: 1.5;                       
                    border: 1px solid rgba($text-color,0.1);
                    border-radius: .25rem;
                    -webkit-transition: all .2s ease-in-out;
                    -o-transition: all .2s ease-in-out;
                    transition: all .2s ease-in-out;
                    @media (max-width:1024px){
                        width: 180px;
                    }
                     @media (max-width:768px){
                        width: 150px;
                    }
                }   
                a { 
                    &.read-sample {
                        width: 100%;
                        color: #efefef;
                        bottom: 0px;
                        display: block; 
                        padding: 7px 0px;
                        background: #4cAe4c;
                        text-align: center;
                        // position: absolute;
                        border-radius:2px;
                        font-weight: 300;
                        &:hover{
                            background: #038238;
                            transition: .45s;
                        }
                    } 
                }          
            }
          .title{
            //   font-size: 32px;
              font-weight: 300;              
              margin: 5px 0px 5px;
              font-size: 24px;
              line-height: 28px;
          }
          .more-details{             
              font-size: 14px;                      
              display: block;
              float: left;
              width: 80%;
              position: relative;
              @media (max-width:768px){
                  width: 100%;
              }
            .goToArticles-wrap{  
                position: absolute;
                top: 50%;
                bottom: 0;
                right: 50%;                            
            .goToArticles{
                position: fixed;               
                .material-icons{
                    vertical-align: middle;
                }
            }
            }
            .select2-container{
                   @media (max-width:767px){
                      min-width: 70%;
                     }          
                }                         
             hr{ 
                 display: none;
                } 
               
              .author-name{
                  font-size: 12px;
              }
              .sub-title{
                  font-size: 15px;
                  margin: 0 0 10px;
              }
              .read-this-on{
                font-size: 15px;
                margin: 0;
                display:block;
                    .material-icons{
                        vertical-align: middle;
                        margin: 0 5px;
                    }
                }
              h3{
                font-size: 18px;
                font-weight: 300;
                line-height: 22px;
              }
              p{
                //   font-size: 1rem;
                font-size: 14px;
                line-height: 18px;
              }     
              .table{
                  tbody{
                      width: 100%;
                        tr:nth-of-type(odd){
                        background: rgba($secondary-color,0.02);
                    }
                    tr:hover{
                         background: #e9e9e9;
                    }
                    td {
                        border-color: rgba($secondary-color,0.05);
                        &.bold{
                            font-weight: 500;
                        }
                    }   
                  }
                    
              }   
              .sub-title, .author-name, .format{
                  display: block;
                  padding: 3px 0;
              }
              .btn {
                margin: 0px;
                font-size: 14px;
                height: 36px;
                padding: 0 14px;
                font-weight: 300;
                line-height: 18px;
                border-radius: 2px;   
                background-color: $primary-color;
                &:hover{
                    background-color: $primary-color-hover;
                }            
              }
              hr{
                  margin: 0.5rem 0;
              }
              .action-items{
                  margin-bottom: 15px;
                  a{
                      margin: 0 10px;
                      .material-icons{
                          font-size: 1.1rem;
                          vertical-align: middle;
                      }
                  }

              }
              .add-to-cart {
                  .material-icons{
                      vertical-align: middle;
                  }
              }
              h2{
                  &.descp{
                      &:first-letter{
                          text-transform: capitalize;
                      }
                  }
              }
              
          }           
    }
    .journals-body{
        width: 100%;
        display: block;
        .toolbar-wrapper  {
             background:  $filterbar-color;            
             display: block;
             padding: 5px;
             margin-top:10px;
             position: relative;
             h5{
                 margin: 0;
                 vertical-align: middle;
                //  line-height: 38px;
                 font-size: 24px;
                 line-height: 28px;
             }

        }     
        .nav-tabs{
      // border-bottom: 0px solid #eee; 
       position: relative;  
         .nav-link {
           border: 0;
           padding: 8px 16px !important;
        //    font-size: 0.9rem;
           font-size: 14px;
           line-height: 18px;
           font-weight: 400;
        //    text-transform: uppercase;
           color: $text-color;
           &:hover {
               color:$primary-color;
           }
           &.active{
              // border-top: 4px solid $primary-color;
               border-bottom:2px solid color("shades","white");
               //box-shadow: 1px -3px 5px 0px rgba(0,0,0,0.1), 1px -3px 5px 0px rgba(0,0,0,0.1);
               color: $primary-color;
               font-weight: 600;
               .label{
                    background:$primary-color;
                    &::before {
                        border-right-color:$primary-color;
                    }
               }
               
           }
           
       } 
    }
    .actions {
        float: right; 
        @media (max-width:768px) {
            float: none;
            padding-top: 44px; 
            text-align: right;           
        }          
           a{
               margin: 2px 2px 0 0;
               padding: 7px 7px 0px 7px;
               display: inline-block;
               color: $text-color;
               vertical-align: bottom;
              
                &:hover, &.active{
                 background:rgba(lighten($secondary-color,50%),.3);
                 border-radius: 2px;
                 color:$primary-color;
             }
           } 
          .filter-dropdown {
              display: inline-block;
              vertical-align: middle;
              background: #fff;
              border-radius: 2px;
              padding-right: 10px;
             // border-right: 1px solid rgba($secondary-color,0.1);
              //margin-right: 15px;
               @media (max-width:768px) {
                    clear: both;
                } 
              a {
                  padding:7px;
                  border-radius: 2px;
                  background: color('shades','white');
                  color:$text-color;
                .material-icons {
                    font-size: 1.2rem;
                    vertical-align: middle;
                    }
                &:hover{
                    color:$link-hover-color;
                }    
              }
              &:hover a, a.active {
                 background: #fff; 
              }
              .dropdown-menu {
                  border:1px solid lighten($primary-color,65%); 
                  padding:13px 20px 20px;
                  min-width: 250px;
                  top: 35px;
                  box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.1), 1px 1px 15px 0px rgba(0, 0, 0, 0.1);
                  h2.title{
                      background:lighten($primary-color,60%);
                      font-size: 14px;
                      font-weight: 300;
                      padding:0 0 7px 0;
                      margin: 0;                      
                  }
                  label{
                      display: block;
                      padding: 5px 5px 5px 30px;                     
                      margin: 0;
                      line-height: 20px;
                    &:nth-child(odd) {
                        border-top:1px solid rgba($secondary-color,0.1);                     
                        border-bottom:1px solid rgba($secondary-color,0.1);                       
                        }
                        .c-indicator {
                            left:7px;
                            top: 7px; 
                            width: 1.2rem;
                            height: 1.2rem;
                            background-color: #fff;
                            border:1px solid rgba($secondary-color,0.1);    
                            box-shadow: none;
                            border-radius: 50%;                                             
                        }
                        input:checked ~ .c-indicator {
                                background-color: $primary-color;
                                border:1px solid rgba($primary-color,0.1);
                            } 
                        input:checked ~ .text {
                               font-weight: 300;
                            }                
                        &:hover{
                           background: lighten($primary-color,65%);  
                        }
                  }
              }
              
          } 
                    
           
       }
    .tab-content {
        min-height: 500px;
        position: relative;
        overflow: hidden;   
        box-shadow: 0 11px 11px 0 rgba(0, 0, 0, 0.10), 0 12px 15px 0 rgba(0, 0, 0, 0.09);   
        .nav-tabs{             
            position: relative;  
            .nav-link {
                font-size: 0.8rem;
            }
        }
        
    .articals-list-wrapper{  

        .article-content{
            .card-group{
        border-top: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;

        .card{
            width:100%;
            border-right: 1px solid #e8e8e8;
            cursor: default;

             @media(max-width:1000px){
                    width: 100%;
                }
            @media #{$small-and-down} {
                padding-left: 0;
                padding-right: 0;
            } 
                 
        }
      }
        }
        
        .journal-home-heading{
            width:100%;
            color:#000;
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid #e8e8e8;
            h5{
                margin: 0;
            }
        }
      .card-group {  
        .card{
            box-shadow: none;
            width: 100%;
            border: 0;           
            border-bottom: 1px solid #e8e8e8;
            padding: 2em 2em;
            margin: 0;
            float: left; 
            overflow:visible;
            .not-selected{
                color:#d6d6d6;
            }
            .article-status-locked{
                @extend .not-selected;
                cursor: default;
            }
                .article-status-open{
                color:#21c127;
                cursor: default;
            }                   
          .cover-img{ 
              float: left;                           
              margin-right: 1rem;
              width: 100px;
              img {
                display: inline-block;
                max-width: 100%;
                height: auto;
                max-height: 100px;
                padding: .25rem;
                line-height: 1.5;                       
                border: 1px solid rgba($text-color,0.1);
                border-radius: .25rem;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
              }                       
          }
          .title{
              font-size: 18px;
              font-weight: 300;              
              margin: 0px;               
                display: block;
                display: -webkit-box;
                height: 43.2px;           
                line-height: 1.2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                
          }
          .more-details{
              background: #fff;
              font-size: 12px;

              h2{
                  text-transform:none;
                  font-size: 18px;
                  line-height: 22px;
              }

              .title:hover{
                 /* cursor: pointer;
                  text-decoration: underline;*/
              }

              .btn-secondary {
                  color:#fff;
              }
             .content-type{
                // font-size: 0.88rem;
                color: rgba(53, 60, 63, 0.8);
                display: block;
                display: -webkit-box;
                height: 30.2px;           
                // line-height: 1.2;
                line-height: 16px;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                margin:0px;
                font-size: 14px;
                line-height: 18px;
             }
             .abstract{
                 p{
                    font-size: 14px !important;
                    font-family: 'Open Sans', Calibri, Tahoma, sans-serif;
                    // color: rgba(53, 60, 63, 0.6);
                    color: $text-color;
                    display: -webkit-box;
                    height: 54px;           
                    line-height:18px;
                    -webkit-line-clamp:3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin:7px 0px;
                    .abstract-text{
                        color:$text-color;
                        font-size: 14px;
                    }
                 }
             } 

             .issue-details{
                //  font-size: 0.8rem;
                    color: rgba(53, 60, 63, 1);
                    margin-top:5px;
                    font-size: 14px;
                    line-height: 18px;
             }
                     
              hr{ 
                 display: none;
                } 
            
             
              .sub-title, .page-no{
                  display: block;
                  padding: 3px 0;
              }
              .btn {
                margin: 0px;
                font-size: 14px;
                height: 34px;
                // padding: 0 14px;
                font-weight: 300;
                line-height: 18px;
                border-radius: 2px;                
              }
              hr{
                  margin: 0.5rem 0;
              }
             .icon-link {
                 margin: 5px 12px; 
                 display: inline-block;
                 &.article-status-open{
                     font-weight: 300;
                 }               
                 .material-icons{
                    vertical-align: middle;
                    font-size: 2rem;
                 }
             }
              .action-items {                  
                 float: right;
                 vertical-align: middle;
                 .select2-container{
                        min-width: 120px;
                        .select2-selection--single{
                            border-color: rgba($secondary-color,0.1);
                        }
                       
                    }                
                     a{ 
                      color:$primary-color; 
                      padding: 0 4px 0 3px;
                      border-right:1px solid lighten($secondary-color, 55%);
                      vertical-align: middle;    
                        &:hover, &.active{ 
                            color: $secondary-color;                      
                            }                        
                        &.icon-link {                               
                                padding: 2px 5px 0;
                                margin:0  5px;
                                display: inline-block;
                                color: $secondary-color; 
                                border-right: 0;
                                .material-icons{
                                    font-size: 2rem;
                                }
                            &:hover, &.active{
                            background:rgba(lighten($secondary-color,50%),.3);
                            border-radius: 2px;
                            color:$primary-color;
                            }
                        }
                     }
              }
               
              
          }
          
         
        }
        }  
    }

          
    }
     
        
        
    }
    


}