/* Trust Colours */
/* More NHS Colours - https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/ */

:root {
  --NHS-Blue: #005eb8;
  --NHS-Light-Blue: #41b6e6;
  --NHS-Aqua-Blue: #00a9ce;
  --NHS-Aqua-Green: #00a499;
  --NHS-Light-Green: #92c020;
  --NHS-White: #ffffff;
  --NHS-Dark-Grey: #475c6d;
  --NHS-Black: #231f20; 
  
  --NHS-Dark-Grey: #425563;
  --NHS-Mid-Grey: #768692;
  --NHS-Pale-Grey: #E8EDEE;
    
  --NHS-Green: #009639;
  --NHS-Dark-Green: #006747;
  --NHS-Aqua-Green: #00A499;
  --NHS-Light-Green: #78BE20;


  --NHS-Purple: #330072;
  --NHS-DarkPink: #7C2855;
  --NHS-Pink: #AE2573;
  --NHS-DarkRed: #8A1538;
  --NHS-EmergencyServices-Red: #DA291C;
  --NHS-Orange: #ED8B00;
  --NHS-Warm-Yellow: #FFB81C;
  --NHS-Yellow: #FAE100;
  
}

body{
    background-color: var(--NHS-White);
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.container{
  max-width: 100%;

}
.Header{
  background: var(--NHS-Blue);
  box-shadow: #00000087 -5px 7px 7px 0px;
  
}
.HeaderText{
  color: var(--NHS-White);  
  text-align: center;
  font-weight: bold;
  font-size: 2.5em;
}

.HeaderSubText{
  padding: 20px 0 0 20px;
}

.HeaderLogo{
  margin-top: 10px;
  height: 125px;
  display: flex;
  justify-content: right;
  padding-right: 30px;
  padding-bottom: 30px;
}

.questionSection{
  width: 80%;
  margin: auto;
  background-color: var(--NHS-Pale-Grey);
  border-radius: 10px;
  box-shadow: #00000087 7px 7px 7px 0px;
  padding: 10px 5px;
  margin-bottom: 15px;
}

.SectionTitle{
  color: var(--NHS-Light-Blue);
}
/* for testing only to show the different types
.ReasonA{
  color: blue
}
.ReasonB{
  color: green;
}
*/
.Icon{
  width: 40px;
  height: 40px;
  margin-left: 4px;
  margin: 5px;
}

.Icon{
  background-size: 40px 40px;
  background-image: url('../images/icon.png');
  background-repeat: no-repeat;    
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-left: 5px;
}
.hide {
  display: none;
}

.footer{
  /*
  position: fixed;
  bottom: 0;
  width: 100%;*/
  background-color: var(--NHS-Blue);
  color: white;
  padding-top: 10px;
  margin-top: 10px;
}

.footerRight{
  text-align: right;
  padding-right: 20px;
}

#loading {
    /*border: 25px solid #f3f3f3;
    border-top: 25px solid var(--NHS-Light-Green);
    border-bottom: 25px solid var(--NHS-Light-Green);
    border-radius: 50%;*/
    width: 200px;
    height: 200px;
    animation: spin 2s linear infinite;
    position: fixed;
    bottom: 50%;
    right: 50%;
    display: none;
    z-index: 99;
    background-image: url('../images/tooth.png');
    background-size: 200px 200px;
    background-repeat: no-repeat;    
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#MessageDisplay{
  position: fixed;
  bottom: 0;
  right: 40px;
  z-index: 1;
  font-size: 2em;
}

/* Media breaks for smaller screens */
/* also types, all, print, ccreen, speech */
/* eg @media screen and (max-width: 480px) */

/* 1200px or less */
@media (max-width: 1200px) {

}
/* 1024px or less */
@media (max-width: 1024px) {

  .questionSection{
    width: 90%;
    margin: auto;
  }
}

/* 768px or less */
@media (max-width: 768px) {

  .questionSection{
    width: unset;
    margin: auto;
  }
}

/* 480px or less */
@media (max-width: 480px) {
  
}
/* 320px or less */
@media (max-width: 320px) {

}