// GLOBAL STYLES
/* Sticky footer styles
-------------------------------------------------- */
html,
body {  
  min-height: 100%;
  background: $body-bg;
  color:$text-color;  
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -50px;
  /* Pad bottom by footer height */
  padding: 0 0 70px; 
 
}
@media (min-width: 1280px) and (max-width:1920px) {  
  .main-content-wraper {
    width: 1280px;
    padding: 0;
    h1{
        &.page-title{
            font-size: 24px;
            line-height: 28px;
        }
    }
    .myaccount{
        .right-col{
            table{
                &.table-bordered{
                    tbody{
                        tr{
                            td{
                                a{
                                    color: #252525;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .cp_back_to_bookshelf{
        a[href="/bookshelf"]{
            font-weight: bold; 
        }
    }
  }
}

.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
// Z-levels
.z-depth-0 {
    box-shadow: none !important;
}

.z-depth-1 {
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1), 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
}

.z-depth-1-half {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.hoverable {
    transition: box-shadow .55s;
    box-shadow: 0;
}

.hoverable:hover {
    transition: box-shadow .45s;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

// Normalize
a {
    color: $link-color;
    text-decoration: none;
    cursor: pointer;
    // Gets rid of tap active state
    -webkit-tap-highlight-color: transparent;
    &:hover,
    &:focus {
        text-decoration: none;
        color: $link-hover-color;
    }
}

ul {
    padding: 0;
    list-style-type: none;
    li {
        list-style-type: none;
    }
}
.nav-link{
    font-family: "Arial", sans-serif;
    letter-spacing: 1px;
}
.jumbotron,
.card,
.label,
.alert,
.nav .nav-link,
.navbar-toggler,
.navbar,
.breadcrumb,
.page-item:last-child .page-link,
.page-item:first-child .page-link,
.pagination-lg .page-item:last-child .page-link,
.pagination-lg .page-item:first-child .page-link,
.pagination-sm .page-item:first-child .page-link,
.pagination-sm .page-item:last-child .page-link,
.list-group .list-group-item,
.modal-content,
.tooltip-inner,
.popover,
.dropdown-menu,
.input-group-addon,
.file-custom,
.card .card-header {
    border-radius: 0;
}

.jumbotron,
.card,
.list-group,
.popover,
.navbar,
.dropdown-menu,
.pagination {
    @extend .z-depth-1;
}

.popover,
.input-group-addon,
.dropdown-menu {
    border: 0;
}

// Modal footer buttons fix
.modal-footer .btn + .btn {
    margin-bottom: 6px;
}

// Shifting bacground fix
body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

body {
    overflow: auto !important;
}

// Card columns fix - cut edges of the cards
.card-columns .card {
    margin: 7px 0;
}

// Parallax
.parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;
}
//Popover
.popover-title{
    background:lighten($secondary-color,5%);
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
}
// search
.filter-search-form {
        margin: 0px;
        padding: 0;
        display: inline-block;
        vertical-align: middle;
        
        .input {
            padding-right: 25px;
            padding-right: 26px \9;
            padding-left: 5px;
            padding-left: 4px \9;
            /* IE7-8 doesn't have border-radius, so don't indent the padding */
            margin: 0 0 0 2px;
            border-radius: 2px;
            -webkit-transition: width  0.2s ease-in-out;
            -moz-transition:width  0.2s ease-in-out;
            -o-transition: width  0.2s ease-in-out;
            transition: width  0.2s ease-in-out;
            width: 100px;
            height:1.6rem;
            vertical-align: top;
            border: 1px solid lighten($primary-color,67%);
            background: #fff;
            float:left;
             @media(max-width:568px){  
                 width: 255px;
             }
        }
         button {
            border: 0;
            background: none;
            /** belows styles are working good */
            padding: 4px 0px 0;       
            position: relative;       
            /* IE7-8 doesn't have border-radius, so don't indent the padding */
            margin-bottom: 0;            
            border-radius: 2px;
            margin-left: -26px;
            .material-icons {
                font-size: 1.2rem;
                color:lighten($secondary-color,40%);
            }
        
        }
 
        .input:focus + button {
            z-index: 3;
            color: $secondary-color;   
        }   
        .input:focus{
            width: 250px;
            box-shadow: none !important;
           border: 1px solid lighten($primary-color,67%) !important;           
                   
        }   
    } 

// Scrollspy free
.nav-pills {
    &.horizontal-spy {
        .nav-item {
            .active {
                border-bottom: 2px solid $primary-color;
                border-left: none;
            }
            &:hover {
                background-color: transparent;
                color: $primary-color;
                font-weight: 500;
                border-left: none;
            }
        }
    }
}

//Nav normalize
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
    background-color: transparent;
    color: #000;
}

//Disabled cursor
.disabled {
    cursor: not-allowed!important;
}

//Video responsive
.video-fluid {
    height: auto;
    width: 100%;
}

//Media improvement
.media {
    img {
        @extend .z-depth-1-half;
    }
}

//Equal height columns
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

// Display Inline Block
.display-inline-block {
    display: inline-block;
}
// Filter Drop Down
.filter-dropdown {
    .dropdown-menu{
        padding: 12px;
    }
}
// Check box
.c-input>input:checked~.c-indicator{
    background-color: $primary-color;
}

    // c-select custom
    .c-select {
     border-color:lighten($secondary-color,35%);  
     &+.c-select{
         margin-left: 5px;
     }
    }
    
    // Modal align center
   .modal {
    height: 100%;
        .modal-header{
                padding: 10px 15px;
                //border-bottom: 2px solid lighten($secondary-color,30%);  
                .modal-title{
                    font-weight: 300;
                    font-size: 1.2rem;
                }
            }
    .close {        
        margin: -20px -24px 0 0;
        background-color: #fff;
        opacity: 1;
        border-radius: 50%;
        width: 24px;
        height: 24px;     
        color:$text-color;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        position: absolute;
        top: 10px;
        right: 10px;
        }
    .modal-dialog {
        top: 50% !important;
        margin-top:80px;
        margin-bottom:0;
        &.modal-lg{
            @media (min-width: 768px){
                width: 90%;
            }
        }
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {        
       // transform: scale3d(0.3, 0.3, 0.3);
         -webkit-transform: scale3d(.3, .3, .3)  translateY(-100%) !important;
        -ms-transform: scale3d(.3, .3, .3)  translateY(-100%) !important;
        transform: scale3d(.3, .3, .3) translateY(-100%) !important;
        opacity: 0;
        visibility: hidden;
        transition-property: all;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;    
    }
    &.in .modal-dialog {      
         -webkit-transform:scale3d(1, 1, 1) translateY(-50%) !important;
        -ms-transform:scale3d(1, 1, 1) translateY(-50%) !important;
        transform:scale3d(1, 1, 1) translateY(-50%) !important;
        opacity: 1;
        visibility: visible;
       
        
        
    }
    .modal-content{
        border-radius: 4px;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
        a{
            &.btn-secondary{
                background:#e65019;
                height: 36px;
                font-weight: 300;
                border-radius: 2px;
                &:hover{
                    background: #f1602b !important;
                }
                &:focus{
                    background: #f1602b !important;
                }
                &:active{
                    background: #f1602b !important;
                }
            }
        }
        .modal-body{
            .list-group{
                box-shadow: none;
                a{
                    &.active{
                        background: none;
                        border: none;
                        box-shadow: none !important;
                        /* border-radius: 2px; */
                        color: #252525;
                        &.btn-primary{
                            @media(max-width:576px){
                                width: 100%;
                                border-radius: 2px;
                                height: 36px; 
                            }
                        }
                    }
                    &.btn-secondary{
                        width: 100%;
                        margin-top: 2px !important;
                        border-radius: 2px;
                        height: 36px;
                    }
                }
            }
            button{
                &.btn-link{
                    background: #e9e9e9;
                    height: 36px;
                    color: #252525;
                    border: 1px solid #c7c7c7;
                    border-radius: 2px;
                    font-weight: 300;
                    &:hover{
                        background: #d9d9d9;
                        text-decoration: none;
                    }
                }
                &.btn-primary{
                    background: #e65019;
                    height: 36px;
                    color: #252525;
                    font-size: 14px;
                    font-weight: 300;
                    border-radius: 2px;
                    font-weight: 300;
                    color: #fff;
                    &:hover{
                        background: #f1602b;  
                    }
                }
            }
        }
        .modal-footer{
            button{
                &.btn-link{
                    background: #e9e9e9;
                    height: 36px;
                    color: #252525;
                    border: 1px solid #c7c7c7;
                    border-radius: 2px;
                    font-weight: 300;
                    &:hover{
                        background: #d9d9d9;
                        text-decoration: none; 
                    }
                }
                &.btn-primary{
                    background: #e65019;
                    height: 36px;
                    color: #252525;
                    font-size: 14px;
                    font-weight: 300;
                    border-radius: 2px;
                    font-weight: 300;
                    color: #fff; 
                    &:hover{
                        background: #f1602b !important;  
                    }
                }
            }

        }
        &.loginRegister{
            background: #ffffff;
            margin: auto;
            max-width: 500px;
            transition: transform .3s;
            width: 100%;
            border-radius: 0px;
            padding: 10px 15px;
            position: relative;
            top: 20%;
            h2{
                &.modal_title{
                    font-size: 20px;
                }
            }
            button{
                &.btn-close{
                    background: none;
                    border: none;
                    cursor: pointer;
                    font-family: arial;
                    font-size: 1.5em;
                    font-weight: 800;
                    line-height: 1;
                    padding: 0;
                    position: absolute;
                    right: .4em;
                    top: .4em;
                    z-index: 2;
                    color: #545454;
                    &:hover{
                        color: #f1602b;
                    }
                }
            }
            .modal-body{
                ul{
                    li{
                        &#signup{
                            display: block;
                        }
                    }
                }
                // .tab-content{
                //     .tab-pane{
                //         display: block !important;  
                //     }
                // }
            }
            .login-register{
                .tab-content{
                    .tab-pane{
                        form{
                            ._loginError{
                                display: block;
                                margin-top: 45px;
                            }
                        }
                    }
                }
            }
          }
    }
}

// .breadcrumb custom
.breadcrumb{
   border-bottom:1px solid lighten($primary-color,67%);
   padding: 5px 0;
   margin: 0 0 10px 0;
   font-size: 13px;
}

.empty-section-msg {   
    width: 100%;
    min-height: 450px;
    position: absolute;    
    h1{ 
        font-size: 24px;       
        position: absolute;        
        width: 400px;
        text-align: center;
        height: 200px;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        font-weight: normal;
        span{
            font-size: 80px;
            font-weight: 300;
            display: block;
            clear: both;
            color:color("$yellow","darken-4");
        }
        @media (max-width:560px) {
            width:90%;
        }
        small{
            font-size: 24px;
            line-height: 28px;
            font-weight: 300;
            text-align: center;

    }
}
}

.viewInsideLink{
    position: absolute;
    bottom: 0;
    background:rgba(color('shades','black'),0.7);
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: color('shades','white');
    padding: 3px; 
    &:hover{
        background: rgba($primary-color,0.7);
        color: color('shades','white');
        
    }
}
.login-register {
    .nav-tabs{
       border-bottom: 1px solid #eee; 
       position: relative;       
       .nav-link {
           border: 0;
           padding: 0.7rem 1.2rem;
           font-size: 0.85rem;
           font-weight: 300;
           text-transform: uppercase;
           color: $text-color;
           font-size: 12px;
           line-height: 18px;
           &:hover {
               color:$link-hover-color;
           }
           &.active{
            border-bottom: 2px solid color('shades','white');
               color: $link-hover-color;
           }
           
       } 
    }
    input{
        height: 1.2rem !important;
        padding-left: 7px;
        padding-right: -7px;
    }
    .c-input{
        padding-left:1.8rem;
        padding-top: 4px;
        position: relative;
    }
    .c-indicator {    
        width: 1.4rem;
        height: 1.4rem;
        background-color: color('shades','white');
        border: 1px solid rgba(46, 55, 75, 0.2);
        box-shadow: none;               
    }
    input:checked ~ .c-indicator {
        background-color:$primary-color;
        border: 1px solid rgba($primary-color, 0.1);
    }
    .tab-pane {
        padding-top: 15px;
        .md-form{
          margin:0 1.5rem 1.5rem;  
          img{
              margin: 0px 0 -20px 80px;
          }                       
        }
        .view-forgot-password {
           padding-top: 12px;
           float: right;
           visibility: visible !important;
           small{
               &.pull-right{
                font-size: 14px;
                color: #e65019;
                &:hover{
                    color: #f1602b !important;
                  }
               }
           }
           @media(min-width:320px) and (max-width: 560px){
               top: 20px;
           }
        }
        button{
            &.btn-link{
                background: #e9e9e9;
                height: 36px;
                color: #252525;
                border: 1px solid #c7c7c7;
                border-radius: 2px;
                font-weight: 300;                 
                margin-top: 25px;
                &:hover{
                    background: #d9d9d9;
                    text-decoration: none;
                }
    }
    }
        button{
            &#new-register{
                background: #e65019;
                height: 36px;
                color: #252525;
                border-radius: 2px;
                font-weight: 300;
                color: #fff;
                margin-top: 25px;
                &:hover{
                    background: #f1602b;
                }
    }    
    }

        button {
            &#sendPassword {
                border-radius: 2px;
                margin-top: 25px;
            }
        }
        form{
            &.login-form{
                .text-lg-center{
                    // font-size: 10px;
                    text-align: center;
                    @media(max-width:544px){
                        font-size: 10px;
                        text-align: center;
                    }
                }
            }
        }
    }
    .forgot-password-form {
        display: none;
    }

    button {
        &#new-login {
            background: #e65019;
            color: #fff;
            height: 36px;
            border-radius: 2px;
            font-weight: 300;
            font-size: 14px;
            line-height: 18px;
            margin-top: 25px;
            &:hover {
                background-color: #f1602b;
                color: #fff;
            }
        }
    }

    .btn-close{
        background: none;
        border: none;
        cursor: pointer;
        font-family: arial;
        font-size: 1.5em;
        font-weight: 800;
        line-height: 1;
        padding: 0;
        position: absolute;
        right: .4em;
        top: .4em;
        z-index: 2;
        &:hover{
            color: #f1602b;
        }
    }
}
.modal-stack-view-details{ 
    font-size: 13px;
    .thumb-wrapper{
         float: left;
         margin: 0 1rem 0 0;
         position: relative;
         @media (max-width:568px){
                    display: none;
                }
        }
    .info-wrapper{
        width: 65%;
        margin-left: 35%;
        @media (max-width:568px){
                   width: 100%;
                   margin: 0;
                }
    }
        .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:#555555; 
                      padding: 0 3px 0 3px;
                      border-right:1px solid lighten($secondary-color, 55%);
                        &:hover, &.active{ 
                            color: $secondary-color;                      
                            }                        
                        &.icon-link {
                        padding: 2px 5px 0;
                        margin:0  2px;
                        display: inline-block;
                        color: $secondary-color; 
                        border-right: 0;
                            &:hover, &.active{
                            background:rgba(lighten($secondary-color,50%),.3);
                            border-radius: 2px;
                            color:$primary-color;
                            }
                            .viewDetails{
                                vertical-align: top;
                                display: inline-block;
                                line-height: 25px;
                            }
                        }
                        
                     }                
                     .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($secondary-color,45%);
                             h3{
                                 font-size: 14px;
                                 font-weight: 300;
                                 margin-bottom: 10px;
                             }
                             .md-form {
                                 margin-bottom: 0px;
                                 label{
                                     font-size: 12px;                                     
                                 }
                                 .form-control {
                                     font-size: 12px;
                                     background: lighten($secondary-color,75%);                                    
                                     height: 20px;
                                 }
                                 textarea.md-textarea {
                                   min-height: 1rem;  
                                   background: lighten($secondary-color,75%);
                                   padding: 5px 0;
                                   font-size: 12px;
                                 }
                             }
                         }
                     }
                     .addToCart{
                          .material-icons{
                                    font-size: 1.2rem;
                                    line-height: 16px;
                                    vertical-align: middle;
                                }
                     }
              }
}
.error{
    color: red;
    font-size: 12px;
}
 .pincodeError{ display:none; } 
.load-more-books {
    width: 200px;
    margin: -20px auto 15px;
}
.new-ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
    span {
    font-size: 10px;
    font-weight: 300;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 70px;
    display: block;
    background: $primary-color;
    background: linear-gradient($primary-color 0%, darken($primary-color,15%) 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 7px; left: -17px;
        &::before {
        content: "";
        position: absolute; left: 0px; top: 100%;
        z-index: -1;
        border-left: 3px solid darken($primary-color,15%);
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-top: 3px solid darken($primary-color,20%);
        }
        &::after {
        content: "";
        position: absolute; right: 0px; top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-right: 3px solid darken($primary-color,15%);
        border-bottom: 3px solid transparent;
        border-top: 3px solid darken($primary-color,20%);
        }
    }
}

.remove-scroll {
    overflow: hidden !important;
}

#rc_border {
    width: 50%;
    margin: 0 auto; }
    #rc_border .xboxcontent .form_cont .errorMessage1 {
      padding: 24px 28px 24px 36px;
      background: #fff;
      border: 1px solid #c7c7c7;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
      border-left: 3px solid #db0020;
      background-image: url("/2.0/themes/fluid/public/images/alert.png") 40px 25px no-repeat; }
      #rc_border .xboxcontent .form_cont .errorMessage1 span {
        color: #252525 !important;
        font-size: 14px !important; }




        // ------------19-03-2019----------------



        a:focus {
            outline: 1px dotted #000000 !important;
          }
          
          .c-input > input {
            position: absolute;
            z-index: -1;
            left: 1px;
            top: 1px;
            width: 19px;
            height: 19px;
            opacity: 0;
          }
          
          input[type="checkbox"]:focus {
            outline: 2px solid #e65019;
          }
          
          #headerNotificationDropdown:focus i, .header-user-info:focus i {
            color: #e65019 !important;
          }
          
          #myshelves .radShelf {
            position: relative;
            top: 2px;
            margin-right: 10px;
            > input {
              width: 100%;
              position: absolute;
              left: 0px;
              opacity: 0;
            }
          }
          
          .bookshelf .tab-content .create-bookshelf {
            .input {
              padding-right: 0px !important;
              border: 0px !important;
              padding-left: 0px !important;
            }
            button {
              margin-left: 0px !important;
            }
          }
          
          .titles-wrapper {
            border: 0px;
            width: 100%;
          }


          #header.fixed-header .header-top-right-links ul li a{
            color: #e65019;
          }

          #header.fixed-header .header-top-right-links .reader-welcome-message{
            color: #e65019;
          }

          #header.fixed-header #ipc-logo-reader h1 a img{
            height: 35px;
          }


          @media(min-width:768px) and (max-width:1024px) {
          select{
              &.form-control{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url(../images/down-arrow.png) no-repeat 190px 12px;
          }
        }
    }