.menu-button {
  display: none;
}

@media only screen and (max-width: 1000px) {
  #HomePageTopLeft, #HomePageTopRight, #HomePageBottomLeft, #HomePageBottomRight, #HomePageBottomLeftCoord {
    width: calc(50% - 22px);
  }
  div#MainContentDiv div#ProfileLeft, div#MainContentDiv div#ProfileRight {
    width: calc(50% - 30px);
  }
  table.formRow-radioButton-small, table.formRow-mandatory {
    display: block;
    margin: 10px 0;
  }
  table.formRow-radioButton-small td, table.formRow-radioButton-small tr, table.formRow-radioButton-small th, table.formRow-radioButton-small tbody, table.formRow-mandatory td, table.formRow-mandatory tr, table.formRow-mandatory th, table.formRow-mandatory tbody {
    display: block;
  }
  .formRow-label-wide {
    float: none;
    display: block;
    width: auto;
    padding-left: 0;
  }
  .formRow-spellchecker .AlignTop {
    top: 18px;
    margin-top: 0;
    margin-left: 5px;
  }
}
@media only screen and (max-width: 800px) {
  html {
    box-sizing: border-box;
    width: 100%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  body {
    overflow-x: hidden;
  }
  select {
    max-width: 100% !important;
  }
  #PageContainer, #Menu, #MainContentDiv, #MainContentDiv #TheContent {
    width: 100%;
    margin: 0;
  }
  #TheContent {
    padding: 5px !important;
  }
  #TheContent h4 {
    clear: both;
  }
  #MainContentDiv #Content, #MainContentDiv #Left, #MainContentDiv #Right {
    width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    float: none !important;
  }
  #MainContentDiv #Content #LoginBox, #MainContentDiv #Left #LoginBox, #MainContentDiv #Right #LoginBox {
    margin-left: 0;
  }
  #HomePageTopLeft, #HomePageTopRight, #HomePageBottomLeft, #HomePageBottomRight, #HomePageBottomLeftCoord {
    width: 100%;
    float: none;
    margin: 0 !important;
    height: auto;
  }
  #Header {
    height: 80px;
  }
  #Header #HeaderLeft #CouncilLogo {
    width: auto;
    margin: 0 8px !important;
    height: 73px;
    position: relative;
  }
  #Header #HeaderLeft #CouncilLogo img {
    width: auto !important;
    height: auto !important;
    max-width: 120px;
    max-height: 58px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #Header #CPDLogo {
    height: 100%;
    width: 170px;
    position: relative;
    z-index: 99998;
  }
  #Header #CPDLogo img {
    width: calc(100% - 16px) !important;
    height: auto !important;
    position: absolute;
    top: 12px;
    left: 8px;
  }
  #MainContentDiv #CenterForm #CatEquipRight {
    width: 100%;
    max-width: 300px;
    float: none;
  }
  #MainContentDiv #CenterForm #CatEquipRight td {
    text-align: left;
  }
  #RequestsDivCoord {
    width: 100%;
  }
  #RequestsDivCoord a {
    vertical-align: top;
  }
  #RequestsDivCoord ul {
    width: 100%;
    padding-left: 24px;
  }
  div#UpdatePanel table, div#UpdatePanel tbody, div#UpdatePanel tr, div#UpdatePanel th, div#UpdatePanel td, div#UpdatePanel1 table, div#UpdatePanel1 tbody, div#UpdatePanel1 tr, div#UpdatePanel1 th, div#UpdatePanel1 td {
    display: block;
  }
  div#UpdatePanel table#DatesGrid, div#UpdatePanel1 table#DatesGrid {
    display: table;
  }
  div#UpdatePanel table#DatesGrid tbody, div#UpdatePanel1 table#DatesGrid tbody {
    display: table-row-group;
  }
  div#UpdatePanel table#DatesGrid tr, div#UpdatePanel1 table#DatesGrid tr {
    display: table-row;
  }
  div#UpdatePanel table#DatesGrid th, div#UpdatePanel table#DatesGrid td, div#UpdatePanel1 table#DatesGrid th, div#UpdatePanel1 table#DatesGrid td {
    display: table-cell;
  }
  table#ImpactForm, table#DeferralRequestTable {
    display: block;
  }
  table#ImpactForm tbody, table#ImpactForm tr, table#ImpactForm th, table#ImpactForm td, table#DeferralRequestTable tbody, table#DeferralRequestTable tr, table#DeferralRequestTable th, table#DeferralRequestTable td {
    display: block;
  }
  div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front {
    width: 100% !important;
  }
  .formRow-submit-wide .Button {
    margin-left: 0;
  }
  .formRow-label-wide {
    width: auto;
    display: block;
    float: none;
    padding-left: 0;
  }
  #SignOffTable {
    display: block;
  }
  #SignOffTable tbody, #SignOffTable tr, #SignOffTable th, #SignOffTable td {
    display: block;
  }
  .formRow-spellchecker .AlignTop {
    top: auto;
    margin-top: 0;
    margin-left: 5px;
  }
  .Textbox {
    width: calc(100% - 30px);
  }
  #EvaluationTable {
    display: block;
  }
  #EvaluationTable tbody, #EvaluationTable tr, #EvaluationTable th, #EvaluationTable td {
    display: block;
  }
  .menu-button {
    padding: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    margin-top: -38px;
    display: block;
    float: right;
    text-align: right;
    background-color: #990033;
    z-index: 1000;
    z-index: 99999;
  }
  .menu-button:hover {
    cursor: pointer;
  }
  .menu-button div {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    vertical-align: middle;
  }
  .menu-button div.bar {
    display: block;
    width: 18px;
    height: 3px;
    margin: 3px;
    background-color: #fff;
  }
  div#Menu {
    border: none;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    bottom: 0;
    transition: 0.25s;
    z-index: 99996;
  }
  div#Menu .menu-border {
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    border: solid 5px #990033;
    padding-top: 80px;
    z-index: 99997;
  }
  div#Menu #TopMenu {
    height: auto;
    background-color: transparent;
  }
  div#Menu #TopMenu ul {
    float: none;
    margin: 0;
    padding: 0;
  }
  div#Menu #TopMenu ul li {
    display: block;
    width: 100%;
    font-size: 14px;
    margin: 2px 0;
    padding: 0;
  }
  div#Menu #TopMenu ul li a {
    display: block;
    margin: 0;
    padding: 0 17px;
    text-align: right;
    font-size: 14px;
  }
  div#Menu #BottomSecureMenu {
    height: auto;
  }
  div#Menu ul {
    float: none;
    margin: 0;
    padding: 0;
  }
  div#Menu ul li {
    display: block;
    width: 100%;
    font-size: 14px;
    margin: 2px 0;
    padding: 0;
  }
  div#Menu ul li a {
    display: block;
    margin: 0;
    padding: 5px 17px;
    text-align: right;
    font-size: 14px;
  }
  #Menu.show {
    right: 0;
    transition: 0.25s;
  }
  #SearchUpdatePanel #ContainerPanel table, #SearchUpdatePanel #ContainerPanel th, #SearchUpdatePanel #ContainerPanel td, #SearchUpdatePanel #ContainerPanel tr, #ReviewersPostUpdate table, #ReviewersPostUpdate th, #ReviewersPostUpdate td, #ReviewersPostUpdate tr {
    display: block;
  }
  #SearchUpdatePanel #ContainerPanel label, #SearchUpdatePanel #ContainerPanel input, #SearchUpdatePanel #ContainerPanel textarea, #SearchUpdatePanel #ContainerPanel select, #ReviewersPostUpdate label, #ReviewersPostUpdate input, #ReviewersPostUpdate textarea, #ReviewersPostUpdate select {
    display: inline-block;
  }
  #SearchUpdatePanel #ContainerPanel input, #SearchUpdatePanel #ContainerPanel textarea, #SearchUpdatePanel #ContainerPanel select, #ReviewersPostUpdate input, #ReviewersPostUpdate textarea, #ReviewersPostUpdate select {
    width: 100% !important;
    max-width: 300px !important;
  }
  #SearchUpdatePanel #ContainerPanel input[type=radio], #SearchUpdatePanel #ContainerPanel input[type=checkbox], #SearchUpdatePanel #ContainerPanel input.Button, #SearchUpdatePanel #ContainerPanel textarea[type=radio], #SearchUpdatePanel #ContainerPanel textarea[type=checkbox], #SearchUpdatePanel #ContainerPanel textarea.Button, #SearchUpdatePanel #ContainerPanel select[type=radio], #SearchUpdatePanel #ContainerPanel select[type=checkbox], #SearchUpdatePanel #ContainerPanel select.Button, #ReviewersPostUpdate input[type=radio], #ReviewersPostUpdate input[type=checkbox], #ReviewersPostUpdate input.Button, #ReviewersPostUpdate textarea[type=radio], #ReviewersPostUpdate textarea[type=checkbox], #ReviewersPostUpdate textarea.Button, #ReviewersPostUpdate select[type=radio], #ReviewersPostUpdate select[type=checkbox], #ReviewersPostUpdate select.Button {
    width: auto !important;
  }
  #SearchUpdatePanel #ContainerPanel table#Time, #ReviewersPostUpdate table#Time {
    display: table;
  }
  #SearchUpdatePanel #ContainerPanel table#Time tr, #ReviewersPostUpdate table#Time tr {
    display: table-row;
  }
  #SearchUpdatePanel #ContainerPanel table#Time th, #SearchUpdatePanel #ContainerPanel table#Time td, #ReviewersPostUpdate table#Time th, #ReviewersPostUpdate table#Time td {
    display: table-cell;
  }
  .ContainerPanel {
    margin-left: 0;
    width: auto;
  }
  #TheUpdateProgress {
    display: none !important;
  }
  .x-scroll {
    padding: 0 5px;
    width: 100%;
    overflow-x: scroll;
  }
  .x-scroll table {
    min-width: 600px;
  }
  .x-scroll.small table {
    min-width: 350px;
  }
  .display-block {
    display: block;
  }
  .display-block td.stepBreak, .display-block td.stepCurrent, .display-block td.stepNotCompleted {
    display: inline-block;
    margin-left: 0;
  }
  .display-block table {
    display: block;
  }
  .display-block table tr, .display-block table th, .display-block table td {
    display: block;
    height: auto !important;
  }
  .display-block label {
    padding-top: 10px;
  }
  div#MainContentDiv div#ProfileLeft, div#MainContentDiv div#ProfileRight {
    width: 100%;
    float: none;
    margin: 0 !important;
    padding: 10px 5px;
  }
  div#MainContentDiv div#ProfileLeft td, div#MainContentDiv div#ProfileRight td {
    vertical-align: middle;
  }
  table#StaffTable, table#EqualOppsTable, table#RecordWizard {
    max-width: 100%;
    display: block;
  }
  table#StaffTable table, table#StaffTable tbody, table#StaffTable tr, table#StaffTable th, table#StaffTable td, table#EqualOppsTable table, table#EqualOppsTable tbody, table#EqualOppsTable tr, table#EqualOppsTable th, table#EqualOppsTable td, table#RecordWizard table, table#RecordWizard tbody, table#RecordWizard tr, table#RecordWizard th, table#RecordWizard td {
    display: block;
  }
  table#StaffTable select, table#EqualOppsTable select, table#RecordWizard select {
    width: auto !important;
    max-width: 70% !important;
  }
  #MainContentDiv #CenterForm {
    width: 100% !important;
    margin: 0 !important;
  }
  #MainContentDiv #CourseLeft {
    width: auto;
    float: none;
  }
  #MainContentDiv #CourseLeft h4 {
    margin: 10px 0 !important;
  }
  #MainContentDiv #CourseLeft #Left, #MainContentDiv #CourseLeft #Right, #MainContentDiv #CourseLeft #Bottom {
    width: auto;
    float: none;
    margin: 10px 3px !important;
    padding: 0 !important;
  }
  #MainContentDiv #CourseLeft #Left p, #MainContentDiv #CourseLeft #Right p, #MainContentDiv #CourseLeft #Bottom p {
    margin: 0 !important;
    padding: 0 !important;
  }
  #MainContentDiv #CourseLeft #Left table, #MainContentDiv #CourseLeft #Right table, #MainContentDiv #CourseLeft #Bottom table {
    display: block;
  }
  #MainContentDiv #CourseLeft #Left table td, #MainContentDiv #CourseLeft #Left table tr, #MainContentDiv #CourseLeft #Right table td, #MainContentDiv #CourseLeft #Right table tr, #MainContentDiv #CourseLeft #Bottom table td, #MainContentDiv #CourseLeft #Bottom table tr {
    display: block;
  }
  #MainContentDiv #CourseRight {
    width: auto;
    float: none;
  }
  #MainContentDiv #CourseRight h4 {
    margin: 10px 0 !important;
  }
  #MainContentDiv #CourseRight #Left, #MainContentDiv #CourseRight #Right, #MainContentDiv #CourseRight #Bottom {
    width: auto;
    float: none;
    margin: 10px 3px !important;
    padding: 0 !important;
  }
  #MainContentDiv #CourseRight #Left p, #MainContentDiv #CourseRight #Right p, #MainContentDiv #CourseRight #Bottom p {
    margin: 0 !important;
    padding: 0 !important;
  }
  #DocumentForm {
    display: block;
  }
  #DocumentForm td, #DocumentForm tr {
    display: block;
  }
  #DocumentForm input {
    margin-bottom: 10px;
  }
  .TextBoxHolder2 {
    width: auto;
    float: none;
  }
  .TextBoxHolder2 textarea {
    width: 270px;
  }
  .TextBoxValidation {
    float: none;
  }
  .hide-on-mobile {
    display: none;
  }
  .block-on-mobile {
    display: block;
    width: 100%;
  }
  .block-on-mobile table, .block-on-mobile tbody, .block-on-mobile tr, .block-on-mobile th, .block-on-mobile td {
    display: block;
    width: 100%;
  }
  .block-on-mobile label {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 420px) {
  #SearchUpdatePanel #ContainerPanel select {
    width: 100% !important;
  }
  #SearchUpdatePanel #ContainerPanel table#Time {
    display: block;
  }
  #SearchUpdatePanel #ContainerPanel table#Time tr {
    display: block;
  }
  #SearchUpdatePanel #ContainerPanel table#Time th, #SearchUpdatePanel #ContainerPanel table#Time td {
    display: block;
  }
  #Header #CPDLogo {
    width: 100px;
  }
}
@media only screen and (max-width: 270px) {
  #Header #HeaderLeft #CouncilLogo img {
    max-width: calc(100vw - 150px);
  }
}