body {
    padding: 10px !important;
}

.ng-table {
    border: 1px solid #000;
}

.gridStyle {
    border: 1px solid rgb(212, 212, 212);
    width: 1000px;
    min-height: 200px
}

#userInfo-table th {
    font-size: 20px;
    font-family: sans-serif;
    color: white; background : #428bca;
    border-top: 4px solid #428bca;
    border-bottom: 1px solid #fff;
    padding: 8px;
    background: #428bca;
}

#userInfo-table td {
    background: #e8edff;
    font-family: sans-serif;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 1px solid transparent;
    padding: 8px;
}

#userInfo-table tr:hover td {
    --background: #d0dafd;
}

.grid {
    width: 100%;
  /*  height: 400px;*/
}
.personGrid{
    width: 100%;
    height: 200px;
}
.deleteConfirmation{
    width: 250px;
}

.ui-grid-pager-panel abbr[title] {
    text-decoration: none;
    border-bottom: none !important;
    cursor: unset !important;
}
.institutionsgrid {
    width: 99%;
    height: 40%;
}
.curriculumGrid {
    width: 100%;
    height: 20%;
}
.programsGrid {
    width: 100%;
    height: 40%;
}

.programCoursesGrid {
    width: 100%;
    height: 40%;
}
.grid-align {
    text-align: center;
}
.gly-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(359deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}


.subject-menu li a{
    text-align: center;
    display: block;
    border-bottom: 1px solid #d8d8d8;
    padding: 14px 0px;
    width: 245px;
    font-size: 16px;
     color:#333;
}
.subject-menu li a:hover,.subject-menu li a.active {
    background: #7fbce1;
    color:#fff;
    text-decoration: none;
}
.subject-menu>li>.active>a {
    background: #347ab8;
    color:#fff;
    text-decoration: none;
}

.grid-row-change .ui-grid-row {
    clear: both;
    margin: 5px 0 5px 0 !important;
}
.grid-row-change .ui-grid-cell-contents {
    padding: 8px 0 8px 18px !important;
}
.grid-row-change .btn-primary {

    margin: 0% 0 2% 5% !important;
    min-width:150px !important;
}
.grid-row-change .ui-grid-header-cell-row
{
    background: #002147 !important;
    color: #fff !important;
}

.quiz-progress-bar .progress {
    height: 35px;
    background: #eeeeee !important;
    position: relative;
}

.quiz-progress-bar .progress a{
    float: right;
    margin: 7px 11px 0 0;
  }

.quiz-progress-bar .progress .progress-bar {
    background: #f8dda6;
    color: #0a050c;
    font-weight: bold ;
    font-size: 14px;
    float: none !important;
}
.in-progress{
    background: #f8dda6 !important;
}
.complete{
    background: #c2dd8f !important;
}
.not-started{
    background: #f8dda6 !important;
}
.quiz-progress-bar .progress span{
    position: absolute;
    top:5px;
    left: 5px;
}
.quiz-instance-pan{
    margin: 30px 0px 40px 0px;
    border-bottom: 2px solid #ccc;
}
.mob-menu .dropdown-menu {

    width: 100%;
    text-align: left;
    background-color: #fff;
     border: none !important;
     border: none !important;
     border-radius:0 !important;
     -webkit-box-shadow: none !important;
    box-shadow:none !important;
    height: 500px;
    overflow-y: auto;

}
.mob-menu .dropdown-menu>li>a {
    display: block;
    text-align: center !important;
      padding: 5% !important;
    border-bottom: 1px solid gray !important;
}
.mob-menu .dropdown-menu>li>a:focus, .mob-menu .dropdown-menu>li>a:hover {
    text-decoration: none;
    color: #fdfdfd !important;
    background-color: #7fbce1 !important;
}
.mob-menu .dropdown .btn-primary
{
    color: #fdfdfd !important;
    background-color: #7fbce1 !important;
    border: none !important;
    padding: 4%;
}
.mob-menu .dropdown .btn-primary span
{
    float: right;
    top: 45%;
    right: 4%;
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .mob-menu {
        display: block;
    }
    .web-menu {
        display:none;
    }
}
@media only screen and (min-width: 768px) {
    .web-menu {
        display: block;
    }
    .mob-menu {
        display:none;
    }
}
@media only screen and (max-width: 767px) {
    .quiz-progress-bar {
        margin-left: 0px !important;
    }
}

@media only screen and (max-width: 767px) {
    .breadcrumb {
        display: block !important;
    }
}

/* -------------------------------------- */
/* rounded  list style                    */

/* list */
.rounded-list ol
{
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}

/* item  */
.rounded-list ol > li
{
    position:relative; /* Create a positioning context */
    list-style:none; /* Disable the normal item numbering */
    background:#f6f6f6; /* Item background color */
    margin:0; /* Give each list item a left margin to make room for the numbers */
    padding-left: 15px; /* Add some spacing around the content */
    padding-bottom:0px;
    padding-top:0px;
}

/* number  */
.rounded-list ol > li p:before
{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;

    /* number background */
    background: #87ceeb;
    height: 2em;
    width: 2em;
    margin-top: -1em;
    line-height: 1.5em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
}