body{font-family: 'Poppins', sans-serif; font-size: 13px; color: #ffffff; padding: 0; height: 100%; background: #050339 url(../images/bg.jpg); background-size: cover;
}
h1{font-size: 1.8rem; font-weight: 300;}
h2{font-size: 1.6rem; font-weight: 400;}
h3{font-size: 1.5rem; font-weight: 400;}
h4{font-size: 1.3rem;}
h5{font-size: 1.1rem;}
h6, h6.title{color: #e7e5f9;}
h1,h2,h3,h4{color: #ffffff;}
p{color: #ffffff;}

.col-md-3.col-lg-2.sidebar{width: 15.667%;}

.border-bottom{border-bottom:1px solid #2d2696!important;}
.border{border:1px solid #2d2696!important; border-radius: 5px;}
.bg-primary{background-color: #0e3782!important;}
.bg-blue{background: #214fa3;}
.form-control, .form-select{padding: .250rem 0.5rem; font-size: 13px; border:1px solid #214fa3;}
.form-select{padding: .3rem 0.5rem!important; }
.form-control:focus, .form-select:focus{ box-shadow: none; outline: none ! important; border-color: #ffc600; }
.form-control::placeholder { color: #444;}
.form-control:-ms-input-placeholder { color: #444;}
.form-control::-ms-input-placeholder { color: #444;}
.btn{padding: .250rem 1rem; font-size: 14px;}
.btn-toolbar .btn{font-size: 12px; padding: .200rem 1rem; margin-bottom: 5px;}
.btn-group-lg > .btn, .btn-lg{padding: 0.5rem 1rem!important; font-size: 16px;}
.form-label{margin-bottom: 0.1rem; }
.title-toolbar {display: flex; flex-wrap: wrap; justify-content: flex-start;}
.btnicon{padding: 0px 9px 6px 9px; font-size: 15px;}
dt{font-weight:600;}
.modal-content{border-radius: 1.5rem!important;}

.topnav{padding-right: 15px;}
.navbar-dark .navbar-nav .nav-link{color: #ffffff !important; display: inline-block; font-size: 18px;}
/*  * Sidebar */
.logo{width: 80px; margin: 0 auto;}
.sidebar {
  position: fixed;
  top: 0px;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 0;
  background: #080b42 url(../images/bg.jpg) no-repeat; background-size: cover;
  overflow-y: auto;
}
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px; /* Height of navbar */
  height: calc(100vh - 48px);
  padding-top: 0rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
  font-weight: 500;
  color: #e7e5f9;
  margin-bottom: 5px; padding: 0.5rem 1.5rem 0.5rem 1rem;
}
.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}
.sidebar .nav-link.active {
  color: #ffffff;
  background: #473fbb;
}
.sidebar .nav-link:hover  {
  color: #ffffff;
}
.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}
.sidebar .submenu{background-color: #070265;}
.sidebar .submenu ul li a{padding: 10px 15px 10px 26px; color: #e7e5f9; text-decoration: none; display: block; font-size: 13px;}
.sidebar .submenu ul li a:hover, .sidebar .submenu ul li a.active{background: #473fbb; color: #ffffff;}

/*  * Sidebar */

.card{border-radius: 0.5rem;}
.card a{text-decoration: none;}
.card dl{font-size: 14px; margin-bottom: 0;}
.owntransport{background:#120c67; border-radius: 5px; padding: 0.7rem 1rem 0.5rem; }
.infoimg{width: 70px; margin: 0 auto;}
/*.tripstatus{overflow-y: scroll;}*/
.map{overflow: hidden; height: 500px; border-radius: 5px;}
.card.bg-blue, .card.bg-primary {color: #e0ebf2;}

.tablearea{display: block;  overflow-x: auto;}
.table-dark {
    --bs-table-bg: #1c1874;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #0263c4;
}
.table tr th{ /*min-width: 15%;*/ background-color: #151257; color: #fff;}
.table tr td a{ font-size: 15px; padding: 0 0.4rem;}
.table tr td a:hover{color: #050339;}
.bg-idle{background-color: #d59d24!important;}
.table > :not(:last-child) > :last-child > *{border-bottom-color:#473fbb!important;}
.table > :not(caption) > * > *{padding: .5rem .8rem;}
.table .form-control{padding: .150rem 0.5rem;}

.infosmall dl dd, .infosmall dl dt{font-size: 13px;}
.notifications.card{background: rgba(0,0,0,0.2); margin-bottom: 0.5rem; transition: all 0.5s ease; display: block;}
.notifications.card:hover{}
.notifications .bi{font-size: 20px;}
.noticon{width: 40px; height: 40px; border-radius: 50%; background: #fff; text-align: center; line-height: 32px;}
.tripstatus .card p{margin-bottom: 0; font-size: 14px;}
.tripstatus .card .card-body{padding: 5px 15px 2px;}
.tripstatus {height: 350px; overflow-y: scroll; padding-right: 5px;}
.txtbgblue{background: #050339; background-color:#050339;}
.statusdtls {color: #323232;}
.statusdtls .graphgreen{color:#22b573;}
.statusdtls .graphblue{color:#0071bc;}
.statusdtls .graphyellow{color:#f7931e;}
.statusdtls .graphred{color:#ed1c24;}
.pickupmap{overflow: hidden; height: 100px; border-radius: 5px;}
.tablelink{display: inline-flex;}
.downloadlink{display: inline;}
.modal .studentimage{ width: 100px; margin: 0 auto;}
.modal .parentdetails hr{margin: 0 0 1rem;}
.modal dt{font-weight:500!important; font-size: 13px;}
.parentdetails dd, parentdetails dt{font-size: 13px !important;}
.addmorebtn{color: #214fa3; text-decoration: none; font-size: 26px; float: left;}
.bluemodal{background: #214fa4 url(../images/modalbg.png) no-repeat; background-size: cover; color: #ffffff;}
.bluemodal p, .bluemodal a, .bluemodal p a{color: #ffffff;}
.assignstudentsmap{width: 100%; height: 400px; background: #fafafa; overflow: hidden; border: 3px solid #a09e9e; border-radius: 3px; margin-top: 57px;}
.assignstudenttable{height: 430px; overflow-y: scroll;}
.assignsearch{padding: 8px 8px 0 8px; border: 1px solid #dddddd; border-radius: 0.25rem; background: #ebeaea; margin-bottom: 8px; height: 50px;}
.circlegrid{display: inline-grid; grid-template-columns: auto auto auto auto auto;}
.circleinfo{width: 140px; height: 140px; border-radius: 50%; color: #ffffff; text-align: center; padding-top: 35px; margin: 0 10px; border: 5px solid #120d4d; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.58);}
.circleinfo h5{font-size: 17px; font-weight: 600; line-height: 20px;}
.circleinfo h5 small{font-weight: 400; font-size: 14px;}
.circleinfo.blue1{background: #0a63e7;}
.circleinfo.blue2{background: #f59b43;}
.circleinfo.blue3{background: #42cb6f;}
.circleinfo.blue4{background: #47cec0;}
.circleinfo.blue5{background: #7277d5;}
.tabarea .tab-content .card{border-top-left-radius: 0px!important; border-top-right-radius: 3px!important;}
.tabarea .nav-tabs{border-bottom: none;}
.nav-tabs .nav-link{background:#18116c; color: #ffffff;}
.nav-tabs .nav-item{margin-right: 2px;}
.atschooldata .card{border: 2px solid #0d6efd;  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.78);}
.atschoolinfo {background: #0d6efd; padding: 2px 7px; color: #fff;}
.tripmapview{width: 100%; height: 450px; overflow: hidden; border-radius: 5px;}
.sltstudentlist{background: #f5f5f6; border: 1px solid #dddddd; padding: 1rem; border-radius: 10px; height: 300px; overflow-y: scroll;}
.sltstudentlist .stdtname{ border:1px solid #efeded; padding: 0.3rem 0.7rem; background: #ffffff; border-radius: 6px; margin-bottom: 10px; }
.adbusplus{text-decoration: none; color: #ffffff; font-size: 20px; font-weight: 600;}
.pr_stimg{width: 50px; height: 50px;}
.parentregistration table tr td{vertical-align: middle;}
.parentregistration{margin-bottom: 2rem;}
.re_logo{width: 100px;}
.trtitle{ margin-top: 15px; }


/*table*/
table{width: 100%;
margin-bottom: 1rem;
color: #212529;
border-color: #dee2e6;
caption-side: bottom;
border-collapse: collapse;
}
table tr th{background-color: #151257; color: #fff;}
table tr td a{ font-size: 15px; padding: 0 0.4rem;}
table tr td a:hover{color: #050339;}
table > :not(:last-child) > :last-child > *{border-bottom-color:#473fbb!important;}
table > :not(caption) > * > *{padding: .5rem .8rem;}
table .form-control{padding: .150rem 0.5rem;}

table > tbody > tr:nth-of-type(2n+1) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
table > :not(caption) > * > * {
  border-width: 0 1px;
}
table > :not(caption) > * {
  border-width: 1px 0;
}
table tr:nth-child(even) {
            background-color: #f1f1f1;
        }
/*table*/
/*ng*/
.ng-select{padding: .250rem 0.5rem; font-size: 13px; border:1px solid #214fa3; border-radius: .25rem; background-color: #fff; display: block; width: 100%; color: #212529; font-weight: 400;}
.ng-select:focus{ box-shadow: none; outline: none ! important; border-color: #ffc600; }
.ngx-dropdown-container.validate{border:1px solid #ff0000;}


.ngx-dropdown-button {
  padding: .250rem 0.5rem;
  border-radius: .25rem;
  background-color: #fff!important;
  border: 1px solid #214fa3;
  padding: 5px 10px!important;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: #212529;
  transition: all 0.3s ease;
  box-shadow: inset 2px 2px 10px #bbbaba, inset -2px -2px 10px #e7e7e7;
}
.ngx-dropdown-container .ngx-dropdown-button .display-text {
  padding: 0 10px;
}
.ngx-dropdown-container .ngx-dropdown-list-container {
  background-color: #e6e6e6!important;
}




.ngx-dropdown-container .ngx-dropdown-button {
  min-height: 26px!important;
  text-transform: uppercase;
  color: #214fa3;
  padding: 0!important;
}

.ngx-dropdown-container button {
  border-left: none!important;
  border-right: none!important;
  border-top: none!important;
  border-bottom: 1px solid #d8d8d8!important;
}

.ngx-dropdown-container .ngx-dropdown-list-container ul li:hover {
  background: #0b5ed7!important;
  color: #ffffff!important;
}

.ngx-dropdown-container .ngx-dropdown-button .display-text {
  font-size: 12px!important;
}

.ngx-dropdown-container button .nsdicon-angle-down::before {
  border-width: 0.2em 0.2em 0 0!important;
  height: 7px!important;
  width: 7px!important;
}

.ngx-dropdown-container .ngx-dropdown-list-container ul li {
  padding: 0px 5px!important;
  color: #797878!important;
  font-size: 13px!important;
  font-family: 'Poppins', sans-serif!important;
}

.ngx-dropdown-container .ngx-dropdown-list-container {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding-left: 5px!important;
  padding-right: 5px!important;
  z-index: 999999999;
  width: 100%;
  background-clip: padding-box;
  background: white;
  position: absolute;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  overflow-y: auto;
}

.ngx-dropdown-container .ngx-dropdown-list-container ul.selected-items li, .ngx-dropdown-container .ngx-dropdown-list-container ul.available-items li.active {color: #ffffff!important;}

.ng-dropdown-panel {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: .25rem;
  padding-right: 0px!important;
  z-index: 999999999;
  width: 100%;
  background-clip: padding-box;
  background: #fff;
  position: absolute;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
  overflow-y: auto;
  margin-left: -10px;
}
.ng-dropdown-panel .ng-option{padding-left: 5px; padding-right: 5px;}
.ng-dropdown-panel .ng-option:hover {
  background: #0b5ed7!important;
  color: #ffffff!important;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background: rgba(30,144,255,0.7); color: #ffffff;}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background: #1e90ff; color: #ffffff;}

/*tracking*/
.history-track-container{
  width:90%;
  margin:auto;
  display:block;
  position:relative;
}
.history-track-container ul.tl{
    margin:20px 0;
    padding:0;
    display:inline-block;

}
.history-track-container ul.tl li{
    list-style: none;
    margin:auto;
    margin-left:120px;
    min-height:50px;
    /*background: rgba(255,255,0,0.1);*/
    border-left:1px dashed #01be40;
    padding:0 0 50px 30px;
    position:relative;
}
.history-track-container ul.tl li:last-child{ border-left:0; padding-bottom: 0;}
.history-track-container ul.tl li::before{
    position: absolute;
    left: -16px;
    top: -5px;
    content: " ";
    border: 8px solid rgba(255, 255, 255, 0.84);
    border-radius: 500%;
    background: #03dc4b;
    height: 30px;
    width: 30px;
    transition: all 500ms ease-in-out;

}
.history-track-container ul.tl li:hover::before{
    border-color:  #96f4af;
    transition: all 1000ms ease-in-out;
}
ul.tl li .item-title{color: #ffffff; font-size: 14px;
}
ul.tl li .item-title span, ul.tl li .item-detail span{margin-left: 50px;}

ul.tl li .item-detail{
    color:rgba(255,255,255,0.5);
    font-size:12px;
}
ul.tl li .timestamp{
    color: #ffffff;
    position: absolute;
  width:100px;
    left: -140px;
    text-align: right;
    font-size: 13px;
}

.mcsctable.table td, .mcsctable.table th{border: none;}
/*tracking*/
.tab-content .predate, .tab-content .currentdate, .tab-content .nextdate{padding: 0.5rem; width: 100%; display: block; border-radius: 25px; text-align: center;}
.tab-content .predate{background: #072c70; }
.tab-content .currentdate{background: #0ca960;}
.tab-content .nextdate{background: #103d8f; color: #d1d1d3;}

.businfo .fas{font-size: 30px; color: #389cf9;}
.businfo {padding: 10px 30px;}
.blue-card{background: #2b52ac url(../images/modalbg.png) no-repeat; background-position: center bottom;}
.studentimg{width: 100%; height: 100%; border-radius: 50%; background: #1e4897; overflow: hidden;}
.nav-pills.vtab .nav-link.active, .nav-pills.vtab .show > .nav-link{background: #214fa4; border: 1px solid #214fa4;}
.nav-pills.vtab .nav-link{background: #06033a; border: 1px solid #06033a; margin-bottom: 10px; border-radius: 20px; min-height: 130px;}
#v-pills-tabContent .nav-pills .nav-link{color: #ffffff!important;}
#v-pills-tabContent {border-radius: 20px; }
.locationmap{margin-top: 1.5rem; width: 100%; height: 250px; border-radius: 10px; overflow: hidden;}
.cardpar{padding: 1rem 1.5rem; border: 1px solid #386dce;}
.registermap{width: 100%; height: 100px; border-radius: 5px; overflow: hidden;}


/*mobile*/
.contentarea{padding: 0 15px;}
.cardbgnone{background: transparent;}
.modal-body .nav-link{padding: .5rem 0.8rem!important;}
.modal{margin-top: 85px;}

button:focus {
  outline: none !important;
}
.btn:focus,.btn:active {
  outline: none !important;
  box-shadow: none;
}

@media only screen and (max-width: 768px) {
#sidebarMenu{position: absolute; width: 50%;}
.navbar-dark .navbar-toggler{z-index: 9999;}
.navbar-toggler:focus{box-shadow: none;}
.cardpar{padding: 0; border: none;}
}
@media only screen and (max-width: 640px) {
.studentimg{width: 50px; height: 50px; border-radius: 50%;}
.historydates{--bs-gutter-y: 0.5rem; --bs-gutter-x: 0.5rem;}
}