/*
|--------------------
| 	  DEBUG TOOL
|--------------------
*/
/*
|
| Variables
|------------
*/
/*
|
| Debug Tool
|-------------
*/
#debug-tool {
  position: fixed;
  z-index: 10000;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background-color: #fff;
  font-size: 12px;
  font-family: "arial";
  font-style: normal;
  color: #222222;
  /*
  |
  | States
  |---------
  */
}
#debug-tool.closed {
  width: 100%;
  height: 36px;
}
#debug-tool.expanded {
  width: 100%;
  height: 100vh;
}
#debug-tool.expanded .btn-retract {
  display: none !important;
}
#debug-tool.expanded .btn-expand {
  background-color: #dc3545 !important;
}
#debug-tool.retracted {
  width: 36px;
  height: 36px;
}
#debug-tool.retracted .btn-expand {
  display: none !important;
}
#debug-tool.retracted .btn-retract {
  background-color: #5e976d !important;
}
#debug-tool {
  /*
  |
  | Toolbar
  |----------
  */
}
#debug-tool .toolbar {
  position: relative;
  background-color: #222222;
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: space-between;
}
#debug-tool .toolbar .btn-toolbar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}
#debug-tool .toolbar .shortcuts .btn-expand {
  background-color: #5e976d;
  width: 36px;
}
#debug-tool .toolbar .btn-retract {
  background-color: #dc3545;
  width: 36px;
}
#debug-tool {
  /*
  |
  | Body
  |-------
  */
}
#debug-tool .body {
  /*
  |
  | Header
  |---------
  */
}
#debug-tool .body .header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: #5e976d;
  color: #fff;
}
#debug-tool .body {
  /*
  |
  | Content
  |---------
  */
}
#debug-tool .body .content {
  position: relative;
  top: 0;
  height: calc(100vh - (36px + 80px));
  /*
  |
  | Nav
  |---------
  */
}
#debug-tool .body .content nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #222222;
}
#debug-tool .body .content nav ul li a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  color: #aeaeae;
  font-size: 16px;
}
#debug-tool .body .content nav ul li a.active, #debug-tool .body .content nav ul li a:hover {
  background-color: rgb(59.5, 59.5, 59.5);
}
#debug-tool .body .content nav ul li a i {
  color: #aeaeae;
}
#debug-tool .body .content nav ul li a svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
#debug-tool .body .content nav ul li a span {
  padding-left: 35px;
  font-size: 14px;
  margin-left: 10px;
}
#debug-tool .body .content {
  /*
  |
  | Core
  |---------
  */
}
#debug-tool .body .content .core {
  position: absolute;
  top: 0;
  left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  overflow: auto;
  padding: 15px;
}
#debug-tool .body .content .core .toggle-content {
  display: none;
}
#debug-tool .body .content .core .toggle-content.active {
  display: block;
}
#debug-tool ul.debug-list {
  position: relative;
}
#debug-tool ul.debug-list li {
  position: relative;
  padding: 10px 0px 10px 30px;
}
#debug-tool ul.debug-list li:first-child:after {
  top: 50%;
  height: 50%;
}
#debug-tool ul.debug-list li:last-child:after {
  height: 50%;
}
#debug-tool ul.debug-list li:after, #debug-tool ul.debug-list li:before {
  content: "";
  position: absolute;
  left: 0;
}
#debug-tool ul.debug-list li:after {
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #222222;
}
#debug-tool ul.debug-list li:before {
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  background-color: #222222;
}
#debug-tool .debug-table {
  width: 100%;
}
#debug-tool .debug-table tr, #debug-tool .debug-table th, #debug-tool .debug-table td {
  border: 1px solid #E5E5E5;
}
#debug-tool .debug-table th, #debug-tool .debug-table td {
  padding: 10px 15px;
}
#debug-tool pre.sf-dump:focus, #debug-tool pre.sf-dump .sf-dump-default:focus {
  outline: none;
}
#debug-tool {
  /*
  |
  | Generate classes
  |-------------------
  |
  */
}
#debug-tool .color-red {
  color: #dc3545;
}
#debug-tool .bg-red {
  background-color: #dc3545;
}
#debug-tool .color-green {
  color: #5e976d;
}
#debug-tool .bg-green {
  background-color: #5e976d;
}
#debug-tool .color-blue {
  color: #007bff;
}
#debug-tool .bg-blue {
  background-color: #007bff;
}
#debug-tool .color-almost-white {
  color: #f2F2F2;
}
#debug-tool .bg-almost-white {
  background-color: #f2F2F2;
}
#debug-tool .color-very-light-grey {
  color: #E5E5E5;
}
#debug-tool .bg-very-light-grey {
  background-color: #E5E5E5;
}
#debug-tool .color-light-grey {
  color: #aeaeae;
}
#debug-tool .bg-light-grey {
  background-color: #aeaeae;
}
#debug-tool .color-dark-grey {
  color: #222222;
}
#debug-tool .bg-dark-grey {
  background-color: #222222;
}
#debug-tool .font-xs {
  font-size: 12px !important;
}
#debug-tool .font-sm {
  font-size: 14px !important;
}
#debug-tool .font-md {
  font-size: 16px !important;
}
#debug-tool .font-lg {
  font-size: 18px !important;
}
#debug-tool .font-xl {
  font-size: 20px !important;
}
#debug-tool .bold {
  font-weight: 600;
}
#debug-tool .regular {
  font-weight: 400;
}
#debug-tool {
  /*
  |
  | Text Transform
  |----------------------------
  |
  */
}
#debug-tool .tt-u {
  text-transform: uppercase !important;
}
#debug-tool .tt-l {
  text-transform: lowercase !important;
}
#debug-tool .tt-c {
  text-transform: capitalize !important;
}
#debug-tool {
  /*
  |
  | Underline
  |------------
  |
  */
}
#debug-tool .td-u {
  text-decoration: underline !important;
}
#debug-tool .td-n {
  text-decoration: none !important;
}
#debug-tool {
  /*
  |
  | Font styles
  |--------------
  |
  */
}
#debug-tool .fs-i {
  font-style: italic !important;
}
#debug-tool .fs-o {
  font-style: oblique !important;
}
#debug-tool .fs-n {
  font-style: normal !important;
}
#debug-tool {
  /*
  |
  | Background
  |-------------
  |
  */
}
#debug-tool .bg-cover {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
#debug-tool {
  /*
  |
  | Overflows
  |-------------
  |
  */
}
#debug-tool .o-v {
  overflow: visible !important;
}
#debug-tool .ox-v {
  overflow-x: visible !important;
}
#debug-tool .oy-v {
  overflow-y: visible !important;
}
#debug-tool .o-h {
  overflow: hidden !important;
}
#debug-tool .ox-h {
  overflow-x: hidden !important;
}
#debug-tool .oy-h {
  overflow-y: hidden !important;
}
#debug-tool {
  /*
  |
  | Positions
  |-------------
  |
  */
}
#debug-tool .p-r {
  position: relative !important;
}
#debug-tool .p-a {
  position: absolute !important;
}
#debug-tool {
  /*
  |
  | Flex Alignment
  |-----------------
  |
  */
}
#debug-tool .ai-start {
  align-items: flex-start;
}
#debug-tool .ai-end {
  align-items: flex-end;
}
#debug-tool .ai-center {
  align-items: center;
}
#debug-tool .ai-baseline {
  align-items: baseline;
}
#debug-tool .ai-stretch {
  align-items: stretch;
}
#debug-tool {
  /*
  |
  | Displays
  |---------------
  |
  */
}
#debug-tool .d-i {
  display: inline;
}
#debug-tool .d-ib {
  display: inline-block;
}
#debug-tool .d-b {
  display: block;
}
#debug-tool .d-f {
  display: flex;
}
#debug-tool {
  /*
  |
  | Flex Justify
  |---------------
  |
  */
}
#debug-tool .jc-start {
  justify-content: flex-start;
}
#debug-tool .jc-end {
  justify-content: flex-end;
}
#debug-tool .jc-center {
  justify-content: center;
}
#debug-tool .jc-between {
  justify-content: space-between;
}
#debug-tool .jc-around {
  justify-content: space-around;
}
#debug-tool {
  /*
  |
  | Margins & Paddings Maps
  |--------------------------
  |
  */
  /*
  |
  | Margins & Paddings
  |-----------------------
  |
  */
}
#debug-tool .m-0 {
  margin: 0 !important;
}
#debug-tool .mt-0 {
  margin-top: 0 !important;
}
#debug-tool .mb-0 {
  margin-bottom: 0 !important;
}
#debug-tool .my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#debug-tool .ml-0 {
  margin-left: 0 !important;
}
#debug-tool .mr-0 {
  margin-right: 0 !important;
}
#debug-tool .mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#debug-tool .p-0 {
  padding: 0 !important;
}
#debug-tool .pt-0 {
  padding-top: 0 !important;
}
#debug-tool .pb-0 {
  padding-bottom: 0 !important;
}
#debug-tool .py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#debug-tool .pl-0 {
  padding-left: 0 !important;
}
#debug-tool .pr-0 {
  padding-right: 0 !important;
}
#debug-tool .px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#debug-tool .m-xs {
  margin: 5px !important;
}
#debug-tool .mt-xs {
  margin-top: 5px !important;
}
#debug-tool .mb-xs {
  margin-bottom: 5px !important;
}
#debug-tool .my-xs {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
#debug-tool .ml-xs {
  margin-left: 5px !important;
}
#debug-tool .mr-xs {
  margin-right: 5px !important;
}
#debug-tool .mx-xs {
  margin-left: 5px !important;
  margin-right: 5px !important;
}
#debug-tool .p-xs {
  padding: 5px !important;
}
#debug-tool .pt-xs {
  padding-top: 5px !important;
}
#debug-tool .pb-xs {
  padding-bottom: 5px !important;
}
#debug-tool .py-xs {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
#debug-tool .pl-xs {
  padding-left: 5px !important;
}
#debug-tool .pr-xs {
  padding-right: 5px !important;
}
#debug-tool .px-xs {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
#debug-tool .m-sm {
  margin: 15px !important;
}
#debug-tool .mt-sm {
  margin-top: 15px !important;
}
#debug-tool .mb-sm {
  margin-bottom: 15px !important;
}
#debug-tool .my-sm {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
#debug-tool .ml-sm {
  margin-left: 15px !important;
}
#debug-tool .mr-sm {
  margin-right: 15px !important;
}
#debug-tool .mx-sm {
  margin-left: 15px !important;
  margin-right: 15px !important;
}
#debug-tool .p-sm {
  padding: 15px !important;
}
#debug-tool .pt-sm {
  padding-top: 15px !important;
}
#debug-tool .pb-sm {
  padding-bottom: 15px !important;
}
#debug-tool .py-sm {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
#debug-tool .pl-sm {
  padding-left: 15px !important;
}
#debug-tool .pr-sm {
  padding-right: 15px !important;
}
#debug-tool .px-sm {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
#debug-tool .m-md {
  margin: 30px !important;
}
#debug-tool .mt-md {
  margin-top: 30px !important;
}
#debug-tool .mb-md {
  margin-bottom: 30px !important;
}
#debug-tool .my-md {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
#debug-tool .ml-md {
  margin-left: 30px !important;
}
#debug-tool .mr-md {
  margin-right: 30px !important;
}
#debug-tool .mx-md {
  margin-left: 30px !important;
  margin-right: 30px !important;
}
#debug-tool .p-md {
  padding: 30px !important;
}
#debug-tool .pt-md {
  padding-top: 30px !important;
}
#debug-tool .pb-md {
  padding-bottom: 30px !important;
}
#debug-tool .py-md {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
#debug-tool .pl-md {
  padding-left: 30px !important;
}
#debug-tool .pr-md {
  padding-right: 30px !important;
}
#debug-tool .px-md {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
#debug-tool .m-lg {
  margin: 50px !important;
}
#debug-tool .mt-lg {
  margin-top: 50px !important;
}
#debug-tool .mb-lg {
  margin-bottom: 50px !important;
}
#debug-tool .my-lg {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}
#debug-tool .ml-lg {
  margin-left: 50px !important;
}
#debug-tool .mr-lg {
  margin-right: 50px !important;
}
#debug-tool .mx-lg {
  margin-left: 50px !important;
  margin-right: 50px !important;
}
#debug-tool .p-lg {
  padding: 50px !important;
}
#debug-tool .pt-lg {
  padding-top: 50px !important;
}
#debug-tool .pb-lg {
  padding-bottom: 50px !important;
}
#debug-tool .py-lg {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
#debug-tool .pl-lg {
  padding-left: 50px !important;
}
#debug-tool .pr-lg {
  padding-right: 50px !important;
}
#debug-tool .px-lg {
  padding-left: 50px !important;
  padding-right: 50px !important;
}
#debug-tool .m-xl {
  margin: 70px !important;
}
#debug-tool .mt-xl {
  margin-top: 70px !important;
}
#debug-tool .mb-xl {
  margin-bottom: 70px !important;
}
#debug-tool .my-xl {
  margin-top: 70px !important;
  margin-bottom: 70px !important;
}
#debug-tool .ml-xl {
  margin-left: 70px !important;
}
#debug-tool .mr-xl {
  margin-right: 70px !important;
}
#debug-tool .mx-xl {
  margin-left: 70px !important;
  margin-right: 70px !important;
}
#debug-tool .p-xl {
  padding: 70px !important;
}
#debug-tool .pt-xl {
  padding-top: 70px !important;
}
#debug-tool .pb-xl {
  padding-bottom: 70px !important;
}
#debug-tool .py-xl {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}
#debug-tool .pl-xl {
  padding-left: 70px !important;
}
#debug-tool .pr-xl {
  padding-right: 70px !important;
}
#debug-tool .px-xl {
  padding-left: 70px !important;
  padding-right: 70px !important;
}
#debug-tool .m-xxl {
  margin: 140px !important;
}
#debug-tool .mt-xxl {
  margin-top: 140px !important;
}
#debug-tool .mb-xxl {
  margin-bottom: 140px !important;
}
#debug-tool .my-xxl {
  margin-top: 140px !important;
  margin-bottom: 140px !important;
}
#debug-tool .ml-xxl {
  margin-left: 140px !important;
}
#debug-tool .mr-xxl {
  margin-right: 140px !important;
}
#debug-tool .mx-xxl {
  margin-left: 140px !important;
  margin-right: 140px !important;
}
#debug-tool .p-xxl {
  padding: 140px !important;
}
#debug-tool .pt-xxl {
  padding-top: 140px !important;
}
#debug-tool .pb-xxl {
  padding-bottom: 140px !important;
}
#debug-tool .py-xxl {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}
#debug-tool .pl-xxl {
  padding-left: 140px !important;
}
#debug-tool .pr-xxl {
  padding-right: 140px !important;
}
#debug-tool .px-xxl {
  padding-left: 140px !important;
  padding-right: 140px !important;
}

/*# sourceMappingURL=debug_tool.css.map*/