.navbar-background{
    background: #00a8b1 !important;
}
.hori-navbar-background{
    background: #fff!important;
}

.todo-item {
    cursor: pointer;
    animation: fadeIn .5s linear;
    animation-fill-mode: both;
    position: relative;
    padding: .8rem 1rem .4rem .5rem;
    border-top: 1px solid #E4E5EC;
}
.sidebar .todo-sidebar .todo-app-menu{
    width: 100%;
    padding: .5rem 0;
}

.sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list .list-group .list-group-item.active {
    background-color: #666ee8!important;
}

.sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list .list-group .list-group-item {
    box-shadow: none;
    padding: .8rem 1rem;
    color: #6b6f82;
    font-weight: 500;
    background-color: transparent;
    border-radius: .25rem!important;
}

.video-column{
    position: relative;
    left: 0px;
    width: 100px;
    height: 50px;
}

.video-column .video-inner{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.video-column .video-inner:before{
    position: absolute;
    content: '';
    background: rgba(67, 179, 217, 0.2);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.video-column .video-inner a{
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    font-size: 30px;
    color: #f8485f;
    text-align: center;
    border-radius: 50%;
    -webkit-animation: pulse 3s infinite;
    -o-animation: pulse 3s infinite;
    animation: pulse 3s infinite;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.3),
        0 0 0 30px rgba(255, 255, 255, 0.1);
    }
}






/* new styles*/

.learning-rotaters {
    border-radius: 50rem;
    color: #fff;
    padding-top: 2px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgb(0 0 0 / 10%);
   background: #3582e8;


}


.primary-color-one {
    background-color: #f5f5f5!important;
    color: #666EE8!important;
    font-size: 12px;
   
  


}

.danger-color-one {
    background-color: #f5f5f5!important;
    color: #ff4961!important;
    font-size: 12px;
    
    

}
.badge-color-one {
    color: #1E9FF2!important;
    background: #f5f5f5!important;
    font-size: 12px;
   


}
.badge-dark-one {
    background-color: #f5f5f5!important;
    color: #ff9149!important;
    font-size: 12px;
   
   
}

.today-absents{
    background-color:#f5f5f5 !important;
    color: #666EE8!important;
    border-radius: 5px !important;
    padding: 10px 15px !important;
}
.today-presents{
    background-color: #f5f5f5 !important;
    color: #ff9149!important;
    border-radius: 5px !important;
    padding: 10px 15px !important;
}

.li-span li .badge{
    font-size: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1rem;
    min-width: 40px;
}
.li-span li h6{
    font-family: poppins;
}
span.badge.badge-default.badge-pill.bg-primary.float-right.badgers-oners{
    background-color:rgb(205 208 242 / 45%)!important;
    color: #0b18e2!important;
}
span.badge.badge-default.badge-pill.bg-info.float-right.badgers-twoers.ng-binding {
    color: #0a95ef!important;
    background: rgb(191 215 231 / 45%)!important;
}
span.badge.badge-default.badge-pill.bg-warning.float-right.badgers-threes.ng-binding { 
    background-color: rgb(224 202 188 / 45%)!important;
    color: #d36925!important;
}
span.badge.badge-default.badge-pill.bg-success.float-right.badgers-fours.ng-binding {

    background-color:rgb(190 237 220 / 45%)!important;
    color: #048c5c!important;
}
span.badge.badge-default.badge-pill.bg-danger.float-right.badgers-fives.ng-binding {
    background-color:rgb(226 209 211 / 45%)!important;
    color: #e4132e!important;
}
span.badge.badge-default.badge-pill.bg-danger.float-right.badgers-sixers.ng-binding {
    background-color:rgb(217 218 241 / 45%)!important;
    color: #121ee0!important;
}

li.flushers-items.list-group-item {
    /* background: #f9f0ff; */
    border: none !important;
    background: none;
   
}
thead.sectioners-finals {
    background: #f1f2f7;
    border-bottom-width: 1px;
}
td.text-truncate.trucaters-one {
    color: #2dc58c;
}

a.rotaters-clock {
    padding: 4px !important;
}

/* .main-menu.menu-light .navigation li a:hover {
    color: #00acc1 !important;
    transition: all 0.2s ease;
} */
.vertical-compact-menu .main-menu .navigation > li > a > span:hover {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    /* color: #00acc1 !important; */
}
.day-month-padding a{
    padding:0.5rem 2rem;
}
button.btn.btn-outline-white.change-academics {
    background: linear-gradient(to left, #f4d02b, #e1940e);
    color: #fff;
    font-weight: 700;
}
/* ul#main-menu-navigation li a {
    color: #fff;
} */

.card-header.parent-dashboards-color {
    background-image: linear-gradient(45deg, #d9376d, #ffa4cb);
}
.card-header.parent-dashboards-one {
    background-image: linear-gradient(45deg, #d6740e, #ffd1a4);
}
.card-header.parent-dashboards-two {
background-image: linear-gradient(45deg, #4878ff, #a4bcff);
}





@media (max-width: 767px) {
 

.fc button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    height: 2.1em;
    padding: 0 0.6em;
    font-size: 12px !important;
    white-space: nowrap;
    cursor: pointer;
}
.ms-container .ms-selectable, .ms-container .ms-selection {
    background: #fff;
    color: #555555;
    float: left;
    width: 100% !important;
}
.col-md-3.offset-md-4.col.align-self-end.margin-left-end {
    margin-left: 0% !important;
}
div#demotion_label\ enders {
    margin-left: 0% !important;
}
li#first_language_item {
    margin-bottom: 12px;
}
li#second_language_item {
    margin-bottom: 12px;
}
li#third_language_item {
    margin-bottom: 12px;

}
li.listers-one {
    margin-bottom: 15px !important;
}
ul.list-inline.mb-0.dropdown-issues-rectify {
    display:block !important;
}
}

.row.print-head {
    overflow: auto !important;
}
.categoryone .select2-container{

    width:100% !important;
}

/*modal-popup-css*/


    button.details {
    width: 64px;
    height: 38px;
    position: relative;
    left: -5px;
    border: 1px solid #DDE1E4;
    border-left: none;
    background-color: #11E8EA;
    cursor: pointer;
    }
    .bell-icon {
    width: 30px;
    height: 30px;
    background: #FF9D56;
    border-radius: 20px;
    float: right;
    }
    .bell-icon:hover +  .reminder-icon  {

     opacity: 1;
    }
 
    i.fa.fa-bell {
    margin-left: 9px;
    margin-top: 8px;
    color: #fff;
    }
    .ticket {
    color: #93A0A7;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    }
    .ticket-no{
    color:#263238;
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    }
    .reminder-icon{
    color: #636363;
    margin-top: 37px;
    background: #F5F5F5;
    width: 168px;
    text-align: center;
    padding: 5px;
    opacity: 0;
  
    }
    .zoomin img {
        height: 50px;
        width: 50px;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
        transition: all 4s ease;
      }
      .zoomin img:hover {
        width: 300px;
        height: 300px;
      }
    /* Modal Content (image) */
    .modal-content.two {
    margin: auto;
    display: block;
    width: 20%;
    max-width: 700px;
    }
    /* Add Animation */
    .modal-content.two {  
    animation-name: zoom;
    animation-duration: 0.6s;
    }
    @keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
    }
    /* The Close Button */
    .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    }
    .close:hover,
    .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
    }
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
    .modal-content {
    width: 100%;
    }
    }
    .comments-design {
    background: #F5F8FF;
    border-radius: 5px;
    padding: 12px;
    }
    .every-para {
    line-height: 25px;
    }
    #Search {
    position: relative;
    display: inline-block;
    }
    input[type=text]:focus {
    outline: 1px solid #93A0A7;
    }
    input[type=text] {
    position: relative;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    border: 1px solid #93A0A7;
    border-radius: 5px;
    font-size: 16px;
    background-color: white;
    padding: 2px 40px 2px 10px;
    }
    .submit-image {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 5px;
    right: 11px;
    border: none;
    background: #FF79DA;
    border-radius: 50px;
    color: white;
    display: block;
    cursor: pointer;
    }
    img.image-submit {
    margin-left: 11px;
    margin-top: 11px;
    }
    .detailers{
    border:none;
    }
    .content-sections {
     display: flex;
     justify-content: space-between;
 }
 button.reject-details {
     background: #FFECEC;
     border-radius: 50px;
  
     color: #F15454;
     margin-top: auto;
     width: 100px;
     height: 35px;
     border: none;
 }
 button.reject-details:focus {
 
 outline:none;
 }
 button.process-details {
     background: #EBF6FF;
     border-radius: 50px;
     width: 100px;
     height: 35px;
     border: none;

    color: #407BFF;
    margin-top: auto;
 }
 button.process-details:focus {
 
 outline:none;
 }
 .reject-process-details {
    display: flex;
    justify-content: end;
    gap: 15px;

}
 button.save-button {
     background: #407BFF;
     border-radius: 50px;
     width: 200px;
     height: 45px;
     color: #fff;
 }
 button.save-button:focus {
 outline:none
 
 }
 button.cancel-button:focus {
 
     outline:none  
 }
 button.cancel-button {
 
     width: 200px;
     border: 1px solid #93A0A7;
     border-radius: 50px;
     height: 45px;
     background: #FFFFFF;
 }
 .end-button-details {
     text-align: center;
 }
 .textures {
    background: #F5F8FF;
    border: none;
    font-size: 13px;
    width: 100%;
    border-radius: 10px;
    height: 65px;
    }
    .textures:focus {
    outline:none;
    }
    .viewers {
        color: #407BFF;
        border: 1px solid #DDDDDD;
        background: none;
        border-radius: 50px;
        }
        .viewers:focus {
        outline: none;
        }
        .head-colors {
            color: #333 !important;
            }
            h4.wallet-text{
            color: #407BFF !important;
            font-weight: 600 !important;
            font-family: poppins !important;
            line-height: 60px !important;
            font-size: 25px !important;
            }
          
            .wallet-image{
            text-align: center;
            }
            .sponsor-counter{
            Width:50%; 
            background: aliceblue;
            border-radius: 10px;
            }
            th.border-top-0 {
            color: #252525;
            }
         
            .overall-sponsors-count {
            display: flex;
            padding: 12px 15px;
            gap: 15px !important;
            }
            h6.sponsors-count {
            font-size: 15px;
            color: #000;
            font-weight: 600;
            height: 35px;
            }
            span.sponsor-counter {
            font-size: 25px;
            font-weight: 600;
            color: #354BB4;
            }
            .paycont.overflow-auto.p-1.reporters {
                display: flex;
                 align-items: center;
                 background: none;
                 margin-bottom: -19px;
             }
             p.heading-principal {
                color: #252525;
                font-weight: 500;
                font-size: 14px;
                font-family: 'Poppins';
            }
            p.heading-principals {
                font-size: 18px;
                font-weight: 500;
                color: #263238;
                font-family: 'Poppins';
                }
                button.submiters-button:focus {

                    outline:none;

                }
                .paycont.p-1 {
                    display: flex;
                    align-items: center;
                  
                    margin-bottom: -12px;
                    background: none;
    
                    gap: 48px;
                }
                button.close.time:focus {
                    outline: none;
                }
                .paymain.p-1.overflow-auto {
                    max-height: 590px !important;
                    overflow: auto !important;
                }
                .see-all-details{
                text-align: right;
                  margin-right: 18px;
                  margin-top:18px;
                }
                td.text-truncate {
                    color: #252525;
                    font-size: 14px;
                    font-weight: 400;
                    vertical-align: baseline;
                }
                .assingee-details {
                    display: flex;
                    justify-content: space-between;
                }
                button.close.time {
                    margin-left: auto !important;
                    font-size: 35px;
                    margin-top: -26px;
                    
                }
                .modal-header.tickets {
                    border: none;
                }
                .paycont-reporting.overflow-auto.p-1 {
                    display: flex;
                    align-items: center;
                    gap: 48px;
                }
                .popup-details-one {
                    display: flex;
                    justify-content: space-between;
                }
                .paycont-reporter.p-1 {
                    display: flex;
                    gap: 95px;
                }
                .see-all-detaill {
                    text-align: right;
                    margin-right: 18px;
                    margin-top: 10px;
                }
                .kuwait-symbol{

                    font-size: 19px !important;

                }
                .cashcont{
                    max-height: calc(100vh - 430px);
                    overflow: auto;
                    display: grid;
                    gap: 10px;
                    min-height: 350px;
                    padding: 0px;
                }

                .salary-reports .card-content{

                    overflow:unset !important;
                }