@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');


body { font-family: 'Titillium Web', sans-serif; letter-spacing: .6px }

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item a span {
    font-size: 16px;
    font-weight: 600
}
.wrapper .page-wrap .app-sidebar .sidebar-header .nav-toggle {
    color: #24aae0;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a i {
    color: #24aae0;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item .submenu-content {
    background-color: #f3f4f8;
}

.widget .widget-header .widget-title {
    font-size: 18px;
    
    text-align: center;
}
.widget{ overflow: visible; ; background: #fff;  border-radius: 8px;
}

.widget .widget-header {
    padding: 10px 20px;
    border-bottom:0;
    position: relative;
    background: #e6e6e6;
    color: #1a2e45;
    border-radius: 8px 8px 0 0;

}
.widget .widget-header .widget-tools .btn-widget-tool {
    padding: 12px 5px;
    font-size: 16px;
    background: transparent;
    color: #ffffff;
}
.widget .widget-body .icon {
    font-size: 32px;
    color: #1a2e45;
}
.widget .widget-body .state h6 {
    margin-bottom: 0px;
    font-weight: 600;
    color: #24aae0;
    font-size: 13px

}
.widget .widget-body .state h2 {
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 22px;
         color: #1a2e45;
    font-weight: 600;
    margin-top: 5px

}


.card-content .box { box-shadow: 0 1px 3px rgba(0, 0, 0, .12); margin-bottom: 15px;transition: 0.3s ease-in-out;}
.card-content .box:hover { box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.01), 0 15px 32px 0 rgba(0, 0, 0, 0.06);}

.widget .widget-body .state-course h2 {
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 16px;
    color: #1a2e45;
    font-weight: 600;
    margin-top: 5px

}

.widget .widget-body .state-course h6 {
    margin-bottom: 0px;
    font-weight: 600;
    color: #24aae0;
    font-size: 13px

}
.box .widget-body .icon {
    font-size: 28px;
    color: #24aae0;
}
.wrapper .page-wrap .main-content .page-header .page-header-title i {
    background: #1a2e45;
}

.nav-tabs .nav-link {
    padding: 10px 18px;
    margin-left: 0px ;
    margin-right: 10px ;
    font-size: 15px;
    background: #e6e6e6;
    border-bottom: 1px solid #dadada;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
     color: #1a2e45;

}
.multi { margin: 0}
.multi .nav-link {
    padding: 10px 18px;
    margin-right: 5px ;
    margin-left: 0;
    font-size: 14px;
    font-weight: 600;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link , .nav-tabs .nav-link:hover{
   color: #1a2e45;
    background-color: #24aae0;
    border-color: #24aae0 #24aae0 #24aae0;
}
.nav-tabs {
    border-bottom: 1px solid #24aae0;     margin: 0;

}
.tab-content{padding: 0 ; margin-bottom: 25px}
.tab-content>.tab-pane {
    padding: 0px;
}
.tab-content>.pane {
    padding: 8px 0;
}
.form-group{font-size: 11px;}
.form-group img{ width:80px; height: 80px; border-radius:10px; }
.form-control {
    height: auto;
    min-height: 30px;
    border: 1px solid #eaeaea;
    padding: 0 10px;
    background-color: #fff;
    font-size: 14px;
    border-radius: 1px;
 
}
.btn {
    padding: 8px 15px 30px 15px;
    font-size: 14px;
    font-weight: 600;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
     background-color: #1a2e45;
    border: 1px solid #1a2e45;
    color: #fff;
    border-radius:5px;
    margin-left: 10px;
    transition: 0.5s ease-in-out;

    
}
.btn:focus{ color: #fff; }
.btn:hover {
    border: 1px solid #24aae0;
    background-color:#24aae0;
    color: #fff;
    border-radius:4px;


}

.btn-b {
     padding: 3px 10px 25px 10px;
    margin-bottom: 5px;
    margin-top: 15px;
     background: none;
    margin-left: 0px;
    border: 1px solid #1a2e45;
    color: #1a2e45;
  
}
.btn-c {
     padding: 3px 10px 25px 10px;
     background: none;
    margin-left: 0px;
    border: 1px solid #1a2e45;
    color: #1a2e45;
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-link  {
    color: #fff;
     background: #1a2e45;
     border: 1px solid #1a2e45;
    transition: 0.5s ease-in-out;
}

.nav-pills .nav-link:first-child  {
  border-radius: 8px 8px 0 0
}
 .nav-pills .nav-link:last-child  {
  border-radius: 0px 0px 8px 8px ;
}
.nav-pills .nav-link:hover{
     color: #1a2e45;
        background: #F6F7FB;
    border: 1px solid #F6F7FB;
    transition: 0.5s ease-in-out;
}

.nav-pills .nav-link {
    border-radius: 0;
    background: none;
    margin-bottom: 0px;
    padding: 12px 8px !important;
    color: #1a2e45;
    font-size: 16px; 
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    transition: 0.5s ease-in-out;

}


.nav-pills .nav-link:last-child {
 box-shadow: 0 2px 0 #24aae0;

}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.nav-pills .nav-link .ik {
    padding: 0px 15px 0 10px;
    color: #24aae0;
    font-size: 20px
}

.nav-pills .nav-link.active .ik {
    color: #fff;
}
.nav-pills .nav-link:hover .ik {
    color: #fff;
}

.wrapper .page-wrap .app-sidebar{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1);}

.wrapper .page-wrap .app-sidebar.colored .sidebar-header .header-brand {
    color: #1a2e45;
    font-size: 20px;
    font-weight: 600;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content {
    background-color: #fff;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-header {
    background-color: #fff;
    text-align: center;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.04);}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a {
    color: #1a2e45;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a:hover {
    color: #24aae0;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a:hover i{
    color: #1a2e45;
}
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item {
    font-size: 15px;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.open::after, .wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active::after {
    background-color: #0c0f48;
}

.wrapper .page-wrap .footer {
    background: #1a2e45;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 13px;
     color:#fff; 
}
.wrapper .page-wrap .footer .text-dark {
     color:#24aae0 !important; 
}
.card  {
  border-radius: 8px
}
.card-header {
    padding: 14px;
    margin-bottom: 0;
    background-color: #1a2e45;
    color: #fff;
    border-radius: 8px 8px 0 0!important;

}
.card-header .card-title { margin: 0}
.card-header h4.card-title  { font-size: 18px; font-weight: 600}

.card .card-body {
    padding: 0px;
}
.card-content { background: #fff; min-height: 390px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 0 #24aae0}
.user {min-height: 100px;}
.ca-d{margin-bottom: 20px}


select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-image: url(../images/down-arrow.svg);
    background-position: center right 15px;
    height: 35px !important;
}
.form-group {
    color: #1a2e45;
    font-size: 14px;
}
.form-control
{
    padding: 0.5em 1em;
    border: 0;
    width: 100%;
    border-bottom: 2px solid #24aae0;
    background: none;
    -webkit-appearance: none;
	outline: none;
    border-radius: 2px;
}
.form-control:focus
{    background: none;
    width: 100%;
    box-shadow: 0 2px 0 #24aae0;
    border-bottom: 2px solid #1a2e45 ;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
    
}
.custom-select {
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    border: 0;
    background-color: transparent;
    border-bottom: 2px solid #24aae0;
    -webkit-appearance: none;
    border-radius: 2px;}
    
.custom-select:focus
{    background: none;
    width: 100%;
    box-shadow: 0 2px 0 #24aae0;
    border-bottom: 2px solid #1a2e45 ;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
}


.accordion .btn-block{ border-radius:8px 8px 0 0;background: #e6e6e6; color: #1a2e45 ; border-color: #e6e6e6}
.accordion .btn-block:hover{ border-radius: 4px; color: #24aae0 ; text-decoration: none}
.accordion .btn-block:focus{ text-decoration: none}
.card .card-header {
    border-bottom:0;
}
.accordion .collapse .back{ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.07) !important; border-radius: 0 0 8px 8px ; margin-top: -14px; padding: 10px  }


.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #24aae0; border-color: #24aae0;
}

.table {
margin-bottom: 0px
}
 p.t-head {
    color: #1a2e45;
    margin-bottom: 10px;
     text-align: justify; 
     margin-top: 10px; 
     font-size: 16px; font-weight: 600
}
.table-responsive{
    border-radius: 8px;
    background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
overflow-y: hidden;
overflow-x: hidden;


}
.table-sm td, .table-sm th {
    padding: .7rem;
}
.table .row {
margin: 0
}
.table .col-md-6 , .table .col-md-4 {
    padding: 0
}
.table th , .mat-table th {
    color: #464646;
    font-size: 14px;
}
.table td, .table th {
    vertical-align: middle;
}
.table tbody td , .mat-table tbody td {
font-size: 14px
}
.table thead th , .mat-table thead th {
    font-weight: 600;
    font-size: 13px; vertical-align: middle;
    border: 0;
}
.bordered thead th  {
   
    border: 1px solid #f7f7f7;
}
.table td, .table th {
    border-top: 0;
}
.table thead , .mat-table thead {
    background-color: #6d6d6d;
}
.mat-table {
    border-radius: 8px;
    background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.modal-footer{padding: 10px 0; text-align: center; display: block}
.modal-header{background: #e6e6e6 ;color: #1a2e45;}
.modal-body{padding: 10px}
.modal-dialog{max-width: 500px;}
.modal-footer{padding: 10px; text-align: center; display: block}
.modal-header{background: #e6e6e6 ;color: #1a2e45; padding: 10px 20px;}
.modal-body{padding: 10px}


.border-checkbox-section .border-checkbox-group .border-checkbox-label:before {
    content: "";
    display: block;
    border: 2px solid #24aae0;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
}
.border-checkbox-section .border-checkbox-group .border-checkbox:checked + .border-checkbox-label:after {
    -webkit-animation: check linear 0.5s;
    animation: check linear 0.5s;
    opacity: 1;
    border-color: #1a2e45;
}
.border-checkbox-section .border-checkbox-group .border-checkbox-label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    padding-left: 30px;
    margin-right: 15px;
    color: #1a2e45;
    font-weight: 600;
}

.radio .helper::after, .radio .helper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0.25rem;
    width: 1rem;
    height: 1rem;
    -webkit-transition: -webkit-transform 0.28s ease;
    transition: -webkit-transform 0.28s ease;
    transition: transform 0.28s ease, -webkit-transform 0.28s ease;
    border-radius: 50%;
    border: 0.125rem solid #24aae0;}
.radio .helper::after {
    transform: scale(0);
    background-color: #1a2e45;
    border-color: #1a2e45;
}

.form-radio label {
    position: relative;
    padding-left: 1.5rem;
    text-align: left;
    color: #1a2e45;
    display: block;
    line-height: 1.8;
        font-weight: 600;

}

.ct-label {
    fill: #fff;
    font-size: 17px;
    line-height: 1;
}
.ct-series-a .ct-area, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-slice-pie {
    fill: #2dce89;
}
.ct-series-b .ct-area, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-slice-pie {
    fill:  #f5365c;
}
.ct-series-c .ct-area, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-slice-pie {
    fill: #11cdef;
}
.ct-series-d .ct-area, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-slice-pie {
    fill: #007bff ;
}
.ct-series-e .ct-area, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-slice-pie {
    fill: #6c757d;
}

.chart ul { list-style: none ;margin-top: 40px}



.user .widget .widget-body .state h6.danger , .user .widget .widget-body .state h2.danger , .widget .widget-body .danger
{color: #f5365c}

.user .widget .widget-body .state h6.success , .user .widget .widget-body .state h2.success , .widget .widget-body .success
{color: #2dce89}

.user .widget .widget-body .state h6.info , .user .widget .widget-body .state h2.info , .widget .widget-body .info
{color: #11cdef}

.user .widget .widget-body .state h6.primary , .user .widget .widget-body .state h2.primary , .widget .widget-body .primary
{color: #007bff}

.user .widget .widget-body .state h6.secondary , .user .widget .widget-body .state h2.secondary , .widget .widget-body .secondary
{color: #6c757d}


.table  .nav-link .badge {    width: auto;
    height: auto; ; border-radius: 5px; padding: 5px ; float: right;line-height: 14px ; background: #1a2e45; color: #fff;font-size: 12px}


.table  .nav-link {
      font-size: 14px;
    font-weight: 600;  color: #1a2e45; padding: 0
}
.table ul {
     box-shadow: 0px 2px 3px rgba(0,0,0,.1)
}

.table li .nav-link {
    padding: 10px 10px;
    color: #1a2e45;
    border-radius: 0px;
    font-size: 12px; border-bottom: 1px solid #dcdcdc;
    transition: 0.5s ease-in-out;
}

.table .collapse .nav-link:hover {
    background-color: #f8f8f8;
    padding: 10px 15px;
}
.table .nav-link[data-toggle].collapsed:after {
    content: "▾"; font-size: 19px; margin-left: 5px; color: #24aae0;
}
.table  .nav-link[data-toggle]:not(.collapsed):after {
    content: "▴"; font-size: 19px ;  margin-left: 5px; color: #24aae0;
}


.table .co-edit {
    color: #1a2e45;
    font-size: 13px; 
}

.progress-indicator>li.active .bubble, .progress-indicator>li.active .bubble:after, .progress-indicator>li.active .bubble:before {
    background-color: #007bff;
}
.progress-indicator>li.active, .progress-indicator>li.active .bubble {
    color: #007bff;
}
.progress-indicator>li.completed .bubble, .progress-indicator>li.completed .bubble:after, .progress-indicator>li.completed .bubble:before {
    background-color: #2dce89;
}

.progress-indicator>li.completed, .progress-indicator>li.completed .bubble {
    color: #2dce89;
}

.progress-indicator {
    margin: 0 0 1em;
    padding: 0;
    font-size: 14px;
    text-transform: capitalize;
}

.profiletimeline .sl-item {
    margin-top: 4px;
    margin-bottom: 10px;
}
.profiletimeline .link {
    color: #1a2e45; font-size: 14px
}
.profiletimeline .noti-d {
    margin-top: 10px;
}
a:not([href]):not([tabindex]) {
    color: #fff;
    text-decoration: none;
}

.table tbody td {
    vertical-align: top;
}
/* Inccrease side menu width*/
.wrapper .page-wrap .main-content {
  
    padding-left: 280px;}

@media only screen and (min-width: 1024px) {
.wrapper .page-wrap .footer {
    padding-left: 290px;
}
}
.wrapper .page-wrap .app-sidebar{ width: 270px}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item:hover {
    background: #f7f7f7; 
}
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item:hover {
   background: #eaeaea;
}
@media only screen and (max-width: 1023px){
    .wrapper .page-wrap .main-content {
        padding-left: 0;
        padding-right: 0;
    }
    }
    .bs-stepper .step-trigger {
        display: -ms-inline-flexbox;
        display: inline-grid;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0px;
        color: #6c757d;
        text-align: center;
    
    }
    .bs-stepper .bs-stepper-header i {
        font-size: 25px;
    
    }
    .step{ margin-right: 4px;}
    .bs-stepper .step-trigger:hover{ background: none;}
    
    .bs-stepper .btn-primary{ margin-top: 15px;}
    .bs-stepper .step-trigger:not(:disabled):not(.disabled) {
        cursor: pointer;
        text-align: center;
    }
    .bs-stepper-content {
        padding: 0;
    }
    .bs-stepper-label {
        margin:0;
        font-size: 12px; text-align: center
    }
    .bs-stepper-circle {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: .5em 0;
        margin: .25rem;
        line-height: 30px;
        color: #777;
        background-color: transparent;
        border: 2px solid #666;
        border-radius: 25px;
        margin: 5px 10px
    }
    .bs-stepper-circle i{ line-height: 30px}
    
    .active .bs-stepper-circle {
        background-color: transparent;
        border: 2px solid #24aae0;
        background: #24aae0;
    }
    .active .bs-stepper-circle i {
        color: #1a2e45;
        font-size: 18px;
    }
    .active .bs-stepper-label {
       color: #1a2e45;
    }
    
    
    .bs-stepper hr {     border-top: 1px solid rgb(28, 33, 114);}
    
    .bs-stepper .line, .bs-stepper-line {
        flex: 1 0 1px;
        text-align: center;
        min-width: 1px;
        min-height: 1px;
        margin: 0;
        background-color: #24aae0;
    }
    
    .bs-stepper .custom-h {
        background: #dcdcdc; font-size: 20px; font-weight: 700;
        padding: 5px 15px;     color: #1a2e45;}
    
    @media only screen and (max-width: 1024px) {
    .bs-stepper .step {
    display: none ;
        
        }
        .bs-stepper .active {
    display: block;
        
        }
    }

    /*Spinner*/
    .loading-indicator {
        position: fixed;
        z-index: 999;
        height: 2em;
        width: 2em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
      
      /* Transparent Overlay */
      .loading-indicator:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
      }



    .iframe {
        background:url(../images/ifram-loader.gif) top center no-repeat;
      }

      /* hide  no file chosen*/
      input[type='file'] {
        color: transparent;
      }

      mat-form-field{
        width: 100%!important;
    }


      .wrapper .header-top .top-menu .lang {
        margin-left: 30px;
    }
    .wrapper .header-top .top-menu .header-search {
        padding: 0 20px;
    }

     .border-checkbox {
     
        border: 2px solid #24aae0;
        width: 20px;
        height: 20px;
      
    }


    .border-checkbox-label {
        position: relative;
        display: inline-block;
        cursor: pointer;
        height: 20px;
        line-height: 20px;
        padding-left: 30px;
        margin-right: 15px;
        color: #1a2e45;
        font-weight: 600;
    }

    .mat-form-field-appearance-legacy .mat-form-field-wrapper {
        padding-bottom: 1.4em!important;
        margin-bottom: 8px;
    }
    .mat-form-field-appearance-legacy .mat-form-field-label {
        color: rgb(28, 33, 114)!important;
    }
    .wrapper.nav-collapsed .page-wrap .app-sidebar:hover {
        width: 228px;
    }
    .wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item {
        padding-left: 28px;
        font-size: 14px;
    }

    .tr-head{ background-color: #dddddd;}
    .tr-head th{ color: #222a3e!important;}

    .tr-head2{ background-color:#cacaca
    }
    .tr-head2 th{ color: #222a3e!important;}
    .table tbody td {
        vertical-align: middle;
    }
    @media only screen and (max-width: 1024px) {
        .table-responsive{
        
        overflow-y: hidden;
        overflow-x: auto;
        
        
        }
        }

        .require { 
            color: #f5365c;   
              line-height:inherit;
            font-size: 13px;
        }

        .mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
            width: 33px!important;
            height: 33px!important;

            color: #0d1041;
            margin-left: -8px;
        }


/*dashbord*/
 /*Coordinator courses progress bAT*/
 .progress-bar {
    width: 0;
    -webkit-animation: progress 1.5s ease-in-out forwards;
    animation: progress 1.5s ease-in-out forwards;
}
.progress  {
 margin-bottom: 12px
}



@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.prog-container p { font-size: 16px; text-align: left; font-weight: 600;  margin-bottom: 8px;}
.prog-container hr { margin: 4px 0;}
.co-prog { margin-bottom: 20px;}
.progress {
    display: -ms-flexbox;
    display: flex;
    height: .9rem;
    overflow: hidden;
    font-size: .80rem;
    background-color: #e9ecef;
    border-radius: 50px;
    position: relative;
}

.reject {  background-color: #f5365c;}
.submit {  background-color: #007bff;}
.approv {  background-color: #2dce89 ;}
.in-progress{ background-color: #11cdef  ;}
.not-start{
    margin-left: 10px;
    text-align: center;
    color: #0f263e;
    font-size: 16px;
}
.radial-bar {
   
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 0px;
}
.radial-bar:after, .radial-bar > img {
    font-weight: 600;
    color: #455a64;
}
.prog-container span { font-size: 13px; font-weight: 600}
.prog-container span.name { float: left; margin-right: 8px;}
.prog-container span.title { position: absolute; left: 48%;}


.circle { margin-top: -6px;}
.circle p { font-weight: 600; font-size: 15px; margin-bottom: 5px; margin-top: -4px; text-align: center;}
.circle p.complete { color:#2dce89 ;}
.circle p.in-prog { color:#007bff ;}
.circle p.Not-Started { color:#7e7e7e ;}
.radial-bar-default.radial-bar-30 {
    background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #7e7e7e 50%, #d6d6d6 50%, #d6d6d6);
}
.guide .badge:empty {
    display: inline-block; 
}
.guide .badge {
    padding: 0;
    width: 13px; height: 13px;
}
.guide .attch { width: 22px; height: 22px; line-height: 22px;}
.guide .attch i{ font-size: 20px;}

.badge-gray { background-color: #e9ecef;}
.badge-submit {
    background-color: #007bff;
}
.guide span.status {font-size: 12px; margin-left: 5px;}
.head-page{ margin-left: 10px; font-size: 18px; color: #1a2e45;}
.co-prog .card-header { padding: 13px; 
      
    font-weight: 600;
}
.co-prog  .card-header h4.card-title {  font-size: 16px!important;}
.co-prog .card-block { padding: 7px 10px}

.dash .nav-pills .nav-link {
    border-radius: 0;
    background: none;
    margin-bottom: 0px;
    padding: 15px 8px !important;
    color: #1a2e45;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transition: 0.5s ease-in-out;
    border: 0;
   
    margin-bottom: 40px;
}
.dash .nav-pills {
    position: relative;
    z-index: 1;
}
.dash .nav-pills::after {
    content: '';
    background-color:#120f4b;
    height: 78%;
    width: 1px;
    transform: translateX(-50%);
    position: absolute;
    left: calc(28px);
    top: 15px;
    z-index: -1;
}
.dash .nav-pills .nav-link.active{
    box-shadow: 0 0px 7px rgba(0, 0, 0, .11);
    border-radius: 6px;
    background: #1a2e45;
    color: #fff;
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item.active {
    color: #ffffff;
    background: #1a2e45;
}
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.active {
    color: #fff!important;
    background: #0d1041;
}
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.active:hover {
    color: #fff!important;
    background: #0d1041;
}
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active a {
    color: #fff;
}
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.prog-container .nav a .circle:hover , .prog-container .nav a.active .circle{
    transform: scale(1.1);
    transition: .5s ease-in;
}

.cr-att{padding:4px; border-bottom: 1px solid #eeeff5;}

.no-auth {
    width: 500px;
    border-radius: 10px 50px;
    overflow: hidden;
    padding: 30px 40px;
    background: #fff;
  
  }
  .no-auth p {
  text-align: center;
  color: #0d1041;
  font-size: 22px;
  font-weight: 600;

  
  }
  .logo-auth{ position: absolute;
top:20px; left: 50px;}

ul.pagination{  margin: 5px;}
.whitespace th{ white-space: nowrap;}
.whitespace th , .whitespace td{ text-align: center; }
.whitespace thead th{ border: 1px solid #0d69a9;}
.whitespace thead{ background-color: #0f75bb;}
.whitespace td, .whitespace th {
    padding: .5rem;
}
.fa-dot-circle{color:#24aae0!important ;}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #24aae0!important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: rgba(36 ,170 ,224,.55)!important;
}
.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
    background-color: #24aae0!important;
}
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: #0f75bb!important;
}
.wrapper .page-wrap .main-content .page-header {
    margin-bottom: 10px;
    margin-top: -15px;
}
.wrapper .page-wrap .main-content .page-header .page-header-title h5 {
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 18px;
    margin-left: 8px;
    color: #1a2e45;
}
.wrapper .page-wrap .main-content .page-header .breadcrumb-container .breadcrumb .breadcrumb-item a {
    color: #212121;
    font-size: 14px;
}
.admin-search
{    background: none;
    width: 100%;
    box-shadow: 0 2px 0 #24aae0;
    border-bottom: 2px solid #24aae0 ;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
    height: 44px !important;
}
select.admin-search{    height: 44px !important;
}
.custom-select:focus
{    background: none;
    width: 100%;
    box-shadow: 0 2px 0 #24aae0;
    border-bottom: 2px solid #1a2e45 ;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
}
.admin-label{  
       font-weight: 600;
    margin-bottom: 8px;
    color: #000440;
}
.ser-btn{    background-color: #24aae0!important;
     margin-top: 27px!important;
      padding: 4px 20px!important;
    }

.mat-raised-button.mat-primary .fa-search {
  
    font-size: 18px;
}
.mat-raised-button.mat-primary .fa-chalkboard-teacher {
  
    font-size: 18px;
}
.mat-raised-button.mat-primary .fa-file-download  {
  
    font-size: 22px;
}
.assign-cor{
     background-color: #24aae0!important;
     padding: 2px 8px!important;
     min-width: 50px!important;
     margin: 2px 0;
    }
    .cdk-overlay-container{z-index:2000!important}
.cdk-overlay-connected-position-bounding-box {z-index:9999!important}
.mat-dialog-container {
     direction: ltr;
     width: 900px!important;
     overflow: hidden!important;
 }
 .btn-add {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s ease-in-out;
    background-color: #1a2e45;
    border: 1px solid #1a2e45;
    color: #fff;
    border-radius:4px;
    transition: 0.5s ease-in-out;  
    margin-left: 3px;  
    }    
    .btn-add:hover { color: #fff;}
    .btn-add:focus { color: #fff;}
    .select2-container{z-index: 3000; margin-bottom: 30px!important; }
    .select2.select2-container--default .select2-selection--single {
        background: none;
        width: 100%;
        box-shadow: 0 2px 0 #24aae0;
        border-bottom: 2px solid #24aae0 ;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
        transition: 0.5s ease-in-out;
        height: 44px !important;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #24aae0!important;
        color: white;
    }
    .breadcrumb-item+.breadcrumb-item::before {
        display: inline-block;
        padding-right: .5rem;
        color: #120f4b;
        content: "/";
        font-size: 21px;
    }
    .wrapper .page-wrap .main-content .page-header .breadcrumb-container .breadcrumb .breadcrumb-item a {
        color: #1a2e45;
        font-size: 16px;
    }
    .mat-checkbox-inner-container-no-side-margin {
      
        margin-top: 12px!important;
    }
    
    .mat-checkbox-inner-container {
        height: 20px!important;
        width: 20px!important;

    }

    .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element, .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
        background: #24aae0!important;
    }
    .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
        background: #24aae0!important;
    }
    .sub{    background-color: #1a2e45;
        border-color: #1a2e45; margin-left: 0;}

        .m-head{margin: -25px -25px 20px;}
        .m-body{margin: -20px}

        .btn-b{margin-top: 10px!important; background-color: #24aae0!important; color: #fff!important;}