/* Styles that apply only to print. */
@media print {
img.tabs, ul.tabs li.tabs {
 display: none;
}
ul.tabs li.active {
 display: inherit;
}
}

div.tabs {
 border-bottom: 1px solid black;
 position: relative;
 padding: 0px 40px 0px 40px;
}
ul.tabs {
 /* margin: 0 auto; */
 margin: 1em 0 -1px;
 padding: 0;
 white-space: nowrap;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 scroll-behavior: smooth;
 font-size: 0;  /* This removes the space between the tabs - otherwise, when I add a new tab, it looks weird because it has no space to its left. */
}
ul.tabs::-webkit-scrollbar {
 width: 0px !important;
}
ul.tabs.wrap {
 white-space: normal;
 overflow-x: visible;
}
li.tabs {
 border: 1px solid #000000;
 display: inline-block;
 padding: 10px 10px 10px 10px;
 text-align: center;
 border-top-right-radius: 5px;
 border-top-left-radius: 5px;
 cursor: pointer;
 background-color: #d0d0d0;
 vertical-align: top;
}
ul.tabs li:hover {
 color: #F40000;
}
ul.tabs li.active {
 background-color: #FFFFFF;
 color: #F40000;
 border-bottom: 1px solid #FFFFFF;
 cursor: grab;
}
span.tabs, li.tabs {
 font-size: 16px;
}
img.tabs {
 position: absolute;
 top: 10px;
 width: 30px;
}
img.tabs:hover {
 cursor: pointer;
}
img.tabs.inactive:hover {
 cursor: default;
}
img.tabs.left {
 left: 0px;
}
img.tabs.right {
 right: 0px;
}
img.tab_icon {
 height: 14px;
 vertical-align: top;
 padding: 0px 0px 0px 5px;
 float: right;
}