#homepage{
.contentInnerWrap{
    //background: #f7f7f7;
    .text-center{
        @media #{$small} {
            font-size: 1rem;
        }
         @media #{$xsmall} {
            font-size: 14px;
         }
       
    }
    h5{
        @media #{$xsmall} {
            font-size: 14px;
         }

    }
    span {
        display: inline-block;
        margin-right: 8px;
        .welcomeUser {
            width: 50px;
            height: auto;
        }
    }
    
    .homepagewrap{
        margin-bottom: 30px;
        clear: both;
        .dashboardSummary{
            position: relative;
            margin: 20px 0;
            h5 {
                padding: 10px 0;
            }
            .dashboard-summary-container {
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                margin: 20px 0;
    
                @media #{$medium} {
                    display: block;
                 }
                @media #{$small} {
                   display: block;
                }
              
            
                .dashboard-summary-tile {
                    width: calc(100%/5);
                    margin-right: 15px;
                    .dashboard-summary-value{
                        border-radius: 8px;
                        //box-shadow: 0 2px 4px 2px #f3d8d8;
                        background: $st-text-ninth;
                        overflow: hidden;
                        // padding: 12px;
                        padding: 5px 8px;
                        clear: both;
                        .dashicon{
                            float: right;
                            
                            img{
                                width: 22px;
                                 
                            }
                            svg{
                                font-size: 24px;
                                float: right;
                                margin-top: 2px;
                                //color: $st-secondary-bg;
                            }
                        }
                        .dashcount{
                            .count{
                                font-size: $st-font20;
                                font-weight: 600;
                                margin-bottom: 8px;
                            }
                            .title{
                                font-size: $st-font16;
                                font-weight: 400;
                            }
                        }
                        &.dashOpen{
                            // box-shadow: 0 1px 5px 0px #d0b7f1;
                            box-shadow: 0 2px 5px #00ADE3;
                            .dashicon{
                                svg{
                                    color: #00ADE3;
                                }
                            }
                            .dashcount {
                                .count {
                                    color: #00ADE3;
                                }
                            }
                        }
                        &.dashInProgress{
                            // box-shadow: 0 1px 5px 0px #d0b7f1;
                            box-shadow: 0 2px 5px #00e331;
                            .dashicon{
                                svg{
                                    color: #00e331;
                                }
                            }
                            .dashcount {
                                .count {
                                    color: #00e331;
                                }
                            }
                        }
                        &.dashOnHold{
                            box-shadow: 0 2px 5px $st-secondary-bg;
                            .dashicon{
                                svg{
                                    color:$st-secondary-bg;
                                }
                            }
                            .dashcount {
                                .count {
                                    color: $st-secondary-bg;
                                }
                            }
                        }
                        &.dashUAT{
                            box-shadow: 0 2px 5px #bc53e5;
                            .dashicon{
                                svg{
                                    color:#bc53e5;
                                }
                            }
                            .dashcount {
                                .count {
                                    color: #bc53e5;
                                }
                            }
                        }
                        &.dashMilestone{
                            box-shadow: 0 2px 5px #fbb45f;
                            .dashicon{
                                svg{
                                    color:#fbb45f;
                                }
                            }
                            .dashcount {
                                .count {
                                    color: #fbb45f;
                                }
                            }
                        }
                    }  
                    &:hover {
                        .dashcount {
                            .count {
                                text-decoration: underline;
                            }
                        }
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
        .dashboard-content {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            .dash_innerbox {
                background: $st-text-ninth;
                width: calc(100%/2);
                margin-right: 15px;
                padding: 15px;
                min-height: 370px;
                box-shadow: 0 2px 5px $st-secondary-bg;
                border-radius: 10px;
                .dash_innercontent {
                    .sec-heading{
                        display: flex;
                        justify-content: space-between;
                        color: $st-text-primary;
                        div {
                            font-size: 16px;
                            font-weight: 600;
                        }
                        a{
                            font-size: 14px;
                            &:hover{
                                text-decoration: underline;
                                color:$st-text-third;
                            }
                        }
                    }
                    .sec-list{
                        ul{
                            margin: 0;
                            padding: 0;
                            li{
                                display: block;
                                margin: 10px 0 0 0;
                                border-bottom: 1px solid #f5f0f0;
                                &:hover{
                                    background-color: #f1f4f5;
                                }
                                &:last-child {
                                    border-bottom: none;
                                }
                                .taskdate{
                                    span{
                                        float: right;
                                    }
                                }
                                p{
                                    margin: 0 0 3px 0;
                                }
                            span{
                                position: relative;
                                bottom: 4px;
                            }
                            }
                        }
                    }
                }
            }
        }
       .userProjectSnapshot {
            //background: $st-text-ninth;
            width: 100%;
            //padding: 20px;
            //box-shadow: 0 2px 5px $st-secondary-bg;
            //border-radius: 8px;
             margin: 20px 0;
             position: relative;
             top: 20px;
            .snapshotHeader {
                overflow: auto;
                .projectTable{
                    thead {
                        th {
                            position: sticky;
                            top: 0;
                            z-index: 1;
                            width: 25vw;
                            background: white;
                            &:first-child {
                                position: sticky;
                                left: 0;
                                z-index: 2;
                            }
                        }
                    }
                    tbody {
                        th {
                            position: sticky;
                            left: 0;
                            z-index: 1;
                            .nav-link {
                                text-decoration: none;
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                    th {
                        text-transform: uppercase;
                        white-space: nowrap;
                        z-index: 1;
                        position: sticky;
                    }
                    td {
                        white-space: nowrap;
                        font-weight: 500;
                    }
                }
                &.gantt-chart {
                    // overflow-x: scroll;
                    // max-width: 95%;
                    max-width: 100%;
                    max-height: 550px;
                    overflow-x: auto;
                    margin: 0 auto;
                    padding: 0;
                    clear: both;
                    .table-wrapper {
                        overflow-x: auto;
                    }
                    table {
                        border-collapse: collapse;
                        width: 100%;
                        margin-bottom: 5px;
                        thead {
                            @media #{$small} {
                                position: relative!important;
                            }
                        }
                        th, td {
                            border: 1px solid #ddd;
                            text-align: center;
                            padding: 8px 12px;
                            // min-width: 35px;
                            min-width: 50px;
                        }
                        th {
                            background-color: #0a3444;
                            color: $st-text-ninth;
                            font-size: 12px;
                            @media #{$small} {
                                position: relative!important;
                            }
                        }
                        td{
                            .nav-link {
                                background: none!important;
                                padding: 0;
                                //color: $st-text-primary;
                                display: block;
                                font-size: 15px;
                                font-weight: normal;
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                            li{
                             list-style: none;
                             display: flex;
                             margin-left: 15px;
                             font-size: 14px;
                            }
                            @media #{$small} {
                                width: 300px!important;
                            }
                        }
                      
                
                        tr{                  
                              td{
                              :nth-child(even){
                                  background: #f3ebeb;
                              }
                              :nth-child(odd){
                                background:$st-text-ninth;
                            }
                              }
                               
                            
                        }
                    
                    }
                    .item {
                    font-weight: bold;
                    }
                    .month {
                    background-color: #e6e6e6;
                    }
                    .completed {
                    background-color: #b3ffb3;
                    }
                    .pending{
                        background-color: $st-secondary-bg;
                    }
                    .archiveDates {
                        background-color: #ededf6;
                    }
                    @media #{$small} {
                        padding: 10px 0 0 0;
                    }
                }
            }
            .filterOptions {
                .modelform {
                    margin: 10px 0 30px 0;
                    display: flex;
                    .filterFields {
                        width: calc(100%/2);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 25px;
                        margin-bottom: 0!important;
                        label {
                            width: 30%;
                            font-weight: 600;
                            margin-bottom: 0;
                            @media #{$medium} {
                                width: 40%;
                            }
                        }
                        @media #{$small} {
                            width: 100%;
                            margin-bottom: 10px!important;
                        }
                    }
                    @media #{$small} {
                       display: block;
                       margin: 10px 0 0 0;
                    }
                }
            }
       }
    }
   
    .wave {
        animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
        animation-duration: 2.5s;        /* Change to speed up or slow down */
        animation-iteration-count: infinite;  /* Never stop waving :) */
        transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
        display: inline-block;
      }
      
      @keyframes wave-animation {
          0% { transform: rotate( 0.0deg) }
         10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
         20% { transform: rotate(-8.0deg) }
         30% { transform: rotate(14.0deg) }
         40% { transform: rotate(-4.0deg) }
         50% { transform: rotate(10.0deg) }
         60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
        100% { transform: rotate( 0.0deg) }
      }
}
.selectexam{
    padding: 0 40px;
    margin-bottom: 40px;
    .borderLine {
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .dropdownRight {
        //display: inline-block;
        float: right;
    }
}
.barChartWrap{
    display: flex;
    justify-content: space-around;
    padding: 30px;
    // .barchart{
    //    display: flex;
    // }
    .scorecard{
        background: #ffffff;
        box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.8);
        border-radius: 8px;       
        padding: 10px;
        text-align: center;
        h5{
            white-space: nowrap;
            // display: flex;
            // justify-content: space-around;
        }
    }
}
}