.clear {
    clear: both;
  }
  .line-top{
    position: relative;
    width:100%;
    background-color: #36B3B5;
    height: 65px;
  }
  .line-mid{
    position: relative;
    width:100%;
    background-color: #FFFFFF;
    height: 20px;
    z-index: 150;
  }
  .line-bottom{
    position: relative;
    width:100%;
    background-color: #DA4278;
    height: 65px;
    z-index: 50;
  }
  #triangle-1 {
    position: absolute;
    float:right;
    top: -30px;
    left:-10px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #FFF;
  }
  #triangle-2 {
    position: absolute;
    float:right;
    top: 5px;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #DA4278;
  }
  #triangle-3 {
    position: absolute;
    float:right;
    top: 20px;
    left:29px;
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 60px solid #FFF;
  }
  #triangle-4 {
    position: absolute;
    float:right;
    top: -7px;
    left:34px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 50px solid #36B3B5;
  }
  #triangle-5 {
    position: absolute;
    float:right;
    top: -60px;
    left:90px;
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid #fff;
  }
  #triangle-6 {
    position: absolute;
    float:right;
    top: -24px;
    left:90px;
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid #DA4278;
  }

  .sec-nav-container{
	  margin-bottom: -7px;
  }
  .show-sec-nav{
    position: relative;
    background-color: #DA4278;
    height:5px;
  }
  .center-lip-main {
    position: absolute;
    text-align: center;
    width: 0;
    top: 0px;
    left: -30px;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 12px solid #DA4278;
    cursor: pointer;
    z-index: 99;
  }

  .center-lip-container {
    position: relative;
    float:right;
    text-align: center;
    margin:0 auto;
    width: 50%;
    height: 0;
  }

  .white-bg
  {
    background-color: #FFF;
  }
.bg-transparent{
  background: transparent !important;
}

  .white{
    color: #FFF;
  }
  .grey-text{
    color: #ccc;
  }
  .grey-text.dark{
    color: #666;
  }
  .blue-text{
      color: #869aab;
  }
  .disclaimer {
    font-size: 0.9em !important;
    color: #828080 !important;
    margin: 1em 0em !important;
  }



.menu-icon
{
  font-size: 150px;
}

.menu-icon:hover
{
}

.menu-row
{
  margin-bottom: 35px !important;
}

.underline
{
  text-decoration: underline;
}

.menu-select:hover
{
  background-color: rgba(255,255,255,0.1);
}

.switch-label
{
  position: absolute;
  padding-left: 10px;
  top: 5px;
}

.table-expand{
  width: 100%;
}

.checkme{
  display: none;
}

.can{
  color:#36B3B5;
}
.cannot{
  color:#DA4278;
}


  .custom-tabs.tabs li.tab-title > a {
    background-color: rgb(156,211,213);
    color: white;
    border-radius: 5px 5px 0px 0px;
    border-right: 3px solid rgb(145,161,179);
  }
  .custom-tabs.tabs-content {
    border-top: 5px solid rgb(54,179,181);
    color: black;
  }
  .custom-tabs.tabs li.tab-title.active > a {
    background-color: rgb(54,179,181);
  }

  .vertical-top {
    vertical-align: top;
  }

.full-width{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top:20px;
   max-width: initial;

}


.pink{
  color: rgb(218,66,120) !important;
}

.bg-pink{
  background: rgb(218,66,120);

}
.bg-green{
  background: rgb(54,179,181);

}
.green{
  color: rgb(54,179,181) !important;
}
.collapse{
  border-collapse: collapse;
}

.file-thumbnail{
  font-size: 50px;
}
  .grey-tr > td{
    color: #cdcdcd;
  }

#next-event{
  /*margin-top: -10px;*/
  background-color: rgb(145,161,179);
}
#next-event dd{
  color: #fff;
}

.bg-white{background: #fff;}
.cl-error{color: #CF3838;}
.cl-warning{color: orange;}
.cl-ok{color: #49AB5D;}
.cl-white{color:#fff !important;}
.cl-secondary{color:#666;}
.medium{font-size: 1.3em;}
.big{font-size: 1.8em;}
.big-2{font-size: 2.5em;}
.center{text-align: center;}


.alert-box.alert{

  border-left: 5px solid rgba(218,66,120,0.9) !important;
  background-color: rgba(218,66,120,0.3) !important;

  color:rgba(218,66,120,0.9)  !important;
}
.alert-box.alert p {
   color:rgba(218,66,120,0.9)  !important;
   font-size: 1.2em;
   display:inline-block;
   margin: 0;
}

	.alert-box.success {
		border-left: 5px solid rgba(54,179,181,0.9) !important;
		background-color: rgba(54,179,181,0.3) !important;
		color:rgba(54,179,181,0.9)  !important;
	}

.alert-box.warning {
  border-left: 5px solid rgba(224, 102, 30, 0.9) !important;
  color: #9A3B00;
  background-color: #FBB065 !important;
}
.alert-box.warning a {
  color: #562B06;
  text-decoration: underline;
}
.alert-box{
    border:none;
  font-size: 1.2em;
}
.alert-box i{
  font-size: 1.5em;
}


hr.apl{
  display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgba(218,66,120,0.5);
    margin: 1em 0;
    padding: 0;

}


#aftermath-links .fa {
    font-size: 13em;
    transform: rotate(25deg);
    padding-left: 0em;
    color: #E2E2E2;
}
#aftermath-links .row {
                padding-left: 1em;
                overflow: hidden;

}
#aftermath-links .row.panel {
  margin-bottom: 2em;
  padding: 0;
  height: 9em;
  position: relative;
}
.link-anchor{
  height:100%;
  line-height:100%;
  text-align:center;

}

.hidden{
  display: none;
}


.button.ghost,.button.danger-ghost{
  background: transparent;
  border:2px solid #36B3B5;
  color:#36B3B5;
}

.button.ghost:hover{
  background: #2b8f91;
  border:2px solid #2b8f91;
  color:#fff;
}


.button.danger-ghost{
    border:2px solid #DA4278;
    color:#DA4278;
}
.button.danger-ghost:hover{
  background: #DA4278;
  border:2px solid #DA4278;
  color:#fff;
}





.link-anchor a.button{
  height:100%;
  font-size: 2em;
  padding-left:20px;
  margin-right: -10px;
}
.link-anchor a i{

  color: #fff;
}

.alert-box.alert{

  border-left: 5px solid rgba(218,66,120,0.9) !important;
  background-color: rgba(218,66,120,0.3) !important;

  color:rgba(218,66,120,0.9)  !important;
}

.alert-box{
    border:none;
  font-size: 1.2em;
}
.alert-box i{
  font-size: 1.5em;
}

.completed-section{

}
.completed-section::after{
  padding: 1em;
  content: 'Completed';
  color:  rgba(54,179,181,0.8);
  font-weight: 600;
}


input[type=radio].custom-button, input[type=checkbox].custom-button {
display:none;
  }
input[type=radio].custom-button + label, input[type=checkbox].custom-button + label {
    display:inline-block;
    position: relative;
    width:100%;
    padding: 1em 0em;
    margin: 0px;
    font-size: 1em;
    line-height: 23px;
    color: #333;
    vertical-align: middle;
    cursor: pointer;
    background-color: rgb(156,211,213);
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    transition: all 0.2s ease-in-out;

  }
  input[type=radio].custom-button + label:hover, input[type=checkbox].custom-button + label:hover{
    background-color: rgba(54,179,181,0.8);
  }


   input[type=radio].custom-button:checked + label, input[type=checkbox].custom-button:checked + label{
    outline: 0;
    background-color:#36B3B5;
    color: #fff;
  }
  input[type=radio].custom-button + label span, input[type=checkbox].custom-button + label span{
    margin-top: 0.2em;
  }

.fa.icon{
  font-size: 1.8em;
  margin-top: -0.2em;
}

  .txtbox{
    min-height: 10em;
  }

  label.error{
    color: #DA4278;
    font-weight: 600;
  }
  .meter{
    text-align: center;
    font-size: 18px;
    color:#fff;
  }

.progress.big{
  height:2rem;
}
.progress .meter span{
  padding: 0.4em !important;
  margin:-5px !important;
}
.progress{
  border: 1px solid #ccc;
  overflow: hidden;
}

.upper-first{
  text-transform: capitalize;
}

.iframe-holder iframe{
	display: block;
    margin: 1em auto;
	height:800px;
    width:90%;
}

.drop-down-list li .fa{
  margin: 0.5em 0.2em;
  width:2em;
  font-size: 1.2em;
  text-align: center;
}

.button-small-icon{
  padding:0.2em;
  margin:0px;
}
.button-square{
  padding-left:0.8em;
  padding-right:0.8em;
}

/* my health */
  #my-health .switch input,
  #my-health .switch label,
  #my-health .switch p {
    float: left;
  }
  #my-health .switch p {
    line-height: 2em;
    padding-left: 0.5em;
  }
  #my-health .switch input:checked + label + p {
    font-weight: bold;
  }
  #my-health .answers .switch {
    margin: 0;
  }
  #my-health .answers .switch.columns:last-child {
    float: left;
  }
  #my-health .question-title .switch {
    margin: 0;
  }
  #my-health .answers {
    padding: 1em 2em;
  }
/* end of my health */

/* user profile */
  #profile #profile-header h2,
  #profile #profile-header a {
    display: inline-block;
    float: left;
  }
  #profile #profile-header a {
    margin: 0;
    margin-top: 1.5em;
    margin-left: 0.6em;
  }
  #profile #addresses table tr td {
    height: 4em;
  }
  #profile #addresses input[type=text],
  #profile #addresses input[type=submit] {
    margin: 0;
  }
  #profile #addresses .button {
    height: 2em;
    padding-top: 0;
    line-height: 2em;
    margin: 0;
  }
  #profile #addresses h4,
  #profile #addresses a {
    display: inline-block;
    margin-bottom: 0.5em;
  }
  #profile #addresses .noti-message {
    display: inline-block;
    padding: 0em 0.5em;
    color: #A29A9A;
    background-color: #F1E3E3;
    border: 0.1em solid #E4DDDD;
    margin-left: 1em;
    border-radius: 0.2em;
  }
  #profile #addresses #new-address {
    margin-left: 0.5em;
    height: 1.5em;
    line-height: 1.6em;
    padding: 0em 1em;
  }
  #profile #change-details {
    height: 1.8em;
    padding: 0em 1em;
    line-height: 1.8em;
    border-radius: 0.2em;
    font-size: 0.8em;
  }
  #changeDetails input[type=checkbox] + label + div,
  #changeDetails input[type=checkbox] + label + select {
    display: none;
  }
  #changeDetails input[type=checkbox]:checked + label + div,
  #changeDetails input[type=checkbox]:checked + label + select {
    display: block;
  }
  #changeDetails input[type=text],
  #changeDetails input[type=datepicker],
  #changeDetails select {
    width: 15em;
    display: inline;
  }
  #profile h5.email {
    display: inline-block;
  }
  #profile h5.email input[type=text] {
    width: 15em;
    float: left;
  }
  #profile h5.email input[type=submit] {
    float: left;
    height: 2.3em;
    line-height: 2.3em;
    margin: 0;
    padding: 0em 1em;
  }
  #profile #addresses #no-address {
    padding-left: 0.5em;
  }
/* end of user profile */

/* health check */
  .health-check #my-health-check,
  .self-assessment #feedback {
    background-color: #D7ECEC;
    padding: 1em;
    border-radius: 0.3em;
  }
  .self-assessment p:not(.alert-box) {
    padding: 1em 0em;
  }
  .self-assessment #feedback h2 {
    font-size: 1.9em;
  }
  .self-assessment #feedback h4 {
    font-size: 1.2em;
  }
  .self-assessment #feedback h4,
  .self-assessment #feedback h2 {
    letter-spacing: 0.05em;
    color: #36B3B5;
  }
  .self-assessment #feedback .category {
    border-bottom: 0.1em solid #B0DEDE;
    width: 98%;
    margin: 0 auto;
    padding: 1em 0em;
  }
  .self-assessment #feedback .category .alert-box {
    margin: 1em 0em;
  }
  .health-check #my-health-check ul li {
    list-style: none;
    color: #969297;
  }
  .health-check #my-health-check ul li:before {
    content: "\f198";
    font-family: "foundation-icons";
    margin-right: 1em;
  }
  .health-check #my-health-check .question {
    border-bottom: 0.1em solid #B0DEDE;
    width: 98%;
    margin: 0 auto;
    padding: 1em 0em;
  }
  .health-check #my-health-check .question .answer {
    margin: 0;
    margin-top: 1em;
  }
  .health-check #my-health-check .question .alert-box {
    margin: 0;
    margin-top: 1em;
  }
  .health-check h4 {
    display: inline;
    float: left;
  }
  .health-check h4,
  .self-assessment h4 {
    font-size: 1.9em;
    letter-spacing: 0.05em;
    color: #36B3B5;
  }
  .health-check p,
  .self-assessment p {
    color: #929292;
    font-size: 1em;
    clear: both;
  }
  .self-assessment p {
    margin: 0;
  }
  .health-check span.desc {
    background-color: #7CC6D7;
    width: 1.5em;
    display: inline-block;
    text-align: center;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 0.8em;
    color: #FFF;
    cursor: pointer;
    margin-top: 0.4em;
  }
  .health-check span.desc + div {
    display: none;
    position: absolute;
    background-color: #7CC6D7;
    z-index: 9999;
    transition: all 0.2s;
    border-radius: 0.3em;
    font-size: 0.9em;
  }
  .health-check span.desc + div p {
    color: #0293B5;
    padding: 1em;
    margin: 0;
  }
  .health-check #my-health-check span.desc + div ul li {
    color: #0293B5;
    margin: 0;
  }
  .health-check span.desc:hover {
    border-bottom-right-radius: 0em;
    border-bottom-left-radius: 0em;
    color: #0293B5;
  }
  .health-check span.desc:hover + div {
    display: block;
  }
/* end of health check */

/* self assessment form*/
  #self-assessment-form h2{
    margin: 0.6em 0em;
  }
  #self-assessment-form .question {
    overflow: auto;
    margin-bottom: 3em;
  }
  #self-assessment-form .question h4 {
    border-bottom: 1px solid #333333;
    padding-bottom: 0.5em;
    letter-spacing: 0.05em;
    color: #333333;
    margin-bottom: 0.8em;
  }
  #self-assessment-form .columns + .columns:last-child {
    float: left;
  }
/* end of self assessment form*/

/* pre placement assessment */
  .pp_icon p {
    text-align: center;
    font-size: 0.9em;
  }
  .pp_icon.active p {
    font-weight: bold;
  }
  #pre_placement #progress_bar {
    height: 1em;
  }
  #pre_placement #to-review {
    margin-top: 1em;
  }
  #external-content #assessments .paper-content {
    padding: 0;
  }
  #external-content #assessments .type-radio {
    display: none;
  }
  #external-content #assessments .type-radio+label {
    display: none;
    padding: 0em;
  }
 /* #external-content #assessments .mb-10 {
    margin: 0;
  }*/
/* end of pre palcement assessment */

/* consent form */
  /* download section */
    #frm-consent #warning {
      background-color: #da4278;
      border-radius: 0.2em;
      padding: 0.8em 1em;
      margin-top: 1em;
    }
    #frm-consent #warning h5,
    #frm-consent #warning p {
      color: #FFF;
    }
    #frm-consent #warning p {
      margin: 0;
      font-size: 0.9em;
    }
  /* end of download section */
/* end of consent form */

/*
  notifications
*/


  .notifications{
    min-width:300px;
    margin-top:3.2em !important;
  }
  .notifications li{
    width:100%;

  }
  .notifications li a{
    background: #fff !important;
    color:#333 !important;
    border-bottom:1px solid #ccc;
  }
  .notifications .noti_link{
    font-weight: 900;
    background: #ededed !important;
  }

  .notifications .noti_link:hover{
    background: #e9e9e9 !important;

  }

  .main-content{
    padding-top: 2em;
    padding-bottom: 2em;
  }


.large-checkbox{
height: 2rem;
width: 2rem;
}


  .paper{
        box-shadow: rgba(50,50,50,0.1) 0 0px 5px 0px;
        border-radius: 0.3em;
        border:1px solid #ddd;
        background: #fff;
        transition: all 0.2s ease-in-out;
  }
  .paper .content,.paper .paper-content{
    padding: 1em;

  }
  .paper .content h4,.paper .paper-content h4{
    padding:0px;
  }

  .news-feed .paper{
    margin-bottom: 1.5em;
    padding: 0em 1em 0em 1em;
  }




  .news-feed .news-menu{
    border-radius:0em;
    background: #f9f9f9;
    margin: 0px;
    padding:1em 0em;
    border-top:none;
    border-right:none;
    border-left:none;
    box-shadow: none;
  }

  .news-feed *{
    color: #666;
  }
  .news-feed .button{
    color: #fff;
  }




  .news-feed h5{
      font-size: 1.1rem;
  }
  .news-feed h4{
      font-size: 1.2rem;
  }
  .news-feed h3{
      font-size: 1.3rem;
  }
  .news-feed h2{
      font-size: 1.4rem;
  }

  .news-feed button{
    padding: 0.3em 0.9em !important;
    font-size: 1.2em !important;

  }

  .news-feed button i{
      color:#fff !important;
    }


  .news-feed h5,.news-feed h3 {
    color: #333;
  }


  .news-feed .news-message{
    overflow: auto;
    max-height:600px;
  }

  .unread .content:not(.news-title){
    display: none;
  }


  .sticky-menu{
    background: transparent;
    margin-top: 0px;
    padding-top: 0px;
  }

  .sticky-row{
    background: #fff;
  }

	.unread{
		width: 100%;
		box-shadow: inset 0.5em 0px 0px 0px rgba(54,179,181,0.8);
	}

  .now-read{
    box-shadow: inset 0em 0px 0px 0px rgba(54,179,181,0.8);
  }
  .news-icon{
    border-radius: 50%;
    background: rgba(54,179,181,0.8);
    height: 2em;
    width: 2em;
    margin-top:-5px;
    float: left;
    margin-right:0.4em;
    position: relative;

  }
  .news-icon .fa{
    position: absolute;
    top:50%;
    color:#fff;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

#external-content{
  background: #f1f1f1;
}
  .paper.min-height{
    min-height: 13em;
  }

  .mb-20{
    margin-bottom: 2em;
  }

[data-service] .paper:hover{
  background:rgba(100,100,100,0.1);
  cursor: pointer;
}

/* services */
  #pre_placement_modal #txt_individual,
  #pps_v3_modal #loading_v3 {
    margin: 0;
  }

  #pre_placement_modal #loading,
  #pps_v3_modal #loading_v3 {
    text-align: center;
  }

  #pre_placement_modal #individuals,
  #pps_v3_modal #individuals_v3 {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
  }

  #pre_placement_modal #individuals,
  #pps_v3_modal #individuals_v3,
  #pre_placement_modal #loading,
  #pps_v3_modal #loading_v3 {
    background-color: #FFF;
    border: 1px solid #ccc;
    border-top: 0;
    display: none;
  }

  #pre_placement_modal #individuals .individual_select,
  #pps_v3_modal #individuals_v3 .individual_select {
    text-transform: capitalize;
  }

  #pre_placement_modal #individuals .individual_select,
   #pps_v3_modal #individuals_v3 .individual_select,
  #pre_placement_modal #individuals .no_results,
  #pps_v3_modal #individuals_v3 .no_results {
    margin: 0;
    font-size: 0.8em;
    letter-spacing: 0.02em;
    padding: 0.3em 0.6em;
  }

  #pre_placement_modal #individuals .individual_select:hover,
  #pps_v3_modal #individuals_v3 .individual_select:hover {
    background-color: #73aeaf;
    color: #FFF;
    cursor: pointer;
  }

  #pre_placement_modal .row .columns {
    padding: 0;
  }

  #pre_placement_modal #individual_details p {
    margin: 0;
    font-size: 0.9em;
    letter-spacing: 0.02em;
  }

  #pre_placement_modal #individual_details p.details_header {
    font-weight: bold;
  }
  #pre_placement_modal #pps-errors h5 {
    margin: 0;
    color: red;
  }

  #pre_placement_modal #pps-errors #errors p {
    margin: 0em;
    font-size: 0.8em;
    color: red;
  }

  #pre_placement_modal form button {
    margin: 0;
    margin-top: 1em;
  }

  #ohr_container .large-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #ohr_container .large-link:hover {
    background: rgba(100,100,100,0.1);
    cursor: pointer;
  }
/* end of services */

/* services - request oh */
  #request_oh li.paginate_button {
    padding: 0 !important;
  }
  #request_oh .section {
    margin-bottom: 1em;
  }
  #request_oh .header {
    padding: 0.8em;
    border-bottom: 0.1em solid #da4278;
  }
  #request_oh .section.viewing .header {
    background-color: #36b3b5;
    border: none;
  }
  #request_oh .header h3 {
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #da4278;
  }
  #request_oh .section.viewing .header h3 {
    color: #FFF;
  }
  #request_oh .header h3 a {
    font-size: 0.8em;
    text-transform: initial;
    display: none;
  }
  #request_oh table tr.selected {
    background-color: #36b3b56e;
  }
  #request_oh .summary-section,
  #request_oh .input-section {
    display: none;
  }
  #request_oh .summary-section {
    background-color: #da427833;
    padding: 1em;
  }
  #request_oh .summary-section p {
    margin: 0;
  }
  #request_oh .input-section {
    margin: 1em 0em;
  }
  #request_oh .disclaimer {
    margin-bottom: 1em !important;
  }
  #request_oh .disclaimer p,
  #request_oh .disclaimer ul li {
    font-size: 0.6em !important;
    margin: 0;
  }
  #request_oh .next-ta {
    margin: 0;
  }
  #request_oh .section .add_document {
    display: block;
    background-color: #b0e0e3;
    text-align: center;
    padding: 0.5em;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    color: #048f91;
  }
  #request_oh .section .file_container {
    background-color: #e3f3f4;
    overflow: auto;
    padding: 0.5em;
  }
  #request_oh .section .file_container .file {
    margin: 0;
  }
  #request_oh .section .file_container .remove_file {
    margin: 0;
    width: 100%;
    padding: 0.5em;
  }
  #request_oh .section .file_container .file_name {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.8em;
  }
  #request_oh #radio_btns .panel {
    background-color: #ececec;
    padding: 0.5em 0em;
    margin-bottom: 1em;
  }
  #request_oh #radio_btns .switch {
    margin: 0;
  }
  #request_oh #radio_btns .switch label {
    background-color: #b4afaf;
  }
  #request_oh #radio_btns .switch input:checked + label {
    background-color: #36b3b5;
  }
  #request_oh #add_question_container {
    text-align: center;
  }
  #request_oh #add_question_container a {
    color: #7b7b7b;
    display: block;
  }
  #request_oh .custom-q textarea {
    margin: 0;
  }
/* end of services - request oh */

/* booking system */
  /* timetable */
    #booking_container {
      margin-top: 1em;
      margin-bottom: 1em;
    }
    #booking_container .booking_title {
      text-align: center;
      border-bottom: 1px solid #d5d5d5;
      padding: 0.5em 0em;
      color: #333;
      font-size: 1.4em;
      margin-bottom: 0.8em;
    }
    #booking_container #date_column {
      background-color: #e8e8e8;
      padding-top: 1em;
    }
    #booking_container #slot_column {
      border: 1px solid #e8e8e8;
    }
    #booking_container #slot_column h5.group_name {
      text-align: center;
    }
    #booking_container #slot_column .slot_btn {
      padding: 0.5em;
      font-size: 0.9em;
      font-weight: bold;
      margin: 0.2em;
      border-radius: 0.2em;
    }
    #booking_container #slot_column .not_available {
      font-size: 0.8em;
      text-align: center;
      color: #afafaf;
    }
    #booking_container #booking_summary {
      text-align: center;
      font-size: 1.2em;
      padding-bottom: 0.5em;
    }
    #booking_container #change_method p {
      text-align: center;
      font-size: 0.9em;
    }
    #booking_container #change_method a.button {
      padding: 0.2em 0.5em;
      margin-left: 0.2em;
      border-radius: 0.3em;
      font-size: 0.7em;
    }
    #change_method_modal select {
      height: 3.1em;
    }
    #confirm_booking .switch label,
    #confirm_booking .switch p {
      float: left;
    }
    #confirm_booking .switch label {
      margin-bottom: 0.5em;
    }
    #confirm_booking .switch p {
      margin: 0;
      padding-left: 0.5em;
      padding-top: 0.2em;
      font-size: 0.9em;
    }
    #confirm_booking .switch input[type=checkbox]:checked + label + p {
      font-weight: bold;
    }
    #confirm_booking input[type=submit] {
      margin-bottom: 0;
      margin-top: 1em;
    }
    #confirm_booking #date,
    #confirm_booking #time {
      font-weight: bold;
    }
    #confirm_booking input[type=submit] {
      margin: 0;
      margin-top: 1em;
    }
    .timetable-loader {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: rgba(255,255,255,0.8);
      z-index: 9999;
      display: none;
    }
    .timetable-loader .content {
      position:absolute;
      top: 50%;
      left: 50%;
    }
    .timetable-loader .content p {
      text-align: center;
      letter-spacing: 0.05em;
      font-size: 0.9em;
      font-weight: bold;
      color: #039a9a;
    }
    #booking_container .datepicker .no-bookings {
      background: #989898 !important;
      color: #828282 !important;
    }
    #booking_container .datepicker .limited {
      background: #e0789d !important;
      color: #ffc7db !important;
    }
    #booking_container .datepicker .not-limited {
      background: #fdcadc !important;
      color: #e0457c !important;
    }
  /* end of timetable */
  /* email verify */
    #booking_verify {
      padding: 4em 0em;
    }
    #booking_verify input[type=text] {
      margin: 0;
      height: 3.6em;
    }
  /* end of email verify */
/* end of booking system */


.table-hover tbody tr:hover td,
.table-hover tr.active td{
    background: #36B3B5;
    font-weight: 600;
    cursor: pointer;


}
.table-hover tbody tr:hover td i{
  color:#333 !important;
  }

  .grey-background{
    background: #f9f9f9;
  }
  .grey-background.dark{
    background: #999;
  }


  .progress-thin{
    height:0.9em;
    margin:0px;
    padding: 0px;
    border: 1px solid #eee;
  }

.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: transparent !important;
}

  blockquote{
  border-left: 3px solid #36B3B5;


}

blockquote.label{
    background: rgba(230,230,230,0.4);
    padding:1em 0.5em;
    font-size: 1em;
    color:#666666;
    margin: 1em 0em;
    white-space:normal;
}

.icon-circle{
  padding:0.3em 0.5em;

}

.unstyled-table{
  border:1px solid transparent;
  width:100%;

}
.unstyled-table tr th{
  width:50%;
  color:#333;
  vertical-align: top;
}

.unstyled-table.th-w30 tr th{
  width:30%;
}

.unstyled-table tr td{
   -ms-word-break: break-all;
    word-break: break-all;

  /* Non standard for webkit */
     word-break: break-word;

  width:50%;
}

.unstyled-table tr th:first-child{
  text-align: right;
}

.unstyled-table tr th:first-child::after{
  content: '';
}

.unstyled-table tr:nth-of-type(even) {
  background: transparent;
}



.unstyled-table.text-left tr th{
  text-align: left !important;
}


.relative{
  position: relative !important;
}



.number-step{
  border-radius: 50%;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  display: inline-block;
  color: #fff;
  left:-1em;
  background: #ccc;
}








/* ----- spacing -----*/

.nopadding {
    padding: 0 !important;
}

.nomargin {
	margin: 0 !important;
}

.mt-0 {
    margin-top: 0!important;
}
.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-60 {
    margin-top: 60px;
}
.mt-70 {
    margin-top: 70px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-90 {
    margin-top: 90px;
}
.mt-100 {
    margin-top: 100px;
}
.mt-110 {
    margin-top: 110px;
}
.mt-120 {
    margin-top: 120px;
}
.mt-130 {
    margin-top: 130px;
}
.mt-140 {
    margin-top: 140px;
}
.mb-0 {
    margin-bottom: 0!important;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-90 {
    margin-bottom: 90px;
}
.mb-100 {
    margin-bottom: 100px;
}
.mb-110 {
    margin-bottom: 110px;
}
.mb-120 {
    margin-bottom: 120px;
}
.mb-130 {
    margin-bottom: 130px;
}
.mb-140 {
    margin-bottom: 140px;
}
.pt-0 {
    padding-top: 0!important;
}
.pt-10 {
    padding-top: 10px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-70 {
    padding-top: 70px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-90 {
    padding-top: 90px;
}
.pt-100 {
    padding-top: 100px;
}
.pt-110 {
    padding-top: 110px;
}
.pt-120 {
    padding-top: 120px;
}
.pt-130 {
    padding-top: 130px;
}
.pt-140 {
    padding-top: 140px;
}
.pb-0 {
    padding-bottom: 0!important;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-110 {
    padding-bottom: 110px;
}
.pb-120 {
    padding-bottom: 120px;
}
.pb-130 {
    padding-bottom: 130px;
}
.pb-140 {
    padding-bottom: 140px;
}
.pl-0 {
    padding-left: 0!important;
}
.pl-10 {
    padding-left: 10px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-30 {
    padding-left: 30px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-50 {
    padding-left: 50px;
}
.pl-60 {
    padding-left: 60px;
}
.pl-70 {
    padding-left: 70px;
}
.pl-80 {
    padding-left: 80px;
}
.pl-90 {
    padding-left: 90px;
}
.pl-100 {
    padding-left: 100px;
}
.pl-110 {
    padding-left: 110px;
}
.pl-120 {
    padding-left: 120px;
}
.pl-130 {
    padding-left: 130px;
}
.pl-140 {
    padding-left: 140px;
}
.pr-0 {
    padding-right: 0!important;
}
.pr-10 {
    padding-right: 10px;
}
.pr-20 {
    padding-right: 20px;
}
.pr-30 {
    padding-right: 30px;
}
.pr-40 {
    padding-right: 40px;
}
.pr-50 {
    padding-right: 50px;
}
.pr-60 {
    padding-right: 60px;
}
.pr-70 {
    padding-right: 70px;
}
.pr-80 {
    padding-right: 80px;
}
.pr-90 {
    padding-right: 90px;
}
.pr-100 {
    padding-right: 100px;
}
.pr-110 {
    padding-right: 110px;
}
.pr-120 {
    padding-right: 120px;
}
.pr-130 {
    padding-right: 130px;
}
.pr-140 {
    padding-right: 140px;
}


.mr-0 {
    margin-right: 0!important;
}
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}
.mr-30 {
    margin-right: 30px;
}
.mr-40 {
    margin-right: 40px;
}
.ml-0 {
    margin-left: 0!important;
}
.ml-10 {
    margin-left: 10px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-30 {
    margin-left: 30px;
}
.ml-40 {
    margin-left: 40px;
}



/* ---- Font sizes ---- */
.fs-8{
    font-size: 0.8em;
}
.fs-5{
    font-size: 0.5em;
}
.fs-10{
    font-size: 1em;
}
.fs-12{
    font-size: 1.2em;
}
.fs-13{
    font-size: 1.3em;
}
.fs-15{
    font-size: 1.5em;
}

.fs-16{
    font-size: 1.6em;
}

.fs-17{
    font-size: 1.7em;
}
.fs-18{
    font-size: 1.8em;
}
.fs-19{
    font-size: 1.9em;
}

.fs-20{
    font-size: 2em;
}
.fs-30{
    font-size: 3em;
}
.fs-40{
    font-size: 4em;
}
.full-width-btn {
  width: 100%;
}





/* ---- Large Row ---- */
.full-width-row{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}
@media only screen {
    .large-row{max-width: 100%; }
} /* Define mobile styles */

@media only screen and (max-width: 40em) {
    .large-row{max-width: 100%; }
    } /* max-width 640px, mobile-only styles, use when QAing mobile issues */


@media only screen and (min-width: 40.063em) {
    .large-row{max-width: 100%; }
    } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .large-row{max-width: 100%; }
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 64.063em) {
    .large-row{max-width: 100%;  }
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    .large-row{max-width: 90%;  }
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

@media only screen and (min-width: 90.063em) {
    .large-row{max-width: 80%;  }
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
    .large-row{max-width: 80%;}
} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

@media only screen and (min-width: 120.063em) {
    .large-row{max-width: 70%;  }
} /* min-width 1921px, xxlarge screens */

/* radio options */
.radio-options-wrap{
}
.radio-hover:hover .radio-options-wrap{
  background: #f9f9f9;
}

.radio-options-wrap.active{
  border-color:#36B3B5 !important;
  background: #f9f9f9 !important;
  box-shadow: 0 0 3px 0px #ccc !important;
}
.booking-alert,
.consent-alert,
.assessment-alert {
  padding: 1em;
  border-color: rgba(54,179,181,0.9) !important;
}
.alert-box.booking-alert p,
.alert-box.consent-alert p,
.alert-box.assessment-alert p {
  margin: 0;
  display: block !important;
  font-size: 1.2em !important;
  color: #000 !important;
}
.consent-booking-modal a.submit_btn,
.booking-alert a,
.consent-alert a,
.assessment-alert a {
  margin-top: 1em;
  border-radius: 0.3em;
  font-size: 1em;
  text-align: left;
}
#booking_confirmation {
  padding: 2em 0em;
}
#booking_confirmation img {
  display: block;
  width: 60%;
  margin-top: 1em;
}
.consent-booking-modal h2 {
  font-size: 1.5em;
}
.consent-booking-modal {
  padding-bottom: 1em;
}

/* login */
.login-steps .steps {
  display: none;
}
.login-steps.wizard .content {
    min-height: 100px;
    background: none;
    margin: 0;
}
.login-steps.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 0 15px;
    position: absolute;
}
.login-steps.wizard .content .body.current {
    position: relative;
}
.login-steps input[type=text] {
  margin: 0;
}
.login-steps h4 {
  margin-bottom: 0.5em;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  color: #888;
}
.login-steps.wizard > .actions a,
.login-steps.wizard > .actions a:hover,
.login-steps.wizard > .actions a:active {
  background-color: #37b3b5;
}
.login-steps h3 {
  font-size: 1.3em;
}
.login-steps #your_email {
  padding-top: 1em;
}
.login-steps #password_set,
.login-steps #password_not_set {
  padding-top: 0.4em;
  padding-bottom: 1.6em;
}
.login-steps p {
  font-size: 0.8em;
  color: #4b4b4b;
}
.login-steps .forgotten-password {
  font-size: 0.8em;
}
.login-steps .password_error .alert-box,
#change_password_page .alert-box,
#login_page .alert-box,
.forgotten_password_error .alert-box {
  padding: 0.2rem 1.5rem 0.2rem 0.875rem;
  font-size: 1.1em;
}
#login_page h2 {
  color: #db4278;
  border-bottom: 1px solid #e2e0e0;
  padding-bottom: 0.5em;
}
#change_password_page input[type=text]{
    height: 3.2em;
    margin: 0;
}
/* end of login */

p.no-data {
  background-color: #ECECEC;
  padding: 1em;
  color: #A5A2A2;
  border: 0.1em solid #E2DEDE;
  border-radius: 0.3em;
}
p.no-data:after{
  content: 'No data found';
}

.alert-box.pink {
	background-color: #DA4278;
}

.alert-box.pink:hover {
	background-color: rgb(235,159,187);
}

.alert-box.pale {
	background-color: rgb(235,159,187);
}

.alert-box.white {
	background-color: #FFFFFF;
	border-color: #BBBBBB;
}

.alert-box.pale,
.alert-box.pale > table tr th,
.alert-box.pale > table tr th > *,
.alert-box.pale > table tr td,
.alert-box.pink,
.alert-box.pink > table tr th,
.alert-box.pink > table tr th > *,
.alert-box.pink > table tr td {
	color: #FFFFFF;
}