/* 
Custom Stylesheet for the public pages
of SkateClub Assessments
*/

/* ===== GENERAL ===== */
	.sca-shortcode .shortcode-content{ 
	  border: 1px solid #eee;
	}
	.sca-shortcode .table-loader{
		width: 200px;
    discaay: none;
    margin: 200px auto 0;
	}
	.sca-shortcode .spinner-grow{ display: none; }
	textarea:focus,
	.form-control:focus,
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="datetime"]:focus,
	input[type="datetime-local"]:focus,
	input[type="date"]:focus,
	input[type="month"]:focus,
	input[type="time"]:focus,
	input[type="week"]:focus,
	input[type="number"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	input[type="search"]:focus,
	input[type="tel"]:focus,
	input[type="color"]:focus,
	.uneditable-input:focus {   
	  border-color: #FF0000;
	  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 0px rgba(255, 0, 0, 0.6);
	}
	.sca-shortcode .sca-form{ }
	.sca-shortcode .sca-form .form-check{ padding-left: 0; }
	.sca-shortcode .sca-form .form-check .checkbox-label {
    discaay: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 14px;
    width: 14px;
    clear: both;
	}
	.sca-shortcode .sca-form .form-check .checkbox-label input {
	    position: absolute;
	    opacity: 0;
	    cursor: pointer;
	}
	.sca-shortcode .sca-form .form-check .checkbox-label input:checked ~ .checkbox-custom {
	  background-color: #fff;
	  border-radius: 0px;
	  -webkit-transform: rotate(0deg) scale(1);
	  -ms-transform: rotate(0deg) scale(1);
	  transform: rotate(0deg) scale(1);
	  opacity:1;
	  border: 1px solid #999999;
	}
	.sca-shortcode .sca-form .form-check .checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #009BFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
	}
	.sca-shortcode .sca-form .form-check .checkbox-label input:checked ~ .checkbox-custom::after {
	  -webkit-transform: rotate(45deg) scale(1);
	  -ms-transform: rotate(45deg) scale(1);
	  transform: rotate(45deg) scale(1);
	  opacity:1;
	  left: 3px;
	  top: 0px;
	  width: 6px;
	  height: 12px;
	  border: solid #009BFF;
	  border-width: 0 2px 2px 0;
	  background-color: transparent;
	  border-radius: 0;
	}
	.sca-shortcode .sca-form .form-check .checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 14px;
    width: 14px;
    background-color: transparent;
    border-radius: 0px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 1px solid #999999;
	}
	.sca-shortcode .sca-form .form-group .form-control-file::-webkit-file-upload-button{ visibility: hidden; }
	.sca-shortcode .sca-form .form-group .form-control-file::before{
		content: 'Take or upload photo of yourself';
	  discaay: inline-block;
	  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
	  border: 1px solid #999;
	  border-radius: 3px;
	  padding: 5px 8px;
	  outline: none;
	  white-space: nowrap;
	  -webkit-user-select: none;
	  cursor: pointer;
	  text-shadow: 1px 1px #fff;
	  font-weight: 700;
	  font-size: 10pt;
	}
	.sca-shortcode .sca-form .form-group .form-control-file:hover::before{ border-color: black;	}
	.sca-shortcode .sca-form .form-group .form-control-file:active::before{ background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);	}

	.sca-shortcode .sca-form .alert{ 
		discaay: none; 
		margin: 40px 0;
    box-shadow: 0px 5px 10px -6px rgba(0,0,0,0.3);
    border-radius: 0;
	}
	.sca-shortcode .sca-form .alert .close{ font-size: 36px; }
	.sca-shortcode .sca-form .alert .alert-heading{
		font-size: 26px;
    padding: 20px 0 0;
    margin-bottom: 10px;
	}
	.sca-shortcode .sca-form .form-group .invalid-feedback{
		font-size: 10px;
    font-style: italic;
	}
	.sca-shortcode .table{  }
	.sca-shortcode .table caption{
		font-family: Arial;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 1px;
	}
	.sca-shortcode .table thead{  }
	.sca-shortcode .table thead th{ 
	  font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 10px;
  }
	.sca-shortcode .table tbody{  }
	.sca-shortcode .table tbody th{
		font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    padding: 2px 10px;
    font-family: Arial;
    font-weight: 600;
    color: #555;
	}
	.sca-shortcode .table tbody td{
		font-size: 13px;
    vertical-align: middle;
    padding: 5px 10px;
    color: #555;
    font-family: Arial;
	}
	.sca-shortcode .table tbody td button{
		 font-family: Arial;
	}
	.sca-shortcode .table tbody td .btn-modal{
		color: #fff;
    font-size: 10px;
	}

	.sca-shortcode .modal-body{ padding: 45px 30px 35px; }

	.sca-shortcode .sca-form{  }
	.sca-shortcode .sca-form .form-group label{
		font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
	}
	.sca-shortcode .sca-form .form-group input,
	.sca-shortcode .sca-form .form-group select,
	.sca-shortcode .sca-form .form-group textarea{
		font-size: 13px;
    border: 0;
    border-bottom: 1px dashed #999;
    border-radius: 0;
    background-color: transparent;
	}
	.sca-shortcode .sca-form .form-group .invalid-feedback{ }
	.sca-shortcode .sca-form .form-group .form-control-file{ border: 0; }
	.sca-shortcode .sca-form .form-footer{ 
		text-align: right;
    padding: 30px 0 15px;
  }
	.sca-shortcode .sca-form .form-footer img{
		width: 40px;
    discaay: none;
	}

	/* Buttons */
	.sca-shortcode .btn-sca{
		color: #fff;
    background-color: #1a6eac;
	}
	.sca-shortcode .asp_product_buy_button .asp_all_buttons_container{  }
	.sca-shortcode .asp_product_buy_button .asp_all_buttons_container .stripe-button-el{
		background: none;
    background-image: none;
    border: 0;
    padding: 0;
	}
	.sca-shortcode .asp_product_buy_button .asp_all_buttons_container .stripe-button-el span{ 
		background: none;
    height: auto;
    text-shadow: 0 0 black;
    font-weight: 400;
    box-shadow: none;
    padding: 3px 25px;
    text-transform: uppercase;
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    font-family: 'Montserrat';
    font-size: 16px;
	}
	.sca-shortcode .asp_product_buy_button .asp_all_buttons_container .stripe-button-el span:hover{
		color: #fff;
    background-color: #138496;
    border-color: #117a8b;
	}

/* ===== LOGIN PAGE ====== */
	.sca-login-page{
		border: 1px solid #eee;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    padding: 55px 55px 15px 55px;
    width: 880px;
    margin: 0 auto;
  }
	.sca-login-page .title{  }
	.sca-login-page .login-wrapper{ padding: 0 55px; }
	.sca-login-page #sca-login-form{  }
	.sca-login-page #sca-login-form .form-group{  }
	.sca-login-page #sca-login-form .form-group label{
		font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
	}
	.sca-login-page #sca-login-form .form-group input{
		font-size: 13px;
    border: 0;
    border-bottom: 1px dashed #999;
    border-radius: 0;
	}
	.sca-login-page #sca-login-form .form-group input.is-invalid{ border-color: #dc3545; }
	.sca-login-page #sca-login-form .form-group input.is-valid{ border-color: #28a745; }
	.sca-login-page #sca-login-form .form-footer{
		margin-top: 50px;
    margin-bottom: 75px;
    text-align: right;
	}
	.sca-login-page #sca-login-form .form-footer img{
		width: 40px;
    display: none;
	}
	.sca-login-page #sca-login-form .form-footer .btn{
		padding: 15px 45px;
    background-color: #1a6eac;
    border: 0;
    font-weight: 600;
    text-transform: uppercase;
	}
	.sca-login-page #sca-login-form .form-footer .btn:hover{ background-color: #01a495; }

/* ===== RESTRICTION PAGE ===== */
	.sca-restricted-page{
		border: 1px solid #eee;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    padding: 55px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto;
    text-align: center;
	}
	.sca-restricted-page .icon{
		font-size: 60px;
    margin: 0 auto;
    color: #a2cc41;
    margin: 10px 0 30px;
	}
	.sca-restricted-page h3{
		margin: 0 0 5px;
    font-size: 20px;
	}
	.sca-restricted-page p{
		color: #cfcece;
    font-weight: 100;
    font-size: 13px;
	}
	.sca-restricted-page a{
		background-color: #a2cc41;
    color: #fff;
    padding: 12px 35px;
    margin-top: 30px;
	}
	.sca-restricted-page a:hover{
		background-color: #9ec740;
    color: #fff;
    padding: 12px 35px;
    margin-top: 30px;
	}

/* ===== STAFF DASHBOARD PAGE ====== */
	.spl-staff-dashboard-page{
		padding: 0;
    margin: 0 auto;
    border: 1px solid #999;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    width: 880px;
	}
	.sca-staff-dashboard-page .home-section{
		padding: 45px 30px;
	}
	.sca-staff-dashboard-page .sca-header-navbar{ border-bottom: 1px solid #aaa; }
	.sca-staff-dashboard-page .sca-header-navbar .navbar-brand{  }
	.sca-staff-dashboard-page .sca-header-navbar .navbar-brand span{ 
		position: absolute;
    right: 80px;
    bottom: 5px;
    font-size: 10px;
	}
	.sca-staff-dashboard-page .sca-header-navbar .navbar-brand i{ 
		border: 2px solid #fff;
    padding: 8px 10px;
    border-radius: 50%;
    margin-left: 10px;
	}

	.sca-staff-dashboard-page #sca-header-dropdownnav{  }
	.sca-staff-dashboard-page #sca-header-dropdownnav h5{ margin-bottom: 25px; }
	.sca-staff-dashboard-page #sca-header-dropdownnav .nav-pills{  }
	.sca-staff-dashboard-page #sca-header-dropdownnav .nav-pills .nav-link{ color: #fff; }
	.sca-staff-dashboard-page #sca-header-dropdownnav .nav-pills .nav-link:hover{
		background-color: #716e7e;
    border-radius: 0;
	}
	.sca-staff-dashboard-page #sca-header-dropdownnav .nav-pills .nav-link.active{
		background-color: #716e7e;
    border-radius: 0;
	}
	.sca-staff-dashboard-page .admin-tab-content{
		min-height: 50vh;
    padding: 25px;
	}
	 

  /* === Home === */
	  .sca-staff-dashboard-page .home-section{  }
		.sca-staff-dashboard-page .home-section .class-list-section{  }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab{ width: 100%; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs{  }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs .nav-item{ color: #495057; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs .nav-item.active,
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs .nav-item:hover{
			background-color: #efefef;
	    color: #1a6eac;
	    font-weight: 700;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs .nav-item i{  }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent{
			border: 1px solid #dee2e6;
	    width: 100%;
	    border-top: 0px;
	    border-radius: 0 0 3px 3px;
	    padding: 50px 25px;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .tab-pane{  }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent{ }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .refresh-classes{ color: #fff; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .loader-gif{
	    margin: 0 auto;
	    display: none;
	    width: 300px;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows{ }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column{ }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card{ margin-bottom: 35px; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card .card-img-top{ height: 180px; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body{ }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body .card-title{
			min-height: 45px;
    	margin-top: 10px;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body .button-group{ text-align: center; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body .button-group .btn{
			color: #fff;
    		margin: 5px 0;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .open-assessment{ color: #fff; }

	/* === Attendance === */
		.sca-staff-dashboard-page .attendance-section{ padding: 50px 55px; }
		.sca-staff-dashboard-page .attendance-section .attendance-title{  }
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table{ 
			min-width: 1000px;
	    margin: 0px 15px;
	    width: 95%;
		}
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-student{ width: fit-content; }
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-age{
			width: fit-content;
    	text-align: center;
		}
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-level{
			width: fit-content;
    	text-align: center;
    }
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-guardian{ width: fit-content; }
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-medical{
			text-align: center;
    	width: 30%;
		}
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-guardian .guardian-phone{
			font-size: 11px;
    	margin-left: 10px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-attendance{
			text-align: center;
    	width: fit-content;
		}
		.sca-staff-dashboard-page .attendance-section #sca-attendance-table .col-attendance .loader-gif{
			width: 15px;
			display: none;
		}
		.sca-staff-dashboard-page .attendance-section .footer-row{
			padding: 0;
	    width: 100%;
	    text-align: right;
	    margin-top: 45px;
		}
		.sca-staff-dashboard-page .attendance-section .footer-row .col-12{ padding: 0; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-header{ background-color: #222; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-header .modal-title{ color: #fff; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-header button{ color: #fff; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-body{ 
			padding: 25px 15px; 
			max-height: 60vh;
    	overflow: scroll;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .note{ }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .note p{ font-size: 12px; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .note ol{
			list-style: none;
	    padding: 0 0 0 10px;
	    font-size: 12px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .note ol li{ }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .note p.required{ color: #dc3545; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-footer .loader-gif{
			display: none;
			width: 30px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .modal-footer .alert{
			font-size: 13px;
	    width: 100%;
	    text-align: center;
	    margin-top: 10px !important;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .form-info{
			background: #efefef;
    	padding: 15px 15px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .form-info p{
			margin: 0;
    	font-size: 13px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .form-info strong{ }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal hr{
			margin-top: 30px;
    	border: 1px solid #333;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form{
			font-size: 17px;
	    margin-bottom: 5px;
	    padding-left: 15px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .form-group{
			margin-top: 20px;
    	padding: 0 15px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .form-group h3{
			font-size: 15px;
    	margin-bottom: 5px;
    	padding: 0;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .form-group input{ padding: 0px 10px; }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .form-group select{ }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .form-group label{
			font-weight: normal;
	    font-size: 12px;
	    text-transform: none;
	    line-height: 1.3;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form h3{
			font-size: 15px;
    	margin-bottom: 5px;    	
    	padding-left: 15px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .custom-radio{
			padding: 10px 10px;
	    background: #f8f9fa;
	    margin-bottom: 10px;
	    font-size: 14px;
	    margin: 15px 15px;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .custom-radio label{
	    width: 100%;
	    border-bottom: 1px solid #e9e9e9;
	    padding-bottom: 7px;    
	    font-size: 12px;
	    font-weight: 700;
	    text-transform: uppercase;
		}
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal form .custom-radio input{ margin: 0 3px 0 10px;  }
		.sca-staff-dashboard-page .attendance-section #sca-postsession-form-modal .form-group .form-control-file::before{ content: 'Upload'; }
	
	/* === Attendance Record === */
		.sca-staff-dashboard-page .attendance-record-section{ padding: 50px 55px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive{
			position: relative;
	    min-width: 50%;
	    z-index: 1;
	    margin: 0 20px;
	    overflow: auto;
	    height: 380px;
	    margin-bottom: 35px;
	    border-bottom: 3px solid #efefef;
	    border-left: 3px solid #efefef;
	    border-radius: 3px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table{
			width: max-content;
	    min-width: 500px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-attendance{ 
			text-align: center;
	    font-size: 19px;
	  }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-students{ 
			vertical-align: middle;
	    top: 48px;
	    position: sticky;
	    left: 0;
	    z-index: 2;
	    background: #fbf9f9;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-date{
			text-align: center;
	    width: 70px;
	    top: 48px;
	    font-weight: 100;
	    font-size: 12px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-status{ text-align: center; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-status i{ font-size: 15px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead tr{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead tr th{
			background: #333;
	    color: #fff;
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    z-index: 2;
	    border: 0px solid #333;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead tr th{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody tr{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody td{
			padding: 10px 15px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody td.col-date{ }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead th.col-students{ 
			z-index: 3; 
			background: #333;
			padding: 10px 15px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody td.col-students{ }

	/* === Assessment === */
		.sca-staff-dashboard-page .assessment-section{ padding: 50px 55px; }
		.sca-staff-dashboard-page .assessment-section .table-scroll{
			position: relative;
	    min-width: 50%;
	    z-index: 1;
	    margin: 0;
	    overflow: auto;
	    height: 380px;
	    margin-bottom: 35px;
	    border-bottom: 3px solid #efefef;
	    border-left: 3px solid #efefef;
	    border-radius: 3px;
		}
		.sca-staff-dashboard-page .assessment-section .table-scroll table{ 
			width: 100%;
		  min-width: 500px;
		  margin: auto;
		  border-collapse: separate;
		  border-spacing: 0;

		}
		.sca-staff-dashboard-page .assessment-section .table-scroll th,
		.sca-staff-dashboard-page .assessment-section .table-scroll td {
		  padding: 5px 10px;
		  border: 1px solid #000;
		  background: #fff;
		  vertical-align: middle;
		}
		.sca-staff-dashboard-page .assessment-section .table-scroll thead th {
		  background: #333;
		  color: #fff;
		  position: -webkit-sticky;
		  position: sticky;
		  top: 0;
		  z-index: 1;
		}
		.sca-staff-dashboard-page .assessment-section .table-scroll thead th.col-student{ top: 57.5px; }
		.sca-staff-dashboard-page .assessment-section .table-scroll th:first-child {
		  position: -webkit-sticky;
		  position: sticky;
		  left: 0;
		  z-index: 2;
		  background: #ccc;
		}
		.sca-staff-dashboard-page .assessment-section .table-scroll thead th:first-child{
		  z-index: 5;
		  background-color: #333;
		}
		.sca-staff-dashboard-page .assessment-section .table-scroll thead th:first-child.col-student{
		  z-index: 1;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table{
			background: #222;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th{ width: fit-content; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student-heading{
			text-align: center;
	    text-transform: uppercase;
	    background: #222;
	    font-size: 1em;
	    padding: 15px;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-question-heading{
			text-align: center;
	    text-transform: uppercase;
	    background: #222;
	    vertical-align: middle;
	    font-size: 18px;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student{
			text-align: center;
   		background-color: #222;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr th{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td{ text-align: center; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-category-heading{
			width: fit-content;
	    background-color: #2a2a2a;
	    color: #fff;
	    text-transform: uppercase;
	    font-size: 14px;
	    vertical-align: middle;
	    min-width: 300px;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-skill-heading{
			width: fit-content;
	    background-color: #2a2a2a;
	    color: #fff;
	    text-transform: uppercase;
	    font-size: 12px;
	    vertical-align: middle;
	  }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-question-heading{
			background-color: #efefef;
	    font-weight: 400;
	    font-size: 14px;
	    vertical-align: middle;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox input{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox label{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .loader-gif{
			display: none;
			width: 15px;
		}
		.sca-staff-dashboard-page .assessment-section .footer-row{
			display: block;
    	width: 100%;
		}

	/* === Assessment Record === */
		.sca-staff-dashboard-page .assessment-record-section{ padding: 50px 55px; }
		.sca-staff-dashboard-page .assessment-record-section .table-scroll{
			position: relative;
	    min-width: 50%;
	    z-index: 1;
	    margin: 0;
	    overflow: auto;
	    height: 380px;
	    margin-bottom: 35px;
	    border-bottom: 3px solid #efefef;
	    border-left: 3px solid #efefef;
	    border-radius: 3px;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table{
			background: #222;
			width: max-content;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead{  }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr{  }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th{
			width: fit-content;
	    border: 1px solid #000;
	    background: #333;
	    color: #fff;
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    z-index: 1;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-question-heading{
			text-align: center;
	    text-transform: uppercase;
	    background: #222;
	    vertical-align: middle;
	    font-size: 18px;
	    position: sticky;
	    left: 0;
	    z-index: 2;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student-heading{
			text-align: center;
	    text-transform: uppercase;
	    background: #222;
	    font-size: 1em;
	    padding: 15px;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student{
			text-align: center;
	    background: #222;
	    font-size: 1em;
	    padding: 7px 15px;
	    top: 56px;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student .email-report{
			display: block;
	    margin: 0 auto;
	    padding: 2px 5px;
	    max-width: fit-content;
	    font-size: 12px;
	    margin-top: 10px;
	    margin-bottom: 8px;
	    background-color: #333;
	    border: 1px solid #333;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody{  }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr{  }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr th{
			padding: 5px 10px;
    	border: 1px solid #000;
		} 		
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody td{
			padding: 5px 10px;
    	border: 1px solid #000;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody td.col-skill-heading{
			width: fit-content;
	    background-color: #2a2a2a;
	    color: #fff;
	    text-transform: uppercase;
	    font-size: 12px;
	    vertical-align: middle;
	    text-align: center;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr th.col-category-heading{
			width: fit-content;
	    background-color: #2a2a2a;
	    color: #fff;
	    text-transform: uppercase;
	    font-size: 14px;
	    vertical-align: middle;
	    min-width: 300px;
	    position: sticky;
	    left: 0;
	    z-index: 1;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr th.col-category-heading{  }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr.skill-checkrow th.col-question-heading{
			background-color: #efefef;
	    font-weight: 400;
	    font-size: 14px;
	    vertical-align: middle;
	    position: sticky;
	    left: 0;
	    z-index: 1;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr.skill-checkrow td{
			padding: 5px 10px;
	    border: 1px solid #000;
	    background: #fff;
	    vertical-align: middle;
	   	text-align: center;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr.skill-checkrow td i{ font-size: 20px; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal{ }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-header{ background-color: #222; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-header .modal-title{ color: #fff; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-header button{ color: #fff; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body{ padding: 25px 15px; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body li{
			list-style: none;
	    font-size: 12px;
	    padding: 0px 0 2px;
		}
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body li strong{ padding-right: 3px; }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .send-to-guardian{
			display: block;
	    margin: 10px auto;
	    font-size: 14px;
	    width: 70%;
	    margin-top: 30px;
		}
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .form-group{ }
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .form-group input,
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .form-group textarea{
			margin-top: 25px;
	    width: 75%;
	    margin: 25px auto 0;
	    font-size: 14px;
		}
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .send-to-others{
			display: block;
	    margin: 10px auto;
	    font-size: 14px;
	    width: 70%;
		}
		.sca-staff-dashboard-page .assessment-record-section .email-reports-modal .modal-body .loader-gif{
			width: 25px;
    	margin: 25px auto;
    	display: none;
		}
	
	/* === Bookings === */
		.sca-staff-dashboard-page .booking-section{ padding: 45px 30px; }
		.sca-staff-dashboard-page .booking-section .greetings-row{ }
		.sca-staff-dashboard-page .booking-section .greetings-row .attendance-title{ }
		.sca-staff-dashboard-page .booking-section .classes-rows{ }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column{ margin-bottom: 30px; }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card{ }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card img{ height: 180px; }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body{ }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body .badge-pill{ }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body .card-title{
			min-height: 45px;
    	margin-top: 10px;
		}
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body hr{ }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body .button-group{ text-align: center; }
		.sca-staff-dashboard-page .booking-section .classes-rows .class-column .card-body .button-group .btn{ }
		.sca-staff-dashboard-page .booking-section #sca-students-table td.col-date{ background-color: #f0f0f0; }
		.sca-staff-dashboard-page .booking-section #sca-students-table .col-age{ text-align: center; }
		.sca-staff-dashboard-page .booking-section #sca-students-table .col-level{ text-align: center; }
		.sca-staff-dashboard-page .booking-section .filter-label{ margin: 25px 0 0 0; }
		.sca-staff-dashboard-page .booking-section .filter-options{ margin: 0 0 15px; }
		.sca-staff-dashboard-page .booking-section .filter-options .start-datefilter-col{
			display: inline-block;
	    vertical-align: middle;
	    width: 180px;
		}
		.sca-staff-dashboard-page .booking-section .filter-options .start-datefilter-col input{ font-size: 14px; }
		.sca-staff-dashboard-page .booking-section .filter-options .end-datefilter-col{
			display: inline-block;
	    vertical-align: middle;
	    width: 180px;
		}
		.sca-staff-dashboard-page .booking-section .filter-options .end-datefilter-col input{ font-size: 14px; }
		.sca-staff-dashboard-page .booking-section .filter-options .skatepark-filter-col{
			display: inline-block;
	    vertical-align: middle;
	    width: 11%;
		}
		.sca-staff-dashboard-page .booking-section .filter-options .skatepark-filter-col select{ border-color: #ccc; }
		.sca-staff-dashboard-page .booking-section .filter-options .skatepark-filter-col input{border-color: #ccc; }
		.sca-staff-dashboard-page .booking-section .filter-options .filter-apply-col{
			display: inline-block;
	    vertical-align: middle;
	    width: 10%;
		}
		.sca-staff-dashboard-page .booking-section .filter-options .filter-apply-col .loader-gif{ 
			width: 25px;
			display: none;
		}
		.sca-staff-dashboard-page .booking-section .booking-spinner{ display: none; }
		.sca-staff-dashboard-page .booking-section .filter-options .update-attendance-col{
			width: auto;
	    display: inline-block;
	    float: right;
		}
		.sca-staff-dashboard-page .booking-section .filter-options .update-attendance-col .btn-warning{ color: #fff; }
		.sca-staff-dashboard-page .booking-section .filter-options .update-attendance-col #update-attendance-modal{  }


	/* === Skatepark Classes === */
		.sca-staff-dashboard-page .skatepark-classes-section .sca-audit-form-modal-button{ }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-header{ background-color: #222; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-header .modal-title{ color: #fff; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-header button{ color: #fff; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-body{ padding: 25px 15px; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .form-info{
			background: #efefef;
    	padding: 15px 15px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .form-info p{
			margin: 0;
    	font-size: 13px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .form-info strong{ }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form{
			margin-top: 25px;
	    border-top: 1px solid #efefef;
	    padding: 25px 15px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form select{
			font-size: 14px;
	    margin-bottom: 30px;
	    margin-top: -10px;
	    background: #f8f9fa;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form h3{
			font-size: 20px;
    	font-weight: 700;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .custom-radio{
			padding: 10px 10px;
	    background: #f8f9fa;
	    margin-bottom: 10px;
	    font-size: 14px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .custom-radio label{
	    width: 100%;
	    border-bottom: 1px solid #e9e9e9;
	    padding-bottom: 7px;    
	    font-size: 12px;
	    font-weight: 700;
	    text-transform: uppercase;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .custom-radio input{ margin-left: 15%; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .form-group{
			background: #f8f9fa;
	    margin-bottom: 10px;
	    font-size: 14px;
	    margin-top: 25px;
	    padding: 25px 15px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form label .required{ color: #dc3545; }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .form-group label{ }
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form .form-group textarea{
			border: 1px dashed #999;
    	margin-top: 10px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal #sca-audit-form hr{
			margin-top: 30px;
    	border: 1px solid #333;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-footer .loader-gif{
			display: none;
			width: 30px;
		}
		.sca-staff-dashboard-page .skatepark-classes-section #sca-audit-form-modal .modal-footer .alert{
			font-size: 13px;
	    width: 100%;
	    text-align: center;
	    margin-top: 10px !important;
		}
	
	/* === Class Attendance === */
		.sca-staff-dashboard-page .class-attendance-section{ padding: 40px 35px; }
		.sca-staff-dashboard-page .class-attendance-section .greetings-row{ }
		.sca-staff-dashboard-page .class-attendance-section .greetings-row .title{ }
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows{
			margin: 0;
	    border: 1px solid #eee;
	    padding: 40px 25px;
		}
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .title{
			text-align: center;
    	margin: 15px 0 35px;
		}
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column{ margin-bottom: 30px; }
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column .card{ }
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column .card img{ height: 180px; }
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column .card .card-body{ }
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column .card .card-body .card-title{
			min-height: 45px;
	    margin-top: 10px;
	    text-align: center;
	    font-weight: 700;
		}
		.sca-staff-dashboard-page .class-attendance-section .skatepark-rows .skatepark-column .card .card-body .button-group{ text-align: center; }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .skatepark-column .card .card-body .button-group .btn{ }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows{
			margin: 0;
	    border: 1px solid #eee;
	    padding: 40px 25px;
		}
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .title{
			text-align: center;
    	margin: 15px 0 35px;
		}
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column{ margin-bottom: 30px; }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card{ }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card img{ height: 180px; }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card .card-body{ }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card .card-body .badge{ display: block; }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card .card-body .card-title{
			min-height: 45px;
	    margin-top: 10px;
	    text-align: center;
	    font-weight: 700;
		}
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card .card-body .button-group{ text-align: center; }
		.sca-staff-dashboard-page .class-attendance-section .schedule-rows .schedule-column .card .card-body .button-group .btn{ }
		.sca-staff-dashboard-page .attendance-update-section{ }
		.sca-staff-dashboard-page .attendance-update-section .greetings-row{ }
		.sca-staff-dashboard-page .attendance-update-section .greetings-row .attendance-title{ }
		.sca-staff-dashboard-page .attendance-update-section .content-row{ }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table{ }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table{ }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table{ 
			min-width: 1000px;
	    margin: 0px 15px;
	    width: 95%;
		}
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-student{ width: fit-content; }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-age{
			width: fit-content;
    	text-align: center;
		}
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-level{
			width: fit-content;
    	text-align: center;
    }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-guardian{ width: fit-content; }
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-medical{
			text-align: center;
    	width: 30%;
		}
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-guardian .guardian-phone{
			font-size: 11px;
    	margin-left: 10px;
		}
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-attendance{
			text-align: center;
    	width: fit-content;
		}
		.sca-staff-dashboard-page .attendance-update-section #sca-attendance-table .col-attendance .loader-gif{
			width: 15px;
			display: none;
		}

	@media only screen and (max-width: 485px) {

		.sca-staff-dashboard-page .assessment-section{ padding: 50px 25px; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table{
			
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student-heading{
			
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-question-heading{
			
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student{
			
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr th{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td{  }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-category-heading{
			font-size: 12px;
			min-width: 100px;
    	line-height: 1.2;
    	width: 100px;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-skill-heading{
			font-size: 10px;
	  }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-question-heading{
			font-size: 11px;
	    text-align: center;
	    line-height: 1.2;
		}
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox input{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .custom-checkbox label{ }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr td .loader-gif{
			
		}


		
	}

/* ===== Guardian DASHBOARD PAGE ====== */
	.sca-guardian-dashboard-page{
		padding: 0 !important;
    margin: 0 auto;
    border: 1px solid #999;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    width: 880px;
	}
	.sca-guardian-dashboard-page .sca-header-navbar{ background-color: #17252a !important; }
	.sca-guardian-dashboard-page .sca-header-navbar .navbar-toggler{ }
	.sca-guardian-dashboard-page .sca-header-navbar .navbar-toggler .navbar-toggler-icon{ }
	.sca-guardian-dashboard-page .sca-header-navbar .navbar-brand{
		font-size: 14px;
    font-family: Arial;
    font-weight: 300;
	}
	.sca-guardian-dashboard-page .sca-header-navbar .navbar-brand i{ 
		font-size: 14px; 
		margin-left: 10px;
	}
	.sca-guardian-dashboard-page #sca-header-dropdownnav{
		width: 20%;
    border-top: 0px solid #464866;
    margin-left: 15px;
    box-shadow: 0 2px 4px #0003;
    margin-bottom: 30px;
    position: absolute;
    z-index: 5;
	}
	.sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper{
		background-color: #fff !important;
    border: 1px solid #e1e1e1;
    border-top: 3px solid #2b7a78;
    padding: 0 0 !important;
    border-radius: 0 0 3px 3px;
	}
	.sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper .nav-pills{  }
	.sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper .nav-pills .nav-link{
		border-radius: 0;
    padding: 10px 20px 10px;
    font-size: 14px;
    font-weight: 300;
    color: #333;
    font-family: Arial;
   }
   .sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper .nav-pills .nav-link.active{
			background-color: #3aafa9;
    	color: #fff;
   }
   .sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper .nav-pills .nav-link:hover{
   		background-color: #3aafa9;
    	color: #fff;
   }
	.sca-guardian-dashboard-page #sca-header-dropdownnav .dropdown-wrapper .nav-pills .nav-link i{
		font-size: 15px;
    width: 30px;
	}
	.sca-guardian-dashboard-page .shortcode-content{
		border: 1px solid #eee;
    padding: 35px 15px;
    background: #feffff;
	}
	.sca-guardian-dashboard-page .shortcode-content .page-title{    
    font-weight: 600;
    font-size: 32px;
    color: #2b7a78;
    font-family: Arial;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 30px;
	}
	.sca-guardian-dashboard-page .shortcode-content p{ 
		font-family: Arial;
		font-size: 14px;
		color: #555;
	}
	.sca-guardian-dashboard-page .shortcode-content .page-title i{  }
	.sca-guardian-dashboard-page .dashboard-content{  }
	.sca-guardian-dashboard-page .dashboard-content .counter-container{  }
	.sca-guardian-dashboard-page .dashboard-content .counter-container .row{  }
	.sca-guardian-dashboard-page .dashboard-content .counter-container .col-4{  }
	.sca-guardian-dashboard-page .dashboard-content .counter-container .card .card-body{  }
	.sca-guardian-dashboard-page .dashboard-content .counter-container .card .card-body .card-title{
    font-weight: 600;
    font-size: 15px;
	}
	.sca-guardian-dashboard-page .dashboard-content .counter-container .card .card-body .card-counter{
		font-weight: 700;
    font-size: 42px;
    margin: 0;
	}

	/* Purchase Page */
	.sca-guardian-page .purchase-page{  }
	.sca-guardian-page .purchase-page .page-title{
		font-weight: 600;
    font-size: 22px;
	}
	.sca-guardian-page .purchase-page .purchase-table{  }
	.sca-guardian-page .purchase-page .purchase-table .col-id{
		width: 5%;
    text-align: center;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-class{  }
	.sca-guardian-page .purchase-page .purchase-table .col-qty{
		width: 5%;
    text-align: center;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-status{
		width: 10%;
    text-align: center;
    text-transform: capitalize;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-expire{ 
		width: 15%; 
		text-align: center;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-total{
		width: 10%;
    text-align: center;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-remain{
		width: 10%;
    text-align: center;
	}
	.sca-guardian-page .purchase-page .purchase-table .col-action{ width: 10%; }
	.sca-guardian-page .purchase-page .purchase-table .table{  }
	.sca-guardian-page .purchase-page .purchase-table .table thead{ background-color: #334443 !important; }
	.sca-guardian-page .purchase-page .purchase-table .table thead tr{ background-color: #334443 !important;  }
	.sca-guardian-page .purchase-page .purchase-table .table thead tr th{
		vertical-align: middle;
    text-align: center;
    border-color: #22363d;
    color: #fff;
    background-color: #17252a !important;
    font-family: Arial;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}
	}
	.sca-guardian-page .purchase-page .purchase-table .table thead tr th .badge{ 
		opacity: 0.7; 
		background-color: #3aafa9; 
	}
	.sca-guardian-page .purchase-page .purchase-table .table thead tr th .badge:hover{ opacity: 1;  }
	.sca-guardian-page .purchase-page .purchase-table .table thead tr th .badge i{  }
	.sca-guardian-page .purchase-page .purchase-table .table tbody th{  
		border-color: #f2f6f6;
    background-color: #faffff;
	}
	.sca-guardian-page .purchase-page .purchase-table .table tbody td{
		border-color: #f2f6f6;
	}

	/* Resume Booking Page */
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-wrapper{  }
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-wrapper .calendar-header{
		background-color: #17252a;
    margin: 0 0;
    padding: 12px 0;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-wrapper .calendar-header .title h2{
		margin: 5px 0 0;
    color: #fff;
    font-family: Arial;
    font-weight: 600;
    font-size: 28px;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-wrapper .navigation .btn{
		padding: 5px;
    font-weight: 700;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 13px;
    margin: 0 5px;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-month-table{ border-bottom: 1px solid #777; }
	.sca-guardian-page .sca-resume-booking-calendar-container .calendar-month-table th{
		font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 10px;
    background-color: #2b7a78;
    border-color: #256a68;
    font-family: Arial;
    letter-spacing: 3px;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container tbody .col-weekday{
		text-align: center;
    border: 0;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container tbody .col-weekday .btn-sched{
		color: #fff;
    border-radius: 50%;
    text-align: center;
    width: 45px;
    height: 45px;
    padding: 10px;
    background-color: #3aafa9;
	}
	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal{  }
	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal .modal-header{ 
		background-color: #2b7a78 !important;
		font-family: Arial;
 	}
 	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal .modal-header h5{ 
		font-family: Arial;
    font-weight: 600;
    font-size: 18px;
 	}
 	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal .btn-schedule-select{
 		background-color: #3aafa9;
    border-color: #3aafa9;
 	}
 	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal .btn-info:disabled{
 		background-color: #3aafa9;
    border-color: #3aafa9;
 	}
	.sca-guardian-page .sca-resume-booking-calendar-container .schedule-modal .loader-gif{ display:none; }
	.sca-guardian-page .sca-resume-booking-calendar-container .loader-gif{
		width: 100px;
    margin: 55px auto;
    display: none;
	}


/* ===== BOOKING ===== */
	.sca-booking-page{ }
	.sca-booking-page .greetings-row{
		background: #1d73b2;
    padding: 45px 45px 35px;
    margin-bottom: 55px;
	}
	.sca-booking-page .greetings-row .page-title{
		margin: 0;
    color: #fff;
    font-size: 42px;
    text-transform: uppercase;
	}
	.sca-booking-page #bookingTab{
		border-bottom: 1px solid #e6e7ec;
    padding-bottom: 25px;
	}
	.sca-booking-page #bookingTab .nav-item{ }
	.sca-booking-page #bookingTab .nav-item .nav-link{ }
	.sca-booking-page #bookingTab .nav-item .nav-input{
		font-size: 14px;
    color: #464646;
    opacity: .6;
	}
	.sca-booking-page #bookingTab .nav-item .nav-link.active{
		background-color: transparent;
    color: #333;
    font-weight: 700;
    font-size: 18px;
	}
	.sca-booking-page #bookingTab .nav-item .nav-link.disabled{
		font-weight: 600;
    color: #bebebe;
	}
	.sca-booking-page #bookingTabContent{ }
	.sca-booking-page #bookingTabContent .tab-pane{ }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column{ padding: 15px; }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column .card{ }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column .card img{ height: 225px; }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column .card .card-body{ }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column .card .card-body .card-title{ font-weight: 600; }
	.sca-booking-page #bookingTabContent .tab-pane .skatepark-column .card .card-body .btn-select{
		width: 100%;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 25px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows{ }
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column{ }
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card{
		margin-bottom: 30px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card img{ height: 250px; }
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card .card-body{ }
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card .card-body .btn-info{ }
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card .card-body .card-title{
		display: inline-block;
    vertical-align: top;
    width: 75%;
    padding-left: 10px;
    height: 60px;
    font-weight: 700;
	}
	.sca-booking-page #bookingTabContent .tab-pane .classes-rows .class-column .card .card-body .btn-select{ width: 100%; }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal{ }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog{ }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog .modal-content{ }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog .modal-content .modal-body{ padding: 0; }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog .modal-content .modal-body img{ }
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog .modal-content .modal-body .card-title{
		padding: 25px 15px 0;
    font-weight: 700;
    font-size: 20px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .class-modal .modal-dialog .modal-content .modal-body p{
		padding: 0 15px;
    font-size: 14px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column{ padding-top: 35px; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta ul{
		padding: 0;
    list-style: none;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta ul li{ font-size: 13px; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta ul li i{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta ul li strong{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .img-thumbnail{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .class{
		margin: 15px 0 10px;
    font-weight: 600;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta{ margin-bottom: 15px; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta .badge{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .meta .badge i{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column .desc{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .class-info-column p{ font-size: 13px; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column{ margin-top: 35px; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .loader-gif{
		width: 75px;
    margin: 100px auto;
    display: none;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header{
		background-color: #eaeaea;
    margin: 0 0;
    padding: 12px 0;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .title{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .title h2{ 
    margin: 5px 0 0;
 	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .navigation{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .navigation .btn{
		padding: 5px;
    font-weight: 700;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 13px;
    margin: 0 5px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .navigation .btn i{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .table-responsive{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table{ border-bottom: 1px solid #777; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table caption{ display: none; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table .thead-dark{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table .thead-dark th{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table .thead-dark .col-weekday{ text-align: center; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td{ }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody .col-weekday{
		text-align: center;
    border: 0;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge a{ 
		color: #bcbcbc; 
		text-decoration: none;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge a:hover{
		cursor: default;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge{
		font-size: 15px;
    background: #fff;
    color: #bcbcbc;
    font-weight: 400;
    border: 0;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    padding: 10px 0;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-active{
		background-color: #1d73b2;
    color: #fff;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-active a{ color: #fff; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-active a:hover{ text-decoration: none; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-info{
		color: #000;
    background-color: #118597;
    font-weight: 600;
    cursor: pointer;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-info a{ color: #fff; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .btn-sched{
		color: #fff;
    border-radius: 50%;
    text-align: center;
    width: 45px;
    height: 45px;
    padding: 10px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-month-table tbody td .badge-info:hover{ background-color: #17a2b8; }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list h2{
		font-size: 18px;
    font-weight: 600;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list .schedule-cards{
		margin-bottom: 15px;
    width: 100%;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list .schedule-cards .card-body{  }
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list .schedule-cards .card-body .card-title{
    font-weight: 600;
    font-size: 15px;
	}
	.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-footer .schedule-list .schedule-cards .card-body .card-subtitle{
		font-size: 12px;
	}
	.sca-booking-page .registration-container{  }
	.sca-booking-page .registration-container .row{  }
	.sca-booking-page .registration-container .row .title-header{  }
	.sca-booking-page .registration-container .row .title-header h3{
		text-align: center;
    margin: 60px 15px 50px;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 28px;
	}
	.sca-booking-page .registration-container .sign-in-column{
		border-right: 1px solid #e6e7ec;
    padding-right: 45px;
	}
	.sca-booking-page .registration-container .message{
		font-weight: 600;
    font-size: 18px;
	}
	.sca-booking-page .registration-container form{  }
	.sca-booking-page .registration-container form .loader-gif{
		height: 30px;
    width: 30px;
    display: none;
    margin: 25px 0;
	}
	.sca-booking-page .registration-container .sign-in-column .form-group{  }
	.sca-booking-page .registration-container form label{
		text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
	}
	.sca-booking-page .registration-container form label .required{ color: #dc3545; }
	.sca-booking-page .registration-container form input{
		border: 0;
    border-bottom: 1px dashed #9a9a9a;
    font-size: 13px;
	}
	.sca-booking-page .registration-container form select{
		border: 0;
    border-bottom: 1px dashed #9a9a9a;
    font-size: 13px;
	}
	.sca-booking-page .registration-container form textarea{
		border: 0;
    border-bottom: 1px dashed #9a9a9a;
    font-size: 13px;
	}
	.sca-booking-page .registration-container .sign-in-column .remind-pass{
		font-size: 12px;
    color: #1c73b2;
    cursor: pointer;
	}
	.sca-booking-page .registration-container .sign-in-column .remind-pass:hover{ text-decoration: underline; }
	.sca-booking-page .registration-container .sign-in-column .btn-sign-in{
		display: block;
    font-size: 15px;
    border-radius: 25px;
    padding: 13px 25px;
    margin-top: 25px;
	}
	.sca-booking-page .registration-container .sign-up-column{ padding-left: 45px;  }
	.sca-booking-page .registration-container .sign-up-column .sign-up-form{  }
	.sca-booking-page .registration-container .sign-up-column .sign-up-form .btn-primary{
		display: block;
    font-size: 15px;
    border-radius: 25px;
    padding: 13px 25px;
    margin-top: 25px;
	}
	.sca-booking-page .registration-container .checkout-column{
		border-right: 1px solid #e6e7ec;
    padding-right: 45px;
	}
	.sca-booking-page .registration-container .checkout-column .row-heading{ margin-bottom: 40px; }
	.sca-booking-page .registration-container .checkout-column .row-heading .col-8{ }
	.sca-booking-page .registration-container .checkout-column .row-heading .col-8 h4{ margin: 0; } 
	.sca-booking-page .registration-container .checkout-column .row-heading .col-4{ }
	.sca-booking-page .registration-container .checkout-column .row-heading .col-4 button{ }
	.sca-booking-page .registration-container .checkout-form{ margin-bottom: 50px; }
	.sca-booking-page .registration-container .checkout-form .form-check{ margin-top: 35px; }	
	.sca-booking-page .registration-container .choose-participant-form{  }
	.sca-booking-page .registration-container .choose-participant-form .submit-group{  }
	.sca-booking-page .registration-container .choose-participant-form .submit-group .loader-gif{  }
	.sca-booking-page .registration-container .choose-participant-form .submit-group .btn{
		font-size: 13px;
    margin-top: 25px;
	}
	.sca-booking-page .registration-container .add-participant-form{ display: none; }
	.sca-booking-page .registration-container .add-participant-form .submit-group .btn{
		font-size: 13px;
    margin-top: 25px;
	}

	.sca-booking-page .registration-container .order-column{  }
	.sca-booking-page .registration-container .order-column .order-heading{
		background-color: #17a2b8;
    padding: 10px 15px;
	}
	.sca-booking-page .registration-container .order-column .order-heading h2{
		margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
	}
	.sca-booking-page .registration-container .order-column .preview-section{
		background: #f6f6f6;
    padding: 25px;
	}
	.sca-booking-page .registration-container .order-column .preview-section .title{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
	}
	.sca-booking-page .registration-container .order-column .preview-section ul{
    padding: 0;
    list-style: none;
    font-size: 13px;
	}
	.sca-booking-page .registration-container .order-column .preview-section ul li{  }
	.sca-booking-page .registration-container .order-column .preview-section ul li .label{
		width: 20%;
    display: inline-block;
	}
	.sca-booking-page .registration-container .order-column .preview-section ul li strong{  }
	.sca-booking-page .registration-container .order-column .preview-section .loader-gif{
		width: 30px;
    display: none;
	}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion{}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card{     
		border: 0;
  }
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card .card-header{
		padding: 0;
    border: 0;
    border-bottom: 2px solid #444;
	}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card .card-header h5{}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card .card-header h5 .btn{
		color: #444;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
	}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card .card-header h5 .btn i{
		margin: 0px 0 0 10px;
    font-size: 18px;
	}
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card #sca-booking-schedules{ background-color: #F7F7F7; }
	.sca-booking-page .registration-container .order-column .preview-section #sca-schedule-accordion .card #sca-booking-student{ background-color: #F7F7F7; }
	.sca-booking-page .registration-container .order-column .preview-section .sca-booking-listings{
    border-top: 4px double #444;
    padding-top: 15px;
    margin-bottom: 40px;
	}
	.sca-booking-page .registration-container .order-column .preview-section .sca-booking-listings .row{
    border-bottom: 2px solid #444;
    padding: 10px 0 5px;
	}
	.sca-booking-page .registration-container .order-column .preview-section .sca-booking-listings .row .col-name{
		color: #444;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
	}
	.sca-booking-page .registration-container .order-column .preview-section .sca-booking-listings .row .col-value{
		text-align: right;
    font-size: 13px;
	}
	.sca-booking-page .thankyou-container{ padding: 35px 55px; }
	.sca-booking-page .thankyou-container .header{
		width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 55px;
	}
	.sca-booking-page .thankyou-container .header .icon{
		font-size: 92px;
    color: #28a745;
    margin-bottom: 15px;
	}
	.sca-booking-page .thankyou-container .header .title{
		font-weight: 700;
	}
	.sca-booking-page .thankyou-container .student-details{
		display: block;
    width: 100%;
    margin-bottom: 55px;
	}
	.sca-booking-page .thankyou-container .student-details .title{
		font-weight: 700;
    font-size: 18px;
    margin: 0 0 25px 0;
    border-bottom: 1px solid #efefef;
    padding: 15px 0 10px;
	}
	.sca-booking-page .thankyou-container .student-details .section{
		display: inline-block;
    width: 49%;
    vertical-align: top;
    padding: 0 25px;
	}
	.sca-booking-page .thankyou-container .student-details .section ul{
		padding: 0;
    list-style: none;
	}
	.sca-booking-page .thankyou-container .student-details .section ul li{
		font-size: 14px;
    margin-bottom: 3px;
	}
	.sca-booking-page .thankyou-container .student-details .section ul li strong{ margin-right: 5px; }
	.sca-booking-page .thankyou-container .reservation-details{
		display: block;
    width: 100%;
    margin-bottom: 55px;
	}
	.sca-booking-page .thankyou-container .reservation-details .title{
		font-weight: 700;
    font-size: 18px;
    margin: 0 0 45px 0;
    border-bottom: 1px solid #efefef;
    padding: 15px 0 10px;
	}
	.sca-booking-page .thankyou-container .reservation-details .section{
		display: inline-block;
    width: 24%;
	}
	.sca-booking-page .thankyou-container .reservation-details .section .card{  }
	.sca-booking-page .thankyou-container .reservation-details .section .card .card-header{
		text-align: center;
    font-weight: 600;
    font-size: 16px;
	}
	.sca-booking-page .thankyou-container .reservation-details .section .card .card-body{
		text-align: center;
    font-size: 13px;
    height: 80px;
    padding: 24px 0 15px;
	}

/* ===== RESPONSIVE ======= */ 
	
	/* ----- Tablet ----- */
	@media only screen and (max-width: 768px){
			
			.sca-booking-page .registration-container .sign-up-column{
				padding-left: 15px;
    		margin-top: 55px;
			}
			.sca-booking-page .registration-container .order-column .preview-section{
				padding-left: 15px;
    		margin-top: 55px;
			}
			.sca-booking-page .thankyou-container .reservation-details .section{
				width: 50%;
				margin-bottom: 15px;
			}
	}

	/* ----- Mobile ----- */
	@media only screen and (max-width: 480px){
		
		/* Login Page */
		.sca-login-page{ 
			width: 100%; 
			padding: 60px 0 0;
		}
		.sca-login-page .login-wrapper{
			padding: 0 20px;
		}
		.sca-login-page .title{ font-size: 25px; }
		.sca-login-page #sca-login-form .form-footer .btn{
			padding: 12px 35px;
		}
		
		/* Dashboard */
		.sca-staff-dashboard-page{
			padding: 0;
    	margin: 0;
		}
		body.page-id-888 #content #inner-content{ padding: 3px 3px 0; }
		
		.sca-staff-dashboard-page .sca-header-navbar .navbar-brand{ font-size: 16px; }
		.sca-staff-dashboard-page .sca-header-navbar .navbar-toggler{
			font-size: 10px;
    	padding: 5px 8px;
		}
		.sca-staff-dashboard-page #sca-header-dropdownnav h5{
			margin-bottom: 15px;
    	font-size: 18px;
		}
		.sca-staff-dashboard-page #sca-header-dropdownnav .nav-pills .nav-link{ font-size: 12px; }

		/* Table */
		.sca-shortcode .table thead th{ font-size: 13px; }
		.sca-shortcode .table tbody td{ font-size: 12px; }


		.sca-staff-dashboard-page .home-section{ padding: 30px 20px;}
		.sca-staff-dashboard-page .home-section .greetings-row{ }
		.sca-staff-dashboard-page .home-section .greetings-row .col-12{ padding: 0; }
		.sca-staff-dashboard-page .home-section .greetings-row .col-12 h2{ font-size: 22px; }

		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent{ padding: 30px 5px; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tab .nav-tabs .nav-item{ font-size: 14px; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .title{ 
			font-size: 22px; 
			margin-bottom: 0;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows{ margin-top: 20px !important; }
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body .card-title{
			font-size: 16px;
    	min-height: auto;
		}
		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .open-assessment{ font-size: 13px; }

		.sca-staff-dashboard-page .attendance-section{ padding: 30px 15px 30px 5px; }
		.sca-staff-dashboard-page .attendance-section .attendance-title{ font-size: 22px; }
		.sca-staff-dashboard-page .attendance-section .footer-row .btn{ font-size: 12px; }

		.sca-staff-dashboard-page .assessment-section{ padding: 30px 15px 30px 15px; }
		.sca-staff-dashboard-page .assessment-section .greetings-row h2{ font-size: 22px; }

		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student-heading{ font-size: 14px; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-question-heading{ font-size: 16px; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table thead th.col-student{ font-size: 12px; }
		.sca-staff-dashboard-page .assessment-section #sca-assessment-table tbody tr .col-category-heading{ font-size: 12px; }
		.sca-staff-dashboard-page .assessment-section .table-scroll thead th.col-student{ top: 53.5px; }
		.sca-staff-dashboard-page .assessment-section .footer-row .btn{ font-size: 12px; }

		.sca-staff-dashboard-page .home-section .class-list-section .sca-tabcontent .classes-rows .class-column .card-body .button-group .btn{ font-size: 12px; }

		.sca-staff-dashboard-page .attendance-record-section{ padding: 30px 10px 30px 5px; }
		.sca-staff-dashboard-page .attendance-record-section .greetings-row h2{ font-size: 22px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-attendance{ font-size: 16px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table thead th.col-students{ 
			font-size: 12px; 
			top: 40px;
		}
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table{ min-width: auto; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-date{ top: 40px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table tbody td.col-students{ font-size: 12px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-students{ width: 150px; }
		.sca-staff-dashboard-page .attendance-record-section .table-responsive #sca-attendance-record-table .col-date{
			font-weight: 100;
    	font-size: 12px;
		}
		.sca-staff-dashboard-page .assessment-record-section{ padding: 30px 15px 30px 15px; }
		.sca-staff-dashboard-page .assessment-record-section .greetings-row h2{ font-size: 22px; }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table{ width: auto; }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student-heading{ font-size: 13px; }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student{ font-size: 12px; }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-question-heading{ font-size: 15px; }
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr.skill-checkrow th.col-question-heading,
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table tbody tr th.col-category-heading{ 
			font-size: 11px; 
			width: 250px;
    	min-width: auto;
		}
		.sca-staff-dashboard-page .assessment-record-section #sca-assessment-record-table thead tr th.col-student{ top: 50px; }
		

		/* Booking */
			.sca-booking-page{ padding: 0; }
			.sca-booking-page .greetings-row{ 
				padding: 25px 25px 25px; 
				margin-bottom: 10px;
			}
			.sca-booking-page .greetings-row .page-title{ font-size: 24px; }
			.sca-booking-page #bookingTab .nav-item{ 
				width: 100%;
		    text-align: left;
		    padding: 0;
		    margin: 0;
			}
			.sca-booking-page #bookingTab .nav-item .nav-input{ margin-left: 20px; }
			.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .title h2{
				font-size: 16px;
    		font-weight: 700;
			}
			.sca-booking-page #bookingTabContent .tab-pane .calendar-container .calendar-column .calendar-header .navigation{ 
				padding-right: 0px;
    		text-align: right;
			}
			.sca-booking-page .registration-container .row .title-header h3{
				margin: 60px 0px 50px;
				font-size: 24px;
			}
			.sca-booking-page .registration-container .sign-in-column{ padding-right: 15px; }
			.sca-booking-page .registration-container .message{ font-size: 16px; }
			.sca-booking-page .registration-container .sign-up-column{
				padding-left: 15px;
    		margin-top: 55px;
			}
			.sca-booking-page .registration-container .checkout-column{
				padding-left: 15px;
			}
			.sca-booking-page .registration-container .order-column .preview-section{
				padding-left: 15px;
    		margin-top: 55px;
			}
			.sca-booking-page .registration-container .choose-participant-form .submit-group .btn{
				width: 100%;
    		margin: 5px 0;
			}
			.sca-booking-page .registration-container .order-column .preview-section ul li .label{
				width: 40%;
    		display: inline-block;
			}
			.sca-booking-page .thankyou-container{
				padding: 35px 0;
			}
			.sca-booking-page .thankyou-container .header .icon{ font-size: 55px; }
			.sca-booking-page .thankyou-container .header .title{ font-size: 24px; }
			.sca-booking-page .thankyou-container .student-details .section{
				width: 100%;
			}
			.sca-booking-page .thankyou-container .reservation-details .section{
				width: 100%;
    		margin-bottom: 25px;
			}

		
	}