html{ 
  scroll-behavior: smooth; 
}

.jumbotron.main-bg-color a:hover {
  color: #e44a5c;
}

.tab-content{
  overflow-x: scroll;
}

#styleguide{ 
  position: fixed;
  z-index: 99; 
  bottom: 30px; 
  right:80px 
}

.fullscreen{
  background-color: #fff;
  position: fixed;
  max-width: 100%;
  width:100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left:0;
  overflow-y: auto;
}

/* Files */
.folder-wrapper{
  border: 1px solid var( --main-color );
  background-color: #eee;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
}

/* Pages */
.main-header ~ .main-service-title ~ #main {
  margin-top: 1rem;
}

.breadcrumb-nav {
  padding-bottom: .5rem;
}

.folder-wrapper .folder, 
.folder-wrapper .files, 
.folder-wrapper .files li, 
.folder-wrapper li{
  list-style-type: none;
  position: relative;
  padding: 0.1rem 1.7rem !important;
}

.folder-wrapper .folder:hover{
  cursor: pointer;
}

.folder-wrapper .files li::before,
.folder-wrapper .folder::before {
  display: inline-block;
  content:  url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd'  d='M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V7z' clip-rule='evenodd'/></svg>");
  vertical-align: -.125em;
  width: 16px;
  position: absolute;
  left: 15px;
  top: 4px    
}

.folder-wrapper .files li::before {
 content:  url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd'  d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z' clip-rule='evenodd'/></svg>");  
 left: -5px;
}

.folder-wrapper .folder .folder,
.folder-wrapper .folder .files{
  display: none;
}

.folder-wrapper .folder.active > li > .folder,
.folder-wrapper .folder.active > li > .files{
  display: block;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#navbar-snippet::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#navbar-snippet {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#navbar-snippet{ position: sticky; overflow-y: scroll; overflow-x: hidden; width:100%; top: 80px; left:0; height: 80vh;}
#navbar-snippet .nav-pills{  position: absolute; top: 30px; left: 0; padding: 5px; height: auto;  z-index: 1000 }
#navbar-snippet .nav-pills:hover{ cursor: pointer }
#navbar-snippet .nav-pills a{ color: #071F32; text-decoration: none; }
#navbar-snippet .nav-pills a:hover{ color: rgba(7, 31, 50, .8); }

#navbar-snippet .nav-pills .nav-link.active,
#navbar-snippet .nav-pills .show>.nav-link { color: var(--main-danger-color); background-color: transparent; } 

#navbar-snippet .nav-pills .nav-link:before{ content: '\f111  '; font-family: 'Font Awesome 5 Free'; color: var(--main-color)  }

#navbar-snippet .nav-pills .nav-link.active:before,
#navbar-snippet .nav-pills .show>.nav-link:before { font-weight: 700; color: var(--main-danger-color); }

.section-code .tab-content{ 
  box-shadow: box-shadow: 1px 8px 16px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 1px 8px 16px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 8px 16px 0px rgba(0,0,0,0.75); 
}

.code.selected{ 
  padding: 1rem; 
  -webkit-box-shadow: 1px 6px 14px -4px #000000; 
  box-shadow: 1px 6px 14px -4px #000000  
}  

.code-title{ 
  margin: 2rem 0; 
  padding: 1rem 0; 
  position: relative; 
}

.code-title h2{ 
  margin: 0 
}

.btn-code, .btn-copy-macro, .btn-copy-html{ padding: 5px; }
.btn-codeview-toggle::after{ content: 'Vue'; }
.html-code.hljs.javascript .xml, .html-code.hljs.javascript .xml .hljs-tag{ display: block; }

.btn-fs{
  position: absolute;
  top: 30px;
  right: 15px;
  color: #354BCF;
}

.padX{ padding: 0 5vw;}

.table-color td:hover{
  cursor: pointer;
  position: relative;
}

.table-color td:not(:first-of-type):hover:before{
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  position: absolute;
  left: -9px;
}

.table-color td:not(:first-of-type):active:before{
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
}

/* Small devices (landscape phones, 576px and up) 			*/
/* Extra small devices (portrait phones, less than 576px) 	*/
@media (max-width: 575.98px) { 
	/* #navbar-snippet{ display: none;} */
  #col-snippet.col-1{ padding-left: 5px; padding-right: 5px}
  #navbar-snippet{ width: 100%; right: 0;}
  #navbar-snippet .nav-link{ padding: 0; margin: 0 }
  #navbar-snippet .nav-link > span{ position: fixed; z-index: 6000; left: 30px; top: 215px; padding: 5px 0; color: red; display: none; }
  #navbar-snippet .nav-link.active > span{ display: block;writing-mode: vertical-rl;  }
  .btn-code{ top: 0 }
  .btn-show-html{ right: 10rem; }
  .btn-copy-macro{ right: 1rem; }
  .btn-codeview-toggle{ display: none; }
  .code-block .nav-tabs .nav-item, .code-block .nav-tabs .nav-item:not(:first-child) h4 {padding: 0; font-size: 1rem; }
  .code-block .nav-tabs .nav-item:first-child{ width: 100% }
}

/* Small devices (landscape phones, 576px and 768)          */
@media (min-width: 576px) and (max-width: 767.98px) { 
	#navbar-snippet{ width: 35vw; top: 5vh; right: 0.5rem;}
  .code-block .nav-tabs .nav-item, .code-block .nav-tabs .nav-item:not(:first-child) h4 {padding: 0; font-size: 1.3rem; }
  .code-block .nav-tabs .nav-item:first-child{ width: 100% }
}