body
{
  font-family: sans-serif;
}

@media only screen and (min-width: 1000px)
{
  .allContent
  {
      position: relative;
      width: 80%;
      max-width: 1440px;
      min-width: 970px;
      margin: auto;
      padding: 5px
  }
}
@media only screen and (max-width: 999px)
{
  .allContent
  {
      position: relative;
      width: 100%;
      margin: auto;
      padding: 5px
  }
}

.appBackgroundLight
{
  background-color: #f1f1f1;
}
.appBackgroundDark
{
  background-color: #000;
}
.appHeading
{
  font-weight: bold;
  font-size: 15pt
}

@media only screen and (min-width: 1000px)
{
  .appSelectListHeader
  {
    position: relative;
    margin: 0;
    padding: 10px;
    padding-top: 11px;
    text-align: center;
    font-weight: 700;
    font-size: 13pt;
    display: block
  }
}
@media only screen and (max-width: 999px)
{
  .appSelectListHeader
  {
    position: relative;
    margin: 0;
    padding: 12px;
    padding-top: 13px;
    text-align: center;
    font-weight: 700;
    font-size: 14pt;
    display: block
  }
}

@media only screen and (min-width: 1000px)
{
  .experienceTitle
  {
    text-align: center;
    font-weight: bold;
    font-size: 16pt;
    margin-bottom: 4px;
    display: block;
  }
}
@media only screen and (max-width: 999px)
{
  .experienceTitle
  {
    display: none;
  }
}

.experienceCertificationBox h1
{
  font-size: 14pt;
  font-weight: bold;
  margin: 0;
  margin-bottom: 4px;
}

.experienceCertificationBox img
{
  width: 100%;
  border: 1px solid lightgrey
}

.certificationDateText
{
  font-size: 12pt;
  font-style: italic;
  display: block;
  margin-bottom: 10px;
}

.certificationText
{
  font-size: 12pt;
  display: block;
  text-align: justify;
  margin-bottom: 10px;
}

.experienceListBox
{
  height: 100%;
  text-align: justify;
  padding-right: 1rem !important;
}

.experienceListBox ul
{
  margin-bottom: 0px;
  padding-left: 1.5rem;
}

.experienceListBox span
{
  display: block;
  font-weight: bold;
  text-align: center;
}

.appSelectListHeaderLight
{
  background: white;
  color: #000;
  border-bottom: 1px solid lightgray;
}
.appSelectListHeaderDark
{
  background-color: #434343;
  color: #fff;
  border-bottom: 1px solid rgb(90,90,90);
}

@media only screen and (min-width: 1000px)
{
  .appSelectList
  {
    position: absolute;
    width: 320px;
    border-radius: 4px;
    overflow: hidden;
    left: 0px;
    height: calc(100vh - 60px)
  }
}
@media only screen and (max-width: 999px)
{
  .appSelectList
  {
    position: absolute;
    width: 100%;
    border-radius: 0px;
    border: 0px !important;
    overflow: hidden;
    left: 0px;
    top: 0px;
    height: calc(100vh - 44px);
    transition: 0.3s left linear, 0.3s visibility linear;
    visibility: visible;
    z-index: 10;
  }
}

.appSelectListLight
{
  background-color: #d2d2d2;
  border: 1px solid #a7a7a7;
}
.appSelectListDark
{
  background-color: #1b1b1b;
  border: 1px solid rgb(111,111,111);
}

@media only screen and (min-width: 1000px)
{
  .appSelectListItem
  {
    display: block;
    padding: 5px;
    padding-left: 8px;
    margin: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 999px)
{
  .appSelectListItem
  {
    display: block;
    padding: 8px;
    padding-left: 10px;
    margin: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
}

.appSelectListItemLight
{
  position: relative;
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid rgb(188,188,188);
}
.appSelectListItemDark
{
  position: relative;
  background-color: #434343;
  color: #fff;
  border-bottom: 1px solid rgb(111,111,111);
}

@media only screen and (min-width: 1000px)
{
  .appListItemSelected
  {
    background-color: #218dff;
    color: #fff !important;
  }
}
@media only screen and (max-width: 999px)
{
  .appListItemSelectedMobile
  {
    background-color: #218dff;
    color: #fff !important;
  }
}

@media only screen and (min-width: 1000px)
{
  #selectListContent
  {
    position: absolute;
    width: calc(100% - 325px);
    left: 325px
  }

  .hideOrganisationListMobile
  {
    display: block;
  }

  #showOrgListMobileButton
  {
    display: none;
  }
}
@media only screen and (max-width: 999px)
{
  #selectListContent
  {
    position: absolute;
    width: calc(100% - 10px);
    left: 5px;
    opacity: 0;
    transition: 0.3s opacity linear;
    height: calc(100vh - 49px);
    overflow: hidden
  }

  .showSelectListContent
  {
    position: relative !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: auto !important;
    width: 100% !important;
    left: 0px !important;
  }

  .hideOrganisationListMobile
  {
    visibility: hidden;
    left: -100%;
  }

  #showOrgListMobileButton
  {
    display: block;
    width: fit-content;
    position: absolute;
    left: 0px;
  }

  .organisationContentGrid
  {
    display: none;
    margin-bottom: 5px;
    padding-top: 39px
  }
}

.organisationContentGrid
{
  display: none;
  margin-bottom: 5px
}

.displayIsBlock
{
  display: block !important
}

.fromToDateText
{
  font-size: 16pt;
  font-weight: bold;
  text-align: center;
}

.organisationGridImgContainer
{
  text-align: center;
}
.organisationGridImg
{
  max-width: 100%;
  max-height: 380px;
}
.organisationGridSchoolCoverImg
{
  max-width: 100%;
  max-height: 43vh !important
}

.companySummaryContainer
{
  padding: 6px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: justify
}

.schoolImageContainer
{
  text-align: center;
}

.organisationLocationText
{
  font-weight: bold;
  font-size: 13pt;
  padding-left: 6px;
  margin-bottom: 5px;
}
.organisationLocationTextLight
{
  border-bottom: 1px solid lightgray;
  color: #000
}
.organisationLocationTextDark
{
  border-bottom: 1px solid rgb(111,111,111);
  color: #fff
}

.schoolGradeTable
{
  width: 100%;
}
.schoolGradeTable head
{
  font-weight: bold;

}
.schoolGradeTable th, .schoolGradeTable td
{
  padding-left: 6px;
  padding-top: 3px;
}
.schoolGradeTableLight thead
{
  background-color: #d0d0d0;
  border-bottom: 1px solid #8a8a8a;
  color: #000
}
.schoolGradeTableDark thead
{
  background-color: #000;
  border-bottom: 1px solid #808080;
  color: #fff
}
.alternatingRowLight
{
  background-color: #ddd;
}
.alternatingRowDark
{
  background-color: #000;
}
.gradeTableCaption
{
  caption-side: top;
  text-align: center;
  font-weight: bold;
}

.textLight
{
  color: black
}
.textDark
{
  color: white
}

@media only screen and (min-width: 1000px)
{
  #menuBarContainer
  {
    padding: 2px;
    height: 50px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    top: 0px;
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  #menuBarContainerMobile
  {
    display: none
  }
}
@media only screen and (max-width: 999px)
{
  #menuBarContainer
  {
    display: none
  }
  #menuBarContainerMobile
  {
    display: block;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 44px;
    z-index: 12;
  }
}
.menuBarContainerLight
{
  background: #fff;
  border-bottom: 1px solid lightgray;
}
.menuBarContainerDark
{
  background: #434343;
  border-bottom: 1px solid rgb(111,111,111);
}

.menuBarContainerMobileLight
{
  background: #fff;
  border-top: 1px solid lightgray
}
.menuBarContainerMobileDark
{
  background: #434343;
  border-top: 1px solid rgb(111,111,111);
}

.menuItem
{
  height: 100%;
  box-sizing: border-box;
  border-radius: 0px;
  border-right: 1px solid;
  border-image: linear-gradient(#8f8f8f00 15%, #8f8f8f 15%, #8f8f8f 85%, #8f8f8f00 85%) 0 100%;
}
.firstMenuItem
{
  border-left: 1px solid;
}
.menuItemValueLight
{
  box-sizing: border-box;
  height: 100%;
  position: relative;
  color: #000;
  padding: 11px 27px 11px 27px
}
.menuItemValueDark
{
  box-sizing: border-box;
  height: 100%;
  position: relative;
  color: #fff;
  padding: 11px 27px 11px 27px
}
.menuItemText
{
  display: inline-block;
  text-decoration: none
}




.infoContainerLight
{
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #c2c2c2;
  color: #000;
  padding: 5px
}
.infoContainerDark
{
  position: relative;
  background-color: #434343;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid rgb(111,111,111);
  color: #fff;
  padding: 5px
}

#bioTextContainer
{
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: auto;
  margin-top: 5px;
  padding: 10px
}
#bioText > p:last-child
{
  margin: 0
}
@media only screen and (min-width: 1000px)
{
  #bioText
  {
    column-count: 2;
    text-align: justify;
    column-gap: 2em;
  }
}
@media only screen and (max-width: 999px)
{
  #bioText
  {
    column-count: 1;
    text-align: justify;
    column-gap: 2em;
  }
}

.firstRow
{
  border-top: 0px !important
}

.twoColumnRowLight
{
  border-top: 1px solid lightgray;
  padding: 4px;
  font-size: 12pt;
  color: #000;
  display: block;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
}
.twoColumnRowDark
{
  border-top: 1px solid rgb(111,111,111);
  padding: 4px;
  font-size: 12pt;
  color: #fff;
  display: block;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
}
.twoColumnRowCol1
{
  display: block;
}
.twoColumnRowCol2
{
  display: block;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.twoColumnRowDark a
{
  color: #6d9fff
}

@media only screen and (min-width: 1000px)
{
  #profileImageAndContactTextContainer
  {
    position: relative;
    width: 600px;
    margin: auto
  }
}
@media only screen and (max-width: 999px)
{
  #profileImageAndContactTextContainer
  {
    position: relative;
    width: 100%;
    padding: 0px;
    padding-top: 5px
  }
}

@media only screen and (min-width: 1000px)
{
  #profileImage
  {
    width: 35%;
  }
}
@media only screen and (max-width: 999px)
{
  #profileImage
  {
    position: relative;
    width: 45%;
    margin: auto;
    display: block;
  }
}

@media only screen and (min-width: 1000px)
{
  #contactTable
  {
    width: 65%;
    display: block;
    top: 5px;
    position: absolute;
    left: calc(35% + 1px)
  }
}
@media only screen and (max-width: 999px)
{
  #contactTable
  {
    width: 100%
  }
}

.aaButtonLight
{
  background: linear-gradient(#ececec,#9e9e9e);
  color: #000;
  padding: 4px;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  font-size: 12pt;
  border: 1px solid #9e9e9e;
  box-shadow: 0 1px #fff inset,0 1px #fff inset;
}
.aaButtonDark
{
  background: linear-gradient(#717171,#000);
  color: #fff;
  padding: 4px;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  font-size: 12pt;
  border: 1px solid #000;
  box-shadow: 0 1px #b7b7b7 inset,0 1px #b7b7b7 inset;
}

@media only screen and (min-width: 1000px)
{
  .projectLinkButtons
  {
    position: absolute;
    bottom: 5px;
    left: 5px;
    height: 34px
  }
  .projectLinkButtons div
  {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px
  }
  .projectFullscreenButton
  {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 34px;
    height: 34px
  }
}
@media only screen and (max-width: 999px)
{
  .projectLinkButtons
  {
    position: absolute;
    bottom: 5px;
    left: 5px;
    height: 38px
  }
  .projectLinkButtons div
  {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px
  }
  .projectFullscreenButton
  {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 38px;
    height: 38px
  }
}

.projectLinkButtons a
{
  text-decoration: none;
  width: fit-content;
  display: inline-block;
}

#menuBarMobileCurrentPageText
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18pt;
  font-weight: bold;
  width: max-content;
}
#menuBarMobileShowPopoutButton
{
  width: 44px;
  height: 26px;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.menuIconLine
{
  position: relative;
  height: 3px;
  width: 30px;
  left: 50%;
  transform: translate(-50%);
  top: 1px;
  margin-top: 3px;
}
.menuIconLineLight
{
  background: #000
}
.menuIconLineDark
{
  background: #fff
}
.firstMenuLine
{
  margin-top: 0 !important;
}

.showMenuBarMobilePopout
{
  opacity: 100 !important;
  visibility: visible !important;
  bottom: 49px !important
}

@media only screen and (max-width: 999px)
{
  #menuBarMobilePopout
  {
    display: block;
    opacity: 0;
    bottom: -142px;
    visibility: hidden;
    transition: visibility .3s ease-out,opacity .3s ease-out,bottom .3s ease-out;
    position: fixed;
    width: calc(100% - 10px);
    left: 5px;
    padding: 8px;
    padding-bottom: 0px;
    padding-top: 0px;
    z-index: 12;
  }
  #menuBarMobilePopoutBackground
  {
    position: fixed;
    display: block;
    background-color: #00000080;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: visibility .3s ease-out,opacity .3s ease-out;
    visibility: hidden;
    opacity: 0%;
    z-index: 11;
  }
  #mobileMenuBuffer
  {
    display: block;
    position: relative;
    height: 44px
  }
}
@media only screen and (min-width: 1000px)
{
  #menuBarMobilePopout
  {
    display: none
  }
  #menuBarMobilePopoutBackground
  {
    display: none
  }
  #mobileMenuBuffer
  {
    display: none
  }
}

.opacityFull
{
  visibility: visible !important;
  opacity: 100% !important;
}

.menuItemMobileLight
{
  text-align: center;
  border-top: 1px solid lightgray
}

.menuItemMobileDark
{
  text-align: center;
  border-top: 1px solid rgb(111,111,111)
}

.firstMenuItemMobile
{
  border-top: 0px
}

.menuItemMobileLight > span, .menuItemMobileDark > span
{
  font-size: 18pt;
  font-weight: bold;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
}

.projectContainer
{
  margin: 5px;
  height: min-content;
  text-align: center;
}
.projectContainer img
{
  max-width: 100%;
  max-height: 275px;
  border: 1px solid rgb(170, 170, 170);
  margin-bottom: 5px;
}
.projectContainer h1
{
  font-size: 15pt;
  font-weight: bold;
  margin-bottom: 0;
  text-align: left;
}
@media only screen and (min-width: 1000px)
{
  .projectContainer p
  {
    font-size: 12pt;
    margin-bottom: 34px;
    text-align: left;
  }
}
@media only screen and (max-width: 999px)
{
  .projectContainer p
  {
    font-size: 12pt;
    margin-bottom: 38px;
    text-align: left;
  }
}


@media only screen and (min-width: 1000px)
{
  .projectWindow
  {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    min-width: 950px;
    width: 80%;
    max-width: 1200px;
    border-radius: 10px;
    font-size: 10pt;
    height: calc(100% - 40px);
    overflow-y: scroll;
    visibility: hidden;
    opacity: 0%;
    z-index: 15;
    transition: visibility .3s ease-out,opacity .3s ease-out;
    display: flex;
    flex-flow: column;
  }
}
@media only screen and (max-width: 999px)
{
  .projectWindow
  {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    font-size: 10pt;
    overflow-y: scroll;
    visibility: hidden;
    opacity: 0%;
    z-index: 15;
    transition: visibility .3s ease-out,opacity .3s ease-out;
    display: flex;
    flex-flow: column;
  }
}
.projectWindowLight
{
  box-shadow: none
}
.projectWindowDark
{
  box-shadow: 0 0 17px 6px #fffc;
}
.projectWindowHeader
{
  text-align: center;
  padding: 7px;
  font-size: 13pt;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.headerLight
{
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid lightgray;
}
.headerDark
{
  background-color: #434343;
  color: #fff;
  border-bottom: 1px solid rgb(111,111,111);
}
.projectContent
{
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  top: 0;
  position: absolute;
  overflow: scroll;
  padding: 8px;
}
.projectContentWrapper
{
  flex: 1 1 auto;
  position: relative;
}
.projectContentWrapperLight
{
  background-color: #f0f0f0;
}
.projectContentWrapperDark
{
  background-color: #000
}
.closeProjectButton
{
  position: absolute;
  width: 30px;
  height: 30px;
  right: 5px;
  top: 5px;
}
.closeProjectButton > img, .projectFullscreenButton > img[src$=".svg" i], .projectLinkButton > img[src$=".svg" i]
{
  width: 100%;
  vertical-align: baseline;
  border: 0
}

.greyedOutBackground
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: visibility .3s ease-out,opacity .3s ease-out;
  visibility: hidden;
  opacity: 0%;
  z-index: 12;
  background-color: #00000080;
}

.projectContent p
{
  font-size: 12pt;
  margin-bottom: 6px
}
.projectContent p > span
{
  font-weight: bold
}
@media only screen and (min-width: 650px)
{
  .projectFullDescription
  {
    column-count: 2;
    text-align: justify;
    column-gap: 2em;
    margin-top: 5px;
    margin-bottom: 5px
  }
}
@media only screen and (max-width: 649px)
{
  .projectFullDescription
  {
    column-count: 1;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 5px
  }
}

@media only screen and (min-width: 1000px)
{
  .projectContentImages
  {
    position: relative;
    height: 390px;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 999px)
{
  .projectContentImages
  {
    position: relative;
    height: 318px;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
  }
}
.projectContentImages > img
{
  height: 100%;
  margin-right: 4px;
  border: 1px solid rgb(170, 170, 170);
}
.projectContentImages > img:last-child
{
  margin-right: 0px
}

#aboutContainer img
{
  width: 100%;
  border: 1px solid rgb(170, 170, 170)
}

#aboutContainer p
{
  text-align: justify;
}

.radioButtonRow
{
  margin: 0px !important
}

.aaRadioButtonOuterLight
{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#fff, #c0c0c0);
  border: 1px solid #c0c0c0;
  box-sizing: content-box;
}
.aaRadioButtonOuterDark
{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#838383, #000);
  border: 1px solid #838383;
  box-sizing: content-box;
}

.aaRadioButtonInnerLight
{
  position: absolute;
  width: 14px;
  height: 14px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  background: linear-gradient(#c0c0c0, #fff);
}
.aaRadioButtonInnerDark
{
  position: absolute;
  width: 14px;
  height: 14px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  background: linear-gradient(#000, #838383);
}

#themeRadioButtonsTitle
{
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 12pt;
}

.aaRadioButtonCircleLight
{
  position: absolute;
  width: 8px;
  height: 8px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  background: #4a4a4a;
  display: none;
}
.aaRadioButtonCircleDark
{
  position: absolute;
  width: 8px;
  height: 8px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  background: #ddd;
  display: none;
}

.aaRadioButtonSelected
{
  display: block !important
}

.aaRadioButtonSelectedHideInner
{
  display: none !important;
}

.aaRadioButtonSelectedText
{
  font-weight: bold;
}