/**
* @stylesheet navigation.css Navigation
* @parent ux.ui-elements
**/
/**
* @styles 0-tabs Tabs
* Item tabs can be used to navigate non-linearly through a block of discrete items. They display sequentially with an item number on each tab, starting at 1. Item tabs are right-aligned.
*
* Item tabs do not increase in size at higher zoom levels.
* ### Tab States
* Tabs have the following states by default.
* * _Unanswered_. The default state. Tab has a gray `#F5F5F5` background.
* * _Answered_. Visible when the associated item has been answered. Tab background is darkened.
* * _Selected_. Visible when the associated item is on-screen. Tab background changes to white `#FFFFFF`, tab height increases, and the bottom border is removed to connect the tab to item content.
* * _Hover_. Visible when the cursor is over the tab. Tab background is lightened.
* * _Disabled_. Tab label color is dimmed to indicate that the tab is inactive.
* @iframe ../../demos/navigation/tab-states.html 135
*
*
* ### Tab Pagination
* If there are more tabs than will fit on screen, tab pagination buttons appear that allow the user to page through the tabs as needed. Tab pagination buttons use the flat button style. (See the [buttons.css] section for details.) In addition, a drop shadow is added so that the buttons appear to be above the tab tray on the z-axis.
*
* Behavioral details:
* * Pressing a tab pagination button will cause the tab tray to shift one screen width in the selected direction by default.
* * If there aren’t sufficient tabs off-screen to fill a screen width, the tab tray shifts so that the last off-screen tab is adjacent to the selected tab pagination button.
* * If the user navigates to an off-screen tab (e.g., by pressing the __Back__ or __Next__ button), the tab tray shifts so that the selected tab is on-screen.
* @iframe ../../demos/navigation/tab-pagination.html 135
*
*
* ### Tabs in SBTs
* The styling of tabs in SBTs may depart from the defaults described above if needed to match the look and feel of the rest of the task.
**/
.enaepTabStrip {
background: #dadada;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2) inset;
overflow: hidden;
position: relative;
}
.enaepTabStrip.non-paginated {
background: #e9e9e9;
box-shadow: none;
}
.enaepTab {
border-bottom: 0.05em solid #bfbfbf;
border-left: 0.05em solid transparent;
border-right: 0.05em solid transparent;
border-top: 0.05em solid transparent;
color: #000;
display: inline-flex;
font-family: Calibri, Arial, sans-serif;
font-size: 24px;
height: 2.29em;
list-style: none;
margin: 0 0 0 2em;
padding: 0;
}
.enaepTabStrip.non-paginated .enaepTab {
display: flex;
margin: 0;
transition: none;
}
/* Tab styles */
.enaepTab li {
background: #f5f5f5;
border: 0.05em solid #ababab;
border-bottom: none;
border-left-style: none;
cursor: pointer;
display: block;
line-height: 1.67em;
margin-top: 0.5em;
min-width: 1.96em;
padding: 0 0.41em;
text-align: center;
user-select: none; }
.enaepTab li:hover {
background: #fcfcfc; }
.enaepTab li.answered {
background: #c9c9c9; }
.enaepTab li.answered:hover {
background: #c9c9c9; }
.enaepTab li.selected {
background: #FFF !important;
border-bottom: 0.08em solid #FFF;
border-left-style: solid;
border-right-style: solid;
border-top-left-radius: 0.21em;
border-top-right-radius: 0.21em;
line-height: 1.96em;
margin: 0.17em 0 -0.05em -0.05em;
pointer-events: none; }
body.disabled .enaepTab li {
color: #7F7F7F;
pointer-events: none; }
.enaepTabStrip.non-paginated li:first-of-type {
margin-left: 0.17em;
}
.enaepTab li:last-of-type {
border-radius: 0 0.21em 0 0;
}
.enaepTab li:first-of-type,
.enaepTab li.selected:last-of-type {
border-left-style: solid;
border-top-left-radius: 0.21em;
}
/* Styles for right-aligned tab set */
.align-right {
justify-content: flex-end;
}
.align-right li:last-of-type {
margin-right: 0;
min-width: 3.85em;
padding-left: 0.45em;
padding-right: 0.45em;
}
.enaepTabStrip.non-paginated .align-right li:first-of-type {
margin-left: 0;
}
.enaepTabStrip.non-paginated .align-right li:last-of-type {
margin-right: 0.17em;
}
/* Styles for reading stimulus tabs */
.enaepTabStrip.non-paginated .stimTab {
margin-top: 0.6em;
}
.enaepTab.stimTab li {
padding: 0 0.5em;
}
/* Pagination button styles */
.btn-tab-mover-wrapper {
background: #eee;
border-bottom: thin solid #bfbfbf;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: 100%;
padding: 0.15em;
position: absolute;
}
.enaepTabStrip.non-paginated .btn-tab-mover-wrapper {
display: none;
}
.btn-tab-mover-wrapper:first-of-type {
border-right: thin solid #aaa;
box-shadow: 0.1em 0 0.08em -0.02em rgba(0, 0, 0, 0.1);
}
.btn-tab-mover-wrapper:last-of-type {
border-left: thin solid #aaa;
box-shadow: -0.1em 0 0.08em -0.02em rgba(0, 0, 0, 0.1);
right: 0;
}
.btn-tab-mover {
background: none;
border: 0.05rem solid transparent;
border-radius: 0.15em;
color: #3f3f3f;
cursor: pointer;
display: block;
font-family: "icons";
font-size: inherit;
height: 100%;
margin: 0;
padding: 0;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
width: 1em;
}
.btn-tab-mover:hover {
background: #fff;
border-color: #b2b2b2;
box-shadow: 0 0.03em 0.06em rgba(0, 0, 0, .15);
}
.btn-tab-mover:active {
background-color: #fff;
border-color: #b2b2b2;
box-shadow: 0 0 0.28em rgba(0, 0, 0, .25) inset;
}
body.disabled .btn-tab-mover,
.btn-tab-mover.disabled {
color: #b3b3b3;
pointer-events: none;
}
.btn-tab-mover:after {
display: block;
font-size: 0.65em;
}
#btn-tab-mover-left:after {
content: '\e90c';
}
#btn-tab-mover-right:after {
content: '\e90d';
}
/**
* @styles 1-scrollbars Scrollbars
* To increase salience, especially for test takers less familiar with digital environments, scrollbars are displayed in blue (`#246BB2` for buttons and thumb, `#EBF5FF` for track) in the default theme. Scrollbar colors in other themes were selected to balance salience with alignment to the theme. As with other interactive elements, the corners of the scrollbar buttons and thumb are rounded.
*
* Scrollbars do not increase in size at higher zoom levels.
* @iframe ../../demos/navigation/scrollbars.html 200
**/
::-webkit-scrollbar {
height: 24px;
width: 24px;
}
::-webkit-scrollbar-track {
background-color: #ebf5ff;
}
::-webkit-scrollbar-thumb {
background-color: #246bb2;
border: 1px solid #1A4C80;
border-radius: 2px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
background-color: #246bb2;
background-position: center;
background-repeat: no-repeat;
background-size: 70% 70%;
border: 1px solid #1A4C80;
border-radius: 2px;
display: block;
height: 24px;
width: 24px;
}
::-webkit-scrollbar-button:start:decrement:disabled,
::-webkit-scrollbar-button:end:increment:disabled {
background-color: #6aa7e4;
border-color: #4c7eb2;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:start:decrement:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:end:increment {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:end:increment:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:start:decrement:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:end:increment:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
/**
* @styles 2-pagination Pagination
* Pagination is used in lieu of scrolling when content requires the preservation of distinct pages (e.g., to preserve a magazine-style layout in a reading stimulus passage). When navigating to different pages, pages should transition with a smooth slide animation.
*
* ### Pagination Buttons
* Pagination buttons are placed in an off-white `#FAFAFA` lozenge with a drop shadow to differentiate it from surrounding content. The lozenge is aligned to the left edge of the page and vertically centered.
*
* __Previous Page__ and __Next Page__ buttons are provided, along with one __Page Number__ button for each page of content. Selecting a __Page Number__ button will navigate the content to the associated page.
*
* Pagination buttons have the following states.
* * _Default_. Button has a drop shadow to help indicate interactivity. __Previous Page__ and __Next Page__ buttons have a blue `#246BB2` background and white `#FFFFFF` icons. Those colors are inverted for __Page Number__ buttons.
* * _Active_. Visible when the user presses down on the button. Drop shadow is removed, and the background color changes to a light blue`#3399FF`.
* * _Selected_. Visible when the page associated with a __Page Number__ button is on screen. Background color is blue `#246BB2`, and page number color is white `#FFFFFF`. Drop shadow is removed.
* * _Disabled_. Visible when the button is inactive (e.g., the __Next Page__ button is inactive when the last content page is on screen). Background is gray `#BBBBBB`, and drop shadow is removed.
* @iframe ../../demos/navigation/pagination.html 670
*
*
* ### Locking of Paginated Content
* In scenario-based tasks (SBTs), it is sometimes desirable to hide one or more pages of stimulus content until the user takes a particular action. In such cases, the hidden pages are initially locked (i.e., inaccessible).
*
* To indicate to test takers that some content is not yet available, the __Page Number__ button(s) for the locked page(s) are replaced with a _lock_ icon. When the user takes the action needed to unlock the page(s), the lock icon is removed, and the page(s) become accessible.
* @iframe ../../demos/navigation/pagination-locked.html 730
**/
/* PAGE BUTTON LAYOUT
===================================================== */
.page-nav {
font-size: 25px;
left: 1px;
position: fixed;
text-align: center;
/*transform: translateY(-50%);*/
top: 15.66em; /* based on 2015 card height; this should be reset dymanically */
user-select: none;
width: 2em;
z-index: 99;
}
.page-btn-scrim {
position: absolute;
height: 100%;
width: 100%;
background-color: #FAFAFA;
z-index: -1;
border-radius: 1em;
box-shadow: 0 0.21em 0.45em 0 rgba(0, 0, 0, 0.2), 0 0.16em 0.53em 0 rgba(0, 0, 0, 0.19);
}
/* PAGE BUTTONS
===================================================== */
.btn-page-previous, .btn-page-num, .btn-page-next {
border: none;
box-shadow: 0 0.05em 0.13em 0 rgba(0, 0, 0, 0.16), 0 0.05em 0.26em 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
display: block;
position: relative;
text-align: center;
}
.btn-page-previous, .btn-page-next {
background-color: #246bb2;
border-radius: 50%;
color: #fff;
font-family: "icons";
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 1.58em;
line-height: 1.58em;
margin-left: auto;
margin-right: auto;
padding: 0;
speak: none;
text-transform: none;
width: 1.58em; }
.btn-page-previous {
margin-bottom: 0.9em;
margin-top: 0.3em; }
.btn-page-next {
margin-bottom: 0.3em;
margin-top: 0.9em;
padding-top: 0.05em; }
.btn-page-previous:active, .btn-page-next:active {
background-color: #3399ff;
box-shadow: none; }
.btn-page-previous:focus, .btn-page-next:focus {
outline: none; }
.btn-page-previous.page-disabled, .btn-page-next.page-disabled {
background-color: #bbb;
box-shadow: none;
pointer-events: none; }
.btn-page-previous:focus::after, .btn-page-next:focus::after {
border: 0.04em dashed #000;
border-radius: 50%;
content: '';
height: 110%;
left: -7.5%;
position: absolute;
top: -7%;
width: 110%;
}
.btn-page-num {
background-color: #fff;
border: 0.025em solid transparent;
border-radius: 0.25em;
color: #246bb2;
font-family: Calibri, Arial, sans-serif;
font-size: 1.1em;
font-style: normal;
font-weight: bold;
height: 1.35em;
line-height: 1;
margin: 0.65em auto;
text-align: center;
width: 1.13em; }
.btn-page-num:active {
background-color: #3399ff;
box-shadow: none;
color: #fff; }
.btn-page-num:focus {
outline-color: #000;
outline-offset: 0.05em; }
.btn-page-num.page-active {
background-color: #246bb2;
box-shadow: none;
color: #fff;
cursor: default;
pointer-events: none; }
.btn-page-num.page-disabled,
.btn-page-num[disabled] {
box-shadow: none;
color: #bbb;
pointer-events: none; }
.btn-page-num.locked.page-disabled,
.btn-page-num[disabled].locked {
color: transparent;
position: relative; }
.btn-page-num.locked.page-disabled:after, .btn-page-num[disabled].locked:after {
color: #767676;
content: '\e947';
font-family: "icons";
font-size: 34px;
font-weight: normal;
height: 100%;
left: -0.06em;
position: absolute;
top: 0;
width: 100%;
}
/* PAGE TURN ANIMATION
===================================================== */
.page-container {
transition-property: margin-top;
transition-delay: 0s;
transition-timing-function: ease;
user-select: none;
}
.page-mask {
height: 100%;
width: 100%;
position: absolute;
background-color: inherit;
}
* The styling of tabs in SBTs may depart from the defaults described above if needed to match the look and feel of the rest of the task.
**/
.enaepTabStrip {
background: #dadada;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2) inset;
overflow: hidden;
position: relative;
}
.enaepTabStrip.non-paginated {
background: #e9e9e9;
box-shadow: none;
}
.enaepTab {
border-bottom: 0.05em solid #bfbfbf;
border-left: 0.05em solid transparent;
border-right: 0.05em solid transparent;
border-top: 0.05em solid transparent;
color: #000;
display: inline-flex;
font-family: Calibri, Arial, sans-serif;
font-size: 24px;
height: 2.29em;
list-style: none;
margin: 0 0 0 2em;
padding: 0;
}
.enaepTabStrip.non-paginated .enaepTab {
display: flex;
margin: 0;
transition: none;
}
/* Tab styles */
.enaepTab li {
background: #f5f5f5;
border: 0.05em solid #ababab;
border-bottom: none;
border-left-style: none;
cursor: pointer;
display: block;
line-height: 1.67em;
margin-top: 0.5em;
min-width: 1.96em;
padding: 0 0.41em;
text-align: center;
user-select: none; }
.enaepTab li:hover {
background: #fcfcfc; }
.enaepTab li.answered {
background: #c9c9c9; }
.enaepTab li.answered:hover {
background: #c9c9c9; }
.enaepTab li.selected {
background: #FFF !important;
border-bottom: 0.08em solid #FFF;
border-left-style: solid;
border-right-style: solid;
border-top-left-radius: 0.21em;
border-top-right-radius: 0.21em;
line-height: 1.96em;
margin: 0.17em 0 -0.05em -0.05em;
pointer-events: none; }
body.disabled .enaepTab li {
color: #7F7F7F;
pointer-events: none; }
.enaepTabStrip.non-paginated li:first-of-type {
margin-left: 0.17em;
}
.enaepTab li:last-of-type {
border-radius: 0 0.21em 0 0;
}
.enaepTab li:first-of-type,
.enaepTab li.selected:last-of-type {
border-left-style: solid;
border-top-left-radius: 0.21em;
}
/* Styles for right-aligned tab set */
.align-right {
justify-content: flex-end;
}
.align-right li:last-of-type {
margin-right: 0;
min-width: 3.85em;
padding-left: 0.45em;
padding-right: 0.45em;
}
.enaepTabStrip.non-paginated .align-right li:first-of-type {
margin-left: 0;
}
.enaepTabStrip.non-paginated .align-right li:last-of-type {
margin-right: 0.17em;
}
/* Styles for reading stimulus tabs */
.enaepTabStrip.non-paginated .stimTab {
margin-top: 0.6em;
}
.enaepTab.stimTab li {
padding: 0 0.5em;
}
/* Pagination button styles */
.btn-tab-mover-wrapper {
background: #eee;
border-bottom: thin solid #bfbfbf;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: 100%;
padding: 0.15em;
position: absolute;
}
.enaepTabStrip.non-paginated .btn-tab-mover-wrapper {
display: none;
}
.btn-tab-mover-wrapper:first-of-type {
border-right: thin solid #aaa;
box-shadow: 0.1em 0 0.08em -0.02em rgba(0, 0, 0, 0.1);
}
.btn-tab-mover-wrapper:last-of-type {
border-left: thin solid #aaa;
box-shadow: -0.1em 0 0.08em -0.02em rgba(0, 0, 0, 0.1);
right: 0;
}
.btn-tab-mover {
background: none;
border: 0.05rem solid transparent;
border-radius: 0.15em;
color: #3f3f3f;
cursor: pointer;
display: block;
font-family: "icons";
font-size: inherit;
height: 100%;
margin: 0;
padding: 0;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
width: 1em;
}
.btn-tab-mover:hover {
background: #fff;
border-color: #b2b2b2;
box-shadow: 0 0.03em 0.06em rgba(0, 0, 0, .15);
}
.btn-tab-mover:active {
background-color: #fff;
border-color: #b2b2b2;
box-shadow: 0 0 0.28em rgba(0, 0, 0, .25) inset;
}
body.disabled .btn-tab-mover,
.btn-tab-mover.disabled {
color: #b3b3b3;
pointer-events: none;
}
.btn-tab-mover:after {
display: block;
font-size: 0.65em;
}
#btn-tab-mover-left:after {
content: '\e90c';
}
#btn-tab-mover-right:after {
content: '\e90d';
}
/**
* @styles 1-scrollbars Scrollbars
* To increase salience, especially for test takers less familiar with digital environments, scrollbars are displayed in blue (`#246BB2` for buttons and thumb, `#EBF5FF` for track) in the default theme. Scrollbar colors in other themes were selected to balance salience with alignment to the theme. As with other interactive elements, the corners of the scrollbar buttons and thumb are rounded.
*
* Scrollbars do not increase in size at higher zoom levels.
* @iframe ../../demos/navigation/scrollbars.html 200
**/
::-webkit-scrollbar {
height: 24px;
width: 24px;
}
::-webkit-scrollbar-track {
background-color: #ebf5ff;
}
::-webkit-scrollbar-thumb {
background-color: #246bb2;
border: 1px solid #1A4C80;
border-radius: 2px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
background-color: #246bb2;
background-position: center;
background-repeat: no-repeat;
background-size: 70% 70%;
border: 1px solid #1A4C80;
border-radius: 2px;
display: block;
height: 24px;
width: 24px;
}
::-webkit-scrollbar-button:start:decrement:disabled,
::-webkit-scrollbar-button:end:increment:disabled {
background-color: #6aa7e4;
border-color: #4c7eb2;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:start:decrement:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:end:increment {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:vertical:end:increment:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:start:decrement:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-image: url('data:image/svg+xml;utf8,');
}
::-webkit-scrollbar-button:horizontal:end:increment:disabled {
background-image: url('data:image/svg+xml;utf8,');
}
/**
* @styles 2-pagination Pagination
* Pagination is used in lieu of scrolling when content requires the preservation of distinct pages (e.g., to preserve a magazine-style layout in a reading stimulus passage). When navigating to different pages, pages should transition with a smooth slide animation.
*
* ### Pagination Buttons
* Pagination buttons are placed in an off-white `#FAFAFA` lozenge with a drop shadow to differentiate it from surrounding content. The lozenge is aligned to the left edge of the page and vertically centered.
*
* __Previous Page__ and __Next Page__ buttons are provided, along with one __Page Number__ button for each page of content. Selecting a __Page Number__ button will navigate the content to the associated page.
*
* Pagination buttons have the following states.
* * _Default_. Button has a drop shadow to help indicate interactivity. __Previous Page__ and __Next Page__ buttons have a blue `#246BB2` background and white `#FFFFFF` icons. Those colors are inverted for __Page Number__ buttons.
* * _Active_. Visible when the user presses down on the button. Drop shadow is removed, and the background color changes to a light blue`#3399FF`.
* * _Selected_. Visible when the page associated with a __Page Number__ button is on screen. Background color is blue `#246BB2`, and page number color is white `#FFFFFF`. Drop shadow is removed.
* * _Disabled_. Visible when the button is inactive (e.g., the __Next Page__ button is inactive when the last content page is on screen). Background is gray `#BBBBBB`, and drop shadow is removed.
* @iframe ../../demos/navigation/pagination.html 670
*
*
* ### Locking of Paginated Content
* In scenario-based tasks (SBTs), it is sometimes desirable to hide one or more pages of stimulus content until the user takes a particular action. In such cases, the hidden pages are initially locked (i.e., inaccessible).
*
* To indicate to test takers that some content is not yet available, the __Page Number__ button(s) for the locked page(s) are replaced with a _lock_ icon. When the user takes the action needed to unlock the page(s), the lock icon is removed, and the page(s) become accessible.
* @iframe ../../demos/navigation/pagination-locked.html 730
**/
/* PAGE BUTTON LAYOUT
===================================================== */
.page-nav {
font-size: 25px;
left: 1px;
position: fixed;
text-align: center;
/*transform: translateY(-50%);*/
top: 15.66em; /* based on 2015 card height; this should be reset dymanically */
user-select: none;
width: 2em;
z-index: 99;
}
.page-btn-scrim {
position: absolute;
height: 100%;
width: 100%;
background-color: #FAFAFA;
z-index: -1;
border-radius: 1em;
box-shadow: 0 0.21em 0.45em 0 rgba(0, 0, 0, 0.2), 0 0.16em 0.53em 0 rgba(0, 0, 0, 0.19);
}
/* PAGE BUTTONS
===================================================== */
.btn-page-previous, .btn-page-num, .btn-page-next {
border: none;
box-shadow: 0 0.05em 0.13em 0 rgba(0, 0, 0, 0.16), 0 0.05em 0.26em 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
display: block;
position: relative;
text-align: center;
}
.btn-page-previous, .btn-page-next {
background-color: #246bb2;
border-radius: 50%;
color: #fff;
font-family: "icons";
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 1.58em;
line-height: 1.58em;
margin-left: auto;
margin-right: auto;
padding: 0;
speak: none;
text-transform: none;
width: 1.58em; }
.btn-page-previous {
margin-bottom: 0.9em;
margin-top: 0.3em; }
.btn-page-next {
margin-bottom: 0.3em;
margin-top: 0.9em;
padding-top: 0.05em; }
.btn-page-previous:active, .btn-page-next:active {
background-color: #3399ff;
box-shadow: none; }
.btn-page-previous:focus, .btn-page-next:focus {
outline: none; }
.btn-page-previous.page-disabled, .btn-page-next.page-disabled {
background-color: #bbb;
box-shadow: none;
pointer-events: none; }
.btn-page-previous:focus::after, .btn-page-next:focus::after {
border: 0.04em dashed #000;
border-radius: 50%;
content: '';
height: 110%;
left: -7.5%;
position: absolute;
top: -7%;
width: 110%;
}
.btn-page-num {
background-color: #fff;
border: 0.025em solid transparent;
border-radius: 0.25em;
color: #246bb2;
font-family: Calibri, Arial, sans-serif;
font-size: 1.1em;
font-style: normal;
font-weight: bold;
height: 1.35em;
line-height: 1;
margin: 0.65em auto;
text-align: center;
width: 1.13em; }
.btn-page-num:active {
background-color: #3399ff;
box-shadow: none;
color: #fff; }
.btn-page-num:focus {
outline-color: #000;
outline-offset: 0.05em; }
.btn-page-num.page-active {
background-color: #246bb2;
box-shadow: none;
color: #fff;
cursor: default;
pointer-events: none; }
.btn-page-num.page-disabled,
.btn-page-num[disabled] {
box-shadow: none;
color: #bbb;
pointer-events: none; }
.btn-page-num.locked.page-disabled,
.btn-page-num[disabled].locked {
color: transparent;
position: relative; }
.btn-page-num.locked.page-disabled:after, .btn-page-num[disabled].locked:after {
color: #767676;
content: '\e947';
font-family: "icons";
font-size: 34px;
font-weight: normal;
height: 100%;
left: -0.06em;
position: absolute;
top: 0;
width: 100%;
}
/* PAGE TURN ANIMATION
===================================================== */
.page-container {
transition-property: margin-top;
transition-delay: 0s;
transition-timing-function: ease;
user-select: none;
}
.page-mask {
height: 100%;
width: 100%;
position: absolute;
background-color: inherit;
}