@import url('https://fonts.googleapis.com/css?family=PT+Serif');
@import url('https://fonts.googleapis.com/css?family=Inter:400,600');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

#main-style::-webkit-scrollbar { 
    display: none; 
}

#pageLine::-webkit-scrollbar { 
    display: none; 
}

#sheetLine::-webkit-scrollbar { 
    display: none; 
}
#quireLine::-webkit-scrollbar { 
    display: none; 
}

html {
  -ms-overflow-style: none;
}

#dashboard
{
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

a, a:hover, a:focus{
color: #D4AA44;
}

h1, h4
{
font-family: "PT Serif", serif !important;
}

#quireLabel
{
  z-index:999;
}

p
{
font-family: "Inter", sans-serif;
text-rendering: optimizeLegibility;
font-size: 1.0625em;
line-height: 1.52941;
color: #494949;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

p>a:link, p>a:visited, p>a:hover, p>a:active
{
color:#cc3333;
}


.banish
{
  display:none;
}

.hidden
{
  visibility:hidden;
}

/*header*/
.navbar
{
  margin-bottom:0px !important;
}

/*footer*/
#footer{
background-color: #000000;
display:flex;
align-items:center;
justify-content:space-between;
margin:0;
}

#logo-container
{
  width:60%;
}
#RLN-logo
{
  width:40%;
}

#RLN-logo>p
{
  margin:0px;
  margin-left:1em;
  color: #ffffff;
}

.sponsor-logo>img
{
  margin:2rem;
  height:50px;
}

#RLN-logo>p>a, #RLN-logo>p>a:hover, #RLN-logo>p>a:focus{
color: #D4AA44;
}

/*overlay*/

#overlayContainer
{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  z-index: 999;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

#enlargePage
{text-align:center;
}

.enlargedPage
{
 width:500px;
 margin:2em;
 border:2em solid black;
border-radius: 25px;

}

#overlayContainer>h1
{
  position:fixed;
right:10px;
color: #ffffff;
  cursor: pointer;
  margin:1em;
  display:none;
  z-index: 999;

}


#readContainer
{
  z-index:98;
  height:100%;
  color: #000000;
  margin-top:50px;
}

#readBackground
{
  position:absolute;
  background-color:#000000;
  border:2em solid black;
  margin-top:-30px;
  margin-left:-30px;
  border-radius: 25px;
  display:none;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

#readContainer>h1, #readContainer>h5
{
  text-align: center;
  font-family: 'PT Serif', serif;
  font-style: italic;
  margin:1.5em;
}

h4
{
  font-family: 'PT Serif', serif !important;
  margin-left:1.5em;
  margin-top:0.1em !important;
  text-align: left;
}


#readContainer>p
{
  font-family: Inter, sans-serif;
  margin: 1em 3em 1em 3em;
  font-size: 1.2em;
  text-align: left;
}
#readContainer>button
{
  color: black;
}

.leaf:first-of-type
{
  z-index:99;
}

.dialog_figure
{
  width:100%;
  float:left;
  padding:1em;
}

.dialog_figure figcaption
{
  font-size: 0.9em;
}

.dialog_figure_right
{
  float:right;
}

.dialog_figure img
{
  width:100%;
}

/*general elements*/

.mainContainer
{
  width: 100%;
  background:#ffffff;
  overflow: scroll;
  display:flex;
  flex-flow: row wrap;
  justify-content:center;
}

.dropcap
{
display: block;
float: left;
font-size: 10.625rem;
line-height: .7em;
font-weight: normal;
font-family: "Playfair Display", serif;
color: #000000;
margin-right: 0.3125rem;
}


.instructions
{
    flex:1 100%;
    font-family: 'PT Serif', serif;
}

.button-container
{

border-top: 1px solid #ebebeb;
margin-top:2em;
padding:2em;
display:flex;
justify-content:center;
}

button
{
  transition: all 1s ease;
  background-color: #000000;
  border:2px solid #ffffff;
  color: #ffffff !important;
}

button:disabled
{
  opacity:0.5;
}

button:hover
{
  background-color: #d5ab36;
  border:2px solid #d5ab36;
  color: #000000 !important;
}

.mainContainer>button, #quire_controls>button, #reset_sheet
{
  background-color: #d5ab36;
  border:2px solid #d5ab36;
  color: #000000 !important;
}

.flex-distribute
{
  display:flex;
  justify-content:center;
}

.btn-distribute
{

  display: inline;
  margin:1em;
}

.initExercise
{
margin-top:4em !important;
}

.btn-large
{
  font-size: 1em;
  padding:1em;
}

/*select page container*/

#pageLine, #sheetLine, #quireLine
  {
    display:flex;
    flex-wrap:nowrap;
    flex-direction:row;
    flex:1;
    text-align: center;
    white-space: nowrap;
    margin:1em;
    overflow:hidden;
  }

  .pageNav
{
  flex-basis:content;
  z-index: 999;
}

#prev
{
  left:1.5em;
}

#next
{
  right:1.5em;
}

div[draggable=true] {
  -khtml-user-drag: element;
}

/*arrange page container*/

#arrangePage
{
  padding-top: 0px;
  font-family: 'PT Serif', serif;
}

#sheetLine
{
height:150px;
}

.printPage
{
  min-width:100px;
  display:inline-block;
  margin-right: 1em;
  margin-left:1em;
  z-index:98;
}

    .sheet
    {
      text-align: right;
    }

.sheet_disabled
{
opacity:0.2;
cursor: no-drop;
}

.draggable_sheet
{
  z-index:99;
}

.ui-draggable-dragging
{
  opacity:0.7;
}

.sheetLabel
{
  font-size: 2em;
 }

.scrap
{
  border: 1px dashed black;
opacity:0.2;}

/*------*/

/*ArrangeQuire container*/


#quireLine
{
  flex: 1;
  margin:0;
  display:flex;
flex-direction: column;
position:relative;
margin:0 auto;

}

.quire_wrapper
{
  height: calc(265px*0.5);
    width:100%;
  margin: 0 auto;
  margin-top:0;
}

.quire_leaf
{
  height:calc(256px*0.5);
  width:calc(150px*0.5);
  position:absolute;
  left:50%;
  bottom:10%;
  border:1px solid black;
  text-align: center;
  display: flex;
  justify-content: flex-end;
    align-items: flex-end;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.quire_leaf img
{
  height:calc(256px*0.5);
  width:calc(150px*0.5);
}

@media (min-width: 1100px) {

    #dashboard {
  background-color: #ffffff;
    border-right: 1px solid #ebebeb;

  }

  .quire_wrapper {
    height: calc(285px*1.5);
    width:100%;
    }
  .quire_leaf {
    height:calc(256px*1.5);
    width:calc(150px*1.5);
    }

  .quire_leaf img {
  height:calc(256px*1.5);
  width:calc(150px*1.5);
  }

  .page {
  width:150px !important;
  }
.page_container {
  height:auto !important; 
  min-width:150px !important;
    }
.imp-seg, .scrap {
  height:256px !important;
  width:150px !important;
  }
.printPage {
  min-width:300px !important;
  }
.printPage .wrapper {
  height:260px !important;
  }
.printPage .flippable {
  width:300px !important;
  }

.page_sig
    {
      font-size: 1em !important;
    }





#sheetLine {
  height:350px !important;
  }

    .dialog_figure {
  width:40%;
  }

  .dialog_figure_small
{
  width:25%;
}

}

.scissorline:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 6%;
    border-left: 2px dashed #000000;
    transform: translate(-50%);
}

.quire_leaf>p
{
  margin:0.5em;
}

#leaf1 *, #leaf2 *, #leaf3 *, #leaf1cancel *, #leafplus1 *, .flipped .clear_card, .flipped .flip_card
{
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}


.sheet1
{
  background-color:#CEBE9A;
}

.sheet2
{
  background-color:#D9C8A1;
}

.sheet3, .sheetplus1, .sheetbi
{
  background-color:#E5D8BD;
}

#leaf1
{
transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY( 195deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY( 195deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY( 195deg );
transform: perspective(600px ) rotateX(55deg) rotateY( 195deg );
z-index:51;
}

#leafplus1
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) translateY(-40px) translateX(-80px)  rotateY( 205deg );
-moz-transform: perspective(600px ) rotateX(55deg) translateY(-40px) translateX(-80px)  rotateY( 205deg );
-o-transform: perspective(600px ) rotateX(55deg) translateY(-40px) translateX(-80px)  rotateY( 205deg );
transform: perspective(600px ) rotateX(55deg) translateY(-40px) translateX(-80px)  rotateY( 205deg );
z-index:52;
}

#leaf1cancel
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) translateY(-80px) translateX(-20px) rotateY( 215deg );
-moz-transform: perspective(600px ) rotateX(55deg) translateY(-80px) translateX(-20px) rotateY( 215deg );
-o-transform: perspective(600px ) rotateX(55deg) translateY(-80px) translateX(-20px) rotateY( 215deg );
transform: perspective(600px ) rotateX(55deg) translateY(-80px) translateX(-20px) rotateY( 215deg );
z-index:54;
}

#leaf2
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY(215deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY(215deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY(215deg );
transform: perspective(600px ) rotateX(55deg) rotateY(215deg );
z-index:54;
}

#leaf3
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY(235deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY(235deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY(235deg );
transform: perspective(600px ) rotateX(55deg) rotateY(235deg );
z-index:57;
}

#leaf4
{
transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY( -55deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY( -55deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY( -55deg );
transform: perspective(600px ) rotateX(55deg) rotateY( -55deg );
    z-index:57;
}
#leaf5
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY( -35deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY( -35deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY( -35deg );
transform: perspective(600px ) rotateX(55deg) rotateY( -35deg );
    z-index:54;
}
#leaf6
{
transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg) rotateY( -15deg );
-moz-transform: perspective(600px ) rotateX(55deg) rotateY( -15deg );
-o-transform: perspective(600px ) rotateX(55deg) rotateY( -15deg );
transform: perspective(600px ) rotateX(55deg) rotateY( -15deg );
    z-index:51;

}

#leafbi1
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -30deg );
-moz-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -30deg );
-o-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -30deg );
transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -30deg );
    z-index:53;

}
#leafbi2
{
transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -20deg );
-moz-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -20deg );
-o-transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -20deg );
transform: perspective(600px ) rotateX(55deg)  translateY(-40px) translateX(80px) rotateY( -20deg );
    z-index:52;

}

#leafbi1alt
{
  transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( -10deg );
-moz-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( -10deg );
-o-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( -10deg );
transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( -10deg );
    z-index:50;

}
#leafbi2alt
{
transform-origin: center left;
-webkit-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( 0deg );
-moz-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( 0deg );
-o-transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( 0deg );
transform: perspective(600px ) rotateX(55deg)  translateY(-10px) translateX(80px) rotateY( 0deg );
    z-index:49;

}

#quire_controls
{
  text-align: center;
  margin-bottom: 2em;
}


.quireModel
{
  margin-left:1em;
  min-width:200px;
}


.wrapper {
      height: 90px;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

#page_input
{
  height:2em;
}

#page_number
{
  position: absolute;

}

    .flippable {

      width: 100px;
      height: 100%;
      position: absolute;

      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;

      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;

              transform-origin: right center;

        -webkit-backface-visibility: visible;
         -moz-backface-visibility: visible;
           -o-backface-visibility: visible;
              backface-visibility: visible;

    }

    .leaf
    {
      transform-origin: left;
      display: inline;
    }

/*disable to test IE fix*/

    .flippable.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );

              transform: translateX( -100% ) rotateY( -180deg );

    }


    .leaf.flipped {

              transform:rotateY( -180deg ) !important;
    }


    .flippable figure {
      margin: 0px;
      display: block;
      height: 100%;
      width: 100%;
      line-height: 256px;
      color: #000000;
      text-align: center;
      font-family: 'PT Serif', serif;
      font-size: 3em;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
              -webkit-transform-style: preserve-3d;

      -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;

    }

    .sheet_sig
    {
      position:absolute;
      bottom:-10px;
      font-size: 0.5em;
      line-height:0px;
      font-family: "Inter", sans-serif;
      text-rendering: optimizeLegibility;
      color: #494949;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      text-align:center;
    }

    .flippable .front {
      z-index:2;
      transform:rotateY(0deg);
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;

    }

    .flippable .back {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
              -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;


   }

#assignment
{
font-style: bold;
color: #cc3333;
}

.format_menu
{
  float: right;
  list-style:none;
}

    .tilt
    {
      -webkit-transform: rotateX( 80deg );
         -moz-transform: rotateX( 80deg );
           -o-transform: rotateX( 80deg );
              transform: rotateX( 80deg );
    }


.folio-recto
{
  float: right !important;
  right:0px; /*workaround for IE*/
}

.folio-verso
{
  left:0px;
}

.folded
{
  -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;

      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
}

.folio-recto.folded
{
  -webkit-transform: rotateY( 85deg );
         -moz-transform: rotateY( 85deg );
           -o-transform: rotateY( 85deg );
              transform: rotateY( 85deg );

  transform-origin: left;


}

.folio-verso.folded
{
  -webkit-transform: rotateY( -85deg );
         -moz-transform: rotateY( -85deg );
           -o-transform: rotateY( -85deg );
              transform: rotateY( -85deg );

  transform-origin: right;
}

/*Fold to booklet variant*/

.fold
{
  -webkit-transition: -webkit-transform 3s;
         -moz-transition: -moz-transform 3s;
           -o-transition: -o-transform 3s;
              transition: transform 3s;

      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
}

.back>.folio-recto.fold
{
  -webkit-transform: rotateY( 160deg );
         -moz-transform: rotateY( 160deg );
           -o-transform: rotateY( 160deg );
              transform: rotateY( 160deg );

  transform-origin: left;


}

.front>.folio-verso.fold
{
  -webkit-transform: rotateY( -160deg );
         -moz-transform: rotateY( -160deg );
           -o-transform: rotateY( -160deg );
              transform: rotateY( -160deg );

  transform-origin: right;
}

.front>.folio-recto.fold
{
  -webkit-transform: rotateY( -10deg );
         -moz-transform: rotateY( -10deg );
           -o-transform: rotateY( -10deg );
              transform: rotateY( -10deg );

  transform-origin: left;
}

.back>.folio-verso.fold
{
  -webkit-transform: rotateY( 10deg );
         -moz-transform: rotateY( 10deg );
           -o-transform: rotateY( 10deg );
              transform: rotateY( 10deg );

  transform-origin: right;
}

    .page
    {
      height: auto;
      width: 50px;
      vertical-align: top;
      z-index:999 !important;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .page_container
    {
      min-width:50px;
      margin-right: 0.5em;
      margin-left:0.5em;
    }

    .page_sig
    {
      font-size: 0.7em;
      z-index:999;
      text-align: middle;
      font-family: "Inter", sans-serif;
      text-rendering: optimizeLegibility;
      color: #494949;
    }

    .imp-seg, .scrap
    {
      position: absolute;
      height:85px;
      width:50px;
      display: inline;
      background-image: url("../images/foliono68_sm/undefined.png");
     -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }


.pagetray
{
  width:100%;
}

.quirespace, .topPanel
{
  height:400px;
  width:100%;
  display: flex;
}

.topPanel
{
  height:300px;
}

.quirespace>div, .topPanel>div
{

  flex: 1;
  border:1px solid black;
}

/*top panel specifications*/
#selectQuire, #balanceQuire
{
  flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 12em;
}

#selectPage, #arrangePage, #arrangeQuire
{
  overflow:hidden;
}


.folioSlug
{
  display: none;
}

/*quire panel specifications*/
.selectFolio, .stackFolio
{
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

/*Carousel*/

button.round
{
  margin:0px;
    padding:0px;
    white-space:nowrap;
    width:auto;
    overflow:visible;
  border:0;
    background:transparent
}

button.round img
{
  height:50px;
  width:50px;
}

#navigation
{
  position:absolute;
  width:100%;
}

#main-style .glyphicon-zoom-in
{
  font-size: 1.5em;
  float:right;
  cursor: pointer;
}

.clear_card, .flip_card
{
  font-size: 2em;
  cursor: pointer;
}

.clear_card
{
  font-size: 1em;
  float: left;
  line-height: 4;
}

.flip_card
{
  margin-left:-34px;
}

#readContainer .quirePreview
{
  height:500px;
}

#readContainer>h5
{
  color: white;
}


/* CSS used here will be applied after bootstrap.css */
/*
 * Sidebar (add to your bootstrap)
 */

.sidebar-form {
  padding: 7px 15px 13px 15px;
}

@media (max-width: 768px) and (min-width: 400px){

    .quire_wrapper
{
  height: calc(265px*1);
    width:100%;
  margin: 0 auto;
  margin-top:0;
}
  .quire_leaf {
    height:calc(256px*1);
    width:calc(150px*1);
    }

  .quire_leaf img {
  height:calc(256px*1);
  width:calc(150px*1);
  }
    .page {
  width:100px !important;
  }
  .page_container {
  height:auto !important; 
  min-width:100px !important;
    }
.imp-seg, .scrap {
  height:169px !important;
  width:100px !important;
  }
.printPage {
  min-width:200px !important;
  }
.printPage .wrapper {
  height: 172px !important;
  }
.printPage .flippable {
  width:200px !important;
  }
#sheetLine {
  height:231px !important;
  }

  .page_sig
    {
      font-size: 1em;
    }
}

@media (max-width: 1100px) and (min-width: 768px){

    #dashboard {
  background-color: #ffffff;
    border-right: 1px solid #ebebeb;

  }

  #page-wrapper2 {
    margin: 0 0 0 275px;
    min-height: 1000px;
  }
  .sidebar-nav {
  left: 0;
    list-style: none;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    position: fixed;
    top: 0;
    width: 250px;
    z-index: 1;
  } 
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .sidebar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 5px 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .sidebar-nav .open .dropdown-menu > li > a {
    padding: 5px 15px 5px 25px;
  }
  .sidebar-nav .navbar-brand {
    width: 100%;
  }

  .sidebar-nav .open > a > b.caret {
    border-top: none;
    border-bottom: 4px solid;
  }




  .quire_wrapper
{
  height: calc(265px*1);
    width:100%;
  margin: 0 auto;
  margin-top:0;
}
  .quire_leaf {
    height:calc(256px*1);
    width:calc(150px*1);
    }

  .quire_leaf img {
  height:calc(256px*1);
  width:calc(150px*1);
  }
    .page {
  width:100px !important;
  }
  .page_container {
  height:auto !important; 
  min-width:100px !important;
    }
.imp-seg, .scrap {
  height:169px !important;
  width:100px !important;
  }
.printPage {
  min-width:200px !important;
  }
  .printPage .wrapper {
  height: 172px !important;
  }
.printPage .flippable {
  width:200px !important;
  }
#sheetLine {
  height:231px !important;
  }
  .page_sig
    {
      font-size: 1em;
    }
}

#main-style .dropdown-toggle-disabled
{
  background-color: transparent;
}

#main-style .active-exercise
{
  color: #d5ab36;
}

#main-style .navbar-nav > li > a
{
  padding-top:5px;
  padding-bottom:5px;
}

#main-style .dashboard-nav li
{
  margin:0px;
}

#main-style .container-fluid
{
  width:calc(100% - 30px);
  padding:0;
}

#main-style .col-md-12
{
  padding:0;
}

/* CSS used here will be applied after bootstrap.css */
/*
 * dashboard (add to your bootstrap)
 */

.sidebar-form {
  padding: 7px 15px 13px 15px;
}
#page-wrapper5
{
  margin-top: 50px;
}

.dashboard-nav {
    height: calc(100% - 345px);
}

@media (min-width:900px) {
    .dashboard-nav {
        height: calc(100% - 254px);
    }
}
@media (min-width: 768px) {
  #page-wrapper5 {
  margin-left: 250px;
    min-height: 1000px;
  }
  .dashboard-nav {
  left: 0;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    padding-top: 10px;
  position: fixed;
    top: 65px;
    width: 250px;
    z-index: 1;
  } 
  .dashboard-nav .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .dashboard-nav ul {
    float: none;
  width: 100%;
  }
  .dashboard-nav ul:not {
    display: block;
  }
  .dashboard-nav li {
    float: none;
    display: block;
    font-family: "Inter", sans-serif;
    text-rendering: optimizeLegibility;
    text-transform:uppercase;
    font-weight: 700;
    color: #000000;
  }
  .dashboard-nav li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .dashboard-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 5px 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .dashboard-nav .open .dropdown-menu > li > a {
    padding: 5px 15px 5px 25px;
  }
  .dashboard-nav .open > a > b.caret {
  border-top: none;
  border-bottom: 4px solid;
  }
}

#navbar
{
  background-color: #ffffff;
  font-family: "Inter", sans-serif;
text-rendering: optimizeLegibility;
text-transform: uppercase;
}

.navbar-brand
{
  margin: 0.5em 0;
}

.dropdown-menu > li > a
{
  white-space: normal !important;
}

.subhead::before
{
  background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 0.8em;
margin: 0 1em;
opacity: 0.65;
width: 0.5em;
}