/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}
.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#wyc-a:hover{
text-decoration:none;
}
#chapters:hover{
text-decoration:none;
cursor:default;
}
#bookshelf:hover{
text-decoration:none;
cursor:default;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

#custom-chart::-webkit-scrollbar-track
{
	border: 1px solid #EDECE0;
	background-color: #EDECE0;
}

#custom-chart::-webkit-scrollbar
{
	height: 10px;
	background-color: #F5F5F5;
}

#custom-chart::-webkit-scrollbar-thumb
{
	background-color: #D3D1C3;	
}
 
 #chapter-wrap-main::-webkit-scrollbar-track
{
	border: 1px solid #EDECE0;
	background-color: #EDECE0;
}

#chapter-wrap-main::-webkit-scrollbar
{
	height: 10px;
	background-color: #F5F5F5;
}

#chapter-wrap-main::-webkit-scrollbar-thumb
{
	background-color: #D3D1C3;	
}
 li.project-item {
     float: left;
     height: 24px;
     width: 408px;
     border: 0px solid black;
     border-top-width: 0px;
     text-align: left;
     font-size: 25px;
     font-family: sans-serif;
 }
 .main-wrapper {
    width: 100%;
    border: 0px solid black;
    padding-top: 0%;
    padding-bottom: 0%;
    box-sizing: border-box;
    margin-top: 0%;
    margin-left: 0%;
 }
 input:focus{
 outline:none;
 }
 .path {
 
 }
 #chart {
     height: 380px;
     display: none;
 }
 #custom-chart {
     height: 400px;
     width: 100%;
     margin-top:1%;
     overflow-x: scroll;
 }

 #custom-chart-chapters {
    height: calc(100% - 56px);
    width: 100%;
    padding-bottom: 0;
    margin-top: 0;
    margin-left: 0;
    border-bottom: 2px solid #d3d0b3;
    display: none;
    position: relative;
    z-index: 4;
 }
 #custom-chart-chapters-label {
    height: 56px;
    width: 100%;
    padding-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 0;
    border-bottom: 0 solid gray;
    box-sizing: border-box;
    display: none;
    position: relative;
    z-index: 4;
    top: calc(-100% + 56px);
 }
 #custom-chart-chapters-wm {
    position: relative;
    display: none;
    top: calc(-100% + 56px);
    width: 100%;
    height: calc(100% - 56px);
    z-index: 0;
 }
 ul.chapters {
     height: 100%;
     width:100%;
     margin: 0px; 
     
 }
 ul.chapters-label{
 	margin: 0px;
 }
 ul.project-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     height: 100%;
     
 }
 .m-item {
     width: 70px;
     padding: 5px;
     float: left;
     border: 1px solid black;
     border-radius: 0px;
     color: white;
     background:black;
     margin-left: 1%;
     text-align: center;
     cursor: pointer;
 }
 .m-item:hover {
     background: orange;
     border: 1px solid orange;
 }
 .m-item:focus {
     background-color: yellow;
 }
 .client-list {
     border-top-width: 1px;
     border-radius: 0px;
     border-color: gray;
 }
 ul,
 li {
     /* list-style-type: none;
     list-style-position: inside; */
     margin: 0px;
     padding: 0;
 }
 tr.tablewm {
    border-top: 1px dotted #BEBCA9;
    height: 33.3%;
 }
 table.tablewm {
  height: 100%;
  width : 100%;  
 }
 .legend-icon{
 background:skyblue;height:8px;width:8px;float:left;margin-top:6px;
 }
 li.item{
 padding: 2px 8px 4px 8px;
 font-size:13px;
 }
 li.chap-bar{
 font-family:'Lato',sans-serif;
 }
 li.item:hover{
 background:lightgray;
 cursor:pointer;
 }
 #file-details{
 display:none;
 height: 24px;
 width: 100%;
 margin-left: 0%;
 
 padding-top: 4px;
 font-size: 13px;
 font-family: 'Lato',sans-serif;
 font-weight: 500;
 margin-left: 0%;
 }
 #filename{
 color: black;
 margin-top: 0.5%;
 width: 100%;
 margin-left: -18px;
 }
 #file-meta-data{
 color: green;
 display:none;
 }
 

	.st0{fill:none;stroke:#D3D1C3;stroke-width:0.5;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#A1775A;stroke-miterlimit:10;}
	.st2{fill:#A1775A;}
	.st3{opacity:0.5;fill:#C7906C;}
	.st4{fill:#C7906C;}
	.st5{fill:#050605;font-family:Lato, sans-serif;}
	.st6{font-family:'OpenSans';font-family:Lato, sans-serif;}
	.st7{font-size:10px;font-family:Lato, sans-serif;}
	.st8{fill:none;}
	.st9{fill:#FFFFFF;}
	.st10{font-family:'GillSans-SemiBold';}








	
/* Pop out CSS */
@keyframes getcrossedpos {
  45% {
    transform: rotate(0);
    top: 33%;
  }
  50% {
    transform: rotate(0);
    top: 45%;
  }
  100% {
    transform: rotate(45deg);
    top: 45%;
  }
}
@keyframes straightenpos {
  0% {
    transform: rotate(45deg);
    top: 45%;
  }
  55% {
    transform: rotate(0);
    top: 33%;
  }
  100% {
    transform: rotate(0);
    top: 33%;
  }
}
@keyframes getcrossedneg {
  45% {
    transform: rotate(0);
    top: 60%;
  }
  50% {
    transform: rotate(0);
    top: 45%;
  }
  100% {
    transform: rotate(-45deg);
    top: 45%;
  }
}
@font-face {
  font-family: "SSSocialCircle";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-social-circle.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* * {
  box-sizing: border-box;
} */

.ss-icon {
  font-family: "SSSocialCircle";
  text-decoration: none;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

nav {
  position: relative;
    left: 0%;
    top: 0%;
    width: 30px;
    height: 30px;
    z-index: initial;
    line-height: 0rem;
    border-radius: 50%;
    transition: .3s;
    background: #d1d0c2;
    outline: 0;
}
nav:hover, nav:focus {
  background: #333;
}
nav:before, nav:after, nav > span {
  position: absolute;
  left: 27%;
  content: "";
  display: block;
  width: 46%;
  top: 33%;
  height: 7%;
  background: #fff;
  transform-origin: center;
  transition: .5s;
}
nav span {
  top: 46%;
}
nav:after {
  top: 60%;
}
nav.clicked:before {
  animation: getcrossedpos .6s forwards;
}
nav.clicked:after {
  animation: getcrossedneg .6s forwards;
}
nav.clicked span#center-bar {
  opacity: 0;
}
nav:hover {
  cursor: pointer;
}
nav.clicked {
  background: #ad1f24;
  outline: none;
}
nav.clicked a{
	z-index: 1;
}
nav a {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  
  text-align: center;
  line-height: 0;
  color: #fff;
  text-decoration: none;
  position: absolute;
  font-size: 4rem;
  text-align: center;
  left: 1rem;
  top: 1rem;
  transition: .4s;
  z-index: -1;
}
nav a:hover, nav a:focus {
  background-color: #fff;
}
nav a:nth-child(1) {
  transform: rotate(-72deg);
}
nav.clicked a:nth-child(1) {
	display:none;
  transform: rotate(-72deg) translateX(4rem) rotate(--72deg);
}
nav a:nth-child(2) {
  transform: rotate(0deg);
}
nav.clicked a:nth-child(2) {
	display:none;	
  transform: rotate(0deg) translateX(4rem) rotate(-0deg);
}
nav a:nth-child(3) {
  transform: rotate(72deg);
}
nav.clicked a:nth-child(3) {
  transform: rotate(-362deg) translateX(1.4rem) translateY(-12px) rotate(3deg);
}
nav a:nth-child(4) {
  transform: rotate(144deg);
}
nav.clicked a:nth-child(4) {
  transform: rotate(103deg) translateX(-3.3rem) rotate(-104deg);
}
nav a:nth-child(5) {
  transform: rotate(216deg);
}
nav.clicked a:nth-child(5) {
  display:none;		
  transform: rotate(216deg) translateX(4rem) rotate(-216deg);
}
nav a:nth-child(6) {
  transform: rotate(288deg);
}
nav.clicked a:nth-child(6) {
  display:none;		
  transform: rotate(288deg) translateX(-4rem) rotate(-288deg);
}

/*Pop out CSS End*/

.BookView,.Tooltip,#catwrap,#sortwrap {
	cursor:pointer;
}