/* STYLE FOR NEW SPiC WEBSITE REDESIGN */
/*
Heading font-color: #444444;
Body font-color: #333333;
*/

/*----------------------------------------
 #BOOTSTRAP ICON
-----------------------------------------*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');

.bi-check-circle, .bi-x-circle, .bi-chevron-expand, .bi-play-circle, .bi-bag-check-fill, .bi-bag-plus-fill{
    font-size: 1.2rem;
}

.bi-x-square{
	font-size: 1.5rem;
}

.bi-info-circle{
    font-size: 1rem;
}

.bi-bag-plus-fill, .bi-info-circle{
	color: #00a7e7;
}

.bi-arrow-down-right-square{
	font-size: 1.5rem;
	color: #00a7e7;
	line-height: 1em;
}

.bi-check-circle{
	color: #079455;
}
.bi-x-circle{
    color: #f77272;
}

.bi-info-circle{
	
}

.bi-chevron-expand{
	
}

.bi-play-circle{
	color: #00a7e7;
	vertical-align: -.125em;
	padding-left: 5px;
}

.bi-play-circle.spic-red-disabled{
	color: grey;
	cursor: default;
}

.bi-whatsapp{
	font-size: 1.5rem;
}

.bi-exclamation-circle{
	
}

.bi-facebook, .bi-instagram, .bi-tiktok, .bi-linkedin{
	margin-right: 5px;
}

.spic-red-comp{
	font-family: 'Roboto', sans-serif;
}

.spic-red-comp, .spic-red-comp::before, .spic-red-comp::after, .spic-red-collapsible[open] .spic-red-comp::after{
	font-weight: normal !important;
	color: #00a7e7;
}

.spic-red-comp::before{
	/*font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
	content: "View components";*/
}

.spic-red-comp::after{
	font-family: "bootstrap-icons";
	content: " \f283";
	vertical-align: bottom;
}

.spic-red-collapsible[open] .spic-red-comp::after{
	font-family: "bootstrap-icons";
	content: " \f27D";
	vertical-align: bottom;
}

/*----------------------------------------
 #LIST
-----------------------------------------*/
.spic-red-icon-list {
	font-size: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.spic-red-list {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
}

.spic-red-icon {
    position: absolute;
    left: 0;
    top: -2px;
    color: #00a7e7;
    font-size: 1.2rem;
}


/*TIMELINE BULLET*/

/* Remove default bullets */
.spic-red-timeline {
	font-size: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Timeline items */
.spic-red-timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.spic-red-timeline-item a{
	color: #00a7e7 !important
}

/* Dot bullets */
.spic-red-timeline-item::before {
    content: '';
    position: absolute;
    left: 9px;                  /* position dot */
    top: 8px;
    width: 10px;
    height: 10px;
    background-color: #00a7e7;   /* dot color */
    border-radius: 50%;
}

/* Vertical line from this dot to the next */
.spic-red-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 13px;                 /* center of the dot */
    top: 14px;                  /* start just below the dot */
    width: 2px;
    height: calc(100% - -5px);  /* extend to bottom of this li */
    background-color: #00a7e7;  /* line color */
}

/* Nested sublist */
.spic-red-timeline-sublist {
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
}

/* Nested sublist items */
.spic-red-timeline-sublist-item {
    position: relative;
    margin-bottom: 5px;
}

.spic-red-timeline-sublist-item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid #00a7e7;
    background-color: transparent;
    border-radius: 50%;
}


/*----------------------------------------
 #CONTAINER
-----------------------------------------*/

#spic-red-banner{
	padding: 50px 0px;
}

#spic-red-cube{
	text-align: center;
	border: solid 1px #ececec;
	border-radius: 15px;
	background: #ffffff;
	padding: 20px;
	margin: 0 5px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

#spic-red-icon{
	display: inline-block;
	border-radius: 10px;
	background: #ffffff;
	padding: 15px;
	margin: 10px 10px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

#spic-red-icon-text{
	display: inline-table;
	vertical-align: middle;
}

.spic-red-table{
	border-collapse: collapse;
	border: none;
	color: #444444;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

.spic-red-table th {
  	background: #ffffff;
	padding: 0px;
	font-weight: normal;
}

.spic-red-table tr:nth-child(odd) {
  	background-color: #fafafa;
}

.spic-red-table tr:nth-child(even) {
  	background-color: #ffffff;
}

.spic-red-table td {
  	padding: 10px 20px;
}

.spic-red-table td:first-child{
  	text-align: left;
}

.spic-red-table td:nth-child(3){
  	border-left: solid 1px #cccccc;
}

/*----------------------------------------
 #TEXT ELEMENT
-----------------------------------------*/
.spic-red-header *, .spic-red-body *, .spic-red-dot *, .spic-red-query *{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
}

.spic-red-body p{
	color: #333333;
	font-size: 16px;
	line-height: 150%;
	text-align: justify;
	margin: 1em 0;
}

.spic-red-header h1{
	color: #444444;
	font-size: 60px;
	font-weight: bold;
	line-height: 60px;
}

.spic-red-header h2{
	color: #444444 !important;
	font-size: 40px !important;
	margin: 10px 0px !important;
	font-weight: bold !important;
	text-align: center !important;
}

.spic-red-header h3{
	color: #444444;
	font-size: 24px;
	margin: 15px 0px;
	font-weight: normal;
}

.spic-red-header h4{
	color: #444444;
	font-size: 22px;
	text-transform: none;
	margin: 5px 0px;
	font-weight: 700;
}

.spic-red-dot{
  	color: #00a7e7;
	font-size: 130%;
    line-height: 0;

}
.spic-red-dot::before {
    content: ".";
}

/*------------#BOOTSTRAP INFO TOOLTIP--------------*/

.spic-red-info {
  	position: absolute;
	margin-left: 5px;
  	cursor: pointer;
  	display: inline-block;
	vertical-align: middle;
}

.spic-red-info::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	background: #333;
	color: #fff;
	padding: 6px 8px;
	border-radius: 5px;
	font-size: 12px;
	line-height: 1.4;
	white-space: normal;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 999;
	word-wrap: break-word;
	font-style: normal;
}

.spic-red-info:hover::after {
	opacity: 1;
}

.spic-red-query h2{
	color: #00a7e7;
	font-size: 40px;
	margin: 10px 0px;
	font-weight: bold;
	text-align: left;
}

.spic-red-query p{
	color: #ffffff;
	font-size: 16px;
	line-height: 150%;
	text-align: justify;
	margin: 1em 1em 0 0;
}

.spic-red-achievement {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #ce2029;
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    text-transform: uppercase;
}

.spic-red-achievement-row1 {
    display: flex;
    align-items: stretch;
    margin-bottom: 2px;
}

.spic-red-achievement-number {
	font-size: 65px;
    line-height: 0.8;
    margin-right: 5px;
}

.spic-red-achievement-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 4px;
}

.spic-red-achievement-subtitle, 
.spic-red-achievement-row2 {
	font-size: 20px;
	text-align: left;
    line-height: 0.9;
}

.spic-red-achievement-row2 {
    /*letter-spacing: 0.5px;*/
}


/*----------------------------------------
 #BUTTON
-----------------------------------------*/

.spic-red-detail{
	padding: 0px;
}

.spic-red-detail a{
	font-family: 'Roboto', sans-serif;
	width: 160px;
	text-align: center;
	padding: 5px 0px !important;
    font-size: 16px !important;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
}

.spic-red-detail.act-btn a{
	background: #00a7e7;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #ffffff;
}

.spic-red-detail.nav-btn a, .spic-red-detail.nav-btn #checkout_back{
	background: #ffffff !important;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #00a7e7 !important;
}

.spic-red-detail.demo-btn a{
	background: #173844;
	border: solid 2px #173844;
    border-radius: 30px;
    color: #ffffff;
}

.spic-red-detail.verify-btn{
	background: #ffffff !important;
    border-radius: 30px !important;
    color: #00a7e7 !important;
    padding: 5px 0px !important;
    width: 160px !important;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 16px;
    margin: 10px 0px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
    border: solid 2px #00a7e7;
    text-transform: none;
    font-weight: normal;
}

.spic-red-detail.pay-btn{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
	font-weight: bold !important;
	width: 160px;
	text-align: center;
	padding: 10px 0px;
    font-size: 16px !important;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #00a7e7 !important;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #ffffff;
	text-transform: none;
	font-weight: normal;
    line-height: normal !important;
}

.spic-red-detail.pay-btn:hover{
	background: #00a7e7 !important;
    color: #ffffff !important;
    border: solid 2px #00a7e7 !important;
}

/*disable property for disabled button hover*/
.spic-red-detail.form-btn, .spic-red-detail.form-btn[disabled]:hover{
	font-family: 'Roboto', sans-serif;
	width: 160px;
	text-align: center;
	padding: 10px 0px;
    font-size: 16px;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #173844;
	border: solid 2px #173844;
    border-radius: 30px;
    color: #ffffff;
	text-transform: none;
	font-weight: normal;
}

.spic-red-detail.apply-btn, .spic-red-detail.apply-btn[disabled]:hover{
	font-family: 'Roboto', sans-serif;
	width: 200px;
	text-align: center;
	padding: 10px 0px;
    font-size: 16px;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #00a7e7;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #ffffff;
	text-transform: none;
	font-weight: normal;
}

.spic-red-detail.checkout-btn{
	font-family: 'Roboto', sans-serif;
	width: 160px;
	text-align: center;
	padding: 10px 0px;
    font-size: 16px;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #00a7e7;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #ffffff;
	text-transform: none;
	font-weight: normal;
}

.spic-red-detail.navigate-btn{
	font-family: 'Roboto', sans-serif;
	width: 160px;
	text-align: center;
	padding: 5px 0px;
    font-size: 16px;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #ffffff;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #00a7e7;
	text-transform: none;
	font-weight: normal;
}

/*----------------------------------------
 #BUTTON HOVER
-----------------------------------------*/
.spic-red-detail.act-btn a:hover {
    /*background: #ffffff;
    color: #00a7e7;*/
}

.spic-red-detail.nav-btn a:hover, .spic-red-detail.nav-btn #checkout_back:hover {
    /*background: #00a7e7 !important;
	color: #ffffff !important;*/
}

/*----------------------------------------
 #SYLLABUS TOGGLE BUTTON
-----------------------------------------*/
/* SPiC Red Pills Toggle */
.spic-red-toggle .nav-link {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
	text-transform: none !important;
	width: 215px;
	border-radius: 30px !important;
    padding: 13px;
    color: #444444;
    transition: all 0.3s;
    margin: 0 5px; /* space between pills */
}

.spic-red-toggle .nav-link.active {
    background-color: #00a7e7 !important;
    color: #fff;
}

/* Tab content styling */
.spic-red-tab {
    /*font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    color: #333333;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 15px 20px;*/
}

.spic-red-tab h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #444;
}

/* Center pills wrapper using flex */
.spic-red-toggle.justify-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 10px;
	padding: 10px 0px;
	background: #f2f4f7;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
	max-width: 465px;
}

/*----------------------------------------
 #PROGRAMME
-----------------------------------------*/
.spic-red-programme{
	
}

.spic-red-logo{
	width: 70%;
	height: auto;
}

.spic-red-partner{
	margin: 0px 0px 15px;
}

/*----------------------------------------
 #BANNER TICKER
-----------------------------------------*/
/* Wrapper: hides overflow */
.banner-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background-color: #e12228;  /* Banner background */
}

/* Scrolling ticker */
.banner-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 20s linear infinite;
}

/* Individual messages */
.banner-ticker span {
  display: inline-block;
  margin-right: 5px; /* spacing between messages */
  color: #ffffff;
  font-size: 14px;
}

/* Animation: start fully right, scroll to left */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* scroll half because content is duplicated */
  }
}

/* Responsive font size for mobile */
@media (max-width: 768px) {
  .banner-ticker span {
    font-size: 14px;
    margin-right: 20px;
  }
}

/* Pause on hover */
.banner-ticker-wrapper:hover .banner-ticker {
  animation-play-state: paused;
}

/*----------------------------------------
 #YP FORM UPLOAD DOCUMENT
-----------------------------------------*/

.spic-red-form-group-title, #yysn-pnrj-upload-instruction.spic-red-form-group label{
	margin-top: 20px;
	color: #173844 !important;
}

.spic-red-upload a{
	font-family: 'Roboto', sans-serif !important;
	width: 160px !important;
	text-align: center !important;
	/*padding: 10px 0px !important;*/
    font-size: 16px !important;
    margin: 10px 0px !important;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
	background: #ffffff !important;
	border: solid 2px #00a7e7 !important;
    border-radius: 30px !important;
    color: #00a7e7 !important;
	text-transform: none !important;
	font-weight: normal !important;
}

#yysn-pnrj-upload-instruction-table.spic-red-table{
	border: none !important;
	padding: 5px !important;
}

#yysn-pnrj-upload-instruction-table.spic-red-table th, #yysn-pnrj-upload-instruction-table.spic-red-table td, #yysn-pnrj-upload-instruction-table.spic-red-table table{
	border: none !important;
	padding: 5px !important;
	text-align: center !important;
}

#yysn-pnrj-upload-instruction-table.spic-red-table th{
	background: #00a7e7 !important;
	color: #ffffff !important;
	padding: 5px !important;
	font-size: 15px !important;
}

/*----------------------------------------
 #ENQUIRY FORM PHP
-----------------------------------------*/
.spic-red-content-wrapper{
	padding: 0px !important;
}

.spic-red-content-wrapper *{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
}

.spic-red-form-content-wrapper{
	margin: 0 auto !important;
    width: 90% !important;
	/*min-height: 600px !important;
	height: auto !important;*/
}

.spic-red-form-control{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
	display: block !important;
    width: 100%;
	font-size: 15px !important;
    padding: .375rem .75rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: .25rem !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.spic-red-form-group{
	margin: 5px 0px !important;
}

.spic-red-form-radio-group{
	display: inline-block !important;
    margin-right: 0.5em !important;
}

.spic-red-row{
	border: solid 1px #ececec;
	border-radius: 20px !important;
	background: #ffffff !important;
	padding: 40px 10px !important;
	margin: 0 5px !important;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1) !important;
}

.spic-red-inline{
	display: inline-block !important;
	width: 49%;
}

.spic-red-contact_us_important_note{
	display: inline-block !important;
    width: 100% !important;
	line-height: 20px;
	font-size: 14px;
	text-align: justify;
	margin: 10px 0px 15px !important;
}

.spic-red-pdpa-notice{
	display: inline-block !important;
    width: 100% !important;
    line-height: 20px;
    font-size: 13px;
    text-align: center;
    margin: 15px 0px 0px !important;
    /*border-top: solid .5px;
    padding-top: 10px;*/
    font-style: italic;
}

.spic-red-pdpa-notice::after{
	content: "The protection of personal data is an important concern to Sunway TES and any personal data collected on this form will be treated in accordance with the Malaysia Personal Protection Act (2010).";
}

.spic-red-error-field-msg{
	font-size: 14px;
    color: #ff6f73 !important;
    padding: 5px 0px !important;
    background: none !important;
    line-height: 18px;
}

/*----------------------------------------
 #PURCHASE FORM PHP
*due to different structure with enquiry form
*uses enquiry form's:
spic-red-form-control
spic-red-form-group
-----------------------------------------*/
.spic-red-pricing-form *{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
}

.spic-red-terms{
	color: #333333;
	line-height: 1.5em;
	margin-top: 20px;
	text-align: justify;
}

.spic-red-terms a{
	color: #ff6f73 !important;
}

.spic-red-terms a:hover{
	/*color: #333333 !important;*/
}

.spic-red-terms-checkbox{
	margin-top: 24px !important;
}


/*----------------------------------------
 #PURCHASE
-----------------------------------------*/
.spic-red-module-level-price, .spic-red-courses-option-section{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
	font-size: 16px !important;
}

.spic-red-module-level-details{
	padding: 0px !important;
}

.spic-red-price-main{
	display: inline-block;
}

.spic-red-price-highlight{
	display: inline-block;
	color: #ffcb00;
	font-weight: 700;
}

.spic-red-course-row{
	display: flex;
  	/*margin-bottom: 16px;*/
}

.spic-red-module-level-price{
	font-weight: normal !important;
	line-height: 1.5em;
	background: #10313d !important;
	padding: 10px 10px 8px 15px !important;
	width: 100% !important;
	border-radius: 10px !important;
	margin: 20px 0px 5px 0px;
}

.spic-red-courses-option-section{
	width: auto !important;
	flex: 1;
	margin: 5px 0px !important;
	padding: 6px 10px 5px 15px !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	box-shadow: 1px 1px 5px 0 #eaecf0 !important;
    border: solid 1px #eaecf0 !important;
}

.spic-red-course-gap{
	width: 10px;
}

.spic-red-ghost{
	visibility: hidden;
}

/* MOBILE */
@media (max-width: 768px){
    .spic-red-course-row{
        flex-direction: column;
    }

    .spic-red-course-gap{
        width: 0;
        height: 0px;    /* vertical space between Course 1 and 2 */
    }

    .spic-red-ghost{
        display: none;  /* no fake column needed on mobile */
    }
}

/*----------------------------------------
 #PURCHASE POP-UP
-----------------------------------------*/
#purchase_cart.spic-red-purchase-cart{
	font-family: 'Roboto', sans-serif !important;
	border: solid 2px #00a7e7 !important;
    margin: 0px 10px 10px 0px;
    border-radius: 10px;
    padding: 10px;
    /*overflow: hidden !important;*/
}

.spic-red-purchase-cart *{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
}

.spic-red-close-popup-btn{
	background: none !important;
	margin: 0px !important;
	color: #00a7e7;
	position: absolute;
	right: 10px;
	top: -5px;
}

#ebook_selected_popup.spic-red-dialog-section{
	background: #ffffff !important;
	border: solid 2px #00a7e7 !important;
	border-radius: 10px;
    padding: 10px;
}

.spic-red-popup-text{
	font-family: 'Roboto', sans-serif;
	color: #444444;
	font-size: 30px;
	line-height: 1.2em;
	font-weight: bold;
}


/*----------------------------------------
 #WHATSAPP STICKY NAVBAR
-----------------------------------------*/
.spic-red-chat-whatsapp{
	background: linear-gradient(120deg, #26d466 0%, #26d466 50%, #24bb5c 50%, #24bb5c 100%);
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
    padding: 5.45px 15px !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px !important;
	margin: 0px 0px 10px 10px !important;
}

/*----------------------------------------
 #PURCHASE SUMMARY
-----------------------------------------*/

.spic-red-pricing-summary-details{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
	font-size: 15px !important;
	line-height: 20px !important;
	/*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
}

.spic-red-pricing-summary-details th{
	background: #10313d !important;
	color: #ffffff !important;
	border: none !important;
	vertical-align: middle;
}

.spic-red-pricing-summary-details td{
	background: #ffffff !important;
	color: #333333 !important;
	/*border-bottom: solid .5px #ced4da !important;*/
}

.spic-red-pricing-total td{
	background: #10313d !important;
	color: #fedc00 !important;
	border: none !important;
}

.spic-red-checkout-summary-details{
	background: #ffffff !important;
    padding: 20px 25px 10px !important;
    margin: 20px 0px 0px !important;
    border-radius: 5px !important;
	border: solid 1px #ced4da;
	/*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
}

.spic-red-checkout-summary-details p, .spic-red-checkout-summary-details li{
	font-weight: normal !important;
	margin: 0px 0px 10px !important;
	line-height: 1.5em !important;
	color: #333333 !important;
}

.spic-red-checkout-summary-details li{
	width: 100% !important;
}

.spic-red-checkout-summary-details ol{
	padding-left: 15px !important;
}

.spic-red-checkout-summary-details span, .spic-red-checkout-summary-details a{
	color: #00a7e7 !important;
}

.spic-red-checkout-summary-details span{
	font-weight: bold !important;
}

.spic-red-checkout-summary-details a{
	font-weight: normal !important;
}

.spic-red-checkout-summary-details a:hover{
	/*color: #333333 !important;*/
}

/*----------------------------------------
 #PACKAGE DESIGN
-----------------------------------------*/
#spic-red-cube.spic-red-package-container{
	padding: 0px !important;
}

.spic-red-package-container, .spic-red-package-title h3, .spic-red-package-title p, .spic-red-package-content, .spic-red-package-features, .spic-red-package-features p, .spic-red-package-content p{
	font-family: 'Roboto', sans-serif !important;
	letter-spacing: normal !important;
}

.spic-red-package-title h3 {
	font-size: 30px;
	margin-bottom: 0px;
}

.spic-red-package-title p {
	font-size: 18px;
	color: #ffffff !important;
    font-weight: normal;
}

.spic-red-package-title{
	font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

.spic-red-package-content{
	text-align: left;
	padding: 10px 20px 20px 20px;
}

.spic-red-package-content span{
	/*padding-left: 15px;*/
}

.spic-red-package-content .spic-red-element{
	font-size: 16px;
	font-weight: bold;
	margin-top: 10px;
	color: #173844;
}

.spic-red-package-content ul{
	padding-left: 30px;
}

.spic-red-package-content li{
	list-style-type: disc !important;
}

.spic-red-package-features{
	text-align: left;
}

.spic-red-package-features .bi-check-circle{
	font-size: 1em;
}

.spic-red-package-content2{
	/*padding: 20px 30px;*/
	display: inline-block;
	text-align: justify;
}
/*mobile*/
@media (max-width: 768px){
    .spic-red-package-content2{
		display: block;
        width: 100% !important;
		padding: 20px 30px !important;
    }
}

/*----------------------------------------
 #BOOTSTRAP ACCORDIAN FOR FAQ
-----------------------------------------*/

.spic-red-acc-accordion ul{
	padding-left: 20px;
}

.spic-red-acc-accordion li{
	list-style: disc;
}

.spic-red-acc-item{
	border-bottom: 2px #dedede;
	border-style: none none solid;
	
}

.spic-red-acc-button:focus{
	border: none;
	box-shadow: none;
}

.spic-red-acc-header{
	color: #00a7e7;
}

.spic-red-acc-panel{

}

.spic-red-acc-accordion {
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
  	/*border: 1px solid #dedede;*/
  	border-radius: 5px;
}

.spic-red-acc-button {
	/*background: #f7f9fa;*/
	color: #333333;
	text-transform: none !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	line-height: 1.5rem;
}

.spic-red-acc-button:not(.collapsed) {
	color: inherit;
    background-color: inherit;
	box-shadow: none;
}

.spic-red-acc-button:not(.collapsed)::after{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.spic-red-acc-body {
  	/*background: #ffffff;*/
	color: #333333;
	font-size: 15px;
	/*border: solid 1px #00a7e7;*/
	text-align: justify;
	padding: 0 3rem 1rem 1.25rem;
	line-height: 1.3rem;
}

/*----------------------------------------
 #REPLACE THE ORIGINAL ID OR CLASS
-----------------------------------------*/
/*--pop-up message if bumiputera selected is "No"--*/
/*#nobumi{
	
}*/


/*----------------------------------------
 #FOOTER
-----------------------------------------*/
.spic-red-footer {
    font-family: 'Roboto', sans-serif !important;
    background-color: #2b2b2b;
    color: #ffffff;
    padding: 40px 20px 20px;
}

.spic-red-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
}

.spic-red-footer-column {
    flex: 1;
    margin: 0px 30px;
}

.spic-red-footer-column:last-child {
    margin-right: 0;
}

.spic-red-footer-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #00bcd4;
}

.spic-red-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spic-red-footer-link {
	font-family: 'Roboto', sans-serif !important;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    /*margin-bottom: 8px;*/
    font-size: 16px;
}

.spic-red-footer-link:hover, .spic-red-footer-link:visited {
    color: #ffffff !important; 
}

.spic-red-footer-top {
    margin: 0px 0px 30px 30px;
}

.spic-red-footer-bottom {
    margin-top: 30px;
    text-align: center;
}

/*Mobile (legacy-safe) */
@media (max-width: 768px) {
    .spic-red-footer-container {
        display: block;
        text-align: left;
    }

    .spic-red-footer-column {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .spic-red-footer-column:last-child {
        margin-bottom: 0;
    }
}