* {
   margin: 0;
   padding: 0;
   box-sizing: border-box
 }
 body, html {
   
   font-family: Arial, Helvetica, sans-serif;
 }
 a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 1.7;
   color: #666;
   margin: 0;
   transition: all .4s;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s
 }
 a:focus {
   outline: none !important
 }
 a:hover {
   text-decoration: none;
   color: #6a7dfe;
   color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
   color: -o-linear-gradient(left, #21d4fd, #b721ff);
   color: -moz-linear-gradient(left, #21d4fd, #b721ff);
   color: linear-gradient(left, #21d4fd, #b721ff)
 }
 h1, h2, h3, h4, h5, h6 {
   margin: 0
 }
 h1 {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 23px;
  color:#963436;
  margin: 0 0 20px 0;
}

h4 {
  font-size: 20px;
  font-weight: 400;
  color:#025ca5;
  margin-bottom: 10px;
}
h3{
  font-weight: 400;
  margin-bottom: 20px;
  color: rgb(32, 32, 32);
}
.logo {
    margin-bottom: 10px;
    margin: 20px auto 30px;
    
}
#header{
  background: #f2f2f2;
  display: block;
  padding: 20px;
  box-shadow: 3px 2px 8px #c1c1c1;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  /*transition: 0.3s; */
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.backLink{
  text-decoration: none;
  padding: 5px 0;
  color: #2173fd;
}
#header .logo{
  margin: 0;
}
.newTeacher{
  float: right;
  text-decoration: none;
  padding: 5px 0;
  color: #2173fd;
}
.smallList select{
  width: 300px !important;
}
.logout {
  
  float: right;
  margin: 10px;
}
.logout img{
  width: 25px;;
  height: auto;
}
.tdHead {
  font-size: 12px !important;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 8px !important;
  color: #598ab5;
  width: 25%;
}
table a{
  color: #6a7dfe;
  text-decoration: none;
}
table a:hover{
  color: #b37071;
  
}
 p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 1.7;
   color: #666;
   margin: 0
 }
 ul, li {
   margin: 0;
   list-style-type: none
 }
 input {
   outline: none;
   border: none
 }
 textarea {
   outline: none;
   border: none
 }
 textarea:focus, input:focus {
   border-color: transparent !important
 }
 input:focus::-webkit-input-placeholder {
   color: transparent
 }
 input:focus:-moz-placeholder {
   color: transparent
 }
 input:focus::-moz-placeholder {
   color: transparent
 }
 input:focus:-ms-input-placeholder {
   color: transparent
 }
 textarea:focus::-webkit-input-placeholder {
   color: transparent
 }
 textarea:focus:-moz-placeholder {
   color: transparent
 }
 textarea:focus::-moz-placeholder {
   color: transparent
 }
 textarea:focus:-ms-input-placeholder {
   color: transparent
 }
 input::-webkit-input-placeholder {
   color: #adadad
 }
 input:-moz-placeholder {
   color: #adadad
 }
 input::-moz-placeholder {
   color: #adadad
 }
 input:-ms-input-placeholder {
   color: #adadad
 }
 textarea::-webkit-input-placeholder {
   color: #adadad
 }
 textarea:-moz-placeholder {
   color: #adadad
 }
 textarea::-moz-placeholder {
   color: #adadad
 }
 textarea:-ms-input-placeholder {
   color: #adadad
 }
 button {
   outline: none !important;
   border: none;
   background: 0 0
 }
 button:hover {
   cursor: pointer
 }
 iframe {
   border: none !important
 }

.small-table{width: 60% !important;
  display: block;

  margin: 30px auto !important;

}
.centreDetails input{
width: 100%;
}
table input, select {
  padding: 7px;
  border: solid 1px #ddd;

}
select{
  width: 100% !important;
}
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 30px 0;
}
.updateDataL {
  
  color: #000;
  padding: 10px !important;
  width: 25%;
  font-weight: 600;
  text-transform: uppercase;
}
.btnSubmit{
  background:#025ca5;
  padding: 10px;
  color: #fff;
  font-weight: bold;  
}

.btnSubmit:hover{
  background:#6072e6;
}

.btnBack:hover{
  background: #8b5657;
}
.btnBack{
  background: #963335;
  padding: 10px;
  color: #fff;
  font-weight: bold;
}
.inputBtn {
  margin-left: 25%;
  margin-top: 20px;
 
}
input[type=button], input[type=submit], input[type=reset] {
  border-radius: 25px;
  border: none;
   
  padding: 12px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
#list {
  margin: 20px;
  width: 90%;
  margin: 30px auto;
  max-width: 1400px;
}
#customers td, #customers th {
  border: 1px solid #cbcce0;
  padding:6px;
  font-size: 13px;
}
.customers-Tbl td, .customers-Tbl th{
  /* padding:0px 6px !important;
  height: 35px; */
}


#customers tr:nth-child(even){background-color: #f2f2f2;}



#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color:#025ca5;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 12px;
}

.large-table{
  border-left: solid 1px #ddd;
  border-bottom: solid 1px #ddd;

}
.large-table .btnSub {
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border: solid 1px #ddd;
}
.large-table td {
  border-top: solid 1px #ddd;
  border-right: solid 1px #ddd;
  padding: 2px 6px;
}
.large-table td{
  font-size: 14px;
}
.large-table input{padding: 0;}

 .txt1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #666;
   line-height: 1.5
 }
 .txt2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #333;
   line-height: 1.5
 }
 .login {
   width: 100%;
   margin: 0 auto
 }

.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #fff;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 13px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #000;
  padding: 8px 5px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
 .container-login100 {
   width: 100%;
   min-height: 100vh;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding: 15px;
   background: #f2f2f2
 }
 .wrap-login100 {
   width: 450px;
   background: #fff;
   border-radius: 10px;
   overflow: hidden;
   padding: 40px 55px 33px;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
   -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
   -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
   -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
   -ms-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1)
 }
 .login100-form {
   width: 100%
 }
 .login100-form-title {
   display: block;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #333;
   line-height: 1.2;
   text-align: center;
	 margin-bottom:50px;
	 text-transform: uppercase;
 }
  
 .wrap-input100 {
   width: 100%;
   position: relative;
   border-bottom: 2px solid #adadad;
   margin-bottom: 37px
 }
 .input100 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: #555;
   line-height: 1.2;
   display: block;
   width: 100%;
   height: 45px;
   background: 0 0;
   padding: 0 5px
 }
 .focus-input100 {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: -64px;
   left: 0;
   pointer-events: none
 }
 .focus-input100::before {
   content: "";
   display: block;
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
   background: #6a7dfe;
   background: -webkit-linear-gradient(left, #21d4fd, #b721ff);
   background: -o-linear-gradient(left, #21d4fd, #b721ff);
   background: -moz-linear-gradient(left, #21d4fd, #b721ff);
   background: linear-gradient(left, #21d4fd, #b721ff)
 }
 .focus-input100::after {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: #999;
   line-height: 1.2;
   content: attr(data-placeholder);
   display: block;
   width: 100%;
   position: absolute;
   top: 50px;
   left: 0;
   padding-left: 5px;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s
 }
 .btn-show-pass {
   font-size: 15px;
   color: #999;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   align-items: center;
   position: absolute;
   height: 100%;
   top: 0;
   right: 0;
   padding-right: 5px;
   cursor: pointer;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s
 }
 .btn-show-pass:hover {
   color: #6a7dfe;
   color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
   color: -o-linear-gradient(left, #21d4fd, #b721ff);
   color: -moz-linear-gradient(left, #21d4fd, #b721ff);
   color: linear-gradient(left, #21d4fd, #b721ff)
 }
 .btn-show-pass.active {
   color: #6a7dfe;
   color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
   color: -o-linear-gradient(left, #21d4fd, #b721ff);
   color: -moz-linear-gradient(left, #21d4fd, #b721ff);
   color: linear-gradient(left, #21d4fd, #b721ff)
 }
 .container-login100-form-btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding-top: 13px
 }
 .wrap-login100-form-btn {
   width: 100%;
   display: block;
   position: relative;
   z-index: 1;
   border-radius: 25px;
   overflow: hidden;
   margin: 0 auto
 }
 .login100-form-bgbtn {
   position: absolute;
   z-index: -1;
   width: 300%;
   height: 100%;
   background: #a64bf4;
   background: -webkit-linear-gradient(right, #2173fd, #963436, #6a7dfe, #963436);
   background: -o-linear-gradient(right, #2173fd, #963436, #6a7dfe, #963436);
   background: -moz-linear-gradient(right, #2173fd, #963436, #6a7dfe, #963436);
   background: linear-gradient(right, #2173fd, #963436, #6a7dfe, #963436);
   top: 0;
   left: -100%;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s
 }
 .login100-form-btn  {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: #fff;
   line-height: 1.2;
   text-transform: uppercase;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 20px;
   width: 100%;
   height: 50px
 }
 .wrap-login100-form-btn:hover .login100-form-bgbtn {
   left: 0
 }
 @media(max-width:576px) {
   .wrap-login100 {
     padding: 77px 15px 33px
   }
 }
 .validate-input {
   position: relative
 }
 .alert-validate::before {
   content: attr(data-validate);
   position: absolute;
   max-width: 70%;
   background-color: #fff;
   border: 1px solid #c80000;
   border-radius: 2px;
   padding: 4px 25px 4px 10px;
   top: 50px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   right: 0;
   pointer-events: none;
   font-family: Arial, Helvetica, sans-serif;
   color: #c80000;
   font-size: 13px;
   line-height: 1.4;
   text-align: left;
   visibility: hidden;
   opacity: 0;
   -webkit-transition: opacity .4s;
   -o-transition: opacity .4s;
   -moz-transition: opacity .4s;
   transition: opacity .4s
 }
 .alert-validate::after {
   content: "\f06a";
   font-family: FontAwesome;
   font-size: 16px;
   color: #c80000;
   display: block;
   position: absolute;
   background-color: #fff;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   right: 5px
 }
 .alert-validate:hover:before {
   visibility: visible;
   opacity: 1
 }
 @media(max-width:992px) {
   .alert-validate::before {
     visibility: visible;
     opacity: 1
   }
 }