.pupil-report-type, .pupil-current-level{background: #5ba2ee; color: #ffffff;  text-shadow: 1px 1px #555555;}
.pupil-current-level{ background: none;}
.course-btn{min-width: 115px; max-width: 140px; overflow: hidden; text-align: left;}
.glyphicon.glyphicon-sort{ font-size: 14px; color: #59b7ee; margin-left: 3px;}
#report .btn.btn-sm{margin-right: 70px; font-size: 16px; line-height: 1.8;     border: 2px solid #3961ae;}
.report-options{margin-bottom: 8px; }
.quickdownload .btn{
  color: #fff;
}
.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
.startdate{  
  text-align: center;
}
.selectall{
  font-size: 9px;
    cursor: pointer;
}

th.sortable.schoolWidth {
    width: 161px;
}

th.sortable.pupilWidth {
    width: 50px;
}
th.sortable.yearWidth {
    width: 63px;
}
th.sortable.venuesWidth {
    width: 160px;
}
th.sortable.statusWidth {
    width: 50px;
}
th.sortable.courseWidth {
    width: 100px;
}
th.EXCELBtn {
    cursor: pointer;
}

th.LISTBtn  {
    cursor: pointer;
}

th.CERTIBtn  {
    cursor: pointer;
}
button {
  display: none;
}
a.menulink {
    cursor: pointer;
}
#report_1:focus {
    background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
    transition: all 0.2s ease-in-out;
    color: #fff;
}
.quickdownload{
    padding-top: 15px !important;
    text-align: center;
}
.quickdownloadbtn{
  background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
  border-color: #4cae4c;
  border: 2px solid #4cae4c;
  color: #fff;
}
button.btn.quickdisbtn {
    background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
    border: transparent;
    color: #fff;
}
.quicklbl{
  text-align: center;
}
.modelTitle{
  color: black;
}
.yes {
  color: blue;
}
.no{
  color: blue;
}
.modelClose{
  color: black;
}
i.namenodisplay {
    display: none;
}
/* custom select */
.select-icon{position: absolute; top: 4px; right: 4px;z-index: 10;}
.styled-select {
    background: #fff;
   height: 29px;
   overflow: hidden;
   width: 240px;
    border: 2px solid #3961ae;
    margin-left: 10px;
    padding-left: 0;
    background-color: rgba(255,255,255,1.0);
}
.custom-checkbox.certs label:before {
    color: beige;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 32px;
    background: transparent;
    border-radius: 100px;
    display: block;
    border: 2px solid #dad7d7;
    cursor: not-allowed;
}
.styled-select select {
   background: transparent;

   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.whitewashed {
   background: url("../images/arrow-down-thin.dfef501fba4c.svg") no-repeat right center;
 background-color: rgba(255,255,255,1.0);
   height: 34px;
   width: 240px;
}

.styled-select.whitewashed select {
   border: none;
   font-size: 16px;
   height: 34px;
   width: 268px;
}

/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.whitewashed   { background-color: #fff; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.whitewashed select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }

.breadcrumb-wrapper {
    background-color: #4890c9fc;
    width: 100%;
    float: left;
}
.navbar-default {
    width: 100%;
    float: left;
}


@media (min-width: 768px){
.well-sm .col-sm-2 {
    width: 15.666667%;
}
}

 

#report .btn.btn-sm {
    display: inline-block;
    border-radius: 10px;
    background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
    border-top: transition;
    border: transparent;
    /*box-shadow: 1px 6px 7px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.4);*/
    position: relative;
    z-index: 99;
    padding: 5px 58px 5px 15px;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

#report .btn.btn-sm:before {
    content: "";
    border-radius: 30px;
    background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
    /* border-top: solid 2px #ada39d; */
    /* border-bottom: solid 2px #ada39d; */
    z-index: -1;
    padding: 9px 15px 9px 15px;
    border-right: solid 2px #ada39d;
    position: absolute;
    right: -8px;
    width: 55px;
    height: 55px;
    top: -8px;
}



#report .btn.btn-sm i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
    position: absolute;
    top: -1px;
    right: 0px;
    line-height: 40px;
}

#report .btn.btn-sm:hover{
    color:#000;
}

#report .btn.btn-sm:active {
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}
#report .btn.btn-sm:active:before {
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}

#report .btn.btn-sm:active i, #report .btn.btn-sm i:active {
    cursor: pointer;
    color: #f7f8f9 !important;
    background: linear-gradient(180deg,#4b74b6 0%,#0272bc 100%);
    box-shadow: inset 0px 1px 2px rgba(96,233,96,-55.4), inset 0px -1px 0px rgba(96,233,96,.-55);
}
#report .btn.btn-sm:focus i, #report .btn.btn-sm i:focus {
    cursor: pointer;
    color: #f7f8f9 !important;
    background: linear-gradient(180deg,#4b74b6 0%,#0272bc 100%);
    box-shadow: inset 0px 1px 2px rgba(96,233,96,-55.4), inset 0px -1px 0px rgba(96,233,96,.-55);
}

.downloadBtn {
    padding-bottom: 20px;
    margin-right: -60px;
    float: right;
}

.downloadBtn  .co{
    display: inline-block;
    border-radius: 10px;
    background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
    border-top: transition;
    border: transparent;
    /* box-shadow: 1px 6px 7px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.4); */
    position: relative;
    z-index: 99;
    padding: 5px 58px 5px 15px;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
    margin-right: 70px;
    font-size: 16px;
    line-height: 1.8;
}

.downloadBtn .co:before {
    content: "";
    border-radius: 30px;
    background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
    /* border-top: solid 2px #ada39d; */
    /* border-bottom: solid 2px #ada39d; */
    z-index: -1;
    padding: 9px 15px 9px 15px;
    border-right: solid 2px #ada39d;
    position: absolute;
    right: -8px;
    width: 55px;
    height: 55px;
    top: -8px;
  
}

.downloadBtn  .co i {
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #6be16b 0%,#5fdf5f 100%);
    position: absolute;
    color:#fff;
    width: 38px;
    height: 38px;
    top: -1px;
    right: 0px;
    line-height: 40px;      
}

.downloadBtn  .co:hover{
    color:#000;
}

.downloadBtn .co:active {
    background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}

.downloadBtn .co:active:before {
    background: linear-gradient(180deg,#8ae78a 0%,#45da45 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}

.downloadBtn .co:active i, #report .co i:active {
    cursor: pointer;
    color: #f7f8f9 !important;
    background: -webkit-linear-gradient(top, #6be16b 0%,#5fdf5f 100%);
    box-shadow: inset 0px 1px 2px rgba(96,233,96,-55.4), inset 0px -1px 0px rgba(96,233,96,.-55);
}



#report_1 {
    display: inline-block;
    border-radius: 10px;
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%) !important;
    border-top: transition;
    border: transparent;
    /*box-shadow: 1px 6px 7px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.4);*/
    position: relative;
    z-index: 99;
    padding: 5px 58px 5px 15px;
    margin-bottom: 10px;
    color: #fff !important;
  font-weight:bold;
}

#report_1:before {
    content: "";
    border-radius: 30px;
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%) !important;
    /* border-top: solid 2px #ada39d; */
    /* border-bottom: solid 2px #ada39d; */
    z-index: -1;
    padding: 9px 15px 9px 15px;
    border-right: solid 2px #ada39d;
    position: absolute;
    right: -8px;
    width: 55px;
    height: 55px;
    top: -8px;
}



#report_1 i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(180deg,#4b74b6 0%,#0272bc 100%) !important;
    position: absolute;
    top: -1px;
    right: 0px;
    line-height: 40px;
}

#report_1:hover{
    color:#000;
}

#report_1:active {
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}
#report_1:active:before {
    background: linear-gradient(180deg,#459ad0 0%,#154ba1 100%);
    transition: all 0.2s ease-in-out;
    color:#fff;
}

#report_1:active i, #report_1 i:active {
    cursor: pointer;
    color: #f7f8f9 !important;
    background: linear-gradient(180deg,#4b74b6 0%,#0272bc 100%);
    box-shadow: inset 0px 1px 2px rgba(96,233,96,-55.4), inset 0px -1px 0px rgba(96,233,96,.-55);
}
#report_1:focus i, #report_1 i:focus {
    cursor: pointer;
    color: #f7f8f9 !important;
    background: linear-gradient(180deg,#4b74b6 0%,#0272bc 100%);
    box-shadow: inset 0px 1px 2px rgba(96,233,96,-55.4), inset 0px -1px 0px rgba(96,233,96,.-55);
}

.glyphicon:hover {
    cursor: pointer;
    color: inherit;
}


.courses-fluid .col-md-6 {
    padding-left: 0px;
    padding-right: 0px;
}

.record_count {
    padding-top: 10px;
}


.custom-checkbox {
    width: 100%;
    text-align: center;
    display: block;
    padding-left: 5px;
}

.navbar .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    font-family: Arial;
    border: solid #337ab7 2px;
    border-radius: 5px;
    box-shadow: none !important;
    overflow: hidden;
    background: #fafafa url("https://i.ibb.co/Mnh1jX5/icon-select.png") no-repeat 90% 50%;
}


.custom-select select:focus {
    outline: none;
}



.custom-select select {
    padding: 0px 4%;
    border: none;
    box-shadow: none;
    background: transparent !important;
    background-image: none;
    -webkit-appearance: none;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
  background-color: transparent !important;
      width: 93%;
    overflow: hidden;
    
  
}

 .form-control .custom-select select, option:disabled {
  background: transparent !important;
  background-color: transparent !important;
}


.form-control .custom-select option {
  overflow: hidden;
  white-sapce: no-wrap;
  text-overflow: ellipsis;
}


option:checked, option:hover {
    color: #333 !important;
    
}

.custom-select select:focus {
    outline: none;
  
} 

.custom-checkbox input {
  display: none;
}
.custom-checkbox input:checked + label:after {
    content: '\2713';
    position: absolute;
    top: 6px;
    width: 38px;
    top: 4px;
    width: 37px;
    /* height: 10px; */
    background: transparent;
    /* border-bottom: 4px solid #01ff01; */
    /* border-left: 4px solid #01ff01; */
    display: block;
    -webkit-transform: rotate(-45deg);
    transform: rotate(6deg);
    text-align: center;
    left: 5px;
    font-size: 45px;
    left: 0px;
    font-size: 50px;
    color: #01ff01;
}
.custom-checkbox label {
  position: relative;
  padding-left: 20px;
  min-height: 40px;
  display: block;
  line-height: 19px;
  font-size: 13px;
  color: #666;
}
.custom-checkbox label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 100px;
  display: block;
  border: 2px solid #013e7e;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 32px;
    background: transparent;
    border-radius: 100px;
    display: block;
    border: 2px solid #013e7e;
}

.table-responsive {
    min-height: .01%;
    overflow-x: inherit;
}



.react-bootstrap-table .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px 4px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size:13px;
}
.order {
    display: none;
}


.breadcrumb, .breadcrumb > li a, .breadcrumb > li + li::before, .z-dashboard .nav-dashboard > a, .z-schools .nav-manage-schools > a, .z-frameworks-courses .nav-manage-courses > a, .z-frameworks-assessment .nav-assess > a, .z-frameworks-attendance .nav-attend > a, .z-frameworks-track .nav-track > a, .z-frameworks-analyse .nav-analyse > a, .z-frameworks-report .nav-report > a, .z-hubs-venues .nav-manage-venues > a, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: transparent;
}

.navbar-nav > li:hover {
    background-color: #4a91ca;
}
.navbar-nav > li:active {
    background-color: #4a91ca;
}

.react-bootstrap-table thead {
    background: #ccc;
}


.react-bootstrap-table th:nth-child(11) {
    background: #00b0f0;
    color: #fff;
    width:5%;
    text-align:center;
}
.react-bootstrap-table th:nth-child(12) {
    background: #6666ff;
    color: #fff;
    width:5%;
    text-align:center;
}
.react-bootstrap-table th:nth-child(13) {
    background: #6ee6db;
    color: #fff;
    width:5%;
    text-align:center;
}
.react-bootstrap-table th:nth-child(14) {
    background: #2323ff;
    color: #fff;
    width:5%;
    text-align:center;
}
.react-bootstrap-table td {
    word-break: break-word;
}

.react-bootstrap-table tr:nth-child(even) {
    background: #c8c4fe;
}

.loadingOld {
    position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.loadingOld img{ width:60px; height:60px;}

.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



@media screen and (max-width: 1024px) {
#report .btn.btn-sm {
    margin: 9px 15px;
    font-size: 15px;
    width: 42%;
    float: left;
}

#report .glyphicon {
    width: 100%;
}
#filter_form .glyphicon {
    width: 100%;
}
.well-sm .col-sm-2 {
    width: 30.666667%;
    margin-bottom: 10px;
}
.react-bootstrap-table th:nth-child(14){width:auto;}
.react-bootstrap-table th:nth-child(11){width:auto;}
.react-bootstrap-table th:nth-child(12){width:auto;}
.react-bootstrap-table th:nth-child(13){width:auto;}

}
@media screen and (max-width: 768px) {
  
  
} 


 
@media screen and (max-width: 767px) {
  .navbar .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}
.custom-select{  background-position: 97% 50%;}


#filter_form .glyphicon {
    width: 100%;
    margin-bottom: 20px;
}

.table-responsive>.table {
    margin-bottom: 0;
    table-layout: inherit;
}

.well-sm .col-sm-2{ width:100%;}

.react-bootstrap-table table {
    table-layout: inherit !important;
}

#report .btn.btn-sm{ width:100%; margin:12px 0;}
.table-header-wrapper{
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.react-bs-container-body{
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.custom-select select{width: 92%;}


}

@media screen and (max-width: 480px) {
#report .btn.btn-sm{ width:100%; margin:12px 0;}
.well-sm .col-sm-2 {
    width: 100%;
}
}