Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en" class="app">
<section class="vbox">
  <header class="bg-white header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside-md  ">
      <a class="btn btn-link visible-xs pull-left" data-toggle="class:nav-off-screen,open" data-target="#nav,html"> <i class="fa fa-bars text-white text-sm"></i> </a>
    </div>
    <ul class="nav navbar-nav hidden-xs">
      <li> <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="voyager-tooltip" title="Toggle Menu"> <i class="fa fa-indent text"></i> <i class="fa fa-dedent text-active"></i> </a> </li>
    </ul>
    <div class="navbar-right ">

    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <aside class=" aside-md hidden-print" id="nav">
        <section class="vbox">
          <section class="with-footer scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="8px" data-railOpacity="0.2">
              <nav class="nav-primary hidden-xs">

              </nav>
            </div>
          </section>
          <footer class="footer  hidden-xs no-padding text-center-nav-xs">
            <div class="bg hidden-xs "> </div>
          </footer>
        </section>
      </aside>
      <section id="content">
        <section class="vbox">
          <section class="with-footer">
            <section class="hbox stretch">
              <section>
                <section class="vbox">
                  <section class="scrollable">
                    <div class="dash cards trsp">
                      <div class="cards-item x3">
                        <div class="card padding20">
                          <div class="padding0">
                            <table id="survey" class="table nowrap" cellspacing="0" width="100%">
                              <thead>
                                <tr>
                                  <th>Name</th>
                                  <th>Email</th>
                                  <th>Department</th>
                                  <th>Survey Name</th>
                                  <th>Version</th>
                                  <th>Response</th>
                                  <th>Timestamp</th>
                                  <th>User Status</th>
                                  <th>Retargeted</th>
                                  <th>Sub-group</th>
                                  <th>Time Spent</th>
                                  <th>User Type</th>
                                  <th>Collective Name</th>
                                  <th>OU</th>
                                  <th>Domain</th>
                                  <th>MetaEngage</th>
                                  <th>Campaign Name</th>
                                  <th>Custom Attributes</th>
                                  <th>Supervisor</th>
                                  <th>Supervisor Manager</th>
                                  <th>SCIM Street Address</th>
                                  <th>SCIM Group</th>
                                  <th>SCIM Department</th>
                                  <th>SCIM Region</th>
                                  <th>SCIM Country</th>
                                  <th>SCIM Locality</th>
                                  <th>Enrollment Date</th>
                                  <th>Action</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                                <tr>
                                  <td>Garrett Winters</td>
                                  <td>gwinters@datatables.com</td>
                                  <td>Development</td>

                                  <td>Policy title here 2</td>
                                  <td>1.1</td>
                                  <td>I have read and understood</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-success label-dot circle margin-right5"></span>
                                    <span class="text-success">Active</span>
                                  </td>
                                  <td><span class="label label-danger state-true">Yes</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info ad">AD</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-true">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button></td>
                                </tr>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                                <tr>
                                  <td>Garrett Winters</td>
                                  <td>gwinters@datatables.com</td>
                                  <td>Development</td>

                                  <td>Policy title here 2</td>
                                  <td>1.1</td>
                                  <td>I have read and understood</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-success label-dot circle margin-right5"></span>
                                    <span class="text-success">Active</span>
                                  </td>
                                  <td><span class="label label-danger state-true">Yes</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info ad">AD</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-true">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button></td>
                                </tr>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                                <tr>
                                  <td>Garrett Winters</td>
                                  <td>gwinters@datatables.com</td>
                                  <td>Development</td>

                                  <td>Policy title here 2</td>
                                  <td>1.1</td>
                                  <td>I have read and understood</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-success label-dot circle margin-right5"></span>
                                    <span class="text-success">Active</span>
                                  </td>
                                  <td><span class="label label-danger state-true">Yes</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info ad">AD</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-true">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button></td>
                                </tr>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                                <tr>
                                  <td>Garrett Winters</td>
                                  <td>gwinters@datatables.com</td>
                                  <td>Development</td>

                                  <td>Policy title here 2</td>
                                  <td>1.1</td>
                                  <td>I have read and understood</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-success label-dot circle margin-right5"></span>
                                    <span class="text-success">Active</span>
                                  </td>
                                  <td><span class="label label-danger state-true">Yes</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info ad">AD</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-true">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button></td>
                                </tr>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                                <tr>
                                  <td>Garrett Winters</td>
                                  <td>gwinters@datatables.com</td>
                                  <td>Development</td>

                                  <td>Policy title here 2</td>
                                  <td>1.1</td>
                                  <td>I have read and understood</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-success label-dot circle margin-right5"></span>
                                    <span class="text-success">Active</span>
                                  </td>
                                  <td><span class="label label-danger state-true">Yes</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info ad">AD</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-true">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button></td>
                                </tr>
                                <tr>
                                  <td>Tiger Nixon</td>
                                  <td>tnixon@datatables.com</td>
                                  <td>Development</td>
                                  <td>Policy title here 1</td>
                                  <td>1.4</td>
                                  <td>I will comply with the access control</td>
                                  <td>13/08/2018</td>
                                  <td>
                                    <span class="label label-danger label-dot circle margin-right5"></span>
                                    <span class="text-danger"><s>Inactive</s></span>
                                  </td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-info state-info scim">SCIM</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td><span class="label label-danger state-false">No</span></td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>-</td>
                                  <td>07/06/2021</td>
                                  <td><button type="button" class="btn btn-sm btn-default border-x-2"><span class="">Retarget Policy</span></button>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>

                  </section>
                </section>
              </section>
            </section>
          </section>
          <footer class="footer text-xs">

          </footer>
        </section>
      </section>
    </section>
  </section>
</section>

</html>
              
            
!

CSS

              
                #content {
  background-color:#dde3eb;
}
body.container {
	padding: 0;
}

@media (orientation: landscape) {
html.ios7.ipad > body {
	padding-bottom: 20px;
}
}

/* ----------------------------------------------------
	NAVBAR, HEADER & FOOTER
------------------------------------------------------- */

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	border-color: transparent;
}
.navbar-fixed-top, .navbar-fixed-bottom {
	position: fixed !important;
}
.navbar-fixed-top + * {
	padding-top: 50px;
}
.navbar-fixed-top.header-md + * {
	padding-top: 60px;
}
.navbar-right {
	margin-right: 0;
	position: relative;
}
.site-links {
	padding: 17px 15px;
}
.site-links a {
	padding: 0 8px;
	border-right: 1px solid rgba(68, 79, 99, 0.5);
	position: relative;
}
.header, .footer {
	min-height: 50px;
	padding: 0 15px;
}
#content .footer {
	/* -webkit-box-shadow: 0 -1px 2px 0px rgba(68,79,99,0.25);
    -moz-box-shadow: 0 -1px 2px 0px rgba(68,79,99,0.25);
	box-shadow: 0 -1px 2px 0px rgba(68,79,99,0.25); */
	border-top: 1px solid #dde3eb;
}
.header.survey {
    /* height: 95px;
    height: 70px; */
    display: block;
    width: 100%;
    background-color: #4e499d;
    background-color: #625bc4;
}
.header.survey h2 {
    color: #fff;
	font-size: calc(1.6rem + 0.5vw);
	font-size: 2rem;
    font-weight: 400;
	text-align: center;
	margin: 10px 0;
}
.sec-header {
	display: block;
	padding:20px 20px 10px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	-moz-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	background-color: #eff1f7;
}
.with-shadow {
	-webkit-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	-moz-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
}
.header > p, .footer > p {
	margin-top: 15px;
	display: inline-block;
}
.header > .btn, .header > .btn-group, .header > .btn-toolbar, .footer > .btn, .footer > .btn-group, .footer > .btn-toolbar {
	margin-top: 10px;
}
.header > .btn-lg, .footer > .btn-lg {
	margin-top: 0;
}
.header .nav-tabs, .footer .nav-tabs {
	border: none;
	margin-left: -15px;
	margin-right: -15px;
}
.header .nav-tabs > li a, .footer .nav-tabs > li a {
	border: none !important;
	border-radius: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 20px;
}
.header .nav-tabs > li a:hover, .header .nav-tabs > li a:focus, .footer .nav-tabs > li a:hover, .footer .nav-tabs > li a:focus {
	background-color: transparent;
}
.header .nav-tabs > li.active a, .footer .nav-tabs > li.active a {
	color: #788188;
}
.header .nav-tabs > li.active a, .header .nav-tabs > li.active a:hover, .footer .nav-tabs > li.active a, .footer .nav-tabs > li.active a:hover {
	background-color: #f2f4f8;
}
.header .nav-tabs.nav-white > li.active a, .header .nav-tabs.nav-white > li.active a:hover, .footer .nav-tabs.nav-white > li.active a, .footer .nav-tabs.nav-white > li.active a:hover {
	background-color: #fff;
}
.header.navbar, .footer.navbar {
	border-radius: 0;
	border: none;
	margin-bottom: 0;
	padding: 0;
	position: relative;
}
.header.navbar {
	-webkit-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	-moz-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
	box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
}
.header.navbar {
	z-index: 500;
}
.footer.navbar {
	z-index: 1000;
}
.footer {
    background: #fff;
}

@media (min-width: 768px) {
body.container {
	-webkit-box-shadow: 0 3px 60px rgba(0,0,0,0.3);
	box-shadow: 0 3px 60px rgba(0,0,0,0.3);
	border-left: 1px solid #cbd5dd;
	border-right: 1px solid #cbd5dd;
}
.app, .app body {
	height: 100%;
	/* overflow: hidden !important; */
	overflow: auto !important;
}
.app .hbox.stretch {
	height: 100%;
}
.app .vbox > section, .app .vbox > footer {
	position: absolute;
}
.app .vbox.flex > section > section {
	overflow: auto;
}
.hbox {
	display: table;
	table-layout: fixed;
	border-spacing: 0;
	width: 100%;
}
.hbox > aside, .hbox > section {
	display: table-cell;
	vertical-align: top;
	height: 100%;
	float: none;
	-webkit-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.05);
	box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.05);
}
.hbox > aside.show, .hbox > aside.hidden-sm, .hbox > section.show, .hbox > section.hidden-sm {
	display: table-cell !important;
}
.vbox {
	display: table;
	border-spacing: 0;
	position: relative;
	height: 100%;
	width: 100%;
}
.vbox > section, .vbox > footer {
	top: 0;
	bottom: 0;
	width: 100%;
}
.vbox > header ~ section {
	top: 50px;
}
.vbox > header.header-md ~ section {
	top: 70px;
}
.vbox > section.w-f {
	bottom: 50px;
}
.vbox > section.with-footer-header {
	bottom: 103px;
}
.vbox > section.with-footer {
	bottom: 50px;
}
.vbox > section.with-buttons {
	bottom: 120px;
}
.vbox > section.with-actionBar {
	bottom: 104px;
}
.vbox > section.w-f-md {
	bottom: 50px;
}
.vbox > footer {
	top: auto;
	z-index: 498;
}
.vbox.flex > header, .vbox.flex > section, .vbox.flex > footer {
	position: inherit;
}
.vbox.flex > section {
	display: table-row;
	height: 100%;
}
.vbox.flex > section > section {
	position: relative;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}
.ie .vbox.flex > section > section {
	display: table-cell;
}
.vbox.flex > section > section > section {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.aside-xs {
	width: 60px;
}
.aside-sm {
	width: 150px;
}
.aside {
	width: 200px;
}
.aside-md {
	width: 240px;
}
.aside-lg {
	width: 300px;
}
.aside-xl {
	width: 360px;
}
.aside-25p {
	width: 25%;
}
.aside-20p {
	width: 20%;
}
.header-md {
	min-height: 70px;
}
.header-md .navbar-form {
	margin: 15px 10px 0;
	padding: 0;
}
.footer-md {
	min-height: 70px;
}
.scrollable {
	-webkit-overflow-scrolling: touch;
}
}
.scrollable {
	overflow-x: hidden;
	overflow-y: auto;
}
.no-touch .scrollable.hover {
	overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
	overflow: visible;
	overflow-y: auto;
}
.slimScrollBar {
	border-radius: 0 !important;
	background-clip: padding-box !important;
}
.slimScrollRail {
	border-radius: 0 !important;
}

@media (min-width: 768px) {
#scrollContainer {
	position: relative;
	width: 100%;
	overflow-y: scroll;
}
}
#scrollContainer {
	height: 88.5%;
}

@media print {
html, body, .hbox, .vbox {
	height: auto;
}
.vbox > section, .vbox > footer {
	position: relative;
}
}

@media (min-width: 1280px) {
.col-md-height {
	margin-bottom: -2000px;
	padding-bottom: 2000px;
}
.container-md-height {
	overflow: hidden;
}
}
/* Flex Grail Layout */
.flex-lyt footer {
    padding: 20px;
}
.flex-lyt header, .flex-lyt footer {
    background: #fff;
    padding: 0;
}
.fl-sidebar,
.fl-sidebar.grey {
	background: #fff;
	border-left: 1px solid #dde3eb;
}
.fl-sidebar.grey {
	background: #ebeff2;
}
.flex-lyt-content {
    color: #444f63;
}
.flex-lyt {
    min-height: 100vh;
    min-height: calc(100vh - 121px);
}
.flex-lyt, .flex-lyt-body {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
	flex-direction: column;
	min-height: calc(100vh - 322px);
}
.flex-lyt-content,
.flex-lyt-content.ovfw-x {
	-webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.flex-lyt-content.ovfw-x {
    overflow-x: auto;
}
/* @media (min-width: 1025px) { */
@media (min-width: 1280px) {
    .flex-lyt-sidebar-1 {
        order: -1;
    }
    .flex-lyt-body {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
        flex-direction: row;
    }
    .fl-sidebar, .sm.fl-sidebar {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 27.5em;
		-ms-flex: 0 0 27.5em;
		flex: 0 0 27.5em;
		max-width: 400px;
    }
    .sm.fl-sidebar {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 15em;
		-ms-flex: 0 0 15em;
		flex: 0 0 15em;
    }
}
.flexbox-parent {
	width: 100%;
	height: 100%;
	display: flex;
	/* flex-direction: column; */
	justify-content: flex-start;
	/* align items in Main Axis */
	align-items: stretch;
	/* align items in Cross Axis */
	align-content: stretch;
	/* Extra space in Cross Axis */
	background: #fff;
}
.flexbox-item-grow {
	flex: 1;
	/* same as flex: 1 1 auto; */
}
.fill-area {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	/* align items in Main Axis */
	align-items: stretch;
	/* align items in Cross Axis */
	align-content: stretch;
	/* Extra space in Cross Axis */
}
.fill-area-content {
	/* Needed for when the area gets squished too far and there is content that can't be displayed */
	overflow: hidden;
}
.full-height.panel-body {
	height: calc(100vh - 257px);
	overflow-y: auto;
}
.related-registers {
	padding: 0;
}
.dm-filter {
	padding: 15px 10px 30px;
}
.dm-filter label {
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 0;
}
.dm-filter h5 {
	margin-bottom: 10px;
}
.acc-menu {
	padding-bottom: 0;
	top: 49px;
}
.related-registers .panel-group .panel + .panel {
	margin-top: 0;
}
.register-list-nav {
	border-top: 1px solid #dde3eb;
	border-bottom: 1px solid #dde3eb;
}
.register-list-nav .list-group-a.list-group-root .list-group-item:first-child {
	border-top: 0;
}
/* ----------------------------------------------------
	NAVBAR
------------------------------------------------------- */

.navbar-header {
	position: relative;
}
.navbar-header > .btn {
	position: relative;
	font-size: 0.85em;
	padding: 10px 9px;
	line-height: 2.5;
	left: 0;
	text-decoration: none !important;
}
.navbar-header .navbar-brand + .btn {
	right: 0;
	top: 0;
	left: auto;
}
.navbar-brand {
	font-family: "Diavlo Medium", Arial, sans-serif;
	float: none;
	text-align: center;
	font-size: 21px;
	height: auto;
	line-height: 50px;
	display: inline-block;
	padding: 0 20px;
	color: #fff !important;
}
.navbar-brand:hover {
	text-decoration: none;
}
.navbar-brand img {
	max-height: 20px;
	margin-top: -4px;
	vertical-align: middle;
	display: inline-block;
}
.uninstalled, .vulnerable {
	position: relative;
	display: block;
	white-space: nowrap;
}
.uninstalled img {
	-webkit-filter: grayscale(1);
}
.vulerable img {
	-webkit-filter: grayscale(1);
}
.vulnerable:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(190,15,52, 0.6);
	border: 1px solid #be0f34;
}
.nav-primary li > a > i {
	margin: -10px -10px;
	line-height: 38px;
	width: 30px;
	float: left;
	margin-right: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.nav-primary li > a > i:before {
	position: relative;
	z-index: 2;
}
.nav-primary ul.nav > li > a {
	padding: 13px 15px 14px;
	position: relative;
	-webkit-transition: background-color .2s ease-in-out 0s;
	transition: background-color .2s ease-in-out 0s;
	font-size: 12px;
}
.nav-primary ul.nav.nav-children > li > a {
	padding: 10px 15px 10px 36px !important;
	line-height: 21px;
	overflow: hidden;
}
.nav-primary ul.nav.nav-children .nav-children > li > a {
	padding: 15px 15px 15px 46px;
	overflow: hidden;
}
.nav-primary ul.nav.nav-children .nav-children .nav-children > li > a {
	padding: 15px 15px 15px 56px;
	overflow: hidden;
}
.nav-primary ul.nav.nav-children .nav-children .nav-children .nav-children > li > a {
	padding: 15px 15px 15px 66px;
	overflow: hidden;
}
.no-borders .nav-primary ul.nav > li > a {
	border-width: 0 !important;
}
.nav-primary ul.nav > li > a > .badge {
	font-size: 11px;
	padding: 2px 5px 2px 4px;
	margin-top: 2px;
}
.nav-primary ul.nav > li > a > .text-muted {
	margin: 0 3px;
}
.nav-primary ul.nav > li > a.active .text {
	display: none;
}
.nav-primary ul.nav > li > a.active .text-active {
	display: inline-block !important;
}
.nav-primary ul.nav > li li a {
	font-weight: normal;
	text-transform: none;
}
.nav-primary ul.nav > li.active > ul {
	display: block;
}
.nav-primary ul.nav ul {
	display: none;
}

@media (min-width: 768px) {
.visible-nav-xs {
	display: none;
}
.nav-xs {
	width: 65px;
}
.nav-xs .nav-primary ul.nav.nav-children > li > a {
	padding: 13px 15px 14px;
}
.nav-xs .nav-primary ul.nav.nav-children .nav-children > li > a {
	padding: 13px 15px 14px;
}
.nav-xs .nav-primary ul.nav.nav-children .nav-children .nav-children .nav-children > li > a {
	padding: 13px 15px 14px;
}
.nav-xs .slimScrollDiv, .nav-xs .slim-scroll {
	overflow: visible !important;
}
.nav-xs .slimScrollBar, .nav-xs .slimScrollRail {
	display: none !important;
}
.nav-xs .scrollable {
	overflow: visible;
}
.nav-xs .nav-primary > ul > li > a {
	position: relative;
	padding: 10px 0;
	font-size: 12px;
	text-align: center;
	overflow-y: hidden;
	border: none;
}
.nav-xs .nav-primary > ul > li > a span {
	vertical-align: middle;
	height: 10px;
	width: 85px;
	display: none;
}
.nav-xs .nav-primary > ul > li > a span.pull-right {
	display: none !important;
}
.nav-xs .nav-primary > ul > li > a i {
	width: auto;
	float: none;
	display: block;
	font-size: 17px;
	margin: 0;
	line-height: 1.4;
	border: none !important;
	-webkit-transition: margin-top 0.2s;
	transition: margin-top 0.2s;
}
.nav-xs .nav-primary > ul > li > a i b {
	left: 0 !important;
}
.nav-xs .nav-primary > ul > li > a .badge {
	position: absolute;
	right: 10px;
	top: 4px;
	z-index: 3;
}
.nav-xs .nav-primary > ul > li:hover > a i, .nav-xs .nav-primary > ul > li:focus > a i, .nav-xs .nav-primary > ul > li:active > a i, .nav-xs .nav-primary > ul > li.active > a i {
	margin-top: 0px;
}
.nav-xs .nav-primary > ul ul {
	display: none !important;
	position: absolute;
	left: 100%;
	top: 0;
	z-index: 1050;
	width: 230px;
}
.nav-xs .nav-primary li:hover > ul, .nav-xs .nav-primary li:focus > ul, .nav-xs .nav-primary li:active > ul {
	display: block !important;
}
.nav-xs.nav-xs-right .nav-primary > ul ul {
	left: auto;
	right: 100%;
}
.nav-xs > .vbox > .header, .nav-xs > .vbox > .footer {
	padding: 0 20px;
}
.nav-xs .hidden-nav-xs {
	display: none;
}
.nav-xs .visible-nav-xs {
	display: inherit;
}
.nav-xs .text-center-nav-xs {
	text-align: center;
}
.nav-xs .nav-user {
	padding-left: 0;
	padding-right: 0;
}
.nav-xs .nav-user .avatar {
	float: none !important;
	margin-right: 0;
}
.nav-xs .nav-user .dropdown > a {
	display: block;
	text-align: center;
}
.nav-xs .nav-notification {
	padding-left: 0;
	padding-right: 0;
}
.nav-xs .nav-notification .avatar {
	float: none !important;
	margin-right: 0;
}
.nav-xs .nav-notification .dropdown > a {
	display: block;
	text-align: center;
}
.nav-xs .nav-search {
	padding-left: 0;
	padding-right: 0;
}
.nav-xs .nav-search .avatar {
	float: none !important;
	margin-right: 0;
}
.nav-xs .nav-search .dropdown > a {
	display: block;
	text-align: center;
}
.nav-xs .navbar-header {
	float: none;
}
.nav-xs .navbar-brand {
	display: block;
	padding: 0;
}
.nav-xs .navbar-brand img {
	margin-right: 0;
}
.nav-xs .navbar {
	padding: 0;
}
.header-md .navbar-brand, .footer-md .navbar-brand {
	line-height: 71px;
}
.header-md .navbar-brand img, .footer-md .navbar-brand img {
	max-height: 40px;
}
.header-md .navbar-nav > li > a, .footer-md .navbar-brand > li > a {
	padding: 25px;
}
.navbar-brand img {
	height: 100%;
}
.nav > li > a:focus, .nav > li > a:hover {
	text-decoration: underline;
	background-color: #ebeff2;
}
}

@media (max-width: 767px) {
.navbar-fixed-top-xs {
	position: fixed !important;
	left: 0;
	width: 100%;
	z-index: 1100;
}
.navbar-fixed-top-xs + * {
	padding-top: 50px !important;
}
.nav-bar-fixed-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1100;
}
.header-fixed-top-xs {
	position: fixed !important;
	left: 0;
	width: 100%;
	z-index: 1100;
}
html, body {
	overflow-x: hidden;
	min-height: 100%;
}
.open, .open body {
	height: auto;
}
.nav-primary .dropdown-menu {
	position: relative;
	float: none;
	left: 0;
	margin-left: 0;
	padding: 0;
}
.nav-primary .dropdown-menu a {
	padding: 15px;
	border-bottom: 1px solid #eee;
}
.nav-primary .dropdown-menu li:last-child a {
	border-bottom: none;
}
.navbar-header {
	text-align: center;
}
.nav-user, .nav-notification, .nav-search {
	margin: 0;
}
.nav-user.open, .nav-notification.open, .nav-search.open {
	display: inherit !important;
}
.nav-user .dropdown-menu, .nav-notification .dropdown-menu, .nav-search .dropdown-menu {
	display: block;
	position: static;
	float: none;
}
.nav-user .dropdown > a, .nav-notification .dropdown > a, .nav-search.dropdown > a {
	display: none;
}
.nav-user .avatar, .nav-notification .avatar, .nav-search .avatar {
	width: 120px !important;
	float: none !important;
	display: block;
	margin: 0 auto 5px;
	padding: 5px;
	background-color: #fff;
	position: relative;
}
.nav-user .avatar:before, .nav-notification .avatar:before, .nav-search.avatar:before {
	content: "";
	position: absolute;
	left: 5px;
	right: 5px;
	bottom: 5px;
	top: 5px;
	border: 4px solid #fff;
	border-radius: 500px;
}
.nav-off-screen {
	display: block !important;
	position: absolute;
	left: 0;
	top: 0px;
	bottom: 0;
	width: 75%;
	visibility: visible;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.nav-off-screen .nav-primary {
	display: block !important;
}
.nav-off-screen .navbar-fixed-top-xs {
	width: 75%;
}
.nav-off-screen.push-right .navbar-fixed-top-xs {
	left: 25%;
}
.nav-off-screen.push-right {
	left: auto;
	right: 0;
}
.nav-off-screen.push-right + * {
	-webkit-transform: translate3d(-75%, 0px, 0px);
	transform: translate3d(-75%, 0px, 0px);
}
.nav-off-screen + * {
	background-color: #f2f4f8;
	-webkit-transition: -webkit-transform 0.2s ease-in-out;
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(75%, 0px, 0px);
	transform: translate3d(75%, 0px, 0px);
	overflow: hidden;
	position: absolute;
	width: 100%;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.nav-off-screen + * .nav-off-screen-block {
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1950;
}
.navbar + section .nav-off-screen {
	top: 50px;
	z-index: 1950;
}
.navbar + section .nav-off-screen + * {
	top: 50px;
}
.slimScrollDiv, .slim-scroll {
	overflow: visible !important;
	height: auto !important;
}
.slimScrollBar, .slimScrollRail {
	display: none !important;
}
}
.cards,
.cards.trsp,
.directory.cards,
.image.cards,
.dash.cards,
.reporting.cards,
.help.cards,
.ghost .cards {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 1rem;
    background-color: #eef1f5;
}
.cards.trsp {
    background-color: transparent;
}
.help.cards,
.ghost .cards {
    padding: 0;
    background-color: transparent;
}
.image.cards {
    border-radius: 1rem;
}
.directory.cards {
    margin-left: 3rem;
}
/* .cards {
    padding: 1rem 0;
} */
.cards .cards-item,
.directory.cards .cards-item,
.dash.cards .cards-item,
.dash.cards .cards-item.x2,
.reporting.cards .cards-item,
.reporting.cards .cards-item.x2 {
    display: flex;
    padding: 1.5rem 1rem;
    width: 100%;
    padding: 1rem;
}
.cards .cards-item .card,
.carousel-item .card,
.directory.cards .cards-item .card,
.dash.cards .cards-item .card,
.reporting.cards .cards-item .card {
    background-color: white;
    -webkit-box-shadow: 0px 10px 20px -9px rgba(68, 79, 99, 0.55);
    -moz-box-shadow: 0px 10px 20px -9px rgba(68, 79, 99, 0.55);
    box-shadow: 0px 10px 20px -9px rgba(68, 79, 99, 0.55);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    width: 100%;
    border-radius: .8rem;
}
.ghost .cards .cards-item .card {
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.phish.cards .cards-item .card {
    border-radius: 1.5rem;
} 
.cards .cards-item .card,
.carousel-item .card,
.directory.cards .cards-item .card {
    padding: 0.5rem;
    position: relative;
}
.carousel-item .card,
.directory.cards .cards-item .card {
    max-height: 316px;
    max-height: 340px;
    max-height: 325px;
}
.help.cards .cards-item .card,
.ghost .cards .cards-item .card {
    padding: 3rem 1.5rem;
}
.cards .cards-item .card .card-img,
.image.cards .cards-item .card .card-img,
.carousel-item .card .card-img,
.directory.cards .cards-item .card .card-img,
.learn-exp.cards .cards-item .card .card-img,
.ghost .cards .cards-item .card .card-img {
    position: relative;
    margin-bottom: .6rem;
    border-radius: .6rem;
    width: 100%;
    height: 100%;
    height: 130px;
    min-height: 130px;
    overflow: hidden;
} 
/* .learn-exp.cards .cards-item .card .card-img {
    -webkit-filter: contrast(70%);
    filter: contrast(70%);
}  */
.learn-exp.cards .cards-item .card .card-img .overlay {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    background: rgb(68 79 99 / 0.3);
    transition: background 0.5s ease;
    z-index: 2;
  }
  
.learn-exp.cards .cards-item .card .card-img:hover .overlay {
    display: block;
    background: rgb(68 79 99 / 0.6);
  }
.ghost .cards .cards-item .card .card-img {
    height: 150px;
    min-height: 150px;
} 
.ghost .cards .cards-item .card .card-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
} 
.cards .cards-item .card .card-img {
    height: auto;
    min-height: auto;
} 
.phish.cards .cards-item .card .card-img {
    border-radius: 1.2rem;
} 
.phish.cards .cards-item .card .card-img img {
    border-radius: 0.6rem;
    margin: 0 auto;
} 
.directory.cards .cards-item .card .card-img div,
.learn-exp.cards .cards-item .card .card-img div,
.carousel-item .card .card-img div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
}
.card-img div .preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 3;
}
.directory.cards .cards-item .card .card-img img,
.learn-exp.cards .cards-item .card .card-img img,
.carousel-item .card .card-img img {
    /* display: block; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
}
.directory.cards .cards-item .card .card-img img,
.learn-exp.cards .cards-item .card .card-img img,
.carousel-item .card .card-img img {
    z-index: 1;
    width: 100%;
}
.phish.cards .cards-item .card .card-img,
.image.cards .cards-item .card .card-img {
    max-height: 100%;
    height: 100%;
} 
.phish.cards .cards-item .card .card-img {
    margin-bottom: 0;
    background-color: #eaedf1;
    padding: 5px;
}
.cards .cards-item .card .card-img .mg-thumb-options,
.directory.cards .cards-item .card .card-img .mg-thumb-options {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-zoom,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-zoom {
    position: absolute;
    top: 0;
    right: 0;
    padding: .5rem 1.5rem 1rem;
    font-size: 2.2rem;
    color: #fff;
    background-color: #cccccc;
    border-radius: 0 0 0 1.5rem;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.1s linear 0.1s;
    -moz-transition: -moz-transform 0.1s linear 0.1s;
    -ms-transition: -ms-transform 0.1s linear 0.1s;
    transition: transform 0.1s linear 0.1s;
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar:after,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar:after {
    content: "";
    display: table;
    clear: both;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-option,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-option {
    margin: 0;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group > a,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group > a {
    color: #fff;
    padding: 0 .5rem;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group {
    position: absolute;
    top: -2.5rem;
    right: 1.5rem;
    content: "";
    display: block;
    width: 4rem;
    height: 2.6rem;
    background-color: #fff;
    z-index: 0;
    border-radius: 1.4rem 1.4rem 0 0;
}
.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group .mg-toggle,
.directory.cards .cards-item .card .card-img .mg-thumb-options .mg-toolbar .mg-group .mg-toggle {
    position: relative;
    top: .3rem;
    left: .5rem;
}
.cards .cards-item .card:hover .card-img .mg-thumb-options,
.directory.cards .cards-item .card:hover .card-img .mg-thumb-options {
    visibility: visible;
}  
.dash.cards .cards-item .card .card-chart {
    overflow: hidden;
    position: relative;
    border-radius: .6rem;
}
.cards .cards-item .card .card-content .card-body,
.carousel-item .card .card-content .card-body,
.directory.cards .cards-item .card .card-content .card-body,
.dash.cards .cards-item .card .card-content .card-body,
.reporting.cards .cards-item .card .card-content .card-body {
    padding: 0 1rem 1.5rem;

    /* -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; */
}
.phish.cards .cards-item .card .card-content .card-body {
    padding: 1rem 1rem 2rem;
}
.cards .cards-item .card .card-content .card-footer,
.carousel-item .card .card-content .card-footer,
.directory.cards .cards-item .card .card-content .card-footer,
.dash.cards .cards-item .card .card-content .card-footer,
.reporting.cards .cards-item .card .card-content .card-footer {
    margin-top: auto;
}
.cards .cards-item .card .card-content .card-footer,
.carousel-item .card .card-content .card-footer,
.directory.cards .cards-item .card .card-content .card-footer {
    padding: 0.5rem 1rem;
}
.directory.cards .cards-item .card .card-footer,
.carousel-item .card .card-footer {
    padding: 0.5rem 1rem;
    background-color: #fff;
    margin-right: 20px;
    -webkit-box-shadow: 0px -10px 10px #ffffff;
    -moz-box-shadow: 0px -10px 10px #ffffff;
    box-shadow: 0px -10px 10px #ffffff;
    z-index: 1;
}
.phish.cards .cards-item .card .card-content .card-footer {
    padding: 0 1rem 2rem;
}
.cards .cards-item .card .card-content .card-footer .pub-date,
.cards .cards-item .card .card-footer .pub-date,
.dash.cards .cards-item .card .card-content .card-footer .pub-date,
.reporting.cards .cards-item .card .card-content .card-footer .pub-date,
.carousel-item .card .card-content .card-footer .pub-date,
.carousel-item .card .card-footer .pub-date,
.directory.dash.cards .cards-item .card .card-content .card-footer .pub-date {
    line-height: 2rem;
    color: #1b1b1b;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.015rem;
}
.cards .cards-item .card .list-group,
.carousel-item .card .list-group,
.directory.cards .cards-item .card .list-group,
.dash.cards .cards-item .card .list-group,
.reporting.cards .cards-item .card .list-group {
    margin-bottom: 0
}
.phish.cards .cards-item .card .list-group {
    margin-bottom: 1rem
}
.cards .cards-item .card .list-group-item,
.carousel-item .card .list-group-item,
.directory.cards .cards-item .card .list-group-item,
.dash.cards .cards-item .card .list-group-item,
.reporting.cards .cards-item .card .list-group-item {
    border-radius: 0;
    border-width: 0;
    padding: 0.5rem 1rem 0.5rem;
    padding: 1rem 1rem 0;
    background-color: transparent;
}
.phish.cards .cards-item .card .list-group-item {
    padding: .5rem 1rem 0;
}
.ghost .cards .cards-item .card .list-group-item {
    background-color: transparent;
    padding-top: 30px;
}
.cards .cards-item .card .list-group-item .title-name,
.carousel-item .card .list-group-item .title-name,
.directory.cards .cards-item .card .list-group-item .title-name,
.dash.cards .cards-item .card .list-group-item .title-name,
.reporting.cards .cards-item .card .list-group-item .title-name,
.phish.cards .cards-item .card .list-group-item .title-name {
    font-weight: 700;
    font-size: 1.8rem;
}
.cards .cards-item .card .list-group-item .title-name,
.carousel-item .card .list-group-item .title-name {
    padding: 1rem 0;
    padding: 0 0 1.5rem;
}
.phish.cards .cards-item .card .list-group-item .title-name {
    padding: 0;
}
.cards .cards-item .card .list-group-item .title-name a,
.carousel-item .card .list-group-item .title-name a,
.directory.cards .cards-item .card .list-group-item .title-name a,
.dash.cards .cards-item .card .list-group-item .title-name a,
.reporting.cards .cards-item .card .list-group-item .title-name a {
    color: #1b1b1b
}
.help.cards .cards-item .card .list-group-item .title-name {
    font-weight: 500;
    font-size: 2.1rem;
    padding-bottom: 0;
}
.ghost .cards .cards-item .card .list-group-item .title-name {
    font-weight: 400;
    font-size: 2rem;
}
.cards .cards-item .card .list-group-item.description,
.cards .cards-item .card .list-group-item.description .description-content,
.carousel-item .card .list-group-item.description,
.directory.cards .cards-item .card .list-group-item.description,
.dash.cards .cards-item .card .list-group-item.description,
.reporting.cards .cards-item .card .list-group-item.description,
.help.cards .cards-item .card .list-group-item.description .description-content,
.ghost .cards .cards-item .card .list-group-item.description .description-content {
    font-size: 1.2rem;
    color: #1b1b1b;
    /* font-style: italic; */
    font-weight: 500;
    letter-spacing: 0.015rem;
    background-color: transparent;
}
.help.cards .cards-item .card .list-group-item.description .description-content,
.ghost .cards .cards-item .card .list-group-item.description .description-content {
    font-size: 1.5rem;
    font-weight: 400;
}
.cards .cards-item .card .card-content,
.carousel-item .card .card-content,
.directory.cards .cards-item .card .card-content,
.dash.cards .cards-item .card .card-content,
.reporting.cards .cards-item .card .card-content {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}
.carousel-item .card .card-content,
.directory.cards .cards-item .card .card-content {
    overflow-y: auto;
    /* max-height: 160px;

    max-height: 130px; */
    /* background-color: aquamarine; */
}
.cards .cards-item .card .card-body .badge,
.carousel-item .card .card-body .badge,
.directory.cards .cards-item .card .card-body .badge,
.dash.cards .cards-item .card .card-body .badge,
.reporting.cards .cards-item .card .card-body .badge {
    background-color: #fff;
    display: inline-block;
    padding: .3rem .8rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 2rem;
    border: .2rem solid #c7cad0;
    color: #1b1b1b;
    font-size: 1.1rem;
    margin: .2rem .1rem .2rem 0;
}

.aligner,
.aligner1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 43rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}  
.aligner1 {
    min-height: 31.3rem;
}  
.aligner-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.aligner-item--fixed {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    max-width: 100%;
}
.chart-bg {
    height: 100%;
    -webkit-box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.map {
    background-image: url(../images/map.svg);
}
.bar{
    background-image: url(../images/bar-holder.svg);
}
.pie{
    background-image: url(../images/pie-holder.svg);
}
.empty{
    background-image: url(../images/empty.svg);
}
.inner {
    padding: 1rem 2rem;
}
.inner h3 {
    font-size: 2.1rem;
    font-weight: 500;
    margin-bottom: 0;
    text-align: center;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #7c8492 !important;
}
.mCSB_inside>.mCSB_container {
    margin-right: 20px !important;
}
@media (min-width: 320px) and (max-width:600px) {
    .dash.cards,
    .reporting.cards,
    .directory.cards {
        margin-left: 0;
    }
    .directory.cards .cards-item {
        width: 100%;
    }
}
@media (min-width: 601px) and (max-width:1024px) {
    .dash.cards,
    .reporting.cards,
    .directory.cards {
        margin-left: 0;
    }
    .directory.cards .cards-item {
        width: 50%;
    }
}
@media (min-width: 768px) and (max-width:1024px) {
    .cards {
        margin-left: 0;
    }
    .dash.cards .cards-item,
    .dash.cards .cards-item.x2,
    .reporting.cards .cards-item,
    .reporting.cards .cards-item.x2,
    .help.cards .cards-item,
    .ghost .cards .cards-item {
        width: 100%;
    }
    .image.cards .cards-item {
        width: 50%;
    }
    .phish.cards .cards-item {
        width: 50%;
    }
}
@media (min-width: 1025px) and (max-width:1439px) {
    .cards .cards-item,
    .phish.cards .cards-item {
        width: 50%;
    }
    .image.cards .cards-item {
        width: 33.3%;
    }
    .help.cards .cards-item,
    .ghost .cards .cards-item {
        width: 33.3%;
    }
    .help.cards .cards-item.x3,
    .ghost .cards .cards-item.x3 {
        width: 100%;
    }
    .dash.cards .cards-item,
    .reporting.cards .cards-item {
        width: 50%;
    }
    .reporting.cards .cards-item {
        width: 50%;
    }
    .reporting.cards .cards-item.half {
        width: 100%;
    }
    .directory.cards .cards-item {
        width: 33.3%;
    }
    .dash.cards .cards-item.x2,
    .reporting.cards .cards-item.x2 {
        width: 100%;
    }
    .reporting.cards .cards-item.x2 {
        width: 50%;
    }
    .cards {
        margin-left: 0;
    }
    .dash.cards .cards-item.x3,
    .reporting.cards .cards-item.x3 {
        width: 100%;
    }
}
@media(min-width: 1440px) {
    .cards .cards-item {
        width: 25%;
    }
    .help.cards .cards-item,
    .ghost .cards .cards-item {
        width: 33.3%;
    }
    .help.cards .cards-item.x3,
    .ghost .cards .cards-item.x3,
    .cards .cards-item.x3 {
        width: 100%;
    }
    .phish.cards .cards-item {
        width: 33.3%;
    }
    .dash.cards .cards-item,
    .reporting.cards .cards-item {
        width: 33.3%;
    }
    /* .reporting.cards .cards-item {
        width: 50%;
    } */
    .directory.cards .cards-item {
        width: 25%;
    }
    .dash.cards .cards-item.x2,
    .reporting.cards .cards-item.x2 {
        width: 66.6%;
    }
    .reporting.cards .cards-item.half {
        width: 50%;
    }
    .dash.cards .cards-item.x3,
    .reporting.cards .cards-item.x3 {
        width: 100%;
    }
    .cards .cards-item.half {
        width: 50%;
    }
}
@media(max-width: 768px) {
    .phish.cards .cards-item {
        width: 100%;
    }
}
@media (min-width: 320px) and (max-width:767px) {
	.col-fixed {
		position: relative;
	}
}


table.dataTable {
    color: #444f63;
    line-height: 2rem;
    clear: both;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0
}
table.dataTable td, table.dataTable th {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
    text-align: center
}
table.dataTable.nowrap td, table.dataTable.nowrap th {
    white-space: nowrap !important;
}
div.dataTables_wrapper div.dataTables_length label {
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    text-transform: capitalize;
    font-size: 1.3rem;
    letter-spacing: 0;
    color: #444f63;
}
div.dataTables_wrapper div.dataTables_filter label {
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    text-transform: capitalize;
    font-size: 1.3rem;
    letter-spacing: 0;
    color: #444f63;
    margin:0
}
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: .5rem;
    margin-bottom: 0;
    display: inline-block;
    width: auto;
    border-radius: .4rem;
    border: 2px solid #c7ccd4;
}
div.dataTables_wrapper div.dataTables_filter input::-webkit-input-placeholder {
    font-size: 1.2rem;
    font-weight: 400;
    color: #7c8492;
}
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.6rem;
    padding-bottom: 3px;
    font-size: 13px;
    font-weight: 400;
    float: right;
    display: inline-block;
    padding-right: 14px;
    border-right: 2px solid #c7ccd4;
}

/* PAGINATION */
div.dataTables_wrapper div.dataTables_paginate {
float: right;
margin: 0;
margin-left: 8px;
}
.dataTables_wrapper .pagination ul > li {
display: inline-block;
padding-left: 0px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
box-shadow: none;
font-size: 12px;
padding: 0;
margin: 0 0 1rem;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li {
    display: inline-block;
    padding-left: 0px;
    margin-left: .4rem;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a {
    padding: 5px 10px;
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.first > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.previous > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.next > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.last > a {
    background-color: #dde3eb;
    color: #7e8299;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.next.disabled > a:hover {
    color: #C2C6CB;
    opacity: 0.65;
    background-color: #ffffff;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.prev.disabled > a:hover {
    color: #C2C6CB;
    opacity: 0.65;
    background-color: #ffffff;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span {
    border: none;
    box-shadow: none;
    border-radius: 3px;
    color: #6F7B8A;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > a:focus {
    color: #c7cad0 !important;
    background-color: #ffffff !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > span {
background-color: #F3F6F9;
    font-weight: 700;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a:focus,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > span {
    background-color: #0072cf;
    color: #fff;
}
div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0
}
table.dataTable > thead > tr > td:active, table.dataTable > thead > tr > th:active {
    outline: 0
}
table.dataTable > thead > tr > td:not(.sorting_disabled), table.dataTable > thead > tr > th:not(.sorting_disabled) {
    padding-right: 30px
}
table.dataTable > thead .sorting, table.dataTable > thead .sorting_asc, table.dataTable > thead .sorting_asc_disabled, table.dataTable > thead .sorting_desc, table.dataTable > thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative
}
table.dataTable > thead .sorting:after, table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc_disabled:after, table.dataTable > thead .sorting_desc_disabled:before {
    position: absolute;
    bottom: .9em;
    display: block;
    opacity: .3
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after,
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc_disabled:before {
font-family: "Font Awesome\ 5 Free";
font-weight: bold;
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_desc_disabled:after {
right: .5em;
content: "\f309"
}
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc_disabled:before {
right: 1em;
content: "\f30c"
}

table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:after {
opacity: 1
}
table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:after {
opacity: 0
}
@media screen and (max-width:767px) {
    div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_paginate {
        text-align: right
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }
}
.dt-buttons .btn-group {
    float:right
}
.dt-buttons .buttons-collection span:after,
.dt-buttons .buttons-collection.buttons-colvis span:after {
    text-align: center;
    display: inline;
    border: 0;
    font-size: 1rem;
    line-height: 0;
    vertical-align: middle;
    position: relative;
    margin-left: 1rem;
    font-family: "Font Awesome\ 5 Free";
    content: "\f078";
    font-weight: bold;
    line-height: 1;
    text-decoration: inherit;
}
.dt-buttons .buttons-collection.buttons-colvis span:after {
    content: "";
}
@media screen and (max-width:767px) {
    div.dt-buttons {
        float: right;
        width: auto;
        margin-bottom: .5rem;
    }
    div.dt-buttons a.btn {
        float: none
    }
}
div.dt-buttons a.btn.processing, div.dt-buttons button.btn.processing, div.dt-buttons div.btn.processing {
    color: rgba(0, 0, 0, .2)
}
div.dt-buttons a.btn.processing:after, div.dt-buttons button.btn.processing:after, div.dt-buttons div.btn.processing:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    content: ' ';
    border: 2px solid #282828;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: dtb-spinner 1.5s infinite linear;
    -o-animation: dtb-spinner 1.5s infinite linear;
    -ms-animation: dtb-spinner 1.5s infinite linear;
    -webkit-animation: dtb-spinner 1.5s infinite linear;
    -moz-animation: dtb-spinner 1.5s infinite linear
}
.export-dropdown-btn div.dt-buttons {
    float: left;
}
div.dt-button-collection ul.dropdown-menu {
    min-width: 160px;
    background-color: #fff;
    border-radius: 4px;
    padding: 0;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
    -moz-box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);
    box-shadow: 0px 1px 2px 0px rgba(68,79,99,0.25);

    -webkit-box-shadow: 0 0 50px 0 rgba(68,79,99,.3);
    -moz-box-shadow: 0 0 50px 0 rgba(68,79,99,.3);
    box-shadow: 0 0 50px 0 rgba(68,79,99,.3);
}
div.dt-button-collection.two-column ul.dropdown-menu,
div.dt-button-collection.three-column ul.dropdown-menu,
div.dt-button-collection.four-column ul.dropdown-menu {
    padding: 12px;
}
div.dt-button-collection ul.dropdown-menu > li {
    border-bottom: 1px solid #dde3eb;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility {
    border: 1px solid #c7cad0;
    margin-bottom: 7px;
    border-radius: 4px;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility a {
    padding-left: 15px;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup a span i,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility a span i {
    position: absolute;
    left: 15px;
    top: 10px;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.restore a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.show-all a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.hide-all a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.active a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility.active a {
    padding-left: 35px;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.active a,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility.active a {
    color: #fff !important;
    background-color: #2e6ac1;
    border-color: #2e6ac1;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility.active a:before {
    text-align: center;
    display: inline;
    border: 0;
    font-size: 14px;
    line-height: 0;
    vertical-align: middle;
    position: relative;
    margin-right: 10px;
    font-family: "Font Awesome\ 5 Free";
    content: "\f00c";
    font-weight: bold;
    line-height: 1;
    text-decoration: inherit;

    position: absolute;
    left: 15px;
    top: 10px;
}
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-colvisGroup.active,
div.dt-button-collection ul.dropdown-menu > li.dt-button.buttons-columnVisibility.active {
    border-color: #2e6ac1;
}
div.dt-button-collection ul.dropdown-menu > li:last-of-type {
    border-bottom: 0;
}
div.dt-button-collection ul.dropdown-menu > li > a {
    color: #445a6a !important;
    font-weight: 400;
    font-size: 14px;
    padding-left: 35px;
    position: relative;
}
div.dt-button-collection ul.dropdown-menu > li > a > i {
    position: absolute;
    left: 15px;
    top: 10px;
}
div.dt-autofill-handle {
    position: absolute;
    height: 8px;
    width: 8px;
    z-index: 102;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #0275d8;
    cursor: pointer
}
div.dtk-focus-alt div.dt-autofill-handle {
    background: #ff8b33
}
div.dt-autofill-select {
    position: absolute;
    z-index: 1001;
    background-color: #0275d8;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, .5) 5px, rgba(255, 255, 255, .5) 10px)
}
div.dt-autofill-select.bottom, div.dt-autofill-select.top {
    height: 3px;
    margin-top: -1px
}
div.dt-autofill-select.left, div.dt-autofill-select.right {
    width: 3px;
    margin-left: -1px
}
div.dt-autofill-list {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    background-color: #fff;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 5px #555;
    box-shadow: 0 0 5px #555;
    border: 2px solid #444;
    z-index: 11;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1.5em 2em
}
div.dt-autofill-list ul {
    display: table;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%
}
div.dt-autofill-list ul li {
    display: table-row
}
div.dt-autofill-list ul li:last-child div.dt-autofill-button, div.dt-autofill-list ul li:last-child div.dt-autofill-question {
    border-bottom: none
}
div.dt-autofill-list ul li:hover {
    background-color: #f6f6f6
}
div.dt-autofill-list div.dt-autofill-question {
    display: table-cell;
    padding: .5em 0;
    border-bottom: 1px solid #ccc
}
div.dt-autofill-list div.dt-autofill-question input[type=number] {
    padding: 6px;
    width: 30px;
    margin: -2px 0
}
div.dt-autofill-list div.dt-autofill-button {
    display: table-cell;
    padding: .5em 0;
    border-bottom: 1px solid #ccc
}
div.dt-autofill-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .7) 100%);
    z-index: 10
}
div.dt-autofill-list div.dt-autofill-question input[type=number] {
    padding: 6px;
    width: 60px;
    margin: -2px 0
}
table.DTCR_clonedTable.dataTable {
    position: absolute !important;
    background-color: rgba(255, 255, 255, .7);
    z-index: 202
}
div.DTCR_pointer {
    width: 1px;
    background-color: #0275d8;
    z-index: 201
}
div.DTFC_LeftHeadWrapper table, div.DTFC_RightHeadWrapper table {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    background-color: #fff
}
div.DTFC_LeftBodyWrapper table thead .sorting:after, div.DTFC_LeftBodyWrapper table thead .sorting:before, div.DTFC_LeftBodyWrapper table thead .sorting_asc:after, div.DTFC_LeftBodyWrapper table thead .sorting_asc:before, div.DTFC_LeftBodyWrapper table thead .sorting_desc:after, div.DTFC_LeftBodyWrapper table thead .sorting_desc:before, div.DTFC_RightBodyWrapper table thead .sorting:after, div.DTFC_RightBodyWrapper table thead .sorting:before, div.DTFC_RightBodyWrapper table thead .sorting_asc:after, div.DTFC_RightBodyWrapper table thead .sorting_asc:before, div.DTFC_RightBodyWrapper table thead .sorting_desc:after, div.DTFC_RightBodyWrapper table thead .sorting_desc:before {
    display: none
}
div.DTFC_LeftBodyWrapper table tbody tr:first-child td, div.DTFC_LeftBodyWrapper table tbody tr:first-child th, div.DTFC_RightBodyWrapper table tbody tr:first-child td, div.DTFC_RightBodyWrapper table tbody tr:first-child th {
    border-top: none
}
div.DTFC_LeftFootWrapper table, div.DTFC_RightFootWrapper table {
    border-top: none;
    margin-top: 0 !important;
    background-color: #fff
}
div.DTFC_Blocker {
    background-color: #fff
}
div.DTFC_LeftBodyLiner {
    overflow-x: hidden;
}
table.dataTable.table-striped.DTFC_Cloned tbody {
    background-color: #fff
}
table.dataTable.fixedHeader-floating, table.dataTable.fixedHeader-locked {
    background-color: #fff;
    margin-top: 0 !important;
    margin-bottom: 0 !important
}
table.dataTable.fixedHeader-floating {
    position: fixed !important
}
table.dataTable.fixedHeader-locked {
    position: absolute !important
}
@media print {
    table.fixedHeader-floating {
        display: none
    }
}
table.dataTable tbody td.focus, table.dataTable tbody th.focus {
    -webkit-box-shadow: inset 0 0 1px 2px #0275d8;
    box-shadow: inset 0 0 1px 2px #0275d8
}
div.dtk-focus-alt table.dataTable tbody td.focus, div.dtk-focus-alt table.dataTable tbody th.focus {
    -webkit-box-shadow: inset 0 0 1px 2px #ff8b33;
    box-shadow: inset 0 0 1px 2px #ff8b33
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child, table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty, table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
    cursor: default !important
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before {
    display: none !important
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th.dtr-control {
    position: relative;
    padding-left: 30px;
    cursor: pointer
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th.dtr-control:before {
    top: 50%;
    left: 5px;
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: block;
    position: absolute;
    color: #fff;
    border: .15em solid #fff;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 .2em #444;
    box-shadow: 0 0 .2em #444;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1em;
    content: '+';
    background-color: #0275d8
}
table.dataTable.dtr-inline.collapsed > tbody >tr > td.dtr-control:before, 
table.dataTable.dtr-inline.collapsed > tbody >tr > th.dtr-control:before {
    box-shadow: none;
    content: "\f078";
    font-family: "Font Awesome\ 5 Free";
    background-color: #fff !important;
    color: #444f63;
    font-size: 16px;
    line-height: 16px;
    vertical-align: middle;
    text-align: center;
    border: 0 !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, 
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    font-family: "Font Awesome\ 5 Free";
    content: '\f077';
    background-color: #fff !important;
    border: 0 !important;
    color: #0072cf;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control, table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
    padding-left: 27px
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control:before {
    left: 4px;
    height: 14px;
    width: 14px;
    border-radius: 14px;
    line-height: 14px;
    text-indent: 3px
}
table.dataTable.dtr-column > tbody > tr > td.control, table.dataTable.dtr-column > tbody > tr > td.dtr-control, table.dataTable.dtr-column > tbody > tr > th.control, table.dataTable.dtr-column > tbody > tr > th.dtr-control {
    position: relative;
    cursor: pointer
}
table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, table.dataTable.dtr-column > tbody > tr > th.control:before, table.dataTable.dtr-column > tbody > tr > th.dtr-control:before {
    top: 50%;
    left: 50%;
    height: .8em;
    width: .8em;
    margin-top: -.5em;
    margin-left: -.5em;
    display: block;
    position: absolute;
    color: #fff;
    border: .15em solid #fff;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 .2em #444;
    box-shadow: 0 0 .2em #444;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1em;
    content: '+';
    background-color: #0275d8
}
table.dataTable.dtr-column > tbody > tr.parent td.control:before, table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before, table.dataTable.dtr-column > tbody > tr.parent th.control:before, table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before {
    content: '-';
    background-color: #d33333
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    padding-left: 40px;
}
table.dataTable > tbody > tr.child {
    padding: .5em 1em
}
table.dataTable > tbody > tr.child:hover {
    background: 0 0 !important
}
table.dataTable > tbody > tr.child ul.dtr-details {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid #efefef;
    padding: .5em 0
}
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
    padding-top: 0
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
    border-bottom: none
}
table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 75px;
    font-weight: 700
}
div.dtr-modal {
    position: fixed;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    padding: 10em 1em
}
div.dtr-modal div.dtr-modal-display {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    z-index: 102;
    overflow: auto;
    background-color: #f5f5f7;
    border: 1px solid #444f63;
    border-radius: .5em;
    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6)
}
div.dtr-modal div.dtr-modal-content {
    position: relative;
    padding: 1em
}
div.dtr-modal div.dtr-modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: 1px solid #eaeaea;
    background-color: #f9f9f9;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    z-index: 12
}
div.dtr-modal div.dtr-modal-close:hover {
    background-color: #eaeaea
}
div.dtr-modal div.dtr-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    background: rgba(0, 0, 0, .6)
}
@media screen and (max-width:767px) {
    div.dtr-modal div.dtr-modal-display {
        width: 95%
    }
}
div.dtr-bs-modal table.table tr:first-child td {
    border-top: none
}
table.dataTable.dtr-inline.collapsed.table-sm > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed.table-sm > tbody > tr > th:first-child:before {
    top: 5px
}
table.dataTable tr.dtrg-group td {
    background-color: #e0e0e0
}
table.dataTable tr.dtrg-group.dtrg-level-0 td {
    font-weight: 700
}
table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-level-2 td {
    background-color: #f0f0f0;
    padding-top: .25em;
    padding-bottom: .25em;
    padding-left: 2em;
    font-size: .9em
}
table.dataTable tr.dtrg-group.dtrg-level-2 td {
    background-color: #f3f3f3
}
table.dt-rowReorder-float {
    position: absolute !important;
    opacity: .8;
    table-layout: fixed;
    outline: 2px solid #0275d8;
    outline-offset: -2px;
    z-index: 2001
}
tr.dt-rowReorder-moving {
    outline: 2px solid #888;
    outline-offset: -2px
}
body.dt-rowReorder-noOverflow {
    overflow-x: hidden
}
table.dataTable td.reorder {
    text-align: center;
    cursor: move
}
div.dts {
    display: block !important
}
div.dts tbody td, div.dts tbody th {
    white-space: nowrap
}
div.dts div.dts_loading {
    z-index: 1
}
div.dts div.dts_label {
    position: absolute;
    right: 10px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    text-align: right;
    border-radius: 3px;
    padding: .4em;
    z-index: 2;
    display: none
}
div.dts div.dataTables_scrollBody {
    background: repeating-linear-gradient(45deg, #edeeff, #edeeff 10px, #fff 10px, #fff 20px)
}
div.dts div.dataTables_scrollBody table {
    z-index: 2
}
div.dts div.dataTables_length, div.dts div.dataTables_paginate {
    display: none
}
div.DTS div.dataTables_scrollBody table {
    background-color: #fff
}
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: #0275d8
}
table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected, table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected {
    background-color: #0172d2
}
table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover, table.dataTable.hover tbody > tr.selected:hover, table.dataTable.hover tbody > tr > .selected:hover {
    background-color: #0170d0
}
table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected, table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected {
    background-color: #0172d3
}
table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
    background-color: #016ecc
}
table.dataTable.display tbody > tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2 {
    background-color: #016fcd
}
table.dataTable.display tbody > tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
    background-color: #0170cf
}
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
    background-color: #0172d3
}
table.dataTable.display tbody > tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2 {
    background-color: #0173d5
}
table.dataTable.display tbody > tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_3 {
    background-color: #0174d7
}
table.dataTable.display tbody > tr.odd > .selected, table.dataTable.order-column.stripe tbody > tr.odd > .selected {
    background-color: #016ecc
}
table.dataTable.display tbody > tr.even > .selected, table.dataTable.order-column.stripe tbody > tr.even > .selected {
    background-color: #0172d3
}
table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
    background-color: #016bc6
}
table.dataTable.display tbody > tr.selected:hover > .sorting_2, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_2 {
    background-color: #016cc7
}
table.dataTable.display tbody > tr.selected:hover > .sorting_3, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_3 {
    background-color: #016dca
}
table.dataTable.display tbody > tr:hover > .selected, table.dataTable.display tbody > tr > .selected:hover, table.dataTable.order-column.hover tbody > tr:hover > .selected, table.dataTable.order-column.hover tbody > tr > .selected:hover {
    background-color: #016bc6
}
table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
    position: relative
}
table.dataTable tbody td.select-checkbox:after, table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:after, table.dataTable tbody th.select-checkbox:before {
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 12px;
    height: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid #444f63;
    border-radius: 3px
}
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9, -1px 1px #b0bed9
}
div.dataTables_wrapper span.select-info, div.dataTables_wrapper span.select-item {
    margin-left: .5em
}
@media screen and (max-width:640px) {
    div.dataTables_wrapper span.select-info, div.dataTables_wrapper span.select-item {
        margin-left: 0;
        display: block
    }
}
table.dataTable tbody td.selected, table.dataTable tbody th.selected, table.dataTable tbody tr.selected {
    color: #fff
}
table.dataTable tbody td.selected a, table.dataTable tbody th.selected a, table.dataTable tbody tr.selected a {
    color: #a2d4ed
}
.dataTables_wrapper {
    padding: 0 !important
}
.dataTables_wrapper .DTFC_LeftWrapper .dataTable, .dataTables_wrapper .DTFC_RightWrapper .dataTable {
    margin-top: 0 !important
}
.DTFC_ScrollWrapper .DTFC_RightWrapper .DTFC_RightBodyWrapper .DTFC_RightBodyLiner {
    overflow-x: hidden;
}
.dataTables_wrapper .dataTable {
    /* width: 100% !important; */
    border-collapse: initial !important;
    border-spacing: 0 !important;
}
.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
    font-weight: 400;
    font-size: 1.4rem;
    vertical-align: middle;
    color: #444f63;
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    outline: 0 !important;
    padding: 1.5rem 1.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
    letter-spacing: .015rem;
}
.dataTables_wrapper .dataTable th {
    color: #1b2028;
}
.dataTables_wrapper .dataTable td .checkbox, .dataTables_wrapper .dataTable th .checkbox {
    margin: 0;
    right: -2px
}
.dataTables_wrapper .dataTable td.dt-center, .dataTables_wrapper .dataTable th.dt-center {
    text-align: center
}
.dataTables_wrapper .dataTable td.dt-left, .dataTables_wrapper .dataTable th.dt-left {
    text-align: left
}
.dataTables_wrapper .dataTable td.dt-right, .dataTables_wrapper .dataTable th.dt-right {
    text-align: right
}
.dataTables_wrapper .dataTable td.sorting:after, .dataTables_wrapper .dataTable td.sorting:before, .dataTables_wrapper .dataTable th.sorting:after, .dataTables_wrapper .dataTable th.sorting:before {
    opacity: .6
}
.dataTables_wrapper .dataTable td.orting_asc_disabled:after, .dataTables_wrapper .dataTable td.orting_asc_disabled:before, .dataTables_wrapper .dataTable td.orting_desc_disabled:after, .dataTables_wrapper .dataTable td.orting_desc_disabled:before, .dataTables_wrapper .dataTable td.sorting:after, .dataTables_wrapper .dataTable td.sorting:before, .dataTables_wrapper .dataTable td.sorting_asc:after, .dataTables_wrapper .dataTable td.sorting_asc:before, .dataTables_wrapper .dataTable td.sorting_desc:after, .dataTables_wrapper .dataTable td.sorting_desc:before, .dataTables_wrapper .dataTable th.orting_asc_disabled:after, .dataTables_wrapper .dataTable th.orting_asc_disabled:before, .dataTables_wrapper .dataTable th.orting_desc_disabled:after, .dataTables_wrapper .dataTable th.orting_desc_disabled:before, .dataTables_wrapper .dataTable th.sorting:after, .dataTables_wrapper .dataTable th.sorting:before, .dataTables_wrapper .dataTable th.sorting_asc:after, .dataTables_wrapper .dataTable th.sorting_asc:before, .dataTables_wrapper .dataTable th.sorting_desc:after, .dataTables_wrapper .dataTable th.sorting_desc:before {
    top: 50% !important;
    margin-top: -1.1rem;
    bottom: auto !important
}
.dataTables_wrapper .dataTable td.sorting_asc, .dataTables_wrapper .dataTable th.sorting_asc {
    color: #0072cf !important
}
.dataTables_wrapper .dataTable td.sorting_asc:before, .dataTables_wrapper .dataTable th.sorting_asc:before {
    opacity: 1;
    color: #0072cf !important
}
.dataTables_wrapper .dataTable td.sorting_desc, .dataTables_wrapper .dataTable th.sorting_desc {
    color: #0072cf !important
}
.dataTables_wrapper .dataTable td.sorting_desc:after, .dataTables_wrapper .dataTable th.sorting_desc:after {
    opacity: 1;
    color: #0072cf !important
}
.dataTables_wrapper .dataTable tfoot th, .dataTables_wrapper .dataTable thead th {
    font-weight: 500;
}
.dataTables_wrapper .dataTable tfoot th {
    background-color: #fff;
    border-top: 0;
    border-bottom: 0;
}
.dataTables_wrapper .dataTable thead th {
    border-top: 0
}
.dataTables_wrapper .dataTable tbody tr.active, .dataTables_wrapper .dataTable tbody tr.selected {
    background-color: #ebedf3
}
.dataTables_wrapper .dataTable tbody tr.active td, .dataTables_wrapper .dataTable tbody tr.active th, .dataTables_wrapper .dataTable tbody tr.selected td, .dataTables_wrapper .dataTable tbody tr.selected th {
    background-color: #ebedf3;
    border-left-color: #ebedf3;
    border-right-color: #ebedf3;
    color: #3f4254
}
.dataTables_wrapper .dataTable .group td, .dataTables_wrapper .dataTable .group th {
    background-color: #f3f6f9
}
.dataTables_wrapper .dataTable .filter td, .dataTables_wrapper .dataTable .filter th {
    vertical-align: top
}
.dataTables_wrapper .dataTable .filter td .input-group + .input-group, .dataTables_wrapper .dataTable .filter th .input-group + .input-group {
    margin-top: .5rem
}
.dataTables_wrapper .dataTable .filter td .btn + .btn, .dataTables_wrapper .dataTable .filter th .btn + .btn {
    margin-top: .5rem
}
.dataTables_wrapper .dataTable .group td, .dataTables_wrapper .dataTable .group th {
    font-size: 1.4rem;
    font-weight: 500
}
.dataTables_wrapper .dataTables_scroll {
    margin: 1rem 0 !important
}
.dataTables_wrapper .dataTables_scroll .dataTable {
    margin: 0 !important
}
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    margin-left: .4rem
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link {
    outline: 0 !important;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: .5rem;
    text-align: center;
    position: relative;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    border-radius: .42rem;
    border: 0;
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    color: #7e8299;
    background-color: transparent
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link > i {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    font-size: .7rem;
    text-align: center;
    display: inline-block;
    color: #7e8299
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    background-color: #f3f6f9;
    color: #7e8299
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link:hover {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    background-color: #3699ff;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link:hover > i, .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link:hover > i, .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link:hover > i, .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link:hover > i {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    background-color: #3699ff;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link > i {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    background-color: #3699ff;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link > i {
    -webkit-transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, -webkit-box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, -webkit-box-shadow .15s ease;
    color: #fff
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled > .page-link {
    opacity: .6
}
.dataTables_wrapper .dataTables_pager {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}
.dataTables_wrapper .dataTables_pager .dataTables_info {
    display: inline-block;
    margin: .5rem 0;
    margin-right: .5rem;
    color: #7e8299
}
/* LENGTH */
div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
    margin: 0 1rem 0 0;
}
.dataTables_wrapper .dataTables_pager .dataTables_length,
.dataTables_wrapper .dataTables_length {
    margin: 0;
    margin-right: 1rem;
    display: inline-block
}
.dataTables_wrapper .dataTables_pager .dataTables_length label,
.dataTables_wrapper .dataTables_length label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    color: #7e8299
}
.dataTables_wrapper .dataTables_length select {
    /* display: inline-block;
    width: 100%;
    height: calc(1.5em + 1.3rem + 2px); */
    padding: .65rem 2.5rem .65rem 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    color: #444f63;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%233F4254' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/8px 10px;
    border: 2px solid #c7ccd4;
    border-radius: .4rem;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.dataTables_wrapper .dataTables_pager .dataTables_length .custom-select,
.dataTables_wrapper .dataTables_length select {
    margin-left: 1rem;
    height: 3rem;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom:0
}
.dataTables_wrapper .dataTables_pager .dataTables_paginate {
    margin: .5rem 0
}
.dataTables_wrapper .dataTables_pager .dataTables_paginate .pagination {
    margin: 0
}
.dataTables_wrapper .text-left .dataTables_filter, .dataTables_wrapper .text-right .dataTables_filter {
    display: inline-block
}
@media (max-width:991.98px) {
    .dataTables_wrapper .dataTables_pager {
        margin-top: 1rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}
@media (max-width:767.98px) {
    .dataTables_wrapper .dataTables_paginate {
        margin-left: 0 !important
    }
    .dataTables_wrapper .dataTables_paginate .pagination .page-item:first-child {
        margin-left: 0 !important
    }
}
.dataTables_wrapper table.dataTable.collapsed > tbody > tr[role=row] > td:first-child {
    padding-left: 25px !important
}
.dataTables_wrapper .child .dtr-details {
    display: table !important
}
.dataTables_wrapper .child .dtr-details > li {
    display: table-row !important;
    border: 0 !important
}
.dataTables_wrapper .child .dtr-details > li .dtr-title {
    display: table-cell;
    vertical-align: top;
    border-bottom: 1px dashed #f3f6f9;
    font-weight: 500;
    padding: .5rem 2rem .5rem 0
}
.dataTables_wrapper .child .dtr-details > li .dtr-title:after {
    content: ':'
}
.dataTables_wrapper .child .dtr-details > li .dtr-data {
    display: table-cell;
    vertical-align: top;
    border-bottom: 1px dashed #f3f6f9;
    padding: .5rem 0
}
.dataTables_wrapper .child .dtr-details > li:last-child .dtr-title {
    border-bottom: 0
}
.dataTables_wrapper .child .dtr-details > li:last-child .dtr-data {
    border-bottom: 0
}
.dataTables_wrapper .dt-bootstrap4 .dropdown .dropdown-menu.dropdown-menu-right {
    margin-left: 65px
}
.toolbar .caption {
    font-size: 13px;
    font-weight: 400;
}
.dataTables_scrollBody thead {
    visibility: hidden;
}
.label.label-dot {
    display: inline-block;
    font-size: 0 !important;
    vertical-align: middle;
    text-align: center;
}
.label.label-inline {
    width: auto;
}
.label.label-dot,
.label.label-dot.circle {
    line-height: 6px;
    min-height: 6px;
    min-width: 6px;
    height: 6px;
    width: 6px;
    padding: 0;
}
.label.label-dot.circle {
    border-radius: 6px;
}
.dataTable .label.label-danger {
    background-color: #e72035;
}
.dataTable .label.label-success {
    background-color: #008577;
}
.dataTable .text-danger {
    color: #e72035;
}
.dataTable .text-success {
    color: #008577;
}
.dataTable .label {
    text-transform: none;
    font-size: 1.2rem;
    font-weight: 400;
    border-radius: 0.4rem;
    padding: .25rem .75rem;
    letter-spacing: 0.025rem;
}
.dataTable .label.state-end,
.dataTable .label.state-true {
    color: #fff;
    background-color: #008577;
    border: 1px solid #008577;
}
.dataTable .label.state-false {
    background-color:#E72035;
    border: 1px solid #E72035;
}
.dataTable .label.state-info.scim {
    background-color: #6013FB;
    border: 1px solid #6013FB;
}
.dataTable .label.state-info.ad {
    background-color: #ADA300;
    border: 1px solid #ADA300;
}
.groupright {
    float: right !important;
}
div.dt-button-background {
    width: 0;
    height: 0;
}
.margin-top20 {
  margin-top: 20px
}
.block {
  display: block !important
}
              
            
!

JS

              
                $(document).ready(function () {
  var table = $("#survey").DataTable({
    // GENERAL SETTINGS TO FORMAT TABLE
    dom:
      "' <'row''<'col-xs-12'>><'row''<'col-xs-6 survey-export'><'col-xs-6 dt-buttons clearfix'B>><'row margin-top20'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-12'p i>>",
    lengthMenu: [5, 10, 25, 50],
    pageLength: 10,
    pagingType: "full_numbers",
    language: {
      lengthMenu: "_MENU_ Rows per page",
      info: "Showing <b>_START_ to _END_</b> of _TOTAL_ entries",
      sSearch: "_INPUT_",
      sSearchPlaceholder: "Search table",
      paginate: {
        next: '<i class="fas fa-angle-right"></i>',
        previous: '<i class="fas fa-angle-left"></i>',
        first: '<i class="fas fa-angle-double-left"></i>',
        last: '<i class="fas fa-angle-double-right"></i>'
      }
    },
    scrollX: true,
    scrollY: "50vh",
    scrollCollapse: true,
    pageResize: true,
    // ADDITIONAL BUTTONS FOR COLVIS MODAL AND SAVE
    buttons: [
      {
        text: "Column Visibility",
        extend: "colvis",
        className: "btn btn-default",
        collectionLayout: "fixed three-column",
        prefixButtons: [
          {
            extend: "colvisGroup",
            text:
              '<span><i class="fas fa-check-double margin-right10"></i></span>Show all',
            className: "show-all",
            show: ":hidden"
          },
          {
            extend: "colvisGroup",
            text:
              '<span><i class="fas fa-eye-slash margin-right10"></i></span>Hide all',
            className: "hide-all",
            hide: ":visible"
          },
          {
            extend: "colvisGroup",
            text:
              '<span><i class="fas fa-sync margin-right10"></i></span>Restore',
            className: "restore"
          }
        ]
      },
      { text: "Save", className: "btn btn-success" }
    ],
    // THIS DISPLAYS WHAT COLUMNS TO SHOW AND SORT ON INITIALISE
    columnDefs: [
      { orderable: false, targets: [2, 5, 7, -1], className: "" },
      {
        targets: [-2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13],
        visible: false
      }
    ],
    // THIS APPLIES THE FILTER SELECTS TO THE COLUMN HEADERS
    orderCellsTop: true,
    initComplete: function () {
      this.api()
        .columns([2, 5, 7])
        .every(function () {
          var column = this;
          var select = $(
            '<select class="form-control input-sm block margin-top5"><option value=""></option></select>'
          )
            // .appendTo( $(column.footer()).empty() )
            .appendTo($(column.header()))
            .on("change", function () {
              var val = $.fn.dataTable.util.escapeRegex($(this).val());
              column.search(val ? "^" + val + "$" : "", true, false).draw();
            });

          column
            .data()
            .unique()
            .sort()
            .each(function (d, j) {
              select.append('<option value="' + d + '">' + d + "</option>");
            });
        });
    }
  });
  // EXPORT DROPDOWN BUTTON
  new $.fn.dataTable.Buttons(table, {
    buttons: [
      {
        extend: "collection",
        text: "Export as",
        className: "btn btn-primary dropdown-toggle ",
        buttons: [
          {
            text: '<i class="far fa-file-excel"></i>Excel',
            extend: "excel",
            className: ""
          },
          {
            text: '<i class="fas fa-file-csv"></i>CSV',
            extend: "csv",
            className: ""
          }
        ]
      }
    ]
  });
  table.buttons(1, null).container().appendTo($(".survey-export"));
  $("#dropdown-button").click(function () {
    dropDownFixPosition($("#dropdown-button"), $(".dropdown-menu"));
  });
  function dropDownFixPosition(button, dropdown) {
    var dropDownTop = button.offset().top + button.outerHeight();
    dropdown.css("top", dropDownTop + "px");
    dropdown.css("left", button.offset().left + "px");
  }
});




+function ($) {
  $(function(){
    // class
  	$(document).on('click', '[data-toggle^="class"]', function(e){
  		e && e.preventDefault();
  		var $this = $(e.target), $class , $target, $tmp, $classes, $targets;
  		!$this.data('toggle') && ($this = $this.closest('[data-toggle^="class"]'));
    	$class = $this.data()['toggle'];
    	$target = $this.data('target') || $this.attr('href');
      $class && ($tmp = $class.split(':')[1]) && ($classes = $tmp.split(','));
      $target && ($targets = $target.split(','));
      $classes && $classes.length && $.each($targets, function( index, value ) {
        if ( $classes[index].indexOf( '*' ) !== -1 ) {
          var patt = new RegExp( '\\s' + 
              $classes[index].
                replace( /\*/g, '[A-Za-z0-9-_]+' ).
                split( ' ' ).
                join( '\\s|\\s' ) + 
              '\\s', 'g' );
          $($this).each( function ( i, it ) {
            var cn = ' ' + it.className + ' ';
            while ( patt.test( cn ) ) {
              cn = cn.replace( patt, ' ' );
            }
            it.className = $.trim( cn );
          });
        }
        ($targets[index] !='#') && $($targets[index]).toggleClass($classes[index]) || $this.toggleClass($classes[index]);
      });
    	$this.toggleClass('active');
  	});
 	
    var $window = $(window);
    // mobile
  	var mobile = function(option){
  		if(option == 'reset'){
  			$('[data-toggle^="shift"]').shift('reset');
  			return true;
  		}
  		$('[data-toggle^="shift"]').shift('init');
      return true;
  	};
  	// unmobile
  	$window.width() < 768 && mobile();
    // resize
    var $resize, $width = $window.width();
  	$window.resize(function() {
      if($width !== $window.width()){
        clearTimeout($resize);
        $resize = setTimeout(function(){
          setHeight();
          $window.width() < 768 && mobile();
          $window.width() >= 768 && mobile('reset') && fixVbox();
          $width = $window.width();
        }, 500);
      }
  	});

    // fluid layout
    var setHeight = function(){
      $('.app-fluid #nav > *').css('min-height', $(window).height()-60);
      return true;
    }
    setHeight();

    
    // fix vbox
    var fixVbox = function(){
      $('.ie11 .vbox').each(function(){
        $(this).height($(this).parent().height());
      });
      return true;
    }
    fixVbox();

    // collapse nav
    $(document).on('click', '[data-ride="collapse"] a', function (e) {
      var $this = $(e.target), $active;      
      $this.is('a') || ($this = $this.closest('a'));
      
      $active = $this.parent().siblings( ".active" );
      $active && $active.toggleClass('active').find('> ul:visible').slideUp(200);
      
      ($this.parent().hasClass('active') && $this.next().slideUp(200)) || $this.next().slideDown(200);
      $this.parent().toggleClass('active');
      
      $this.next().is('ul') && e.preventDefault();

      setTimeout(function(){ $(document).trigger('updateNav'); }, 300);      
    });

    // dropdown still
    $(document).on('click.bs.dropdown.data-api', '.dropdown .on, .dropup .on, .open .on', function (e) { e.stopPropagation() });

  });
}(jQuery);

              
            
!
999px

Console