/* optimised css for dev */

[class^="ico-"]::before, [class*=" icon-"]::before {
  /*  font-family: "bruces";*/
    font-style: normal;
    font-weight: 600;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 1.0625rem;
    text-align: center;
    opacity: .8;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0;
    font-size: 150%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

body{
	min-width:500px;
    font-size:100%;
   
    padding-bottom:3rem;
}
body, html {
 
    height: 100%;
   /* min-width:400px;*/
}
html>body {
    font-size: 16px; 
    line-height:27px;
}


html {
    background: #fff none repeat scroll 0 0;
    color:#1e1e1e;
    font-family: "open sans",sans-serif ;+
    scroll-behavior: smooth;
}

.icon-reply.rotate:before { content: '\e816'; 
transform: rotate(90deg);
-webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);


} /* '' */
.icon-reply.rotated:before { content: '\e816';

transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);

  /* Firefox */
  -moz-transform: scale(-1, 1);

  /* IE */
  -ms-transform: scale(-1, 1);

  /* Opera */
  -o-transform: scale(-1, 1);


}
#init1.icon-reply.rotated::before {
    margin-left:1.0625rem;
    color:#ffffff;
    margin-right:0;
}

.icon-play::before {
    content: '\e804';
    display: inline-block;
    font-size: 100% !important;
 /*     -webkit-transition: all 50ms 0s ease-in-out;
    transition: all 50ms 0s ease-in-out;*/
}
/*
.icon-play:hover:before { 

    -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}*/
.icon-quote::before {
    transform: scaleX(-1);
   
}

.icon-quote {
   
    font-size: 2rem !important;
    color: #a51140;
}

.icon-resize-full::before { content: '\e800'; } /* '' */
.icon-ok::before {
  /*  margin-right:.4rem !important;*/
}
.icon-cancel-circle::before {
    margin:0 !important;
    color: #066672;
}
.ico-one:before {
    content:'\0031';
}
.ico-two:before {
    content:'\0032';
}
.ico-three:before {
    content:'\0033';
}
.ico-four:before {
    content:'\0034';
}
.ico-five:before {
    content:'\0035';
}
.ico-six:before {
    content:'\0036';
}
.ico-seven:before {
    content:'\0037';
}
.ico-eight:before {
    content:'\0038';
}

input#vPin {
border: none;
margin-bottom: .5rem;
width: 100%;
padding: .5rem;

    
}
/* range slider code  */



.slidecontainer {
  width: 100%;
}
.slider:after {
content:'10';
color:silver;
font-size:2rem;
position:absolute;
left:80%;
top:26%;
}
.slider:before {
content:'1';
color:silver;
font-size:2rem;
position:absolute;
left:12%;
top:26%;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: #d3d3d3;
  outline: none;
  border-radius: 3px;
 opacity: 0.7;
  position:relative;
 border-radius:12px;
 background: linear-gradient(90deg, rgb(214,214,214) 50%, rgb(214,214,214) 50%);*/
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {  /*chrome */
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  background: #ffffff;
  cursor: pointer;
  border-radius:50%;
}

.slider::-moz-range-thumb {
   
  width: 40px;
  height: 40px;
  background: #ffffff;
  cursor: pointer;
  border-radius:50%;
}

* {
	padding:0;
	margin:0;
	box-sizing:border-box;
    outline:0;
}
img {
    display:block;
    width:100%;
}
.clear {
    clear: both;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}
 p, li {
  
 /*   font-size: 90%;*/
    font-weight: 400;
    letter-spacing: -0.021em;
    line-height: 1.688;
    margin: 0 0 1rem 0;
    padding:0;
    position:relative;
     }

a  {
    text-decoration:none;
}

h2 { 
    font-size: 2.063rem;
    font-weight: 700;
    line-height: 1.576;
    letter-spacing: -0.021em;
    padding: 0;
    margin: 0 0 1.688rem 0;
}
h2.pagetitle {
    margin-bottom:0;   
}
h3 {
    font-size: 1.25rem;
    line-height:1.65;
    margin:1rem 0 11px 0;

   
}
h3.highlight {
    
    color:#A51140;
}
h5, h4 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
}
h4.pagetitle {
    margin-bottom:1rem;
}
h5 {
    color:#A51140;
  /* color:#066672;*/
}
.tcr h5 {
    margin-top:-.2rem;
    margin-bottom:.2rem;
}
.menuh  h2 {
    font-size:1.8rem;
}
a p {
    color: #1e1e1e;
    font-size: 100%;
  /*  background-color:inherit;*/
    padding:2% ;
    margin-bottom:.5rem;
    font-weight:500;
    background-color:#fafafa ;
}
a p:hover {
    color:white;
    background-color:#066672;

}

hr {
    color:silver;
    height:0;
    margin:2rem 0;
}
.tcl.fh18 {
    height:auto;
}
.tcr >.fh18{
display:none;
}

/*
.fh18 {
    height:18rem;
    }
.tcr.fh18 {
margin:0 auto;
height:auto ;
padding:4% ;
}
*/
.fcolpri {
   color: #066672;
}
.fcolsec {

}
.imgwidth {
    width:150px;
}
form {
    margin-top:1rem;
}
.button.nobm {
    margin-bottom:0;
}

/*  bullets indents etc,  */
ol, ul {
    list-style: outside none none;
}
ul.liststyle {
    list-style-type: none;
    list-style-position: inside;
    margin-left: 0;
    margin-top:1rem;
}
ul.nobull{
    list-style-type: none;
    list-style-position: inside;
    margin-left: 0;
    margin-top:1rem;
}
ul.liststyle li, ul.nobull li  {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: .625rem;
    margin-left: .25rem;
    font-size: 95%; /* was 90 */
}

ul.nobull li {
    margin-bottom: 0;
}

ol.numericlist {
    margin-left: 0;
    padding: 0;/* was 2%*/
    list-style-type: none;
    list-style-position: outside;
    margin-top:.5rem; /*  added for t102   */
}
ol.numericlist li {
    counter-increment: step-counter;
    list-style-position: inside;
    text-indent: 0rem;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px dotted silver;
    font-size: 90%;
}
ol.numericlist.noborder li {
    border-bottom:none;
    margin-bottom:0;
    }
ol.numericlist li.lastone {
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}

ul.liststyle li::before {
    color: #a41140;
    content: "\25fc";
    font-size: 0.75rem;
    font-weight: 300;
    left: 0;
    position: absolute;
    top: .2rem;
}

ul.liststyle.check li {
    
    padding-left: 1.8rem;
   
}

ul.liststyle.check li::before {
    content: "\2713";
     color: #a41140;
     font-size: 140%;
    font-weight: 600;
    left: 0;
    position: absolute;
    top: .25rem;
}

ol.numericlist li::before {
    content: counter(step-counter);
    margin-right: .0rem;
    font-size: inherit;
    color: #A51140;
    font-weight: 600;
    padding: 0 .8rem;
    margin-left: -2.2rem;/* was 1.4 */
    position:absolute;
    margin-top:0;
}
ol.myup li {
    font-size:110%;
    font-weight:700;

}
/*   code for breadcrumbs   */

#breadcrumbs {
    position:relative;
    overflow:hidden;
    margin:.6rem 0 ;
    padding:.1rem;
}

#breadcrumbs ul {
    position:relative;
    overflow:hidden;
    font-size:14px;
    line-height:1.4;
    padding:0;
    margin:0;
    
}
#breadcrumbs li {
    display:inline-block;    
    margin:0;
    padding:0;
    color:#1e1e1e;
    /*
    display:block;
    width:auto;
    float:left;
    margin-right:0;
    padding-right:0;
    */

}

#breadcrumbs li:after {
    content:'\203a';
    margin:0 5px;
    color:silver;
}
#breadcrumbs li:last-child:after {
    content:'';
}
#breadcrumbs li a {
    padding:3px;
    text-decoration:none;   
    color:#6a6a6a;
    
}

#breadcrumbs li a:hover {    
    background-color:#f1f1f1;
    color:black;
}
#breadcrumbs li a.live, #breadcrumbs li a.live:hover{    
    color:black;
    background:transparent;
} 


#sellcontrol {
display: block;
height: auto;
max-height: 18rem;

}

 .sellUp{
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); /* white*/
  /*  background-image: linear-gradient(rgba(213, 42, 42, 0), rgb(153, 156, 153)); /* grey to match side colour  */
    content: "";
    display: block;
    height: 125px;
    left: 0px;
    position: relative;
    right: 0px;
    top: -125px;
 } 
 
 #sellInst {
display:block;
height:auto;
position:relative;
overflow:hidden;
margin-top:0;/*  test space for 102 */  
 } 
#sellInst h2, #sellInst p {
    text-align: center;
    margin-bottom:.5rem;
 }


.sellUp-content {
  
  margin:0 ;
padding: 0 0px;
text-align: ;
height: auto;
display: block;
background-color: white;
width: 100%;
padding: 0 0 0 0;
position: relative;
top: -8rem;

}

.button p {
    text-align: left;
    color: white;
    font-weight: 600;
    font-size: 100%;
    margin: 0;
        margin-left: 0px;
    padding: 1.0625rem;
}
.iconpng p {
    margin-left: 3rem !important;
}

/*  end of breadcrunbs    */

.width3 {
    width: calc(86% / 1);
    padding: 2%;
    margin: 2%;
    display: inline-block;
    position: relative;  
    height: 18rem;
    border: none;
    top:0;
    background-color:#fff;
}

.tcc {
    position: relative;
    overflow: hidden;
    padding: 4%;
    width: 100%;
    margin: 0;   
}

.tcc.wd80 {
    width:100%;
    margin:0 auto;
}
/* some code to format radio box frames in ass106  */

p.tr1, label {
    font-size: 1rem;
    opacity: 1;
    line-height: 1rem;
    margin-bottom: 8%;
    color: white;
    font-weight: 600;
}
.tr2 {
    width: 25%;
    float: right;
    margin-top: 0;
}

.up, .down {
    cursor: pointer;
    margin-right: 1rem;
    font-size: 1rem;
    float:right;
}
.down {
    margin-right:2rem;
}
.up::after {
    content: "▲";
    color: #1a8d94;
}

.down::after {
    content: '▼';
    color: #1a8d94;
}
.up:hover:after { 
  color:#4c4c4c; 
}

.down:hover:after {
 color:#4c4c4c;
}
 .core-body {
    padding: 4%;
    width:100%;
    column-count: 1;
}




#core div, #core li  {
    width:85%;
    margin: 0;
    line-height:0;
    padding: 0;
    margin-bottom:0;
}
#core h5 {
    margin: 0 0 .2rem 0;
    line-height:1.4;
    padding: .2rem 0;
    font-size:110%;
    font-weight:500;

}
#core h5.remove {
    opacity:.5;
    color:silver;
    }

#core h5.hello {
    color:green;
}
#core.hidep li p {
    display:none;
}
#core.showp li p {
    display:block;
}

#heder2, #heder1, #heder3 {
    min-height:9rem;
    height:auto;
    padding:1% 2%;
    /*
    border-bottom:dotted silver 1px;
    margin-bottom:.2rem;
    padding-bottom:.4rem;
    */
    color:#404040;
}
#heder2 p, #heder1 p, #heder3 p{
    margin-bottom:0;
    font-size:14px;
    color:#000000;
    opacity:1;
}

#heder2 h5, #heder1 h5, #heder3 h5{
    margin-bottom:0;
    color:#000000;
    text-align:left;
    font-size:100%;
}
#heder2 h5.remove{
    color:silver;
    }

#valhead h5  {
   
    color: #ED9C28;
    text-align: left;
    font-size: 100%;
}
/*
#core  {
    height: 2rem;
    position: relative;
    height: auto;
    width: 95%;
    float: left;

   
  
    -webkit-column-break-inside: auto;
          page-break-inside: auto;
               break-inside: auto;
}
*/

#herder2 h5{
 color:#ED9C28;
 text-align:left;
 font-size:100%;
}

#herder2 p {
    color:#404040;
    margin-bottom:0;
    border-bottom:1px silver dotted;
    margin-bottom:.5rem;padding-bottom:.5rem;
    }

li div.info p {
   margin-bottom:0;
   
 }   
 p.hideall, .hide, .removed {
    display:none;
 }

 li.action.showall p.hideall {
    display:block !important;
 }
 p.showall, .show {
    display:block;
 }

 
.info.unhidden div.hidden {
    display: block;
}

li.action h5 {
    color: #404040;
}
h5.action {
    color: #404040;
}
h5.removed {
     color: #404040;
   opacity:.25;
}

.phase1, .phase2 {
    float: right;
    width: 15%;
    height: auto;
    position: relative;
    padding: 0;
    text-align: right;
}
.phase1::before, .phase2::before {
    content: "\2717";
    color: inherit;
    font-weight: 800;
    font-size: 140%;
}
.info.xxx input {
    background: #F1F1F1;
    border: none;
    width: 85%;
    height: 1.6rem;
    padding: 2%;
    margin-bottom: .4rem;
}
/**************new code for value-test html   */
#acc01 {
    position:relative;
 }  
#core li span.valtitle  {
    color: #ED9C28;
    font-weight: 600;
    font-size: 120%;

}


p .hideall {
    display:none;
    margin-left:1rem;
    margin-bottom:1rem;
}
p .showall {
   display:inline;

}
#core li p {
    margin-bottom:.5rem;
    color:#808080;
}
#core li p.removed.hide {
    margin-bottom:0;
}
#core li.hideall p span.desc {
    display:none;

}
#core li p.removed span.valtitle  {
    color:silver;
opacity:.75;

}



.buttin.buttadd {
    padding: 0 .2rem .4rem .2rem;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}
.buttin {
    width: 2.4rem;
    height: 100%;
    background-color: #fff;
    padding: .5rem;
    position: absolute;
    top: 0;
    left: 0;
}
.buttimg.buttimgokadd {
    background: url(../assets/okadd.png) no-repeat,#fff;
        background-size: auto, auto;
    background-size: contain;
}
.iconpng p {
    margin-left:3rem !important;
}
/*.manx2 {
    background: url(../assets/manx2.png) no-repeat;
        background-size: auto, auto;
    background-size: contain;
}
*/
.manxx {
    background: url(../assets/manx.png) no-repeat;
        background-size: auto, auto;
    background-size: contain;
}
.manx3 {
    background: url(../assets/manx2.png) no-repeat;
        background-size: auto, auto;
    background-size: contain;
}
.manx4 {
    background: url(../assets/manx3.png) no-repeat;
        background-size: auto, auto;
    background-size: contain;
}
.whitestar {
    background: url(../assets/whitestar.png) no-repeat;
        background-size: auto, auto;
    background-size: contain;
}
.buttimg {
    width: auto;
    height: 1.6rem;
}
/*
.phase1.passive {
    background-color: #ED9C28;
}*/
.phase1.passive::before {
    content: "\2713";
    color: #ED9C28;
    font-weight: 800;
    font-size: 140%;
}
/* accordion  */
.accordion {
    background: #1a8d94;
    border-bottom: 0 solid #1a1a1a;
    color: #ffffff;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .2rem;
    padding: .6rem .75rem .5rem .75rem;
    text-decoration: none;
    transition: all 0.15s linear 0s;
    width: 100%;
    text-align: center;
}

.accordion h2 {
    font-size: 100%;
    line-height: 1.4;
    margin: 0;
}

.panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease 0s;
    margin-top: 0;
    padding: 4%;
    background-color: #fff;
}
.panel.gray {
    background-color: #F1F1F1;
}
/*  colours etc.. */

.ico-green {
    color:#066672;
}
.warning{
    background-color:red !important;
}
.colff {
    background-color:#ffffff;
}
.colf1 {
    background-color:#f1f1f1 !important;
}
.colfa {
    background-color:#fafafa;
}
.colb1 {
     background-color:#b1b1b1;
}
.colce {
    background-color:#cecece;
}
.color1a {
  /*  #B3B9BB;*/
background: #879193; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #879193 60%, #b4b9bc
    );
}
.color1b {
background: #b4b9bc; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#b4b9bc, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#b4b9bc, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#b4b9bc, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#b4b9bc, #E6E6E6); /* Standard syntax */
}
.color2a {
background: #779da8; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #779da8 60%, #a7bbc2
    );
}
.color2b {
background: #a7bbc2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#a7bbc2, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a7bbc2, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a7bbc2, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a7bbc2, #E6E6E6); /* Standard syntax */
}
.color3a {
background: #a1babf; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #a1babf 60%, #b7c9cd
    );
}
.color3b {
background: #b7c9cd; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#b7c9cd, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#b7c9cd, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#b7c9cd, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#b7c9cd, #E6E6E6); /* Standard syntax */
}
.color4a {
background: #cddae0; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #cddae0 60%, #d7dfe2
    );
}
.color4b {
background: #d7dfe2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#d7dfe2, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#d7dfe2, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d7dfe2, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d7dfe2, #E6E6E6); /* Standard syntax */
}
.color5a {
background: #efc07c; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #efc07c 60%, #ead7b9
    );
}
.color5b {
background: #ead7b9; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ead7b9, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ead7b9, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ead7b9, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ead7b9, #E6E6E6); /* Standard syntax */
}

.color6a {
background: #f1d2b3; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #f1d2b3 60%, #e9e0d7
    );
}
.color6b{
background: #e9e0d7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#e9e0d7, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e9e0d7, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e9e0d7, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e9e0d7, #E6E6E6); /* Standard syntax */
}
.color7a {
background: #e89995; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #e89995 60%, #e8cccb
    );
}
.color7b {
background: #e8cccb; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#e8cccb, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e8cccb, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e8cccb, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e8cccb, #E6E6E6); /* Standard syntax */
}
.color8a {
background: #ebc9c8; /* For browsers that do not support gradients */
    background-image:
    linear-gradient(
      #ebc9c8 60%, #e9dbdb
    );
}
.color8b {
background: #e9dbdb; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#e9dbdb, #E6E6E6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e9dbdb, #E6E6E6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e9dbdb, #E6E6E6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e9dbdb, #E6E6E6); /* Standard syntax */
}
.text-container.color1a {
    background-color:#B3B9BB !important;
    background-image:none;
}
.text-container.color2a {
    background-color:#A6BAC2;
     background-image:none;
}
.text-container.color3a {
    background-color:#B7C9CD;
     background-image:none;
}
.text-container.color4a {
    background-color:#D7DFE2;
     background-image:none;
}
.text-container.color5a {
    background-color:#EAD7B8;
     background-image:none;
}
.text-container.color6a {
    background-color:#E9E0D7;
     background-image:none;
}
.text-container.color7a {
    background-color:#E8CCCB;
     background-image:none;
}
.text-container.color8a {
    background-color:#E9DBDB;
     background-image:none;
}
/*  padding, show, hide, shadow and margin adjustments  */

.bm4 {
    margin-bottom:4% !important;
}
.bm2 {
    margin-bottom:2% !important;
}
.tm1 {
     margin-top:1% !important;
}
.tm4 {
    margin-top:4% !important;
}
.tm8 {
    margin-top:8% !important;
}
.tmx4 {
    margin-top:4% !important;
}
.tm6 {
    margin-top:6% !important;
}
.tm2 {
    margin-top:2% !important;
}
.tm0 {
    margin-top:0 !important;
}
.tm3r {
    margin-top:3rem !important;
}
.tm08r {
    margin-top:.8rem !important;
}
.tp0 {
    padding-top:0 !important;
}
.tp2 {
    padding-top:2% !important;
}
.tm05 {
    margin-top:.5rem;
}
.tm2r {
    margin-top:0!important;
}
.bm0 {
  margin-bottom:0% !important;  
}
.bp0 {
  padding-bottom:0% !important;  
}
.bm0n {
  margin-bottom:1rem !important;  
}
.bm4 {
    margin-bottom:4% ;
}
.bp4 {
    padding-bottom:4%;
}
.marrt, .rm4 {
    margin-right:4%;
}
.outline {
    padding:0 !important;
}
.padd4 {
    padding:4% !important;
}
.padd48 {
    padding:4% 8% !important;
}
.padd24 {
padding:2% 4% !important;
}
.rtmar {
    margin-right:2% !important;
}
.shadow {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tcc.wd60 {
    width:100%;
    margin:0 auto;
}
.tcc.wd40 {
    width:100%;
    margin:0 auto;
}
.tcl.w60 {
    width:100%;
}
.tcr.w35 {
    width:100%;
}
q::before {
    content: '\201C';
    font-family: Times New Roman;
    font-size: 350%;
    color: #a51140;
    margin: 1rem;
}
.attribute p {
    font-size: 80%;
    text-align: left;
  /*  color: #a51140;*/
    margin-right: 10%;
}
.quote p {
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    font-style: italic;
    line-height: 2rem;
    margin-top: .5rem;
    padding-left:10%;
}
.quote h5 {
    text-align:center;
}
/*   mini raq settings  */
.frameheading {
    text-align: center;
    color: #236c7f;
}
.frameitalic {
    text-align: center;
    font-style: italic;
    font-weight: 500;
}

.hidden, .hide, .noshow, .buthide {
    display: none;
}
.unhidden, .butshow {
    display:block;
}
.printonly{
    display:none;
}
/*  buttons  */
/* this is the full width button with mas font file from fontello*/
.button {
    background-color: #066672;
    padding: 0;
    margin: 4% auto;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.4), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}
.button:hover, .button a p:hover {
background-color: #4c4c4c;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.button p {
    text-align: left;
    color: white;
    font-weight: 600;
    font-size: 95%;
    margin:0;
    padding:1.0625rem ;
}
.button.lftmar {
    margin-left:0%;
}
.button.sectbrk {
    margin-left:4%;
    margin-right:4%;
}

.ebutton {
width: 100%;
padding: 17px;
background-color: #066672;
color: #fff;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.4), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
cursor: pointer !important;
border: none;
font-size:95%;
font-weight:600;
}
/* this is the small button with png icons*/
.butt {
    float: none;
}
.butt {
    width: 94%;
    height: 2.4rem;
    background-color: #016773;
    position: relative;
    margin: 2% auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 0;
    cursor: pointer;
}
.buttin {
    width: 2.4rem;
    height: 100%;
    background-color: #fff;
    padding: .5rem;
    position: absolute;
    top: 0;
    left: 0;
}
.buttimg {
    width: auto;
    height: 1.6rem;
}
.buttimg.buttimgaddto {
    background: url(../assets/addto.png) no-repeat,#fff;
        background-size: auto, auto;
    background-size: contain;
}
.buttpara {
    padding: .4rem;
}

.buttpara p {
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin-left: 3rem;
}
/*  input    */
.addoption {
    background-color:#ffffff;
    min-height:9rem;
    width:100%;
    padding:3% 4%;
    opacity:1;
    margin-bottom:4%;
    margin-top:4%;"
}
.addinput {
overflow: visible;
border: none;
padding: 1px 0 1px 4px; 
border-radius: 4px;
margin: 0 0 0 6px;
position:absolute;
top:36px;
left:6px;
width:70%;
line-height:2;
font-size:1rem;

}

/*   page header section  */
#headerContainer {
    display: block;
    background-color: #282828;
    border-bottom: 4px silver solid;
    height: 60px;
    left: 0;
    margin-top: 0;
    padding: .5rem 2% 0 2%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 20;
}
#header-left {
    float: left;
    width: 45%;
    position: fixed;
    height: inherit;
    padding: 0;
    margin: 0;
    display: block;
}
#header-left h5 {
    font-size: 1rem;
    color: #fff;
    line-height: 1;
    font-weight: 400;
    margin:0 0 .4rem 0;
}
#header-left p {
    font-size: inherit;
    color: #fff;
    line-height: .8;
    margin:0;
}
#header-left p {
    display:none;
}
img.maslogo {
    width: 11.8rem;
    display: block;
    padding: 0 0 0 0;
    float: right;
    margin-top: .5rem;
}

/*  page header section  */
.pageHeader {
    height: auto;
    position: relative;
    width: 100%;
    margin: 0 0 -.18rem 0;
    overflow: hidden;
    background-color: #282828;
}
.ximg-container {
    width: 100%;
  
}
.pageHeader img {
    width: 100%;
}
.ximg-title {
    width: 30%;
    float: left;
    background-color: #282828;
}
.title, .titlex {
    height: auto;
    margin: 0;
    padding: 0 0 0 4%;   
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    color: #fff;
}
.title-left {
    text-align: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.title-left p {
    margin-bottom: .5rem;
    width: 100%;
    text-transform: none;
}
.title-left h1 {
    font-size: 200%;
    font-weight: 300;
    margin: 0 0 4% 0;
    padding: 0;
    line-height: 1;
}
.MASUKLtd {
    display:none;
}
/* main page layout section  */

.wrapper, #wrapper {
    background-color: #f1f1f1;
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    display: block;
    height: auto;
    left: 0;
    min-height: 60em;
    position: absolute;
    top: 3em;
    width: 100%;
    z-index: 1;
}
.main-container {
    background-color: #ffffff;
    height: auto;
    margin: 0;
    width: 100%;   
    padding: 2%;
    border: 0;
    box-shadow: none;
    position: relative;
    min-height:calc(100vh - 8rem);
}
.main-container.large{   
   
    width: 100%;
    max-width: 1200px;
    padding: 2%;
    border: .125rem solid #d4d4d4;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
   
}
.content-container {
    height: auto;
    padding:4%;
    margin: 4% auto;
    overflow: hidden;
    position: relative;
    
    width: 100%;
   
}
.inner-frame, .outline {
    width: 100%;
    padding: 4%;
    margin: 0 0 0 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: auto;
}
.outline {
    padding: 0 ;
}

.instructions .tcc {
    padding:1%;
}
.tcc.instructions {
    background:#fff;
    margin:0;
    padding:0 4%;
}
.ytcl, .ytcr {
    width: 58%;
    padding: 4%;
    float:left;
}
.ytcr {
    width: 38%;
float:right;
    }
.tcl, .tcr {
    width: 100%;
    padding: 4%;
   }
   .xtcl, .xtcr {
    width: 100%;
    padding: 4%;
   
}
/*  css for mini book links from qamenus  */
.wd88 {
width:100% !important;
margin:0 auto;
}
.minibook {
background-color:#f1f1f1;
cursor:pointer;
margin-bottom:.5rem;
padding:2% 4% 2% 2%;

}
.minibook:hover {
    background-color: #066672 !important;
    color:#ffffff;

}

.xcl, .xcr {
float:left;
width:30%;
}
.xcr {
    width:68%;
}
.minibook p {
background-color: transparent;
color: #1e1e1e;
padding: 0 .5rem;
font-size: 110%;
line-height: 1.5;
text-align:center;
margin:0;
    padding:1rem 1.2rem 1rem 1rem;
}
.minibook p:hover {
    background-color: #066672 !important;
    color:#ffffff;

    }
img.imgwidth {
    width:100%;
}
#breadcrumbs> .tcl{
float:left;
width:75%;
}
#breadcrumbs > .tcr{
float:right;
width:24%;
}
.ttcl, .ttcr, .ttcc {
    width:100%;
    margin:0;
    padding:0;
}
.ttcl {
    float:none;
}
.ttcr {
    float:none;
}
.ttcc {
    margin:2% 0;
    padding:0;
}
.instructions .tcl, .instructions .tcr {
    padding:1.5%;
}
.tcl, .tcr {
    float:none;
}

.instruction-content .tcl, .instruction-content .tcr, .instruction-content .tcc {
    padding: 0;
    margin: .2rem 0 .2rem 0;
}
.instruction-content .tcc {
    border-bottom: 1px silver dotted;
}
/*
.value-header {
    background-color: #282828;
    padding: 1.5% 0 1.5% 0;
    cursor: auto;
    margin-bottom:0.5rem;
    opacity:.4;
}*/
/*
.value h5  {
    background-color: transparent;
    color: #fff;   
    width: 100%;  
    font-size: 1.2rem;   
    text-align: center;   
    font-weight: 600;
}
*/
.tcc.value, .tcc.value p {
    padding:0;
    margin:.5% 0 0 0;

}


/*  footer css   */


#pageFooter {
background-color: #282828;
display:block;
border-top: 4px silver solid;
height: auto;min-height:15rem;
left: 0;
margin-top: 1rem;
padding: .5rem 2% 1rem 2%;
position: relative;
width:100%;
}
#pageFooter.shortFooter  {
height: auto;
min-height:20px;
margin-top: 0;
padding: 0;
position:fixed;
bottom:0;
}
#copyright.shortFooter {
background-color: #282828;
display:block;
border-top: 4px silver solid;
height: auto;
min-height:20px;
margin-top: 0;
padding: 0;
position:fixed;
bottom:0;
width:100%;
}
#copyright.shortFooter p{
color:#ffffff;
text-align:center;
padding:.5rem 0;
margin:0;
}

.footer-container {
    position:relative;
    overflow: hidden;
    height: auto;
    margin: .5% auto;
    width: 100%;
    max-width: 980px;
    padding: 0;
    display:block;
}


.footer-container.shortFooter {
    text-align:center;
    background-color:inherit;
    color:#fff;
    padding:.4rem 0 0 0;
    margin:0 auto;
   position: relative;
    top: 0rem;
}




.footer-container .icon-phone-outline::before, .footer-container .icon-mail::before, .footer-container .icon-location::before {
    color:#fff;
    font-size:150%;
}
.footer-container .icon-location::before {
    margin-left:.15rem;
}
.footer-container p {
    margin-bottom:1rem;
}
.footer-container a {
    color:#e3e3e3;
}
.footer-container h2 {
    font-weight:300;
}
.footer-container a:hover { 
    color:#fff;
}
.valc {
padding-bottom:.2rem;
margin:.8rem 0 .45rem 0;
background-color:#a1a1a1;
text-align:right;
}
.valc p {
    color:#ffffff;
    padding:.45rem 0 .45rem 0;
    padding-right:0;
    font-size:100%;
    text-align:center;
}
/*  modal css   */

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

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 6rem auto 0; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
 max-width:700px;
 height:auto;
  width: 95%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*  time keep and other tables  */
.tcc.tk{

width: 90%;
    margin: 4% auto 4%;
}
.tcc.tk > .tcl,  .tcc.tk > .tcr{
    border-bottom: 1px solid silver;
    border-left: 1px solid silver;
    width: 84%;
    padding: 1% 0% 1.5% 3%;
    height: 2rem;
    margin-bottom:0;
    float:left;
}

 .tcc.tk > .tcr{
    width: 16%;
    text-align: left;
    padding: 1% 0% 1.5% 3%;
 }
.tcc.timekeep {
    width: 90%;
    margin: 4% auto 4%;
}

.trerow.header {
    background-color: #008081;
}

.tcc.timekeep > .tcl, .tcc.timekeep > .tcr {
    border-bottom: 1px solid silver;
    border-left: 1px solid silver;
    width: 80%;
    padding: 1% 0% 1.5% 3%;
    height: 3rem;
    margin-bottom:0;
    float:left;
}
.tcc.timekeep > .tcl.hdg, .tcc.timekeep > .tcr.hdg {
background-color:#008081;
color:#fff;
padding:3% 0 1.5% 3%;
height:3.5rem;
}
.tcc.timekeep > .tcr {
    border-right: 1px solid silver;
}
.tcc.timekeep > .tcl.tre, .tcc.timekeep > .tcr.tre {
   height: 3.0rem;
   text-align: left;
   padding-left:2%;
    }
    .tcc.timekeep > .tcr.tre {
   
   text-align: center;
   padding-left:0;
    }
.tcc.timekeep > .tcr {
    width: 18%;
   
    text-align: left;
   /* padding: 1% 0% 1.5% 5px;  changed for man4  */
    padding: 1% 0% 1.5% 3%;
}
.tcc.timekeep h5 {
    color:#fff;
    margin-bottom:0;
    margin-top:-.2rem;

   /*  color:#A51140;*/
}

.tcc.timekeep > .tcl p, .tcc.timekeep > .tcr p {
    font-size: 80%;
    line-height: 1.2;
    margin-bottom:0;
}
.tcc.timekeep > .tcl.tre, .tcc.timekeep > .tcr.tre {
    width:90%;
    }
  .tcc.timekeep > .tcr.tre {
    width:10%;
    }   
.tcc.timekeep > .tcl.tre p, .tcc.timekeep > .tcr.tre p {
 line-height: 1.4;
}
.tcc.timekeep > .tcr input {
    background: none;
    border: none;
    font-size:100%;
}
.register {
height:auto;
padding:4%;
width:100%;
background-color:#dcdcdc;
color:black;
border:1px silver dotted;
margin-top:1.7rem;
padding-top:3%;

}

#register0 input, #register0 textarea {
    border:none;
    padding:.4rem;
    background-color:white;
    max-width:100%;
    width: 100%;
    margin: 0 auto 2%
}
#register0 .placeholder {
    font-size:1rem;
    font-weight:500;
    color:#4e4e4e;
}
#register0 h5 {
    margin-bottom:11px;
}
/*   section for qa list headings  */
.icheader {
background-color:#066672;
}
.ichdrcontainer {
    width: 70%;
    float: none;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.ichdrcontainer h4{
font-size:150%;
color:#ffffff;
}
.icincontainer {
    float: left;
    width: 30%;
}
.iconIntro {
    width: 80%;
}


/*  end of modal css    */
@media (min-width: 480px) { 
.core-body {
    column-count: 2;
}
#core li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

}
.xtcl, .xtcr {
    width: 48%;
    padding: 4%;
    float:left;
}

.xtcr {
  
    float:right;
}
.addinput {
top:32px;
}
.wd88 {
width:90% !important;
margin:0 auto;

}

}
@media (min-width: 600px) { 
.wd88 {
width:75% !important;
margin:0 auto;

}
.tcc.wd40 {
    width:80%;
  
}
.title, .titlex {
    
    padding: 2% 0 0 4%; 



}


@media (min-width: 760px) {
  .main-container {   
    margin: 0% auto;
    width: 92%;
    max-width: 920px;
    padding: 2% 4% 4% 4%;   
   
}
#header-left p {
    display:block;
}
.wd88 {
width:60% !important;
margin:0 auto;

}
.tcc.wd80 {
    width:60%;
    margin:0 auto;
}
.addinput {
top:36px;
}

.tcl.w60 {
    width:60%;
    float:left;
}
.tcr.w35 {
    width:35%;
    float:right;
}




}


@media (min-width: 900px) { 
     .main-container {   
    margin: .5% auto;
    width: 96%;
    max-width: 920px;
    padding: 2%;
    border:none;
    box-shadow:none;
    border-radius:1rem;
 /*
    border: .125rem solid #d4d4d4;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
   */
}
.wd88 {
width:65% !important;
margin:0 auto;

}
.tcc.wd40 {
    width:60%;
    margin:0 auto;
}
.tcl.fh18 {
    height:18rem;
}
.tcr >.fh18{
    display:block;
width: 18rem;
background-image: url("../assets/int-behav.png");
position: relative;
background-color: transparent;
height: 18rem;
background-size: cover;
float: right;
margin-right: 8%;
}
.tcl.w60 {
    width:60%;
}
.tcr.w35 {
    width:35%;
}

.addinput {
top:26px;
}
.tmx4 {
    margin-top:0 !important;
}
.linkContainer{
    margin: .5% auto;
    width: 100%;
    
    padding: 0;
    position: relative;
    height: auto;
    overflow: hidden;
}
.width4 {
    width: calc(87% / 3);
    padding: 2%;
    margin: 2%;
    display: inline-block;
    position: relative;
    display: inline-block;
    height: auto;
}
.ictext {
    float: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: left;
    padding-top: 6%;
    height:12rem;
}



.main-container.large{   
   
    width: 96%;
    max-width: 1200px;
    padding: 2%;
    border: .125rem solid #d4d4d4;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
   
}


.MASUKLtd {
    position: absolute;
    top: 4%;
    right: 2%;
    width: 16%;
    display:block;
}
.core-body {
    column-count: 2;
    column-gap:0;
    padding:4%;
    
}
.core-body * {
    margin-top:0;
}

.heder2, .heder3 {
  min-height:10rem;
}
.title, .titlex {
   
    padding: 2% 0 0 4%; 
}
.title-left p {
    margin-bottom: 1rem;
    line-height:1.4;
   
}
.title-left h1 {
    font-size: 325%;
   
}


.headingframe .title {
margin:4%;
width:60%;
}
.headingframe .title-left {
    width:80%;
}
.headingframe .title p {
    width:80%;
}
.dassess .tcl, .dassess .tcr {
    padding:0;
}
.dassess h4, .dassess p {
    font-size:90%;
}
.dassess h5.lowlight {
    border-bottom:silver solid 1px;
    padding-bottom:1rem;
    margin-bottom:1rem;
    color:#066672;
}
.tcr.advice p::before {
    content: "\2605" " ";
    font-weight: 800;
    padding: 0;
    color: #1A8D94;
    font-size: 1.1em;
}
.resultset {
    border-bottom:silver solid 1px;
    margin-top:1rem;
    margin-bottom:1rem;
}

.score {
    padding: .4rem .4rem .4rem .4rem;
    background-color: #fff;
    float: right;
    font-size: 1rem;
    margin-top: -.5rem;
}
#oscore {
    margin-top:1rem;
}
.score.oscore {
    float:none; /*  for raq40  */
}
.content-container {     
    margin: 4% auto;   
    padding: 4% 4% 4% 4%;  
   
}
.tcl, .tcr {
    width: 48%;
    padding: 4%;
   
}
.wd88 {
width:48% !important;

}
.ttcl, .ttcr, .ttcc {
    width:48%;
    margin:0;
    padding:0;
}
.ttcl {
    float:left;
}

.ttcr {
    float:right;
}
.ttcc {
    margin:2% 0;
    padding:0;
}
.tcr.quote {
/*margin-top:10%;*/
padding:2%;

}
.instructions .tcl, .instructions .tcr {
    padding:1.5%;
}

.tcl {
    float:left;
}
.tcr {
    float:right;
}
.tcc.wd60 {
    width:80%;  
}
.tcc.wd80 {
    width:60%;
    margin:0 auto;
}
.tm2r {
    margin-top:2rem !important;
}
.tcr.tmx4 {margin-top:0;
}
 .bm0n {
    margin-bottom:1.75rem !important;
  }
  .bm4 {
    margin-bottom:0 ;
}
.bm1r {
    margin-bottom:1rem;
}
/*  fixed height frames  */
/*
.fh18 {
    height:18rem;
    }
.tcr.fh18 {
padding:2% 6%;

}
*/
.button.lftmar {
    margin-left:25%;
}
hr {
       
    margin:2rem 0 2rem 0;
}
hr.narrow {
    margin:1rem 0 1rem 0;
    color:#e3e3e3;
    opacity:.2;
}
hr.redline {
  /*  color: #A51140;  red  */
    color:#f1f1f1;
    margin:0;
}
.valc {
margin:.45rem 0 .45rem 0;
}
/*
 .main-container {   
    margin: .5% auto;
    width: 96%;
    max-width: 920px;
    padding: 2%;
    border: .125rem solid #d4d4d4;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
   
}
.main-container.large{   
   
    width: 96%;
    max-width: 1200px;
    padding: 2%;
    border: .125rem solid #d4d4d4;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
   
}
.width3 {
    width: calc(93% / 3);
    padding: 2%;
    margin: 1% 3% 1% 0;
    display: inline-block;
    position: relative;  
    height: 20rem;   
    top:0;
    float:left;
}
.width3.last {
     margin: 1% 0% 1% 0;
}
.width3 ul {
    list-style-type: none;
}
.width3 h5 {
    text-align: center;
    border-bottom:1px solid silver;
    font-size:130%;
    margin-bottom:1rem;
}
.width3 ul li {
    margin-bottom:.3rem;
}
.width3 ol.numericlist li {
    border:none;
}
.width3 ol.numericlist.adj1 li {
    margin-bottom:.8rem;

}
*/
}