*{padding:0;margin:0;}
ul{list-style:none;}
a{text-decoration:none; color:#005695;}
a:hover{color:#7e9200;}
 a.disabled { pointer-events: none;background:grey} 

input[type=text], input[type=password], input[type=date],input[type=email], select, textarea{font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
	font-family:Poppins, sans-serif;
}
input[type=date],  input[type=time] {padding:5px 10px }
input[type=submit], input[type=button]{border-width:0;font-size:14px;padding:6px 20px;background:#1caaff;color:#fff;border-radius:30px;box-shadow:0 2px 3px rgba(0,0,0,.3);}
input[type="text"]:disabled {background: #dddddd;}
input[type="radio"] {vertical-align:middle;}
.btn-main{line-height:25px;font-size:14px;padding:6px 20px;background:#1caaff;color:#fff;border-radius:30px;box-shadow:0 2px 3px rgba(0,0,0,.3);}
.btn-main:hover{background:#bfd631;color:#333;}
.btn-main i{margin-right:5px}
.btn-j, .btn-jgreen{padding:3px 15px;background:#bee1fa;border-radius:30px;color:#333!important}
.btn-litegrey{background:#d4e3ee; color:#005695;}
.btn-j:hover{color:#333;background:#bfd631}
.btn-jgreen {color:#333;background:#bfd631}
.btn-jgreen:hover {background:#adc900; color:#000;}
.btn-hide{text-align:right; font-size:.9em; margin: 10px 10px 0;cursor: pointer}
.btn-big {padding:10px 20px; font-size:16px}
.btn-small {padding:3px 10px; font-size:11px}
.btn-add.btn-last {margin-left:auto}

.bg-turqoise{background:#9ee4db;}
.bg-blue{background:#b8e2fa;}
.bg-pink{background:#fad5ea;}
.bg-purple{background:#ebd5fa;}

.green {color:green}
.red {color:red}
.bold {font-weight:600}
.grey {color:grey}

h1,h2,h3,h4,h5{letter-spacing:1px; font-family: 'Poppins', sans-serif; }
h1{font-size:1.7em; text-transform:uppercase; font-weight:600; letter-spacing:2px;border-bottom: 3px solid #c8e1f2;margin:0 0 20px;}
h1 i{color:#1a75bc}
h4 {font-weight:600}
h2 {font-weight:500;}
.title-highlight {border-radius:5px; background:#bfd630; padding:3px 10px; font-weight:600;}
.letterspace0 {letter-spacing:0}

.mtop10 {margin-top:10px}
.mtop20 {margin-top:20px}
.mtop30 {margin-top:30px}
.mtop40 {margin-top:40px}
.mbottom10 {margin-bottom:10px}
.mbottom20 {margin-bottom:20px}
.mleft10 {margin-left:10px}
.mleft20 {margin-left:20px}
.mright {margin-right:10px}
.center {text-align:center!important;}
.right {text-align:right!important;}
.left {text-align:left!important;}
.middle {margin:0 auto;}

.fixedwidth {width:900px}
.widthA5 {width:400px}

.divider {border-bottom:1px solid #8abcde; padding:10px 0 20px;}
.clearfix{clear:both;}

body {font-family: 'Poppins', sans-serif; font-size:.85em; color:#002048;}
.header-wrap {display:flex; flex-direction:row; justify-content:space-between; padding:10px;}
.header-right {width:80%; text-align:right; letter-spacing:1px;}
.header-wrap .logo img{width:150px}
.top-profile {margin:0 0 10px;}
.top-profile .btn-j {font-size:.85em; font-weight:500; margin:0 0 0 5px;}
.topMsg {background: #ffeaea; box-shadow:inset 0 -1px 1px rgba(0,0,0,.3); padding:5px; border-radius:50px;  }
.mainwrap {display:flex; flex-direction:row;min-height:100%; }
.copyright {position:absolute; bottom:0; font-size:.78em;color:#666;text-align:center;border-top:1px dashed #aaa; padding:10px;}
.copyright a {font-weight:600}

/* Login */
.login-page{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url(../images/bg.png) no-repeat 0 0;background-size:cover;}
.login {height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.login .login-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px;background:#ffffffad;box-shadow:0 5px 10px rgba(0,0,0,.3);border-radius:25px;}
.login .login-wrap input{letter-spacing:1px;border:1px solid #aaa;border-width:0 0 1px;padding:0.375rem 2.25rem 0.375rem 0.75rem;}
.login-page .copyright{font-size:.85em; color:#333; margin:0 auto 10px; width:90%;}
.login-page .copyright span{color:#000;font-size:1.1em}

/* Sidebar */
.sidebar {position:relative; width:15%; min-width:220px; max-width:220px; min-height: 100vh;padding-bottom: 60px;
box-shadow:inset 1px 3px 5px rgba(0,0,0,.3);background:url(../images/johan-bg2.png) 50% 15% no-repeat ;}
.sidemenu {padding:10px 20px 20px 15px; margin-bottom: 40px;}
.sidemenu i {width:23px; color:#1caaff;}
.sidemenu li {padding:10px 0;font-size:1.2em; font-weight:500;}
.sidemenu li li{padding:5px 0 5px 30px; font-size:.9em; font-weight:400;}
.sidebar a:active{font-weight:500;}

/* Content Wrap */
.contentwrap {flex-grow:1; padding:20px 20px 20px 30px; background:#f4f7fa; box-shadow:inset 1px 3px 5px rgba(0,0,0,.3);}
.dashboard .contentwrap {display:flex; flex-direction:row;}
.dashboard .leftwrap {width:48%; max-width:500px;margin-right:50px;}
.dashboard .rightwrap {max-width:50%}
.dashboard img {width:100%;}
.dashboard .stats {display:flex; flex-direction:row; gap:20px; flex-wrap:wrap}
.dashboard .stats .item{padding:10px 30px; font-size:1em; border-radius:30px; display:flex; flex-direction:row; gap:10px; align-items:center; flex:1;}
.dashboard .stats .item i{font-size:2em;}
.dashboard .stats .item .label{width:50%;color:#0f5183;}
.dashboard .stats .item .number{ color:#073e67;font-size:4em; vertical-align:top; font-weight:600; letter-spacing:2px;}
.dashboard .stats .item span { text-align:center; }

.stat-summary {border-bottom:3px solid #c8e1f2; padding-bottom:20px; font-size:1.1em; display:flex; flex-direction:row; gap:30px; font-weight:500; letter-spacing:1px;}
.stat-summary .number{font-size:1.6em; font-weight:600; color:#0582e4;}
.stat-summary span{font-size:1.4em}

.filter-wrap {border:1px solid #8abcde; margin:10px 0; padding:15px 20px}
.filter-box {display:flex; flex-direction:row; gap:10px 20px; flex-wrap:wrap; align-items: center;}
.filter-box .label {margin-right:7px;}
.filter-box div{vertical-align:middle;}

.fullwidth {width:100%}
.halfwidth {width:50%}
.width-auto {width:auto!important}

/* Data Table */
.table-data {border-spacing:0}
.table-data thead {font-weight:500;}
.table-data tbody a{color:#00589d; font-weight:500;}
.table-data thead a {color:#002048}
.table-data thead a:hover, .table-data tbody a:hover{color:#779700}
.table-data thead i {color:#0076c5; }
.table-data td i {line-height:1.5;}
.table-data td{border:1px solid #aaa; border-width:1px 0 0; padding:5px 10px; font-size:.8rem; margin:0}
.table-data td:first-child{border-left:1px solid #aaa;}
.table-data td:last-child{border-right:1px solid #aaa;}
.table-data thead td {background:#b2d9f8; border-width:0}
.table-data thead td.bg-dblue {background:#286fa5; color:#fff}
.table-data tr:last-child td {border-bottom:1px solid #aaa; }
.table-data tr:nth-child(even) {background:#dfeff8}
.table-data tr:hover{background:#b6e4ff}
.table-data h4{font-size:1.2em}
.table-data tbody td{vertical-align:top;}
.table-data.valign-mid td {vertical-align:middle;}

/* Form */
.msg{display:flex;flex-direction:row;gap:20px;align-items:center;justify-content:center;padding:10px 20px;text-align:center;background:#d1ebf5;font-size:1em;margin:0 0 20px;border-radius: 20px;
    border: 1px solid #4cb4c7; box-shadow: 0 2px 3px rgba(0,0,0,.5);font-size:1.2em}
.msg .msg-left{font-size: 1.5em;text-transform: uppercase; font-weight: 600; color: #555;}
.msg i {margin-right: 5px; color:red;font-size:1em;vertical-align:middle;}
.error-msg {background:pink;border-color:red;}
.error-msg .msg-left, .error-msg i{color: red;}
.success-msg {background:#daf2da; border: 1px solid #47c747; }
.success-msg .msg-left, .success-msg i{color: green;}

label span {font-size: .9rem;}  
label.error {color: red; font-size: .8rem; display: block; margin-top: 5px; }  
input.error { border: 1px dashed red; font-weight: 300; color: red; }  

.title-bg {letter-spacing:1px; background:#dce8f9; padding:5px 20px;}
.table-form {border-spacing:0; font-size: 1.1em;}
.table-form .label{width:130px; font-size:.9em;}
.table-form radio{margin-right:10px;}
.table-form radio{margin-right:10px;}
.table-form input[type=text],.table-form input[type=email], .table-form select, .table-form textarea{width:433px; padding:5px 10px;}
.table-form select.small, .table-form input.small {width:160px; }
.table-form .textbox-square input[type=text]{width:30px; padding:3px 0; text-align:center;}
.table-form .textbox-square span{font-size:.8em;}
.table-form td{padding:0 0 10px;}
.table-form .desc {font-size:.8em;margin-left:5px}
.table-form .form-btn {text-align:center; border-top:2px solid #c8e1f2; padding-top:20px; margin-top:50px }
.table-form .form-btn input {padding:5px 15px;}
.table-form .textbox-disabled input {background:#ccc;}

table.last-td-fillup td:last-child {width: 100%;}
table.last-td-fillup td {padding:0 5px 10px}

/* Student Menu */
.student-menu {margin:25px 0}
.student-menu .menu-item{padding:10px 30px;box-shadow:0 2px 2px rgba(0,0,0,.3);font-size:1.1em;
background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;}
	
/* Student Profile Summary */
.profile-summary {padding:20px;border-radius: 50px; border: 1px solid #42dde8;text-align: center;background: #dcf2fa;margin: 0 0 20px;}
.profile-summary td{padding:1px 10px; font-size:1.1em; text-align:center}
.profile-summary tbody td{font-weight:600}
.profile-summary thead td{font-size:.75em;background:#37b1d242}
.profile-summary table {margin:0 auto}

.table-form.edit-student {width:80%}
.profilewrap {display:flex;flex-direction:row;gap:20px;}
.student-photo {vertical-align:top}
.student-photo img{max-width:200px; border:5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3);margin:0 10px 20px}
.students .stat-summary {border-width:0; padding-bottom:10px}
.history {width:600px}
.history .table-data thead tr td{border-width:0}

/* Modules */
/**.modules .table-form input[type=text], .modules .table-form select, .table-form textarea{width:100%}**/

/* Invoice */
.invoice .table-form input, .invoice .table-form select {width:auto;font-size:.82em}
.invoice .table-form td{text-align:center; }
.invoice .table-form .padtop td{ padding-top:10px}
.invoice .table-header th {background:#dce8f9; font-weight:500;font-size:.85em;vertical-align:middle;padding:5px;margin:0 0 10px}
.invoice .table-subtitle td {padding:5px;background:#b9d2f4}
.invoice .table-form .price {width:100px; text-align:right}
.invoice .table-form .form-btn {padding-top:13px}
.invoice .table-form td{border-bottom:1px solid #ccc;}
.invoice .table-form td:first-child {border-left:1px solid #ccc;}
.invoice .table-form td:last-child {border-right:1px solid #ccc;}
.invoice .table-form .no-borderbtm td {border-width:0;}
.invoice .table-form .form-btn {padding-top:30px;}

.cart-wrap{border:0;box-shadow: 0 1px 3px rgba(0,0,0,.5);background: #fff;margin:40px 0 20px;padding:20px;}
.table-cart {width:100%; min-width:720px; font:11px/15px Verdana, sans-serif; border-spacing:0px;}
.invoice td.title {font:bold 12px/20px Arial, sans-serif;background:#ccc;padding:0 0 0 10px;color:#000;margin:0 0 10px;.invoice}
.cart-title {padding:3px;font-weight:600;text-align:center; font-size:1.2em;text-transform:uppercase; background:#eee}
table#memoCart th, table#memoCart td {padding:5px; border-bottom:1px dashed #ccc}
table#memoCart th:last-child, table#memoCart td:last-child {padding-right:20px}

#makePayment td {padding:10px}
#makePayment .form-btn {padding-top:20px}
#makePayment input {width:auto}
.payment .cart-wrap {width:550px;}
.payment .cart-wrap table#memoCart td, .payment .cart-wrap th {font-size:.9em;}
.invoice-summary  {border-collapse: collapse; }
.invoice-summary  td {padding:3px 10px; border:1px solid #555; font-size:.8em; border-width:1px 1px 0 0;border-collapse: collapse; }
.invoice-summary  tr:last-child td, .invoice-summary  td:first-child  {border-width:1px;}
.invoice-print {width:450px; padding:30px; margin:0 auto;}
.invoice-print .invoice-header {display:flex; justify-content:space-between; border-bottom: 1px solid #aaa; padding-bottom: 10px; align-items: center;}
.invoice-print .invoice-tofrom {text-align:left;font-size:.9em}
.invoice-print .invoice-tofrom .title{font-weight:600;font-size:1em}

/* Certificates */
input.showcase-date {width:110px; padding:0.2rem 0.75rem; margin-right:10px}
.cert .table-data tr:hover{background:#f7fae3}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1;
  padding-top:20px;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal */
.modal-content {
  background-color: #fefefe; margin: 0 auto 40px; padding: 20px;
  border: 1px solid #888; width: 80%; border-radius:10px;
  font-size:1rem;
}
.modal-content header {border-bottom:1px solid #aaa; padding:0 0 10px;}
.modal-content .modal-btns {float:right;}
.modal-content .btn {margin-left:10px;}
.modal-content footer {border-top:1px solid #aaa; padding:20px 0 0;}
.modal-wrap h3 {font-weight:600; }
.modal-wrap h4 {font-size:.9rem; font-weight:400; }
.modal-wrap h4 span {font-size:1.1rem; font-weight:500;}

.close {color: #888; float: right; font-size: 2em; font-weight: bold; margin-top: -10px;}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-blue {background:#1a75bb; color:#fff;}
@media print {
@page {
  size: A5; /* Specify the paper size */
  margin: 1cm; /* Optional: Adjust margins */
}