/* Image Controls Toolbar */

div#vvAnnToolbar *, div#vvToolbar * {
    cursor:default;
}

#vvToolbarItems {
    /* To work nicely with the thumbToggle's float:right */
    float:left;
}

.vvToolbarItem {
    background-color: transparent;
    border: none;
}

#vvAnnToolbar.vvHidden, #vvAnnToolbarHamburgerItems.vvHidden, #vvToolbarItems.vvHidden{
    display: none !important;
}

.vvHidden{
    display: none !important;
}

.dropdown-menu .vvToolbarItem {
    width: 100%;
}

button[aria-expanded='true'] + .tooltip,
a[aria-expanded='true'] + .tooltip {
    visibility: hidden;
}

.dropdown-menu .icon {
    display: none;
}

li.dropdown.open > a.vvToolbarItem[aria-expanded="true"] {
    background-color: transparent;
}

#vvMidSizeAnnToolbarItems > li > .dropdown-toggle.vvToolbarItem {
    padding: 10px 0px 10px 0px;
    margin-left: 5px;
    width: 40px;
}

#vvMidSizeToolbarItems  > li > .dropdown-toggle.vvToolbarItem {
    padding: 0px 7px 0px 7px;
}

#vvAnnToolbar > div.container-fluid, #vvAnnToolbarItems {
    padding-left: 2px;
}

#vvAnnToolbar span.caret {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#vvAnnToolbar .dropdown-menu {
    left: 34px;
    top: 0px;
}
#vvAnnToolbar ul.dropdown-menu{
    overflow: auto;
    max-height: 500px;
}


#vvToolbar.vvHamburgerMenuShown {
    height: 100%;
}

#vvToolbarHamburger {
    float: left;
    border: none;
}

#vvToolbar #vvThumbToggleButton {
    width: auto;
    height: 29px;
    border: none;
    float: right;
    margin-right: 6px;
}

/* Restore default browser focus outline to thumb toggle */
#vvToolbar #vvThumbToggleButton:focus {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
}

.vvHasSubMenu {
    position: relative;
}

.vvHasSubMenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

div.vvJumpToPageLabel {
    display: inline-block;
    float: left;
    width: 35px;
    margin-top:3px;
    padding-left: 2px;
    padding-top: 2px;
}

.vvJumpToPage label {
    float: left;
}

.vvLargeSize form.vvToolbarItem.vvJumpToPage {
    padding-left: 0px;
    padding-right: 0px;
}

.vvHamburgerSize form.vvJumpToPage {
    margin-left: 0px;
}

.vvJumpToPageInput {    
    /* This is to make sure the input text style isn't overridden by Bootstrap's 
       default label style, which bolds the text. The input has to be put inside
       the label or NVDA won't reliably associate the label with the input. The 
       first style is for IE, which won't recognize initial. */
    font-weight: 400;
    font-weight: initial;
}


.dropdown .vvJumpToPageWidget {
    float: left;
}

a.vvJumpToPage > span {
    display: none;
}

#vvThumbs .tab-pane.show-control-panel {
    top: 85px;
}

#vvThumbs .tab-pane.show-control-panel .vvRightPaneControlPanel {
    display:block;    
}

.vvRightPaneControlPanel {
    position: fixed;
    top: 92px;
    margin-left: -5px;
    width: 183px;
    height: 30px;
    display:none;
}

/*Prevent IE and Edge from showing their own clear button 'X'*/
input::-ms-clear {    
    display: none;
}

#vvAnnButtonContainer {
    position: fixed;
    top: 87px;
    margin-left: 40px;
    width: 100px;
    height: 30px;
    display: none;
}

.vvToolbarButton, #vvAnnButtonContainer .vvToolbarButton.mouseDown[aria-disabled="true"] {
    width: 26px;
    height: 26px;
    background-size: 26px;
    background-position: 0px;
    background-repeat: no-repeat;
    margin: 2px;
    float: left;
    border: none;
}

a.vvToolbarButton {
    height: 30px;
}

#vvAnnButtonContainer .vvToolbarButton[aria-disabled="true"] {
    opacity: 0.4;
}

#vvAnnotationIndicatorToggle {
    display: none;
    width: 24px;
    height: 24px;
    border: none;
    position: fixed;
    top: 83px;
    right: 34px;
    padding:0;
}

#vvPageThumbs.vvAnnotationNavigation #vvAnnButtonContainer {
    display: block;
}

#vvPageThumbs.vvAnnotationNavigation {
    top: 125px;
}

#vvPageThumbs.vvAnnotationNavigationHidden {
    top: 80px;
}

.vvAnnotationIndicatorCheckmark {
    width: 23px;
    height: 26px;    
    position: absolute;
    right: 4%;
}

/* Annotation Toolbar */

.tooltip {
    position: fixed;
}

/* Size-based CSS. Switching away from media queries */

/* Medium-sized toolbar (using dropdowns for the buttons) */
#vvToolbar.vvMediumSize #vvToolbarItems .dropdown-menu li {
    width: 100%;
}
#vvToolbar.vvMediumSize #vvUncategorizedToolbarItems > li.vvToolbarItem > a.vvToolbarItem {
    padding: 1px 7px 0px 7px;
}
#vvToolbar.vvMediumSize #vvToolbarItems ul.vvMidSize.dropdown-menu ul.dropdown-menu {
    margin-left: 125px;
    top: 0px;
}

#vvToolbar.vvMediumSize, #vvToolbar.vvLargeSize {
    padding-left: 4px;
}

#vvToolbar.vvMediumSize a.vvToolbarItem,
#vvAnnToolbar.vvMediumSize a.vvToolbarItem{
    height: 40px;
}

#vvToolbar.vvMediumSize.vvPushOverForAnnToolbar, #vvToolbar.vvLargeSize.vvPushOverForAnnToolbar {
    padding-left: 19px;
}

.vvMediumSize #vvSnowboundLogo {
    margin-left: 5px;
}

#vvToolbar.vvMediumSize #vvUncategorizedToolbarItems .vvToolbarItemName {
    display: none;
}

#vvToolbar.vvMediumSize ul.vvImageToolbarGroup {
    display: none !important;
}

#vvToolbar.vvMediumSize .caret {
    vertical-align: baseline;
}

#vvToolbar.vvMediumSize ul#vvMidSizeToolbarItems {
    display: block !important;
}


/* Large-sized toolbar with all the buttons laid out */
#vvToolbar.vvLargeSize #vvToolbarItems a.vvToolbarItem {
    height: 29px;
    
    /* The padding is to make the focus outline look better, with a margin-right
       to add a little more distance between toolbar items. */
    padding: 0px 2px;
    margin-right:1px;
}

/* Restore default browser focus outline to buttons */
#vvToolbar #vvToolbarItems .vvToolbarItem:focus {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
}

/* Large-sized toolbar with all the buttons laid out */
#vvAnnToolbar.vvLargeSize a.vvToolbarItem {
    height: 29px;
    
    /* Pad to make the focus outline look better. */
    padding: 0px 2px;
}

/* Restore default browser focus outline to buttons. */
#vvAnnToolbar .vvToolbarItem:focus {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
}

#vvToolbar.vvLargeSize #vvToolbarItems ul.dropdown-menu li {
    padding: 10px;
}

#vvToolbar.vvLargeSize #vvToolbarItems .vvSubGroupSeparator {
    width: 16px;
    height: 16px;
    float: left;
}

#vvToolbar.vvLargeSize #vvToolbarItems > ul {
    margin-right: 24px;
}

#vvToolbar.vvLargeSize #vvToolbarItems .vvToolbarItem.vvJumpToPage {
    margin-top: 0px;
    width: 115px;
}   

#vvToolbar.vvLargeSize #vvToolbarItems .vvJumpToPageInput {
    height: 24px;
    margin-top: 3px;
}

#vvToolbar.vvLargeSize #vvToolbarItems > ul > li span.vvToolbarItemName {
    display: none;
}

li.vvJumpToPage {
    height: 100%;
}


#vvToolbar.vvLargeSize #vvMidSizeToolbarItems {
    display: none;
}    

/* Medium-sized annotation toolbar (using dropdowns for the buttons) */
#vvAnnToolbar.vvMediumSize .dropdown-menu li {
    width: 100%;
}    

#vvAnnToolbar.vvMediumSize ul.vvMidSize.dropdown-menu ul.dropdown-menu {
    margin-left: 125px;
    top: 0px;
    overflow:auto;
    max-height: 300px;
}

#vvAnnToolbar.vvMediumSize #vvUncategorizedAnnToolbarItems > li.vvToolbarItem > a.vvToolbarItem {
    padding-left: 5px;
}

#vvAnnToolbar.vvMediumSize #vvMidSizeAnnToolbarItems ul.vvMidSize {
    margin-left: 12px;
    overflow: visible;

}

#vvAnnToolbar.vvMediumSize .caret {
    vertical-align: baseline;
}

#vvAnnToolbar.vvMediumSize ul.vvAnnotationToolbarGroup {
    display: none !important;
}

#vvAnnToolbar.vvMediumSize ul#vvMidSizeAnnToolbarItems {
    display: block !important;
}

#vvAnnToolbar.vvMediumSize #vvUncategorizedAnnToolbarItems .vvToolbarItemName {
    display: none;
}

/* Regular-sized annotation toolbar (with all the buttons laid out) */
#vvAnnToolbar.vvLargeSize #vvAnnToolbarItems .vvSubGroupSeparator {
    width: 16px;
    height: 16px;
    float: left;
}

#vvAnnToolbar.vvLargeSize #vvAnnToolbarItems > ul {
    margin-bottom: 24px;
}

#vvAnnToolbar.vvLargeSize .vvToolbarItem {
    padding: 0px 0px 3px 0px;
}

#vvAnnToolbar.vvLargeSize .dropdown-menu li, #vvToolbar.vvLargeSize .dropdown-menu li {       
    width: 100%;
}

#vvAnnToolbar.vvLargeSize .vvToolbarItemName {
    display: none !important;
}

#vvAnnToolbar.vvLargeSize #vvMidSizeAnnToolbarItems {
    display:none;        
}

/* Disable display of tooltips on list items. This is necessary because we want tooltips
 * on buttons for screenreading purposes, but we only want them visible when the
 * button icon is displayed. */
.vvMidSize .tooltip, .vvHamburgerSize .tooltip {
    display: none !important;
}

#vvToolbar.vvLargeSize #vvToolbarItems li.vvHasSubDropdown ul .vvToolbarItemName,
#vvToolbar.vvMediumSize #vvToolbarItems li.vvHasSubDropdown ul .vvToolbarItemName {
    display: block;
}

#vvToolbar.vvLargeSize #vvToolbarItems li.vvHasSubDropdown ul .vvToolbarItemNameSR,
#vvToolbar.vvMediumSize #vvToolbarItems li.vvHasSubDropdown ul .vvToolbarItemNameSR {
    display: none;
}

#vvToolbar.vvLargeSize #vvToolbarItems li.vvHasSubDropdown ul li, #vvToolbar.vvLargeSize #vvToolbarItems li.vvHasSubDropdown ul li a,
#vvToolbar.vvMediumSize #vvToolbarItems li.vvHasSubDropdown ul li, #vvToolbar.vvMediumSize #vvToolbarItems li.vvHasSubDropdown ul li a {
    width: 100%;
}

/* Reset focus style on elements to default */
#vvMidSizeAnnToolbarItems > li > .dropdown-toggle.vvToolbarItem:focus,
#vvMidSizeToolbarItems > li > .dropdown-toggle.vvToolbarItem:focus,
#vvToolbarHamburger:focus {        
    outline:auto;
    outline-color: #267ab4;
}