/*Css for container alignment starts*/
.container-fluid > .row {
    padding-right: 0;
    padding-left: 0; 
}
.left-panel{
    padding:0;
    background-color: #ffffff;    
    height: inherit;
    border-right: 1px solid #a5a5a5;    
    overflow-y: auto;
    overflow-x: hidden;
}
.right-panel{
    padding:0;
    background-color: #f3f3f3;    
    overflow: unset;
}
/*Css for container alignment starts*/
/*Styles for List view strats*/
       .list-style{
           padding-left:0px!important;

       }
       .list-items-style{
           display:block;
           width:100%;
           border-bottom: 1px solid #a5a5a5;           
           padding-bottom:6px;
           max-height:387px;
       }
        .list-items-style:hover{
            background: #62d4f6;
               background-image: -webkit-linear-gradient(top,  #6fd6f6, #6fd6f6);
                    background-image: -moz-linear-gradient(top, #6fd6f6, #87ddf7);
                    background-image: -ms-linear-gradient(top, #6fd6f6, #87ddf7);
                    background-image: -o-linear-gradient(top, #6fd6f6, #87ddf7);
                    background-image: linear-gradient(to bottom, #6fd6f6, #87ddf7);
        }
         .list-items-style:focus{
                    background:#007498;
                    background-image: -webkit-linear-gradient(top,  #0092bf, #007498);
                    background-image: -moz-linear-gradient(top, #0092bf, #007498);
                    background-image: -ms-linear-gradient(top, #0092bf, #007498);
                    background-image: -o-linear-gradient(top, #0092bf, #007498);
                    background-image: linear-gradient(to bottom, #0092bf, #007498);
                    outline:0px!important;
                }
        .selected-list-item{
            background:#007498 !important;
            background-image: -webkit-linear-gradient(top,  #0092bf, #007498) !important;
            background-image: -moz-linear-gradient(top, #0092bf, #007498) !important;
            background-image: -ms-linear-gradient(top, #0092bf, #007498) !important;
            background-image: -o-linear-gradient(top, #0092bf, #007498) !important;
            background-image: linear-gradient(to bottom, #0092bf, #007498) !important;
            outline:0px!important;
            display:block;
           width:100%;
           border-bottom: 1px solid #a5a5a5;
           padding-bottom:6px;
           max-height:387px;
           color: #ffffff;
        }
       .list-profile-photo{            
              height: 56px;
              width: 40px;
              margin:8px 12px 7px 20px;
              
               -webkit-box-shadow: 0 0 5px 2px #ccc;
               -moz-box-shadow: 0 0 5px 2px #ccc;
                box-shadow: 0 0 5px 2px #ccc;
                background: #ccc;
                border: 3px solid #ffffff;
       }
        /*style of profile pic on focus*/
          .list-items-style:focus .list-profile-photo{
               -webkit-box-shadow: 0 0 5px 2px #4d4d4d;
               -moz-box-shadow: 0 0 5px 2px #4d4d4d;
                box-shadow: 0 0 5px 2px #4d4d4d;
          }

       .list-data-first{
           float: right;
           padding-top: 12px;
           font-weight: 900;
           font-size: 18px; 
           font-family: sans-serif;
           width: 83%;
           text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
       }
       .list-data-second{
            /* position: absolute; */
             padding: 4px;
            margin:6px 0px 0px 0px;
            font-size: 12px;
            font-weight: 100;
            text-decoration: underline;
       }
        .list-data-second:hover{
            background-color:#b2e1ff;
            border-radius:4px;
        }
        
       .generic-form-list-view .list-data-first{
        float: left;
        }
        .generic-form-list-view .list-item-image {
            padding: 15px 10px 5px 20px;
            float: left;
        }
        .generic-form-list-view .list-style>div {
            height: 60px;
        }

        .button-style {
            background:  #cccccc;
            background-image: -webkit-linear-gradient(top,  #e1e1e1,#b3b3b3);
            background-image: -moz-linear-gradient(top, #e1e1e1, #b3b3b3);
            background-image: -ms-linear-gradient(top, #e1e1e1, #b3b3b3);
            background-image: -o-linear-gradient(top, #e1e1e1, #b3b3b3);
            background-image: linear-gradient(to bottom, #e1e1e1, #b3b3b3);
            float: right;
            margin-left: 12px;
            border-radius: 4px;
            border: 1px solid #797979;
            border-bottom: 1px solid #333333;
            outline: 0px;
            font-family: SANS-SERIF;
            font-size: 12px;
            color: #000000;
                    }
         .button-alignment{
                    margin:7px;
                    margin-right:0px;
                }        
         .button-style:focus{
                    outline:0px!important;
         }

        /* .disabled-button-style{*/
            .button-alignment > button:disabled{
              background:  #d9d9d9;
            background-image: -webkit-linear-gradient(top,  #d9d9d9,#cccccc);
            background-image: -moz-linear-gradient(top, #d9d9d9, #cccccc);
            background-image: -ms-linear-gradient(top, #d9d9d9, #cccccc);
            background-image: -o-linear-gradient(top, #d9d9d9, #cccccc);
            background-image: linear-gradient(to bottom, #d9d9d9, #cccccc);
            float: right;
            margin-left: 12px;
            border-radius: 4px;
            border: 1px solid #a5a5a5;
            outline: 0px;
            font-family: SANS-SERIF;
            font-size: 12px;
            color:#a5a5a5;
         }
            .btn-position{
                float:right;
            }
/*content of list starts*/

       .list-container{
         margin: 9px 0px 0px 14px;
         border: 1px solid #b3b3b3;
         background-color: #ffffff;
       }

       /*to remove top border for the first child*/
           .list-container :first-child {
                 border-top: none;
                }
.credentials-list{
    min-height: 78px;
}
       .credentials-list-item{
           display:block;
           height: 39px;
           border-top: 1px solid #a5a5a5;
           padding-top: 6px;
           color: #000000;
       }
        .credentials-btm-brdr{
            border-bottom: 1px solid #a5a5a5;
        }
         .credentials-list-item:hover{
             background: #d3d3d3;
                    background-image: -webkit-linear-gradient(top,  #60d2f3, #55c4e5);
                    background-image: -moz-linear-gradient(top, #60d2f3, #55c4e5);
                    background-image: -ms-linear-gradient(top, #60d2f3, #55c4e5);
                    background-image: -o-linear-gradient(top, #60d2f3, #55c4e5);
                    background-image: linear-gradient(to bottom, #60d2f3, #55c4e5);
        }
          .credentials-list-item:focus{ 
            background:#007498!important;
                    background-image: -webkit-linear-gradient(top,  #0092bf, #007498)!important;
                    background-image: -moz-linear-gradient(top, #0092bf, #007498)!important;
                    background-image: -ms-linear-gradient(top, #0092bf, #007498)!important;
                    background-image: -o-linear-gradient(top, #0092bf, #007498)!important;
                    background-image: linear-gradient(to bottom, #0092bf, #007498)!important;
                    outline:0px;
                    border-bottom: 1px solid #bfbfbf;
        }
        .active-credentials-list-item{ 
            background:#007498!important;
            background-image: -webkit-linear-gradient(top,  #0092bf, #007498)!important;
            background-image: -moz-linear-gradient(top, #0092bf, #007498)!important;
            background-image: -ms-linear-gradient(top, #0092bf, #007498)!important;
            background-image: -o-linear-gradient(top, #0092bf, #007498)!important;
            background-image: linear-gradient(to bottom, #0092bf, #007498)!important;
            outline:0px;
            border-bottom: 1px solid #bfbfbf;
            display:block;
            height: 39px;
            border-top: 1px solid #a5a5a5;
            padding-top: 6px;
            color: #ffffff;
        }
        .credential-name{
            font-family: sans-serif;
            font-size: 17px;
        }

          .credentials-list-item:focus .credential-name{
            color:white!important;
        }
      
       .credentials-img-style{
              height: 20px;
              padding-left: 6px;
              padding: 0px 3px 0px 17px;
       }
       .from-date-style{
                    float: right;
                     display: grid;
                     font-size: 10px;
                     font-weight: 800;
                     text-align: right;
                     padding-right: 17px;
        }
        .to-date-style{
            padding-top:1px;
        }
.no-list-msg{
    border: 1px solid #cccccc;
    width: 87%;
    margin: auto;
    margin-top: 8%;
    padding: 10px;
    font-size: 11px;
    box-shadow: 0 0 23px 6px #D8D8DA;
    border-radius: 5px;
    background-color: #fff7d2;
}
/*content of list ends*/
/*tool tip for list name starts*/
.tooltip.name-tool-tip .tooltip-inner {
          color: #000000;
          box-shadow: 0 6px 12px rgba(0,0,0,.175);
          min-width:200px;
        border-radius: 2px;
        background-color: #fff7d2;
        font-size: 10px;
        text-align: left;
        max-width: 300px;
        }
        /* Hide arrow */
        .tooltip.name-tool-tip .tooltip-arrow {
          display: none;
        }
/*tool tip for list name starts*/

.list-sub-data {
    position: absolute;
    padding: 4px;
    margin: 0px 0px 0px 0px;
    font-size: 14px;
    font-weight: bold;
}


/* media queries*/
@media (min-width:1100px) and (max-width:1200px){
    .list-data-first{
        width: 78%;
    }
}
@media (min-width:900px) and (max-width:1100px){
    .list-data-first{
        width:73%;
    }
}
@media (min-width:800px) and (max-width:900px){
    .list-data-first{        
        font-size: 15px;
        width:67%;
    }
    .credential-name{
        font-size: 14px;
    }
    .from-date-style{
        font-size: 8px;
    }
}
@media (min-width:500px) and  (max-width:799px){
    .list-data-first{        
        font-size: 14px;
        width:62%;
    }
    .credential-name{
        font-size: 13px;
    }
    .from-date-style{
        font-size: 8px;
    }
    .generic-form-list-view .list-item-image{
        padding: 15px 7px 5px 10px;
    }
}

@media (max-width:499px){
    .list-data-first{        
        font-size: 12px;
        width:58%;
    }
    .credential-name{
        font-size: 12px;
    }
    .from-date-style{
        font-size: 7px;
    }
    .generic-form-list-view .list-item-image{
        padding: 15px 7px 5px 10px;
    }
    .form-tabs-container>div{
        padding:0px !important;
    }
}