/* Global styles & typeography */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: normal;
  src: local("OpenDyslexic"), url("../../fonts/open-dyslexic/OpenDyslexic-Regular.woff") format("woff");
}
/*  a11y button */
.btn-circle.btn-xl {
  position: fixed;
  top: 4.25rem;
  right: 10px;
  z-index: 6;
  width: 4.37rem;
  height: 4.37rem;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 2.1rem;
  line-height: 1;
}
/*  dialogs overlapped by hotspots */
div.modal {
  z-index: 2147483640;
}

/* a11y modal position */
.modal-position {
  right: 10px;
  margin-right: 0;
  top: 8rem;
}

/* default focus style for buttons and links */
a:focus,
a:focus img,
button:focus,
.btn:focus {
  outline: 3px solid orange !important; /* should be high contrast with background */
}

/* High contrast */
.high-contrast {
  color: #ffffff !important;
  background-color: #111111 !important;
}
.high-contrast svg {
  fill: yellow !important;
  stroke: yellow !important;
  background-color: #111111;
}
nav.high-contrast .nav-item {
  background-color: #111111 !important;
  color: yellow !important;
}
a.high-contrast .nav-link {
  color: yellow !important;
}

.high-contrast a,
.high-contrast button {
  background-color: #111111 !important;
  color: yellow !important;
}

/* skip link */
.offscreen {
  left: -100vw;
  position: absolute;
}

.skip-link {
  background: #000;
  color: yellow !important;
  left: 0;
  padding: 0.75rem;
  position: fixed;
  opacity: 0;
  top: 0;
  transform: translateY(-10rem);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.skip-link:focus {
  opacity: 1;
  transform: translateY(0rem);
  z-index: 100;
}

/* zoom */
html {
  font-size: 16px;
}
html.zoom {
  font-size: 22px;
}
html.zoom .list-menu.open {
  transform: scale(1.3);
}

@media screen and (min-width: 768px) {
  html {
    font-size: 14px;
  }
  html.zoom {
    font-size: 18px;
  }
}

/* Dyslexia Font */
body.dyslexia {
  font-family: OpenDyslexic, "Arial", sans-serif !important;
}

/* Text spacing */
body.text-spacing * {
  letter-spacing: 0.2em !important;
}

/* enlarge cursor */
body.enlarge-cursor {
  cursor: url("/img/cursor.svg"), auto !important;
}
/* monochrome */

.monochrome {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}



#a11yDialog.show_help_section #buttons_box{display:none;}
#a11yDialog.show_help_section #move_box{display:none;}
#a11yDialog.show_help_section #help_box{display:block;}
#a11yDialog.show_button_section #buttons_box{display:block;}
#a11yDialog.show_button_section #move_box{display:none;}
#a11yDialog.show_button_section #help_box{display:none;}
#a11yDialog.show_move_section #buttons_box{display:none;}
#a11yDialog.show_move_section #move_box{display:block;}
#a11yDialog.show_move_section #help_box{display:none;}

/* migrating modal from rem to px || 1rem=16px */
#a11yDialog i.fa.fa-2x {
    font-size: 28px;
}
#a11yDialog h5.modal-title {
    font-size: 18px !important;
}
div#a11yDialog .modal-header {
    padding: 14px;
}
div#a11yDialog .btn {
    font-size: 16px;
}




/* changing the popup design */
.modal-backdrop {
    display: none !important;
}
div#a11yDialog {
    /* pointer-events: none; */
	/* overflow: visible; */
}
div#a11yDialog_handle {
    /* cursor: move; */
    background-color: #dc3545;
    color: #ffffff;
	height: 51px;
}
div#a11yDialog_handle button.close {
    color: #ffffff !important;
    text-shadow: none;
    opacity: 1;
    font-size: 26px;
    position: relative;
    top: -3px;
}
#a11yDialog .modal-dialog {
    max-width: 305px;
    /* max-width: 370px; */
    border: solid 1px #ddd;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,.15);
}
#a11yDialog .modal-content {
    border: solid 0px transparent;
}
#a11yDialog .modal-footer {
    display: none;
}
#a11yDialog .modal-body {
    padding: 18px;
}
#a11yDialog.show_button_section .container-fluid {
    border-left: 1px solid #b4b4b4;
    border-top: 1px solid #b4b4b4;
    border-radius: 4px;
	overflow:hidden;
}
#a11yDialog #buttons_box .col-6 {
    border-right: 1px solid #b4b4b4;
    border-bottom: 1px solid #b4b4b4;
	min-height: 112px;
}
#a11yDialog #buttons_box .col-12 {
    border-right: 1px solid #b4b4b4;
    border-bottom: 1px solid #b4b4b4;
	min-height: 45px;
}
#a11yDialog .modal-body #buttons_box button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    overflow: hidden;
    padding: 0;
}
#a11yDialog .modal-body #buttons_box span.a11yDialog_button_title {
    letter-spacing: normal !important;
    font-size: 16px !important;
}
#a11yDialog .modal-body #buttons_box button.active {
    border: 3px solid #006dd5;
}
#a11yDialog .modal-body #buttons_box button:focus {
    border: 3px solid orange !important;
    outline: 0px solid transparent !important;
}
#a11yDialog #buttons_box .col-6:hover, #a11yDialog .modal-body #buttons_box button:hover {
	background-color: #f1f4f7;
}
#a11yDialog .modal-body #buttons_box button .button_icon {
    min-height: 36px;
    display: flex;
    top: 10px;
    position: relative;
	margin-bottom: 15px;
}
#a11yDialog .modal-body #buttons_box button .button_icon svg {
    max-height: 35px;
    display: block;
    margin: auto;
}

/* a11yDialog active check mark */
#a11yDialog #buttons_box .check {
    position: absolute;
    right: 6px;
    top: 6px;
    pointer-events: none;
    display: none;
}
#a11yDialog #buttons_box button.active .check {
    display: block;
}

/* multi step button */
.button_steps {
    height: 4px;
    border-radius: 2px;
    width: calc(100% - 4px);
    margin: 0px 2px 0px 2px;
    background: rgba(0,109,213,.18);
    position: relative;
	pointer-events:none;
	opacity:0;
}
.button_steps.active {
    background: #006dd5;
}
#a11yDialog button.active .button_steps {
    opacity:1;
}


/* text spacing icon */
#a11yDialog .modal-body button .button_icon svg#text_spacing_small, #a11yDialog .modal-body button .button_icon svg#text_spacing_large{display:none;}
.text-spacing-1 #text_spacing_medium{display:none !important;}
.text-spacing-1 #text_spacing_small{display:block !important;}
.text-spacing-3 #text_spacing_medium{display:none !important;}
.text-spacing-3 #text_spacing_large{display:block !important;}

/* Autorotate icon */
#a11yDialog .modal-body button .button_icon svg#js_autorotate_pause, #a11yDialog .modal-body button .button_icon svg#js_autorotate_play{display: none;}
.show_autorotate_play #js_autorotate_play{display: block !important;}
.show_autorotate_pause #js_autorotate_pause{display: block !important;}


/* zoom steps */
html.zoom-1 {font-size: 18px;}
html.zoom-1 .list-menu.open {transform: scale(1.1);}
html.zoom-2 {font-size: 20px;}
html.zoom-2 .list-menu.open {transform: scale(1.15);}
html.zoom-3 {font-size: 22px;}
html.zoom-3 .list-menu.open {transform: scale(1.2);}
html.zoom-4 {font-size: 24px;}
html.zoom-4 .list-menu.open {transform: scale(1.3);}

/* Text spacing steps */
body.text-spacing-1 * {
  letter-spacing: 0.07em !important;
}
body.text-spacing-2 * {
  letter-spacing: 0.15em !important;
}
body.text-spacing-3 * {
  letter-spacing: 0.21em !important;
}

/* move section */
.move_box-picker-wrapper {
    width: 100%;
    height: auto;
    position: relative;
}
.move_box-picker-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}
.move_box-grid-wrapper {
    z-index: 99;
    width: 100%;
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    bottom: 17%;
}
table.move_box-picker-grid {
    width: 100%;
    height: 100%;
    position: absolute;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    tbody-height: 100%;
    tbody-width: 100%;
    tbody-margin: 0;
    tbody-padding: 0;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid td {
    padding: 0;
    line-height: 0;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .col1, .move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .col3, .move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .col5 {
    width: 22px;
    background: 0 0;
    vertical-align: top;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .row1 td, .move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .row3 td, .move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .row5 td {
    height: 22px;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position-wrapper {
    position: relative;
    height: 22px;
    width: 22px;
    overflow: visible;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position {
    cursor: pointer;
    width: 22px;
    height: 22px;
    position: relative;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #0151ba;
	border: 0px solid transparent;
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .row3 .col3 {
    line-height: 22px
}


.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .move_box-position:focus,.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .move_box-position:hover {
    background: #006dd2
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .move_box-position.active,.move_box-picker-wrapper .move_box-grid-wrapper .move_box-picker-grid .move_box-position:active {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjAzMTI1IDIuMDYyNUMzLjQwNjI2IDAuNjg3NDkzIDUuMDYyNDkgMCA3IDBDOC45Mzc1MSAwIDEwLjU4ODUgMC42ODIyODUgMTEuOTUzMSAyLjA0Njg4QzEzLjMxNzcgMy40MTE0NyAxNCA1LjA2MjQ5IDE0IDdDMTQgOC45Mzc1MSAxMy4zMTc3IDEwLjU4ODUgMTEuOTUzMSAxMS45NTMxQzEwLjU4ODUgMTMuMzE3NyA4LjkzNzUxIDE0IDcgMTRDNS4wNjI0OSAxNCAzLjQxMTQ3IDEzLjMxNzcgMi4wNDY4OCAxMS45NTMxQzAuNjgyMjg1IDEwLjU4ODUgMCA4LjkzNzUxIDAgN0MwIDUuMDYyNDkgMC42NzcwNzcgMy40MTY2NyAyLjAzMTI1IDIuMDYyNVpNMTAuNTkzOCA0LjY1NjI1QzEwLjYxNDYgNC42MzU0MiAxMC42MjUgNC42MDQxNyAxMC42MjUgNC41NjI1QzEwLjYyNSA0LjUgMTAuNjE0NiA0LjQ1ODMzIDEwLjU5MzggNC40Mzc1TDkuNjI1IDMuNjg3NUM5LjYwNDE3IDMuNjY2NjcgOS41NjI1IDMuNjU2MjUgOS41IDMuNjU2MjVDOS40NTgzMyAzLjY1NjI1IDkuNDI3MDggMy42NjY2NyA5LjQwNjI1IDMuNjg3NUw1LjkzNzUgOC4xNTYyNUM1LjAyMDgzIDcuMjgxMjUgNC41NTIwOCA2LjgzMzMzIDQuNTMxMjUgNi44MTI1QzQuNDY4NzUgNi43NSA0LjQwNjI1IDYuNzE4NzUgNC4zNDM3NSA2LjcxODc1QzQuMzIyOTIgNi43MTg3NSA0LjI4MTI1IDYuNzUgNC4yMTg3NSA2LjgxMjVMMy40MDYyNSA3LjYyNUMzLjM4NTQyIDcuNjQ1ODMgMy4zNzUgNy42ODc1IDMuMzc1IDcuNzVDMy4zNzUgNy43OTE2NyAzLjM4NTQyIDcuODIyOTIgMy40MDYyNSA3Ljg0Mzc1TDMuNDY4NzUgNy44NzVDNS4wOTM3NiA5LjQzNzUxIDUuOTE2NjcgMTAuMjI5MiA1LjkzNzUgMTAuMjVDNiAxMC4zMTI1IDYuMDUyMDggMTAuMzQzOCA2LjA5Mzc1IDEwLjM0MzhDNi4xMzU0MiAxMC4zNDM4IDYuMTg3NSAxMC4zMTI1IDYuMjUgMTAuMjVMMTAuNTkzOCA0LjY1NjI1WiIgZmlsbD0iIzAwNkRENSIgLz4KPC9zdmc+Cg==') no-repeat!important;
    background-size: contain!important;
    box-shadow: inset 0 0 0 1px #fff
}

.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos1 {
    top: 22px;
    right: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos2 {
    right: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos3 {
    right: 22px;
    bottom: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos4 {
    bottom: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos5 {
    bottom: 22px;
    left: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos6 {
    left: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos7 {
    top: 22px;
    left: 22px
}
.move_box-picker-wrapper .move_box-grid-wrapper .move_box-position.pos8 {
    top: 22px
}
.mobile .move_box-picker-wrapper .move_box-grid-wrapper .move_box-position {
    width: 27px;
    height: 27px
}

.move_box-description {
    padding: 0 0 17px;
    margin: 0;
    line-height: 25px;
    font-size: 16px;
    color: #697480;
}

.move_box-widget-form .buttons, .help_box-widget-form .buttons{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.move_box-widget-form, .help_box-widget-form {
    padding: 25px 24px 12px;
    background: #fff
}
.move_box-widget-form .buttons .button, .help_box-widget-form .buttons .button {
    width: calc(50% - 12px)
}
@media all and (max-width: 1250px),all and (max-height:670px) {
    .move_box-widget-form, .help_box-widget-form  {
        padding:20px 20px 12px
    }
    .move_box-widget-form .buttons .button, .help_box-widget-form .buttons .button {
        width: calc(50% - 10px)
    }
}
@media all and (max-width: 1024px),all and (max-height:650px) {
    .move_box-widget-form, .help_box-widget-form  {
        padding:18px 18px 12px
    }
    .move_box-widget-form .buttons .button, .help_box-widget-form .buttons .button {
        width: calc(50% - 9px)
    }
}
@media all and (max-width: 780px),all and (max-height:575px) {
    .move_box-widget-form, .help_box-widget-form {
        padding:10px 14px 12px
    }
    .move_box-widget-form .buttons .button, .help_box-widget-form .buttons .button {
        width: calc(50% - 5px)
    }
}
@media (max-width: 600px) {
    .move_box-widget-form, .help_box-widget-form {
        padding:10px 14px 12px
    }
    .move_box-widget-form .buttons .button, .help_box-widget-form .buttons .button {
        width: calc(50% - 5px)
    }
}
.move_box-widget-form .buttons .button.white, .help_box-widget-form .buttons .button.white {
	box-sizing: border-box;
	font-family: inherit;
	margin: 0;
	overflow: visible;
	text-transform: none;
	-webkit-user-select: none;
	border: 1px solid #006dd5;
	background: #fff;
	text-align: center;
	color: #006dd5;
	font-weight: 500;
	letter-spacing: .5px;
	margin-bottom: 12px;
	border-radius: 4px;
	cursor: pointer;
	line-height: 32px;
	font-size: 12px;
}
.move_box-widget-form .buttons .button.blue, .help_box-widget-form .buttons .button.blue {
	box-sizing: border-box;
	font-family: inherit;
	margin: 0;
	overflow: visible;
	text-transform: none;
	-webkit-user-select: none;
	border: 1px solid #006dd5;
	text-align: center;
	font-weight: 500;
	margin-bottom: 12px;
	border-radius: 4px;
	cursor: pointer;
	line-height: 32px;
	font-size: 12px;
	background: #006dd5;
	color: #fff;
	letter-spacing: 0;
	padding: 3px;
}

/* different positions for Accessibility Widget */
body.a11yDialog-position-right-top .btn-circle.btn-xl{
    right: 10px;
    left: auto;
    top: 4.25rem;
    bottom: auto;
    margin: auto;
}
body.a11yDialog-position-right-top #a11yDialog .modal-position{

}

body.a11yDialog-position-right-center div#a11yDialog.show, 
body.a11yDialog-position-right-bottom div#a11yDialog.show, 
body.a11yDialog-position-center-top div#a11yDialog.show, 
body.a11yDialog-position-center-bottom div#a11yDialog.show, 
body.a11yDialog-position-left-top div#a11yDialog.show, 
body.a11yDialog-position-left-center div#a11yDialog.show, 
body.a11yDialog-position-left-bottom div#a11yDialog.show {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
body.a11yDialog-position-right-center .btn-circle.btn-xl{
    right: 10px;
    left: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
body.a11yDialog-position-right-center #a11yDialog .modal-position{
	right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 5rem auto auto;
    left: auto;
}
body.a11yDialog-position-right-bottom .btn-circle.btn-xl{
    right: 10px;
    left: auto;
    top: auto;
    bottom: 10px;
    margin: auto;
}
body.a11yDialog-position-right-bottom #a11yDialog .modal-position{
	right: 10px;
	top: auto;
	bottom: 0;
	margin: auto 0 6rem auto;
	left: auto;
}
body.a11yDialog-position-center-top .btn-circle.btn-xl{
    right: 0;
    left: 0;
    top: 4.25rem;
    bottom: auto;
    margin: auto;
}
body.a11yDialog-position-center-top #a11yDialog .modal-position{
	right: 0;
    top: 8rem;
    bottom: 0;
    margin: 1.75rem auto auto auto;
    left: auto;
}
body.a11yDialog-position-center-bottom .btn-circle.btn-xl{
    left: 0;
    right: 0;
    top: auto;
    bottom: 10px;
    margin: auto;
}
body.a11yDialog-position-center-bottom #a11yDialog .modal-position{
	right: 0;
    top: 0;
    bottom: 0;
	margin: auto auto 6rem auto;
    left: auto;
}
body.a11yDialog-position-left-top .btn-circle.btn-xl{
    left: 10px;
    right: auto;
    top: 4.25rem;
    bottom: auto;
    margin: auto;
}
body.a11yDialog-position-left-top #a11yDialog .modal-position{
	right: auto;
	left: 10px;
    top: 8rem;
	bottom: 0;
	margin: 1.75rem auto auto 0;
}
body.a11yDialog-position-left-center .btn-circle.btn-xl{
    left: 10px;
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
body.a11yDialog-position-left-center #a11yDialog .modal-position{
	left: auto;
    top: 0;
    bottom: 0;
    margin: auto auto auto 5rem;
    left: 10px;
}
body.a11yDialog-position-left-bottom .btn-circle.btn-xl{
    left: 10px;
    right: auto;
    top: auto;
    bottom: 10px;
    margin: auto;
}
body.a11yDialog-position-left-bottom #a11yDialog .modal-position{
	right: auto;
	left: 10px;
	top: auto;
	bottom: 0;
	margin: auto auto 6rem 0;
}
@media screen and (max-width: 400px) {
	body #a11yDialog .modal-position{
		min-width: 95% !important;
	}
}
/* mouse-reading-guide */
#mouse-reading-guide {
    display: none;
    box-sizing: border-box;
    background: #000;
    width: 100%!important;
    min-width: 100%!important;
    position: absolute!important;
    height: 12px!important;
    border: solid 3px #fff300;
    border-radius: 5px;
    top: 20px;
    z-index: 2147483647;
	pointer-events: none;
}
body.mouse-reading-guide #mouse-reading-guide{display:block;}
/* text spacing icon */
#a11yDialog .modal-body button .button_icon svg#mouse-step-2{display:none;}
/* .cursor-1 #mouse-step-1{display:none !important;} */
/* .cursor-1 #mouse-step-2{display:block !important;} */
.cursor-2 #mouse-step-1{display:none !important;}
.cursor-2 #mouse-step-2{display:block !important;}