@font-face {
  font-family:"Poppins-Regular";
  src:url('../vendor/google-poppins/Poppins-Regular.ttf');
}

:root {
  	--main-font-family:"Poppins-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  	--main-font-family:"Poppins-Regular",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif;
  	
	--main-template-bg:#F0F1F5;
	--main-template-color:#585B69;
	
	--main-scrollbar-thumb-bg:#83889E;
	--main-scrollbar-thumb-shadow-color:rgba(250,250,250,0.8);
	
	--resize-bar-bg:#F8F9FC;/*#83889E;*/
	--resize-bar-vertical-img:url(../img/back_frame_open_close_vertical_red.gif);
	--resize-bar-horizontal-img:url(../../img/back_frame_open_close_horizontal_red.gif);
	--resize-bar-border:#BFC4DB;
	
	--top-panel-border: #FC3C44;
    --top-panel-bg: #2C2D34;
    --top-panel-color: #DFE1ED;
    
    --left-panel-bg:#F8F9FC;
	--left-panel-color:#585B69;
	--left-panel-tree-item-hover-shadow:#999;
	--left-panel-tree-item-hover-bg:#eef2ff;
	--left-panel-tree-item-clicked-color::#000;
	--left-panel-tree-item-clicked-bg:#DFE1ED;
	--left-panel-tree-item-clicked-shadow:#999;
	
    --icon-color:#83889E;
    
    --link-color:#83889E;
    
    --btn-border:#F0F1F5;
	--btn-bg:#BFC4DB;
	--btn-color:#585B69;
	
	--details-border:#BFC4DB;
	--details-bg:#BFC4DB;
	--details-color:#585B69;
}

/* Scrollbars */
::-webkit-scrollbar {
	width:10px;
	height:10px;
	background:transparent;
}
::-webkit-scrollbar-track {
	/*-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0, 0);*/
	background:transparent;
}
::-webkit-scrollbar-thumb {
	background:var(--main-scrollbar-thumb-bg);
	/*-webkit-box-shadow:inset 0 0 6px rgba(250,250,250,0.8);*/
	
	background-clip:padding-box;
	border:2px solid transparent;
	border-radius:9999px;
	/*-webkit-box-shadow:0 0px 1px var(--main-scrollbar-thumb-shadow-color);*/
}
::-webkit-scrollbar-thumb:window-inactive {
	/*background:rgba(0,0,0,0.35);*/
}

/* Generic */
body, html {
	height: 100%;
	font-family: var(--main-font-family);
	font-size:10pt;
    font-weight: 400;
    background-color: var(--main-template-bg);
    color: var(--main-template-color);
	
	overflow:overlay; /* The scrollbar will then also take transparent backgrounds across the page. This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.However the overlay value is now deprecated and only works in Chrome and Safari anymore. */
}

a {
    color:var(--link-color);
}
a:focus {
	outline: none !important;
}
a:hover {
	text-decoration: none;
	color: #FC3C44;
}

/* ------------------------------------ */

.hidden {
	display:none;
}
.sticky {
	color:#FC3C44 !important;
}

.clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0; visibility:hidden; }
.clearfix:after { clear:both; }
/* Fix clearfix:blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom:1; }

.btn {
	border-color:var(--btn-border);
	background-color:var(--btn-bg);
	color:var(--btn-color);
}

/* ------------------------------------ */

/* Loading */
.loading {
    padding:5px;
    display:block;
    background:rgba(0, 0, 0, .5);
    border-radius:2px;
    border:1px solid var(--top-panel-bg);
    position:fixed;
    top:50%;
    left:50%;
    z-index:9999;
}
.loading:before {
    content:"";
    display:block;
    width:20px;
    height:20px;
    background:url('../img/icon/loading.gif') no-repeat center center;
    background-size:contain;
}

/* Back to top button */
.btn-back-to-top {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 60px;
  right: 40px;
  background-color: black;
  opacity: 0.1;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  border-radius: 4px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}
body.main-navigator-reverse .btn-back-to-top {
    left:40px;
    right:auto;
}
.symbol-btn-back-to-top {
  font-size: 22px;
  color: white;
  line-height: 1em;
}
.btn-back-to-top:hover {
  opacity:.5;
  cursor:pointer;
}

@media (max-width: 576px) {
  .btn-back-to-top {
    bottom: 15px;
    right: 15px;
  }
}

/* Breadcrumbs */
.breadcrumbs {
	width:auto;
	height:auto;
	min-height:auto;
	line-height:22px;
	display:block;
	text-align:inherit;
	font-size:inherit;
	font-weight:inherit;
	margin:0;
	padding:0;
	color:var(--main-template-color);
}
.breadcrumbs .breadcrumb-item {
	display:inline-block;
	margin-right:2px;
	float:none;
}
.breadcrumbs .breadcrumb-item::before {
    display:none;
}
.breadcrumbs .breadcrumb-item::after {
	width:10px;
	margin-right:2px;
	display:inline-block;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	font:var(--fa-font-solid);
	content:"\f054";
}
.breadcrumbs .breadcrumb-item:last-child::after {
	display:none;
}
.breadcrumbs .breadcrumb-item:last-child {
	font-weight:bold;
}
.breadcrumbs .breadcrumb-item a {
	color:inherit;
	cursor:pointer;
}
.breadcrumbs .breadcrumb-item a:hover {
	color:var(--icon-color);
}

/* Template */
#top-panel {
    height:35px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    overflow:hidden;
	/*border-bottom:1px solid var(--top-panel-border);*/
    background-color:var(--top-panel-bg);
    color:var(--top-panel-color);
}
body.popup #top-panel {
    display:none;
}
#top-panel #top-logo {
    cursor:pointer;
}
#top-panel #top-logo .logo {
    width:80px;
    height:14px;
    display:block;
    background:url(../img/logo/bloxtor_logo_full_white.svg) left center no-repeat;
    background-size:contain;
}
#top-panel #top-menu ul,
  #top-panel #top-menu li {
    list-style:none;
}
#top-panel #top-menu .toggle-main-navigator-side {
    margin:0 8px;
    display:inline-block;
    font-size:15px;
}
#top-panel #top-menu .toggle-main-navigator-side:last-child {
    margin-right:0;
}
#left-panel {
    width:250px;
    position:fixed;
    top:35px;
    left:0;
    bottom:0;
    overflow:auto;
    font-size:11px;
    padding:10px 0;
    background-color:var(--left-panel-bg);
    color:var(--left-panel-color);
}
body.popup #left-panel {
    top:0;
}
body.main-navigator-reverse #left-panel {
	left:auto;
	right:0px;
}
body.left-panel-hidden #left-panel {
	display:none;
}
#hide-left-panel {
	position:fixed;
	left:250px;
	top:35px;
	width:5px;
	bottom:0;
	border-left:1px solid var(--resize-bar-border);
	border-right:1px solid var(--resize-bar-border);
	background:var(--resize-bar-bg);
	/*background:url("../../img/back_frame_open_close_vertical_red.gif") repeat-y;
	background-size:contain*/;
	cursor:ew-resize;
	z-index:3;
	box-sizing:border-box;
}
body.popup #hide-left-panel {
    top:0;
}
body.main-navigator-reverse #hide-left-panel {
	left:auto;
	right:250px;
}
body.left-panel-hidden #hide-left-panel {
	left:0 !important;
	cursor:not-allowed;
}
body.main-navigator-reverse.left-panel-hidden #hide-left-panel {
	left:auto !important;
	right:0 !important;
	cursor:not-allowed;
}
#hide-left-panel .button {
	position:absolute;
	top:45%;
	top:calc(50% - 17px);
	width:10px;
	height:34px;
	left:-1px;
	cursor:pointer;
	background-repeat:no-repeat;
}
#hide-left-panel .button {
	background-image:url("../img/tool_frame_left.gif");
}
body.left-panel-hidden #hide-left-panel .button {
	background-image:url("../img/tool_frame_right.gif"); 
}
body.main-navigator-reverse #hide-left-panel .button {
	background-image:url("../img/tool_frame_right.gif"); 
}
body.main-navigator-reverse.left-panel-hidden #hide-left-panel .button {
	background-image:url("../img/tool_frame_left.gif");
}
#right-panel {
    position:fixed;
    top:35px;
    left:255px;
    right:0;
    bottom:0;
    overflow:auto;
}
body.popup #right-panel {
    top:0;
}
body.main-navigator-reverse #right-panel {
	left:0;
	right:255px;
}
body.left-panel-hidden #right-panel {
	left:5px !important;
}
body.main-navigator-reverse.left-panel-hidden #right-panel {
	left:0 !important;
	right:5px !important;
}
#left-panel:not(.dragging), 
  #hide-left-panel:not(.dragging), 
  #right-panel:not(.dragging) {
	transition:.2s all;
}

/* Left Panel - Tree Menu */
#left-panel .mytree > ul > li {
    margin: 0;
    padding-bottom:5px;
    background: unset;
    position: relative;
    border-bottom: 1px solid #BFC4DB;
}
#left-panel .mytree > ul > li > a.jstree-anchor.jstree-clicked:not(.jstree-hovered),
  #left-panel .mytree > ul > li > a.jstree-anchor.jstree-hovered:not(.jstree-clicked),
  #left-panel .mytree > ul > li > a.jstree-anchor.jstree-hovered.jstree-clicked {
    background-color:transparent !important;
}
#left-panel .mytree > ul > li > a > i {
    display:none;
}
#left-panel .mytree > ul > li > ul > li {
    margin-left:20px;
}

#left-panel .jstree-default .jstree-node,
  #left-panel .jstree-default .jstree-node.jstree-leaf > .jstree-ocl {
	background:none;
}
#left-panel .jstree-default .jstree-open > .jstree-ocl {
	background-position:-36px -4px;
}
#left-panel .jstree-default .jstree-closed > .jstree-ocl {
	background-position:-4px -4px;
}
#left-panel .jstree-default .jstree-clicked {background-color:#ddd !important;}
#left-panel .jstree-default .jstree-node > .jstree-ocl {
	background:none;
}
#left-panel .jstree-default .jstree-node > .jstree-ocl::before {
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	font:var(--fa-font-solid);
	margin-top:9px;
	margin-left:0;
	display:inline-block;
}
#left-panel .jstree-default .jstree-node.jstree-closed:not(.jstree-leaf) > .jstree-ocl::before {content:"\f054";}
#left-panel .jstree-default .jstree-node.jstree-open:not(.jstree-leaf) > .jstree-ocl::before {content:"\f078";}
#left-panel .mytree .jstree-hovered {background-color:transparent !important; border-radius:none; box-shadow:none;}
#left-panel .mytree .jstree-anchor.jstree-clicked.jstree-hovered {box-shadow:none; opacity:.9;}
#left-panel .mytree .jstree-anchor.link.jstree-hovered {background-color:#eee !important; border-radius: 2px; box-shadow: inset 0 0 1px #cccccc;}
#left-panel .mytree .jstree-anchor {height:auto; min-height:24px; padding-top:2px; padding-bottom:2px; cursor:default; vertical-align:middle;}
#left-panel .mytree .jstree-anchor > i.jstree-icon {vertical-align:middle;}
#left-panel .mytree .jstree-anchor > label {margin:0; vertical-align:top; white-space:normal; word-break:break-all;}
#left-panel .mytree a.link * {cursor:pointer;}

#left-panel .mytree .jstree-anchor.jstree-hovered:not(.jstree-clicked) {
    background-color:var(--left-panel-tree-item-hover-bg) !important;
}
#left-panel .mytree .jstree-clicked {
    color: var(--left-panel-tree-item-clicked-color) !important;
    background-color: var(--left-panel-tree-item-clicked-bg) !important;
    /* box-shadow: inset 0 0 1px var(--left-panel-tree-item-clicked-shadow); */
    box-shadow: none;
}

#left-panel .mytree i.jstree-themeicon {
    background:none;
}
#left-panel .mytree i.jstree-themeicon::before {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    font-size: 16px;
    display: block;
    margin-top: 4px;
    color:var(--icon-color);
}
#left-panel .mytree i.jstree-themeicon:not(.jstree-file)::before {
    content:"\f02d";
}
#left-panel .mytree .jstree-open > a > i.jstree-themeicon:not(.jstree-file)::before {
    content:"\f518";
}
#left-panel .mytree i.jstree-themeicon.jstree-file::before {
    content:"\f15b";
    font: var(--fa-font-regular);
    font-size: 16px;
}

/* Right Panel - Tree */
#right-panel .mytree {
	overflow:auto;
}
#right-panel .mytree > ul {
	padding-left:0;
}
#right-panel .mytree a {
	height:auto;
	color:inherit !important;
}
#right-panel .mytree label {
	opacity:.7;
	font-size:80%;
}
#right-panel .mytree .info {
	opacity:.7;
}
#right-panel .mytree .attributes li > a {
	font-size:80%;
}
#right-panel .mytree i.jstree-themeicon {
    background:none;
}
#right-panel .mytree i.jstree-themeicon.none {
    display:none;
}
#right-panel .mytree i.jstree-themeicon::before {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    font-size: 16px;
    display: block;
    margin-top: 4px;
    color:inherit;
}
#right-panel .mytree i.jstree-themeicon:not(.jstree-file)::before {
    content:"\f121"; /* html element with children */
}
#right-panel .mytree i.jstree-themeicon.jstree-file::before {
    content:"\f121"; /* html element without children */
}
#right-panel .mytree .attributes li > a > i:not(.jstree-file)::before {
	content:"\f0c9"; /* attribute with properties */
}
#right-panel .mytree .attributes li > a > i.jstree-file::before {
	content:"\f0c9"; /* attribute with no properties */
}
#right-panel .mytree .attributes li > ul li > a > i::before {
	content:"\f7a4" !important; /* properties inside of an attribute */
}
#right-panel .mytree li.attributes > a > i::before,
  #right-panel .mytree li.children > a > i::before {
	content:"\f0c8" !important; /* label 'Attributes:' or 'Children:' */
	font-size:12px;
	margin-top:7px;
	margin-left:5px;
}

/* Right Panel */
#right-panel ul, 
  #right-panel li {
	margin: 0px;
	list-style-type: none;
}
#right-panel > .navigation_buttons {
	height:75px;
	padding:20px;
	position:sticky;
	left:0;
	right:0;
	bottom:0;
	background:var(--main-template-bg);
	border-top:1px solid #BFC4DB;
}


/* Right Panel - Documentation */
#right-panel article {
    padding:20px;
	position:relative;
    color: #666666;
    word-break:break-word;
}

#right-panel article > header {
    margin:-20px -20px 20px;
    padding:20px;
	border-bottom:1px solid #BFC4DB;
}
#right-panel article > header h1 {
	margin:20px 0 0;
	display:block;
	font-size:20px;
}
/*#right-panel article > header h2 {
	line-height:12px;
	margin:4px 0 0;
	/*font-family:Georgia, serif;*/
	font-size:10px;
	font-style:italic;
	text-transform:none;
}
#right-panel article > header aside {
	padding:0 10px;
	margin:18px 0 26px;
	font-size:120%;
	font-style:italic;
	text-align:center;
	color:#aaa;
}*/

#right-panel article p {
	 margin:0 0 10px;
}
#right-panel article summary {
    list-style:none;
}
#right-panel article code  {
	text-align:left;
}
#right-panel article table,
  #right-panel article .code {
    word-break:initial;
    white-space:nowrap;
}

#right-panel article section  {
	text-align:left;
	font-size:9pt;
}
#right-panel article section ul, 
  #right-panel article section li {
    margin-left:10px;
    list-style-type:initial;
    list-style-type:revert;
    font-family:inherit;
    font-size:inherit;
    color:inherit;
}
#right-panel article section li a {
    font-family:inherit;
    font-size:inherit;
}
#right-panel article section h2 {
	width:80%;
	padding-bottom:5px;
	font-size:115%;
	color:var(--details-color);
	border-bottom:1px solid var(--details-border);
	text-align:left;
}
#right-panel article section .details  {
	margin-top:20px;
	margin-bottom:20px;
	text-align:left;
}
#right-panel article section .details header h3 {
	margin:0;
	padding:5px 8px;
	font-size:110%;
	text-transform:none;
	background-color:var(--details-bg);
	color:var(--details-color);
	-webkit-border-top-left-radius:5px;
	-moz-border-top-left-radius:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-top-right-radius:5px;
	border-top-right-radius:5px;
}
#right-panel article section .details summary {
	margin:0;
	padding:0.5em;
	border:1px solid var(--details-border);
	/*font-size:110%;*/
	/*font-family:Georgia, serif;*/
}
#right-panel article section .details ul {
	margin:0 0.5em 0 1.5em;
}
#right-panel article section .details li {
	margin-top:5px;
}
#right-panel article section .details ul > li:first {
	margin-top:0px;
}
#right-panel article section .code {
    width:100%;
}
#right-panel article section code {
	max-width:100%;
	margin-top:10px;
	display:block;
	/*white-space:nowrap; Otherwise the content will expand outside of screen */
	overflow-x:auto;
	border:1px solid #CCC;
	background-color:#f5f5f5;
	color:#333;
	text-align:left;
	font-size:95%;
	
	/* Tab size */
	-moz-tab-size:16;
	-o-tab-size:16;
	tab-size:16;
}
#right-panel article section a:not(.btn) {
	color:var(--link-color);
	cursor:pointer;
}
#right-panel article section a:hover:not(.btn) {
	color:var(--link-color);
}
#right-panel article section img {
	max-width:100%;
	display:block;
	margin:10px auto;
}
#right-panel article section img:hover {
	/*-webkit-transform-origin:center 80%;
	-moz-transform-origin:center 80%;
	-o-transform-origin:center 80%;
	transform-origin:center 80%;
	
	-webkit-transition:-webkit-transform 0.4s;
	-moz-transition:-moz-transform 0.4s;
	-o-transition:-o-transform 0.4s;
	transition:transform 0.4s;
	
	-webkit-transform:scale(1.5);  
	-moz-transform:scale(1.5);  
	-ms-transform:scale(1.5);  
	-o-transform:scale(1.5);  
	transform:scale(1.5);
	
	z-index:1000; */
}
/*
@media screen and (max-device-width: 1024px) {
	#right-panel article section img:hover {
		-webkit-transform-origin:none;
		-moz-transform-origin:none;
		-o-transform-origin:none;
		transform-origin:none;
	
		-webkit-transition:none;
		-moz-transition:none;
		-o-transition:none;
		transition:none;
	    	
		-webkit-transform:none;  
		-moz-transform:none;  
		-ms-transform:none;  
		-o-transform:none;  
		transform:none;  
	}
}*/

#right-panel article#ptl section table .bg-success {
    background-color:#d5e3e4 !important;
}

@media (min-width: 950px) {
    #right-panel article table {
        white-space:normal;
    }
}
@media (max-width: 575px) {
    #right-panel article section {
        padding-left:0 !important;
        padding-right:0 !important;
    }
    #right-panel article section section {
        padding-left:.5rem !important;
        padding-right:.5rem !important;
    }
    #right-panel ul,
      #right-panel ol {
        margin-left:.5em;
    }
}

/* Right Panel - Video */
#right-panel .sections {
    font-size:9pt;
}
#right-panel .sections .list {
    margin-left:20px;
}
#right-panel .sections .list li {
    list-style:disc;
}
#right-panel .sections article {
    padding:0;
    margin-bottom:10px;
}
#right-panel .sections article:not(.open) {
	border-bottom:1px solid var(--details-border);
}
#right-panel .sections article header {
    margin:0;
	padding:15px 10px;
	border:0;
	cursor:pointer;
}
#right-panel .sections article section header {
    padding:10px;
}
#right-panel .sections article header i {
	float: right;
	margin: -10px 10px 0 0;
	color:var(--icon-color);
}
#right-panel .sections article header span {
	color:var(--icon-color);
}
#right-panel .sections article header h3 {
	margin:0;
	padding:0;
	font-size:100%;
	text-transform:none;
}
#right-panel .sections .open > header > .fa-chevron-down:before {
	content:"\f077";
}
#right-panel .sections article section,
  #right-panel .sections article summary {
	display:none;
}
#right-panel .sections article > section {
	margin:0;
	padding:0 20px 20px;
	border-radius:2px;
	text-align:left;
	display:none;
}
#right-panel .sections article.open {
	border:1px solid var(--details-border);
}
#right-panel .sections .open > section {
    display:block;
}
#right-panel .sections .open > summary {
    padding:0 20px 20px;
    display:block;
}
#right-panel .sections .open > section > .videos {
    margin:0 0 -10px;
}
#right-panel .sections .open > section > .videos > li {
    margin:0;
    list-style:none;
}
#right-panel .sections .open > section > .videos > li:not(:last-child) {
    border-bottom:1px solid var(--details-border);
}
#right-panel .sections .open > section > .videos > li:only-child {
    margin-bottom:10px;
    border-bottom:1px solid var(--details-border);
}
#right-panel .sections .open > section > .videos > li.open {
    border:1px solid var(--details-border);
}
#right-panel .sections .open > section > .videos > li.open + li.open:not(:first-child) {
    margin-top:10px;
}
#right-panel .sections .open > section > .videos > li.open > section {
    padding:0 20px 20px;
}
#right-panel .sections article section iframe,
  #right-panel .sections article summary iframe {
	width:100%;
	width:calc(100% - 10px);
	margin:10px 5px 0;
}

/* Modal video */
.modal-video .modal-dialog {
  max-width: 100% !important;
  height: 100% !important;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.modal-video .close-mo-icon {
  font-size: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1250;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  cursor: pointer;
}
.modal-video .close-mo-icon:hover {
  color:#fff;
}

.modal-video .wrap-video-mo {
  width: 854px;
  height: auto;
  position: relative;
  margin: 15px;
}
.modal-video .video-mo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
}
.modal-video .video-mo iframe {
  width: 100%;
  height: 100%;
}

/* Contact Popup */
.modal-contact .modal-header .close-mo-icon {
    line-height:30px;
    font-size:50px;
    cursor:pointer;
}
.modal-contact .modal-header .modal-title {
	padding-right:30px;
    font-size:110%;
}