/* CSS Document */
@import url("https://p.typekit.net/p.css?s=1&k=uoj5dxc&ht=tk&f=29196&a=900209&app=typekit&e=css");
@font-face {
    font-family: 'bebas_neuebold';
    src: url('../fonts/bebasneue-bold-webfont.eot');
    src: url('../fonts/bebasneue-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue-bold-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue-bold-webfont.woff') format('woff'),
         url('../fonts/bebasneue-bold-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue-bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
font-family:"henderson-sans-basic";
src:url("https://use.typekit.net/af/8a2d0a/00000000000000003b9ae043/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/8a2d0a/00000000000000003b9ae043/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/8a2d0a/00000000000000003b9ae043/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-style:normal;font-weight:400;
}

@font-face {
font-family:"henderson-sans-basic";
src:url("https://use.typekit.net/af/990c38/00000000000000003b9ae047/27/l?subset_id=2&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/990c38/00000000000000003b9ae047/27/d?subset_id=2&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/990c38/00000000000000003b9ae047/27/a?subset_id=2&fvd=n7&v=3") format("opentype");
font-style:normal;font-weight:700;
}

@page {
    size: auto;
}

body {
     font-family: "henderson-sans-basic",sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'bebas_neuebold';
}

.btn.btn-primary, .btn {

    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0px;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: 'bebas_neuebold';
    transition: all 0.4s ease;
    font-size: 2rem;
    border: none;
}

.sign-up {
    background: #3353F2;
   color: #fff !important;
}

.sign-up:hover, .sign-up:focus {
    background: #FF5E5B;
}

.green-button, .btn-success {
    background: #17BEBB;
    color: #fff !important;
}

.green-button:hover, .green-button:focus, .btn-success:hover, .btn-success:focus {
    background: #3353F2;
}

.red-button, .btn-danger {
    background: #F21D54;
    color: #fff !important;
}

.red-button:hover, .red-button:focus, .btn-danger:hover, .btn-danger:focus {
    background: #FDEA00;
    color: #000 !important;
}

.min-height-fix {

   min-height: calc(100vh - 195px);

}

.footer p, .footer a {

    font-size: 13px;

}
.custom-select {

    display: inline-block;
    width: 100%;
    height: 100%;
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
        background-size: auto;
    background-size: 8px 10px;
    border: 3px solid #000;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}

p, p.lead {

    font-size: 14px;
    line-height: 1.5;
    font-weight: 100;

}

h2, h3 {

    font-size: 3rem;

}

ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}



ul li {
    position: relative;
    margin: 10px 0px;
}

ul li::before {

    content: " ";
    position: absolute;
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
    left: -30px;
    top: 4px;

}
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    padding: 10px;
}

ul li.ui-menu-item::before {
    display: none;
}

ul li:hover::before {
    transform: rotate(0deg);
}

ul li:nth-child(1)::before {
    background-color: #5C38AC;
}
ul li:nth-child(2)::before {
    background-color: #FDEA00;
}
ul li:nth-child(3)::before {
    background-color: #FF5E5B;
}
ul li:nth-child(4)::before {
    background-color: #17BEBB;
}
ul li:nth-child(5)::before {
    background-color: #3353F2;
}
ul li:nth-child(6)::before {
    background-color: #FDEA00;
}

.login-svg-holder {
    position: relative;
    overflow: hidden;
}

.login-svg-holder svg, .login-svg-holder img {
   width: 100%;
max-width: 750px;
}

.login-svg-holder img.swing-bar {

    position: absolute;
    top: -200px;
    max-width: 200px;
    right: 20%;
    transition: all 0.4s ease;
    animation: swing 3s normal infinite ease-in-out;
    transform: rotate(0deg);
    transform-origin: 0% 50%;
}

@keyframes swing {
    0% {top:-210px;}
    50%{top:-100px;}
    75%{top: 0px;}
    85%{transform: rotate(10deg);}
    90%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}

.form-control {

    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #000;
    border-radius: 0px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
label {

    display: inline-block;
    margin-bottom: .5rem;
    font-family: 'bebas_neuebold';
    font-size: 22px;
    text-transform: uppercase;

}

.shadow-row {

    box-shadow: -15px 0px 11px 5px rgba(0,0,0,0.03);

}
.table thead th {

    vertical-align: bottom;
    border-bottom: 3px solid #A7BCFB;
    font-weight: 400;
font-size: 15px;

}
.table-striped tbody tr:nth-of-type(2n+1) {

    background-color: #ECEFFE;

}
.table td, .table th {

    padding: .75rem;
    vertical-align: middle;
border-top: 3px solid #dee2e6;

}

.table td {


    font-size: 14px;


}

.table .btn.btn-primary, .btn.btn-primary.small-button {
    font-size: 16px;
}

.blue-heading {
    color:#3353F2;
}

.test-holder span, .test-holder p {
    font-family: inherit !important;
    font-size: 14px !important;
    font-style: inherit !important;
}

.test-holder br {
    display: none;
}

b, strong {
    font-weight: 700;
}

div.bar {
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    border-radius: 25px;
    padding: 5px;
    overflow: hidden;
    -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.23);
            box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.23);
    position: relative;
    top: 5px;
}

div.bar .fill {

    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    background: #03D89F;
    width: 0%;
    border-radius: 25px;
    transition: all 0.4s ease;

}

.fill.fill-10 {
    width: 10% !important;
}
.fill.fill-20 {
    width: 20% !important;
}
.fill.fill-30 {
    width: 30% !important;
}
.fill.fill-40 {
    width: 40% !important;
}
.fill.fill-50 {
    width: 50% !important;
}
.fill.fill-60 {
    width: 60% !important;
}
.fill.fill-70 {
    width: 70% !important;
}
.fill.fill-80 {
    width: 80% !important;
}
.fill.fill-90 {
    width: 90% !important;
}
.fill.fill-100 {
    width: 100% !important;
}

.question-holder p {

    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 100;

}

span.darker {

    color: #03D89F !important;

}

span.lighter {

    color: #E3E2E2 !important;

}

/*
.main-question-holder {
    background-image: url("../images/lines.jpg");
    background-repeat: no-repeat;
    background-position: bottom left;
   background-size: contain;
}*/

/*Burger icon */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {

    width: 40px;
    height: 40px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    left: 0px;
    right: 0;
    top: 0px;
    z-index: 99999999;

}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 40px;
  background: #000;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

}

#nav-icon1 span:nth-child(1) {
  top: 0px;
/*background: #0C4F9C;*/
}

#nav-icon1 span:nth-child(2) {
  top: 9px;
/*background: #FDC205;*/
}

#nav-icon1 span:nth-child(3) {
  top: 19px;
/*background: #7B8234;*/
}

#nav-icon1.open span:nth-child(1) {
  top: 12px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.main-nav {

    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255,255,255,0.9);
    height: 100vh;
    z-index: 9999;
    text-align: center;

}

.main-nav-mobile {
opacity: 1 !important;
	pointer-events: all !important;
}

/* End burger */

img {
    max-width: 100%;
}

.plus-icon img {
    transition: all 0.4s ease;
    box-shadow: none;
}

.plus-icon:hover img, .plus-icon:focus img {
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2);
}

.plus-icon a img {
    transition: all 0.4s ease;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}
.plus-icon:hover a img, .plus-icon:focus a img,
.plus-icon a:hover img, .plus-icon a:focus img {
    transform: rotate(45deg);
}

/*----------------------- Preloader -----------------------*/
body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper {
    height: 100%;
    width: 100%;
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

/*
.preloader-wrapper .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 120px;
}
*/
.loader {
  position: relative;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 2px;
  width: 100px;
  height: 100px;
    margin: 0px auto;
}
.loader > div {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FF5E5B;
  transform: scale(0);
  transform-origin: center center;
  animation: loader 2s infinite linear;
}
.loader > div:nth-of-type(1), .loader > div:nth-of-type(5), .loader > div:nth-of-type(9) {
  animation-delay: 0.4s;
    background: #5C38AC;
}
.loader > div:nth-of-type(4), .loader > div:nth-of-type(8) {
  animation-delay: 0.2s;
    background: #FDEA00;
}
.loader > div:nth-of-type(2), .loader > div:nth-of-type(6) {
  animation-delay: 0.6s;
    background: #17BEBB;
}
.loader > div:nth-of-type(3) {
  animation-delay: 0.8s;
}

@keyframes loader {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* end pre loader */

.members-indicator {
    background-image: url("../images/user-dashboard-holder.jpg");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    min-height: 232px;
    color: #ffffff !important;

}

.invites-indicator {
    background-image: url("../images/invites-holder.jpg");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    min-height: 232px;
    color: #ffffff !important;

}

.members-indicator h3, .invites-indicator h3 {

    font-size: 112px;
    line-height: 80px;
    font-weight: 800;
    margin-top: 20px;
    font-family: 'bebas_neuebold';

}

.members-indicator span, .invites-indicator span {

    text-transform: uppercase;
    text-align: center;
    font-size: 35px;
    font-family: 'bebas_neuebold';

}

.activity-table .table thead th {

    vertical-align: bottom;
    border-bottom: 0px;
    font-weight: 400;
    font-size: 13px;

}

.activity-table .table tr td p {

    vertical-align: top;
    border-bottom: 0px;
    font-weight: 400;
    font-size: 13px;

}

.side-bar-nav {

    position: fixed;
    left: 0px;
    top: 113px;
    max-width: 126px;
    box-shadow: 3px 3px 13px -4px rgba(0,0,0,0.12);
    z-index: 6;

}

a.up-button, a.down-button {

    text-align: center;
    padding: 1px 20px;
    background: #3353F2;
    width: 100%;
    display: block;
    transition: all 0.4s ease;

}

a.up-button:hover, a.down-button:hover, a.up-button:focus, a.down-button:focus {
    background: #FF815B;
}

.big-button-holder::-webkit-scrollbar { width: 0 !important }

.big-button-holder {
    max-height: 540px;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 2;
    position: relative;
background: #fff;
    box-shadow: 3px 5px 17px -1px rgba(0,0,0,0.2);
}

.big-button-holder a {

    display: block;
    padding: 20px 0px;
    text-align: center;
    transition: all 0.4s ease;
    color: #000;
    text-transform: uppercase;
    font-family: 'bebas_neuebold';
    background: transparent;

}

.big-button-holder a p {

    font-size: 20px;

}

.big-button-holder a:hover, .big-button-holder a:focus {
    text-decoration: none;
    background: #17BEBB;
    color: #ffffff;
}

.big-button-holder .icon {

    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin: 5px auto;

}

.icon.dashboard-img {
    background-image: url("../images/dashboard.png");
}

.icon.members-img {
    background-image: url("../images/members.png");
}

.icon.settings-img {
    background-image: url("../images/settings.png");
}

.icon.teams-img {
    background-image: url("../images/teams.png");
}

.icon.hiring-img {
    background-image: url("../images/hiring-sessions.png");
}

.assessment-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255,255,255);

}

.smaller-buttons .btn.btn-primary, .editing-form .btn {
    font-size: 19px;
}

.editing-form {

    overflow-y: auto;
    max-height: 100%;
    overflow-x: hidden;

}

.btn.btn-primary .fa-info {
    background: transparent;
    color: #fff;
    font-size: initial;
    width: auto;
    text-align: center;
    height: auto;
    vertical-align: initial;
    margin-top: 0px;
    padding-top: 0px;
    cursor: inherit;
    margin-right: 3px;
}

ul.pagination li::before {
    display: none;
}
.page-link {

    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #3353F2;
    background-color: #fff;
    border: none;

}
.page-item.active .page-link {

    z-index: 1;
    color: #fff;
    background-color: #3353F2;
    border-color: transparent;

}

ul.bar-list li {

    transition: all 0.4s ease;
    border-bottom: 2px solid #c3c3c3;
    box-shadow: 3px 3px 16px 3px transparent;
    width: calc(100% / 3 - 10px);
    margin: 5px 10px 0px 0px;
    display: inline-block;

}

ul.bar-list li:hover, ul.bar-list li:focus {
    box-shadow: 3px 3px 16px 3px rgba(0,0,0,0.12);
}
ul.bar-list li a {
    color: #000;
    display: block;
    padding: 10px;
    text-align: left;
}

ul.bar-list li a:hover, ul.bar-list li a:focus {
    text-decoration: none;
}

ul.bar-list li::before {
    display: none;
}

.table-heading h2 {

    display: inline-block;
    margin: 0px 10px 0px 0px;

}

.table-heading .btn.btn-primary {

    margin: 0px;
    align-self: center;
    vertical-align: text-bottom;

}

.fa-info {

    background: #3353F2;
    color: #fff;
    font-size: 23px;
    width: 30px;
    text-align: center;
    height: 30px;
    vertical-align: top;
    margin-top: 15px;
    padding-top: 2px;
    cursor: pointer;

}

.slide-out {

    position: absolute;
    top: 0px;
    right: 300px;
    bottom: 0px;
    background: #fff;
    width: 300px;
    padding: 20px;
    transition: all 0.4s ease;
    z-index: 1;
    opacity: 0;

}

.slide-out-now {
    right: -300px;
    opacity: 1;
}

.slide-out a, .side-block-menu a, .side-block-menu button {

    display: block;
    font-size: 17px;
    text-transform: uppercase;
    color: #000;
    transition: all 0.4s ease;
    background: #fff;
    font-family: 'bebas_neuebold';
    padding: 5px 10px 5px 20px;
    -webkit-appearance:none;
    border: none;
    cursor: pointer;

}

.slide-out a:hover,  .slide-out a:focus, .side-block-menu a:hover,  .side-block-menu a:focus, .side-block-menu button:hover,  .side-block-menu button:focus {
    background:#FF815B;
    color:#fff;
    text-decoration: none;
}

a.side-button {

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background: #3353F2;
    height: 26px;
    text-align: right;
    z-index: 9999;
    cursor: pointer;

}
.side-button img {

    width: 14px;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    position: relative;
    top: -7px;

}

a.side-button-top {

    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #3353F2;
    height: 26px;
    text-align: right;
    z-index: 9999;
    cursor: pointer;

}

.side-button-top img {
    width: 14px;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    position: relative;
    top: -7px;
}

.dtf-colour-blue i {
    color: #586EED;
}

.dtf-colour-green i{
    color: #04D9A0;
}

.dtf-colour-red i{
    color: #F21D54;
}

.dtf-colour-yellow i{
    color: #FFDB06;
}

.bbar-container {
    display: inline-block;
    width: 30px;
    height: 280px;
    margin: 10px;
    position: relative;
}

.bbar-holder {
    display: inline-block;
    width: 100%;
    height: 180px;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
}

.bbar {
    width: 100%;
    height: 15px;
    border-radius: 25px;
}

.bbar-text {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
}

.bbar-text span {
    display: block;
    padding-left: 5px;
}

.bbar-text img {
    padding-left: 5px;
}

.dtf-bg-green {
    background-color: #04D9A0 !important;
}

.dtf-bg-red {
    background-color: #F21D54 !important;
}

.dtf-bg-yellow {
    background-color: #FFDB06 !important;
}

.dtf-bg-blue {
    background-color: #586EED !important;
}

h1.test1 strong{
    color: #586EED;
}

img.logout-image {
    width: 100%;
    max-width: 48px;
}

.main-nav a.btn {
    display: block;
    text-align: left;
    font-size: 22px;
    color: #000;
}

.main-nav ul li::before {
    content: " ";
    position: absolute;
    width: 25px;
    height: 25px;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
    left: -30px;
    top: 9px;
}

.main-nav ul li:hover::before {
    transform: rotate(0deg);
}

td.user-form form {
    display: inline-block;
}

.shadow-box {
    box-shadow: 3px 3px 10px 4px rgba(0,0,0,0.12);
}


.compare-modal-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.9);
    z-index: 100000000;
}

.compare-modal {
    margin: 0px auto;
    width: 100%;
    background-color: rgb(255,255,255);
    margin-top: 50px;
    padding: 50px;
    box-shadow: 3px 3px 16px 3px rgba(0,0,0,0.12);
    max-width: 900px;
}

.select2-dropdown {
  z-index: 100000001;
}

.footer a {
    color: #000000;
    transition: all 0.4s ease;
}

.footer a:hover, .footer a:focus {
    color: #F21D54;
    text-decoration: none;
}
.modal-lg {
    max-width: 1200px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(255, 255, 255, 0.8);
}
.modal-backdrop.show {
    opacity: 1;
}

.modal-header, .modal-footer {
    border-bottom: 0px;
    border-top: 0px;
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px;
    border-radius: 0px;
    outline: 0;
    box-shadow: 3px 3px 16px 3px rgba(0,0,0,0.12);
}

.image-spring {
    position: relative;
}

.image-spring img {
    transition: all 0.6s ease-in-out;
}

.image-spring img:hover, .image-spring img:focus {

    transform: scale(1.6);
    background: #fff;
    display: inline-block;
    border: 3px solid #586EED;


}

h2 strong  {
    font-weight: 400;
    color: #3353F2;
}

.custom-control-label::before, .custom-control-label::after {

    top: .50rem;

}

.invites-indicator small {
    position: relative;
top: -14px;
    display: block;
}

.form-inline-block {
    display: inline-block;
}

.cookie-policy {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #fff;
    box-shadow: 3px 3px 16px 3px rgba(0,0,0,0.12);
}

.note-editor .btn {
    font-size: 13px;
}

span.colors {
    font-size: 6vw;
    color: #FDEA00;
}

span.colors strong:first-of-type {
    color: #FF5E5B !important;
}

span.colors strong:last-of-type {
    color: #3353F2 !important;
}

.word-break-main {

    word-wrap: break-word;

}

button.toggle-ability {

   
    white-space: normal;
    font-size: 23px;

}
.alert-success {
    color: #fff;
    background-color: #17BEBB;
    border-color: #17BEBB;
    text-align: center;
}

.alert-danger {
    color: #fff;
    background-color: #FF5E5B;
    border-color: #FF5E5B;
    text-align: center;
}

@media print {
    
    body {
        overflow: visible!important;
    }
    
    h1, h2, h3, ol, ul, span {
         display: block !important;
        width: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }
    
    .on-print {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
    
    .small-height {

    display: block !important;
    min-height: 40px !important;

}
    
    .offset-md-1.on-print {
        margin-left: 0px !important;
    }
    .table thead th, .table tr td {
    font-size: 9pt;
}
    .admin_area_link {
        display: none !important;
    }
    
    .print-row {
        display: block !important;;
    }
    
    * {
        height: auto !important;
        position: relative !important;
        
    }
    
    .row {
        display: block !important;
    }
    
    .d-print-none {
    display: none!important;
}
    
    .print-row .col-md-6 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
   
}
    .print-graphs .col-md-4 {
    display: inline-block !important;
    width: calc(100% / 3 - 40px) !important;
}
    
    .print-100 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
    
}

@media screen and (max-width: 1440px) {
    .min-height-fix {
    min-height: calc(100vh - 80px);
}
    .btn.btn-primary, .btn {
    margin: 5px;
}
    .smaller-buttons .btn.btn-primary, .editing-form .btn {
    font-size: 16px;
    padding: 10px;
}
    button.toggle-ability {

   
    white-space: normal;
    font-size: 23px;
    min-height: 160px;

}
    .side-bar-nav {

    position: relative;
    left: auto;
    top: auto;
    max-width: 100%;

}
    a.up-button, a.down-button {

    display: none;

}
  .big-button-holder {

    max-height: 100%;
    overflow: initial;
    margin: 30px 0px;

}
    .big-button-holder a {

    display: inline-block;
    padding: 20px 0px;
    text-align: center;
    transition: all 0.4s ease;
    color: #000;
    text-transform: uppercase;
    font-family: 'bebas_neuebold';
    background: transparent;
    width: calc(100% / 5 - 10px);

}
    .big-button-holder a p {

    font-size: 16px;

}
    .big-button-holder .icon {

    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin: 5px auto;

}
    .slide-out {
    position: fixed;
    top: 0px;
    right: auto;
    bottom: 0px;
    background: #fff;
    width: 300px;
    padding: 20px;
    transition: all 0.4s ease;
    z-index: 99;
    opacity: 0;
        left: -300px;
}

    .slide-out-now {
    right: auto;
    opacity: 1;
    left: 0px;
    top: 55px;
}
}

@media screen and (max-width: 1400px) {
    .left-animation-holder img, .right-animation-holder img {

    width: 100%;
    max-width: 250px;

}
    
    .members-indicator , .invites-indicator {
        background-size: cover;
    } 
    .side-bar-nav {
        box-shadow: none;
    }
}

@media screen and (min-width: 1020px) and (max-width: 1380px) {
    .col-md-10 {

    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;

}
   .offset-md-1 {

    margin-left: 0px;

} 
    .table thead th {

    font-size: 12px;

}
}

@media screen and (max-width: 1080px) {
    .table thead th {
        min-width: 240px;
    }
}


@media screen and (max-width: 768px) {
    
    .assessment-overlay {

    width: 100%;

}
    
    h2, h3 {

    font-size: 1.5rem;
    margin: 20px 0px;

}

    ul.bar-list li {

    transition: all 0.4s ease;
    border-bottom: 2px solid #c3c3c3;
    box-shadow: 3px 3px 16px 3px transparent;
    width: calc(100%);
    margin: 5px 10px 0px 0px;

}

    .left-animation-holder, .right-animation-holder  {
        display: none;
    }
 .btn.btn-primary {

    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0px;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: 'bebas_neuebold';
    transition: all 0.4s ease;
    font-size: 19px;
    border: none;
    margin: 20px 0px;

}
    ul {

    margin: 0px;
    padding: 0px 30px;
    list-style-type: none;

}
}

@media screen and (max-width: 700px){
    
.members-indicator h3, .invites-indicator h3 {
    font-size: 60px;
    line-height: 28px;
    font-weight: 800;
    margin-top: 0px;
    font-family: 'bebas_neuebold';
}
    
    .header img {
    max-width: 54px;
}
}