/* 
The css rules in this file will override the default styling of CX epaper.
Generally, every style in CX epaper may be altered to your desires. 
However, this document only provides the most common cases of styling adaptations (usually color changes).
Otherwise, we would have to document every single part of the master.css in the src/css folder.
If a certain styling parameter isn't covered in this document, please consult the master.css file or ask a person with css experience for help.

NOTICE: Since the html structure and dynamic behavior of CX epaper may change rapidly from version to version, it might be necessary to update your
        own styling when updating to a newer CX epaper version. No guarantee will be given that your own adaptions made on a previous version will still
        overwrite the css rules in the master.css in a newer version. The custom.css file in lib.custom.TEMPLATE will be updated regularly. So, you should
        do the same with your own custom.css in lib.custom or in any publication specific data folder.
*/

/*
UGS Anpassungen Anfang ------------------------------------------
*/

/*
Defines the background color of the publication area.
*/
body {
  background: #f4f4f4 none repeat scroll 0 0;
}

/*
Flipbook
*/

/*
Defines the background color of the flipbook area.
*/
#flipbook {
  background-color: rgb(248, 248, 248);
}

/*
PublicationsPanel
*/

/*
Thumbspanel
*/

.sectionThumbs:last-of-type{border:none;}
#thumbsToolbar{min-height:auto;}

.sectionHead > .sectionCollapseBtn, .sectionHead > .sectionCollapseBtn:hover{background-image:url("../src/img/collapse_white.svg");}
.sectionHead > .sectionExpandBtn, .sectionHead > .sectionExpandBtn:hover{background-image:url("../src/img/expand_white.svg");}

/*
Search Panel
*/

/*
Defines the background color of a search result when hovering over or clicking on.
*/
.no-touch .searchResultArticle:hover,
.touch .searchResultArticle:active,
.touch .searchResultArticle.active,
.no-touch .searchResultPage:hover,
.touch .searchResultPage:active,
.touch .searchResultPage.active {
  border-color: rgb(0, 255, 19);
  border-width:3px;
}

/*
Defines the color in which a text match will be highlighted in the search panel.
*/
#searchpanel .matchingText > mark {
  background-color: rgba(0,255,0,0.8);
}

#searchpanel .resultInfo .matchingText > mark {
  background-color: rgba(0,255,0,0.8);
}
/*
Desfines the color in which a text match will be highlighted in the main window.
*/
.searchResultLayer {
  background-color: rgba(0, 255, 0, 0.6);
}

/*
Defines the color of the horizontal line separating the input field from the search results in the search panel.
*/
#srLabel[hasResults="true"] {
  border-bottom: 2px solid #ccc;
}


/*
Modals
*/

.modal-footer{border:none;}

/*
Article
 */

/*
Defines the color of a clickable article area.
*/
.article {
  background-color: rgba(60,210,92,0.5);
}

/*
Defines the color of a clickable article area when hovering over it.
*/
.no-touch .article:hover,
.touch .article:active  {
  background-color: rgba(60,210,92,0.5);
}

/*
Defines the color of an article mark indicating the boundaries of a clickable area on the publication.
*/
.article-corner {
  stroke: rgb(0,155,0);
}

.article-corner,
.flipbook .page .article-corner img {
    display: none;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.toolbar button > div {
  margin-top: -10px;
  font-family: "Open Sans",sans-serif;
  font-size: 10px;
  line-height: 15px;
  margin-bottom: 2px;
  padding: 0 2px;
}

.zoomFactor {
  position: absolute;
  height: 45px;
  width: 100%;
  top: 0;
  left: 0;
  font-family: "Open Sans",sans-serif;
  font-size: 12px;
  line-height: 45px;
}

.pagejumper input {
  box-shadow: none;
  background-color: #d1d5da;
  border-radius: 2px;
  border: medium none;
  min-width: inherit;
  width: 50%;
  margin: 11px 4px;
  padding: 9px;
  text-align: center;
}

html {
  background: #FFFFFF none repeat scroll 0 0;
  font: 14px/22px "Open Sans",sans-serif;
  color: #000000;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  -ms-scroll-limit: 0 0 0 0;
  position: fixed;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -moz-tap-highlight-color: rgba(0, 0, 0, 0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  text-shadow: none;
}

td {
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  line-height: 22px;
  vertical-align: top;
  padding: 9px;
}

label {
  color: #4d4d4d;
  display: block;
  font: 12px/18px "Open Sans",sans-serif;
}

@media (max-width: 1080px) {
  .navbar-header {
    float: none;
  }

  .navbar-right {
    float: none !important;
  }

  .navbar-toggle {
    display: block;
  }

  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  header .navbar-nav {
    float: none !important;
    margin: 5px 0;
  }

  .collapse.in {
    display: block !important;
  }

  .navbar > .container-fluid,
  .navbar > .container-fluid > .navbar-header {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #mainmenu {
    max-height: 70px;
    overflow: visible;
  }
  
/*
Defines the background color of the publication area.
*/
  #logo {
    background-image: url("logo-background.png");
    margin-left: 5px;
  }
}

#pagegallery .wheely label,
#pagegallery .pageno label {
  color: #ffffff;
  cursor: pointer;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  line-height: 30px;
  opacity: 0;
  text-align: center;
}

/*
Defines the font family, font size, and font weight of a publication title in the publications panel.
*/
.pubThumbTitle {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 27px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  margin-bottom:10px;
}

/*
Defines the background image of the publication area.
*/
#canvas {
  background-image: url("custom-background.jpg");
}

button[on="true"] {
  background-color:rgba(0, 0, 0, 0.05);
}

.navbar-default {
  background-color:#fff;
  border-color:#fff
}
/*
UGS Anpassungen Ende ------------------------------------------
*/
/*
Office-Dsicount.de Anpassungen Anfang ------------------------------------------
*/

/*
Defines the color of the horizontal lines bordering the thumbnails of a section in the thumbs panel (section view)
*/
.sectionThumbs {
  border-color: rgba(243, 196, 2, 0.8);
}

/*
Defines the background color of the section expand / section collapse button when hovering over it or clicking on in the thumbs panel (section view)
*/
.no-touch .sectionHead > span:hover,
.touch .sectionHead > span:active,
.touch .sectionHead > span.active {
  background-color: rgba(243, 196, 2, 0.5);
}

/*
Defines the background color of the section expand / section collapse button in the thumbs panel (section view)
*/
.sectionHead > .sectionExpandBtn,
.sectionHead > .sectionCollapseBtn {
  background-color: rgba(243, 196, 2, 0.5);
}

/*
Defines the border color when hovering over a thumbnail in the thumbs panel (section view)
*/
.no-touch .pgThumbContainer:hover,
.touch .pgThumbContainer:active,
.touch .pgThumbContainer.active {
  border-color: rgba(243, 196, 2, 0.8);
  border-width:3px;
}

.pgThumbContainer {border-width:5px;}

.pubThumbTitle {
  color: #fff;
}

/*
Defines the border color surrounding a publication image in the publications panel when hovering over it.
*/
.no-touch .pubThumbImage:hover,
.touch .pubThumbImage:active,
.touch .pubThumbImage.active {
  border-color: /*rgb(243, 196, 2) rgb(229, 36, 21)*/#fff;
}

/*
Defines the border color surrounding a publication image in the publications panel.
*/
.pubThumbImage.currentPublication  {
    border-color: /*rgba(243, 196, 2, 0.3)rgb(229, 36, 21)*/#fff;
}

/*
Defines the color of the next page and previous page button when hovering over it.
*/
.no-touch #btn-prev:hover svg,
.no-touch #btn-next:hover svg,
.touch #btn-prev:active svg,
.touch #btn-next:active svg,
.touch #btn-prev.active svg,
.touch #btn-next.active svg {
  fill: rgba(243, 196, 2, 1);
}

/*
Defines the default background color of a button when hovering over it.
*/
.no-touch #btn_mainmenu:hover,
.touch #btn_mainmenu:active,
.touch #btn_mainmenu.active,
.no-touch button:hover,
.touch button:active
.touch button.active {
  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
}

/*
Defines the default button color.
*/
svg {
  fill: rgb(229, 36, 21);
}

/*
Defines the border around the publication area.
*/
#canvas {
  border-top: 1px solid rgb(243, 196, 2);
}

/*
Defines the border and background color of the publications panel.
*/
#publicationsPanel {
  border-top: 1px solid rgb(243, 196, 2);
  background-color: rgba(243, 196, 2, 0.95);
}

/*
Defines the background color of the publications panel when hidden and therefore only displayed as a single thin line at the browser window's lower edge.
*/
.no-touch body[publications-visible="false"] #publicationsPanel:hover,
.touch body[publications-visible="false"] #publicationsPanel:active {
  border-top: 1px solid rgb(243, 196, 2);
  background-color: rgba(243, 196, 2, 0.3);

}

/*
Defines the background color of the thumbs panel (section view).
*/
#thumbspanel {
  background-color: #dfdfdf;
}

/*
Defines the border color of the current page in the thumbs panel (section view)
*/
.pgThumbContainer.current {
  border-color: rgba(253, 204, 5, 0.8);
  border-width:2px;
}

/*
Defines the color of the next page and previous page button.
*/
#btn-prev svg,
#btn-next svg {
  height: 60px;
  width: 30px;
  margin: 0;
  fill: rgba(253, 204, 5, 0.8);
}

.searchResult{border-width:2px;}

#searchTooShortLabel{color:#000;}

/*
Defines the background color of the search button in the search panel.
*/
#searchBtn {
  background-color: rgba(229, 36, 21, 0.8);
  background-image:url("../src/img/search_white.svg");
}

/*
Defines the background color of the search button when hovering over or clicking on in the search panel.
*/
.no-touch #searchBtn:hover,
.touch #searchBtn:active {
  background-color: rgba(229, 36, 21, 1);
}

/*
Defines the page label font color of the search result on the same page as currently visible in the flipbook.
*/
.currentPage .resultPageNo {
  color: #000;
}

/*
Defines the default color and border color of the close button in modal dialogs.
*/
.modalBtn {
  border-color: rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.2);
}

.modalBtn svg{fill:#666;}

/*
Defines the background and border color of the header in modal dialogs.
*/
.modal-dialog h2 {
  background-color: rgba(7, 28, 17, 0.05);
  border-color: rgba(7, 28, 17, 0.1);

}

/*
Defines the font color of a link in the about dialog.
*/
a {
  color: #888;
}

/*
Defines the font color of a link in the about dialog when hovering over it or when it has been clicked already.
*/
a:hover,
a:active {
  color: #888;
}

/*
Defines the border color of the images in the PDF dialog when hovering over or clicking on them.
*/
.no-touch .thumbContainer:hover,
.touch .thumbContainer:active,
.touch .thumbContainer.active {
  border: 3px solid rgba(243, 196, 2, 1);
  margin:6px;
}

/*
Office-Discount.de Anpassungen Ende ------------------------------------------
*/