/********************************
 **                            **
 **  Main Enrolment CSS BELOW  **
 **                            **
********************************/

/*****************************
        Basic styles 
 ****************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 10px;
    height: 100vh;
    background-color: #000;
}

body {
    background: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)),url(../../lib/admin-lte/img/login-background.jpg) no-repeat;
    background-size: cover;
}

a { text-decoration: none; }

ul { list-style: none; }

svg {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.6rem;
    vertical-align: middle;
}

.svg-lg {
    width: 2rem;
    height: 2rem;
}

h2.notiffication-message {
    margin: 0;
    color: #b8bbbd;
    font-weight: 100;
    font-size: 1.7rem;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: .5rem;
    height: 3rem;
    background: #000;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .6rem rgba(0,0,0, 1);
    border-radius: 1.5rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 1.5rem;
    -webkit-box-shadow: inset 0 0 .6rem rgba(0,0,0,0.5);
    background: #fbc900;
}

/* Placeholder styles */
::-webkit-input-placeholder { /* Edge */
    font-size: 1.1rem;
    font-style: italic;
    color: #2f3d46a6;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 1.1rem;
    font-style: italic;
    color: #2f3d46a6;
}

::placeholder {
    font-size: 1.1rem;
    font-style: italic;
    color: #2f3d46a6;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end of basic styles */

/*****************************
        Reusables 
 ****************************/

/* 
    Default loader styles
*/
.default-loader-holder {
    position: absolute;
    top: 0;
    left: auto;
    width: 100%;
    height: 100%;
    background-color: #2f3d46;
    z-index: 10;
}

.default-loader__title {
    text-align: center;
    text-transform: initial;
    margin: 0 0 1rem;
}

.default-loader__title--big {
    font-size: 2rem;
}

.default-loader__title--small {
    font-size: 1.2rem;
}

.default-loader__title--white {
    color: #fff;
}

.default-loader__title--accent {
    color: #fbc900;

}

.default-loader__img {
    display: block;
    margin: 0 auto;
}

.default-loader__img--big {
    width: 22rem;
}

.default-loader__img--med {
    width: 15rem;
}

.default-loader__img--small {
    width: 7.5rem;
}

/*Something went wrong*/
.default-loader-holder.sww {
    background: #e7a8a8;
    color: #8f0f0e;
    border: 1px solid #8f0f0e;
    border-radius: .34rem;
}

.sww__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sww__icon {
    font-size: 3.5rem;
}

.sww__title {margin: 1rem 0 3rem;}

.sww__retry {
    color: #2f3d46;
    font-size: 1.2rem;
    transition: all .4s;
    padding: .4px;
    border-bottom: 1px solid transparent;
}

.sww__retry:hover {
    color: #050708;
    border-bottom: 1px solid #050708;
}

/* 
    Search bar styles
*/
.search-bar {
    margin: 0 19.5rem 0 .5rem;
    flex: 1;
}

.search-form {
    position: relative;
    width: 100%;
}

.search-form input {
    border-radius: .3rem;
    border: none;
    outline: none;
    padding: .35rem 3rem .35rem 1.5rem;
    background-color: #b8bbbd;
    color: #2b3b44;
    opacity: .9;
    min-width: 26rem;
    width: 100%;
    height: 2.6rem;
    opacity: .6;
}

.search-form__icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 100%;
    border-left: 1px solid #2b3b44;
    text-align: center;
}

.search-form__icon img {
   position: absolute;
   top: .5rem;
   bottom: .75rem;
   right: .4rem;
   height: 1.6rem;
   width: 1.6rem;
   border: none;
   outline: none;
}

/* 
    Default table 
*/
.default-table {
    width: 100%;
    font-size: 1.2rem;
    font-weight: 600;
    border-collapse: initial;
    table-layout: fixed;
}

.default-table th {
    position: relative;
    padding: .7rem;
    background-color: #b8bbbd;
    border: solid #000;
    border-width: 1px 0 .2rem;
    text-transform: uppercase;
}

.default-table th:after {
    content: "";
    display: block;
    width: .1rem;
    height: 1.4rem;
    background-color: #000;
    position: absolute;
    right: -.1rem;
    top: .8rem;
    z-index: 1;
}

.default-table tbody {
    outline: none;
    cursor: pointer;
    border-radius: .34rem;
}

.default-table tr {
    outline: none;
}

.default-table td {
    transition: all .4s;
    border: solid #000;
    border-width: 0 .1rem .1rem 0;
    background-color: #d7d9d7;
    padding: 0 1rem;
    height: 4rem;
    position: relative;
}

.default-table tr:hover td:not(.clear-background){
    background-color: #f7f7f7;
}

/*.default-table thead th.icon-holder + th,
.default-table th:first-of-type,
.default-table tbody tr:last-of-type td:nth-child(2) {
    border-radius: .34rem 0 0 .34rem;
}
.default-table tbody tr:first-of-type td:nth-child(2) {
    border-radius: .34rem 0 0 0;
}

.default-table th:last-of-type,
.default-table tbody tr:last-of-type td:last-of-type {
    border-radius: 0 .34rem .34rem 0;
}*/

/* If the table is starting with column of icons */
.default-table thead th.icon-holder {
    background: transparent;
    width: 5rem;
    border-width: 0;
}

.default-table th.icon-holder:after {
    content: "";
    width: 0;
    height: 0;
}

.default-table td.icon {
    position: relative;    
    background: transparent;
    border-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
}

.default-table td.icon svg {
    width: 3rem;
    height: 3rem;
    fill: #ffcb04;
}

.default-table td.icon img { /*TODO use actual icon */
    position: absolute;
    height: 2.75rem;
    width: 2.75rem;
    top: .25rem;
    display: block;
    margin: 0 auto;
}

.default-table td.icon {
     border-radius: .34rem 0 0 .34rem;
}

/* 
    Default form
*/
.default-form__form-row {
    position: relative;
}

.default-form__input {
    display: block;
    padding: .5rem;
    width: 100%;
    border: none;
    border-radius: .34rem;
    color: #2f3d46;
}

.default-form__input:focus {
    border-color: #ffcb06;
}

.default-form__label {
    display: block;
    margin-bottom: .5rem;
    color: #2f3d46;
    font-weight: normal;
}

.default-form__btn-holder {
    margin: 3rem auto 0;
    text-align: center;
}

 .default-form__btn-holder .btn {
     width: 40%;
}

/*
    Custom checkbox styles 
*/
.custom-checkbox {
    position: relative;
    padding-left: 1.5rem;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: .2rem;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color: #ccc;
}

/* On mouse-over, add a yellow background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #ffcb06;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #ffcb06;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: .3rem;
    top: .1rem;
    width: .35rem;
    height: .6rem;
    border: solid #fff;
    border-width: 0 .2rem .2rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*
    Custom select styles 
*/
/* Reset Select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 0 !important;
    background: #d0d3de;
    background-image: none;
}

/* Remove IE arrow */
 select::-ms-expand {
    display: none;
}

/* Custom Select */
.custom-select {
    position: relative;
    display: flex;
    width: 20rem;
    height: 3.3rem;
    line-height: 3.3rem;
    background: #d0d3de;
    overflow: hidden;
    border-radius: .25em;
}

select {
    flex: 1;
    padding: 0 .5em;
    color: #2f3d46;
    cursor: pointer;
}
/* Arrow */
.custom-select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5rem;
    font-size: 1.2rem;
    text-align: center;
    color: #d0d3de;
    background: #2f3d46;
    cursor: pointer;
    pointer-events: none;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}
/* Transition */
.custom-select:hover::after {
    color: #ffcb06;
}

/*
    Custom dropdown   
*/
.custom-dropdown-holder {
    width: 99%;
    margin: 0;
}

.custom-dropdown-holder--narrow {
    width: 9rem;
}

.custom-dropdown-holder__item {
    position: relative;
    /*z-index: 9999;*/
    height: 3.5rem;
    line-height: 2.9rem;
    text-align: center;
    text-transform: initial;
    background: #eee;
    border-radius: .3rem;
    padding: .3rem 3.5rem .3rem 0;
    cursor: pointer;
}

.custom-dropdown-holder__item--narrow {
    height: 2.2rem;
    line-height: 2.2rem;
    padding: 0 2.5rem 0 0;
}

.custom-dropdown-holder__item--dark {
    background: #b6babc;
}

.custom-dropdown-holder__item::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    background: #2f3d46;
    font-size: .9rem;
    color: #eee;
    cursor: pointer;
    pointer-events: none;
    transition: .4s all;
    border-radius: 0 .3rem .3rem 0;
}

.custom-dropdown-holder__item--narrow::after {
    width: 2.5rem;
    line-height: 2.2rem;
    font-size: .7rem;
}

.custom-dropdown-holder__item--dark::after {
    color: #bfc0c7;
}

.custom-dropdown-holder__item:hover:after {
    color: #ffcb06;
}

.custom-dropdown-holder__item a {
    color: #2f3d46;
}

.custom-dropdown {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.4s;
    left: 0;
    top: 95%;
    width: 100%;
    display: none;
    background: #eee;
    border-radius: 0 0 .3rem .3rem;
    padding: .7rem;
    box-shadow: 0 .7rem .7rem #00000078;
}

.custom-dropdown--dark {
    background: #b6babc;
}

.custom-dropdown-holder__item:hover > .custom-dropdown,
.custom-dropdown-holder__item:focus-within > .custom-dropdown,
.custom-dropdown:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    z-index: 1;
    transition: visibility 1s;
}

.custom-dropdown__item {
    clear: both;
    width: 100%;
    line-height: 1;
}

.custom-dropdown__item:not(:last-of-type) {
    margin-bottom: .5rem;
}

.custom-dropdown__item .btn.btn__retro {
    height: 1.9rem;
    padding: .3rem .5rem;
    width: 100%;
    font-size: 1rem;
    line-height: 1.3rem;
    text-transform: initial;
    border: .1rem solid #b6babc;
}

.custom-dropdown__item .btn.btn__retro:before {
     content: "";
     width: 0;
}

/*List dropdown*/
.custom-dropdown--list {
    padding: 0;
    border-top: .1rem solid #2f3d46;
    max-height: 21rem;
    overflow-x: hidden;
}

.custom-dropdown--list .custom-dropdown__item {
    margin: 0;
}

.custom-dropdown--list .custom-dropdown__item a {
   display: block;
   font-size: 1.4rem;
   color: #000;
   cursor: pointer;
   transition: all .4s;
   padding: .7rem;
}

.custom-dropdown--list .custom-dropdown__item a:hover {
    background: #2f3d46;
    color: #eee;
}

/* 
    Default background / dark
*/
.default-background {
    position: absolute;
    top: 0;
    left: 5rem;
    right: 0;
    height: 100%;
    background-color: #2f3d468f;
    z-index: 0;
    border-radius: .34rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

/*Background with logo*/
.default-background-logo {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../../lib/admin-lte/img/logo-dark.png) no-repeat;
    background-size: 300px;
    background-position: center;
    /*background-color: #1e261c*/;
    opacity: .5;
}

/* 
    Tooltip
*/
.custom-tooltip {
    position: relative;
    display: inline-block;
    color: #ffcb06;
    cursor: pointer;
}

.custom-tooltip__content {
    visibility: hidden;
    width: 12rem;
    background-color: #2b2f24;
    font-size: 1.3rem;
    color: #fff;
    text-align: center;
    border-radius: .6rem;
    padding: .7rem;
    position: absolute;
    z-index: 1;
    transition: all .4s;
}

.custom-tooltip:hover .custom-tooltip__content {
    visibility: visible;
}

/* 
    Button 
*/
.btn {
    display: inline-block;
    padding: .6rem 1.2rem;
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: normal;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .2s;
}

/* 
    Main button 
*/
.btn.btn--main {
   position: relative;
   background-color: #ffcb06;
   color: #2f3d46;
   letter-spacing: .1rem;
   transition: all .4s;
   margin-left: auto;
}

.btn.btn--main:hover {
   box-shadow: 0px .1rem .7rem #00000078;
   background: #2f3d46;
    color: #caccd8;
 }

.btn.btn--main span { /* Loader */
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: #ffcb06;
}

.btn.btn--main img {
    width: 3.4rem;
 }

/* 
    Secondary button 
*/
.btn.btn--secondary {
   background: #2f3d46;
   color: #caccd8;
}

.btn.btn--secondary:hover {
    color: #2f3d46;
    background-color: #ffcb06;
    box-shadow: 0px .1rem .7rem #00000078;
}

/* 
    Link button 
*/
.btn.btn--link {
   color: #ffcb06 !important;
}

/*
    Retro button
*/
.btn.btn__retro {
   position: relative;
   padding: .7rem 2rem .7rem 4rem;
   font-size: 11px;
   text-transform: uppercase;
   border-radius: 2rem;
   border: none;
   outline: none;
   cursor: pointer;
   transition: all .2s;
   background: #f5f6f6; /* Old browsers */
   background: -moz-linear-gradient(top, #f5f6f6 0%, #dddfe3 57%, #b8bac6 100%, #dbdce2 100%, #f5f6f6 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #f5f6f6 0%,#dddfe3 57%,#b8bac6 100%,#dbdce2 100%,#f5f6f6 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #f5f6f6 0%,#dddfe3 57%,#b8bac6 100%,#dbdce2 100%,#f5f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.btn.btn__retro--narrow {
   height: 1.3rem;
   font-size: .7rem;
}

.btn.btn__retro:before {
    content: "";
    width: 3rem;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2rem 0 0 2rem;
    background: #ffd53f; /* Old browsers */
    background: -moz-linear-gradient(top, #ffd53f 0%, #ffd760 0%, #ffcd2b 54%, #ffcd2b 54%, #fca82a 98%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffd53f 0%,#ffd760 0%,#ffcd2b 54%,#ffcd2b 54%,#fca82a 98%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffd53f 0%,#ffd760 0%,#ffcd2b 54%,#ffcd2b 54%,#fca82a 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
    
.btn.btn__retro:hover {
    box-shadow: 0px 1px 7px #00000078;
}

/*
    Vertical resize indicator
*/
.gutter.gutter-vertical {
    background: url(../../assets/img/horizontal.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #2f3d46;
    padding: .5rem;
    cursor: n-resize;
    cursor: row-resize;
}

.delete-confirmation-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #2f3d46db;
}

.delete-confirmation-holder h2 {
    margin: 0 0 1.75rem;
    color: #b8bbbd;
    font-size: 1.8rem;
}

.delete-button {
    padding: .5rem 1.5rem;
    background: #b8bbbd;
    border-radius: .34rem;
    color: #2f3d46;
    opacity: .7;
    transition: all .4s;
}

.delete-button.delete-button--main {
    background: #ffcb04;
}

.delete-button:hover {
    opacity: 1;
}

.delete-button:first-of-type { margin-right: 1rem; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end of reusable styles */
/*****************************
        Navigation styles 
 ****************************/
.main-navigation-holder {
    width: 15rem;
    position: absolute;
    top: 0;
    left: -15rem;
    bottom: 0;
    -webkit-transform: none;
    transform: none;
    transition: transform 400ms linear;
    will-change: transform;
    z-index: 1;
}

.main-navigation {
    height: 100vh;
    background-color: #ffcb06;
    padding: 3rem 0;
    text-align: center;
}

.main-navigation__logo {
    width: 14rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    margin: 3rem 0;
}

.user-info__img {
    display: block;
    margin: 0 auto;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: .1rem solid #fff;
    margin-bottom: 1rem;
    background-color: #fff;
}

.user-info__name {
    text-transform: uppercase;
    cursor: default;
}

.main-navigation__list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-navigation__list li {
    position: relative;
    display: block;
    width: 100%;
}

.main-navigation__icon {
    width: 3rem;
    transition: all .4s;
    display: flex;
}

.main-navigation__tooltip {
    font-size: 1.2rem;
    position: absolute;
    top: 1.75rem;
    right: .5rem;
    background: #fff;
    border-radius: .3rem;
    padding: 0 .5rem;
    color: #2f3d46;
    width: 4.8rem;
    opacity: 0;
    transition: all .4s;
    transform: translate3d(0, 0, 0);
}

.nav-background {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #2f3d46;
    transition: all .4s;
    z-index: 0;
}

.main-navigation__list li:hover .nav-background,
.main-navigation__list li.active-item .nav-background {
    width: 100%;
}

.main-navigation__list li a {
    display: block;
    padding: .5rem 0;
    color: #333333;
    font-size: 3rem;
    position: relative;
    z-index: 1;
    transition: all .4s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.main-navigation__list li:hover a,
.main-navigation__list li.active-item a,
.main-navigation__list li:hover .logout-btn {
    color: #fff;
}

.main-navigation__list li:hover .main-navigation__tooltip {
    opacity: 1;
}

.main-navigation__list li:hover .main-navigation__icon svg,
.main-navigation__list li.active-item .main-navigation__icon svg {
    fill: #fff;
}

.main-navigation__icon svg {
    width: 3rem;
    height: 3rem;
    fill: #2b3b44;
}

.logout-btn {
    outline: 0;
    border: 0;
    background-color: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 3.4rem;
    line-height: 1;
    padding: .9rem;
    z-index: 2;
    position: relative;
}

/*sidebar toggle*/
.toggle-sidebar__label {
    z-index: 20;
    position: absolute;
    top: 2.9rem;
    left: 0;
    width: 5rem;
    height: 3rem;
    margin: 0;
    text-align: center;
    line-height: 3rem;
    font-size: 1.7rem;
    color: #b6babc;
    cursor: pointer;
    transition: left 400ms linear;
}

.toggle-sidebar__check {
    display: none;
}

.toggle-sidebar__check:checked ~ .main-content .main {
    left: 15rem;
    transition: left 400ms linear;
}

.toggle-sidebar__check:checked ~ .main-navigation-holder {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: transform 400ms linear;
}

.toggle-sidebar__check:checked ~ .toggle-sidebar__label {
    left: 15rem;
    transition: left 400ms linear;
}

.toggle-sidebar__label:hover .toggle-sidebar__icon {
    color: #ffcb04;
}

/*visible color under sidebar while sliding in*/
body {
    background-color: #333333;
}

/********************************************************************** Navigation styles above*/

/*****************************
        Main section styles 
 ****************************/

.main {
    padding: 3rem 1rem 1rem 0;
    display: flex;
    justify-content: space-between;
    overflow: auto;
    position: relative;
    height: 100vh;
    z-index: 10;

    position: absolute;
    left: 0;
    right: 0;
    transition: left 400ms linear;
}

.main-with-padding {
    padding: 5rem;
}

.left,
.right {
    flex: 0 0 49%;
    display: grid;    
    grid-gap: .2rem;
    position: relative;
    min-height: 0; 
    min-width: 0;
}

.left {
    margin-right: 1.5rem;
    grid-template-rows: min-content min-content 1fr min-content;
}

.right {
    grid-template-rows: min-content min-content 1fr;
}

.fake-main {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*welcome message + animation*/

.welcome-message {
    width: 15em;
    margin: 0 auto;
    border-right: 2.5px solid rgba(255,255,255,.75);
    font-size: 2.7rem;
    letter-spacing: 2.5px;
    color: #fff;
    font-weight: 100;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    opacity: .8;
}

.triple {
    position: relative;
    margin-right: 1.5rem;
}

.triple-plus {
    position: absolute;
    top: .6rem;
    right: -1.5rem;
    line-height: 1;
    color: #ffcb04;
    font-weight: 600;
}

/* Typewriter Animation */
.anim-typewriter {
    animation: typewriter 3s steps(29) 1s 1 normal both, blinkTextCursor 500ms steps(29) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 15em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: transparent;
    }

    to {
        border-right-color: #ffcb04;
    }
}

/* Robot open or create project animation */
.robot-hint-1 {
    position: absolute;
    top: 25rem;
    left: -20rem;
    width: 18.5rem;
    animation: slideInRightRobot 1.5s forwards;
    animation-delay: 4s;
    cursor: grab; /* Standard */
    cursor: -webkit-grab; /* Chrome, Safari */
    cursor: -moz-grab; /* Firefox */
}

@keyframes slideInRightRobot {
    60% {
        left: 23rem;
    }

    80% {
        left: 17rem;
    }

    100% {
        left: 20rem;
    }
}

/* Robot scan hub animation */
.robot-hint-2 {
    width: 25.5rem;
    position: absolute;
    top: 10rem;
    left: 100%;
    z-index: 1;
    animation: slideInLeftRobot 1.5s forwards;
    animation-delay: 2s;
    cursor: grab; /* Standard */
    cursor: -webkit-grab; /* Chrome, Safari */
    cursor: -moz-grab; /* Firefox */
}

@keyframes slideInLeftRobot {
    60% {
        left: 0;
    }

    80% {
        left: 10rem;
    }

    100% {
        left: 5rem;
    }
}

/* Robot upload floor plan animation */
.robot-hint-3 {
    width: 25.5rem;
    position: absolute;
    top: 15rem;
    right: -25.5rem;
    z-index: 1;
    animation: slideInRightRobot3 1.5s forwards;
    animation-delay: 2s;
    cursor: grab; /* Standard */
    cursor: -webkit-grab; /* Chrome, Safari */
    cursor: -moz-grab; /* Firefox */
}

@keyframes slideInRightRobot3 {
    60% {
        right: 10rem;
    }

    80% {
        right: 0rem;
    }

    100% {
        right: 5rem;
    }
}

/* Robot position device on floor plan animation */
.robot-hint-4 {
    width: 25.5rem;
    position: absolute;
    left: -25.5rem;
    top: -30.5rem;
    z-index: 1;
    animation: slideInLeftRobot3 1.5s forwards;
    animation-delay: 2s;
    cursor: grab; /* Standard */
    cursor: -webkit-grab; /* Chrome, Safari */
    cursor: -moz-grab; /* Firefox */
}

@keyframes slideInLeftRobot3 {
    60% {
        left: 6rem;
    }

    80% {
        left: 0;
    }

    100% {
        left: 1rem;
    }
}

.dragging {
    position: absolute;
    opacity: 0.5;
    cursor: grabbing; /* Standard */
    cursor: -webkit-grabbing; /* Chrome, Safari */
    cursor: -moz-grabbing; /* Firefox */
}

    /********************************
 **                            **
 **  Projects Page CSS BELOW   **
 **                            **
********************************/
    .section-projects {
    height: 100%;
    overflow-y: auto;
}

.projects-table-holder {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 6.2rem;
    width: 99.9%;
    height: 100%;
    left: .1rem;
}

.projects-table thead {display: none;}

.actions-holder {
    display: flex;
    justify-content: space-evenly;
}

.projects-table td {
    background-color: #fbc900;
}

.enroledProject td {
    background-color: #b8bbbd;
}

/********************************
 **                            **
 **     Homepage CSS BELOW     **
 **                            **
********************************/

.section-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-left: 5rem;
}

.section-header__title {
    background-color: #fbc900;
    border-radius: .34rem;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: .1rem;
    padding: .3rem 1.75rem .3rem 1.5rem;
    display: flex;
    align-items: center;
    flex: 0 0 26rem;
}

.section-header__details {
    flex: 0 0 1;
    font-size: 1.45rem;
    color: #fbc900;
    line-height: 1;
    border: 1px solid #fbc900;
    border-radius: .34rem;
    margin-left: .5rem;
    padding: .5rem 1rem;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}

.section-header__icon {
    width: 2rem;
    height: 2rem;
    margin-right: .1rem;
    display: flex;
    align-items: center
}

.section-header__icon svg {
    fill: #2b3b44;
}

.fake-table-header {
    display: flex;
    align-items: center;
    height: 3.2rem;
    z-index: 1;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #b8bbbd;
    border-radius: .34rem;
    margin-left: 4.9rem;
}

.fake-table-header.registered-system-table-header span:nth-child(1) {
    flex: 1;
    padding-left: .7rem;
}

.fake-table-header.registered-system-table-header span:nth-child(2) {
    flex: 0 0 15rem;
    padding-left: .7rem;
    border-left: 1px solid;
}

.fake-table-header.connected-devices-table-header span,
.fake-table-header.projects-table-header span{
    flex: 0 0 33.33333%;
    padding-left: .7rem;
}

.fake-table-header.connected-devices-table-header span:not(:first-of-type),
.fake-table-header.projects-table-header span:not(:first-of-type){    
    border-left: 1px solid;
}

.fake-table-header.projects-table-header {
    margin: 0;
}

/***************************************
        Registered System Styles
 **************************************/
.section-registered-system {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.registered-system-table-holder {
    margin-right: .3rem;
    height: 100%;
}

.registered-system-table {
    position: absolute;
    top: -3.6rem;
}

.registered-system-table thead {visibility:hidden;}

.registered-system-table input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    height: 3rem;
    padding: 0 .5rem;
}

.registered-system-table input:focus {
    background-color: #ffffffcf;
    /*border: 1px solid #d7d9d7;*/
    border-radius: .34rem;
    padding: .25rem .5rem;
    line-height: 1;
    box-shadow: 0 0 5px 1px #b8bbbd;
}

/**************************************
        Connected Devices Styles
 **************************************/
.section-connected-devices {
    height: 55vh;
    position: relative;
    overflow-x: hidden;
    margin-bottom: 1.5rem;
}

.connected-devices-table-holder {
    overflow-x: hidden;
    overflow-y: auto;
    margin-right: .3rem;
}

.connected-devices-table {
    position: absolute;
    top: -3.6rem;
}

.connected-devices-table thead {
    visibility: hidden;
}

.connected-devices-table input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    height: 3rem;    
    position: relative;
    padding: 0 .5rem;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.connected-devices-table input:focus {
    background-color: #ffffffcf;
    /*border: 1px solid #b8bbbd;*/
    border-radius: .34rem;
    padding: .25rem .5rem;
    line-height: 1;
    box-shadow: 0 0 5px 1px #b8bbbd;
}

.connected-devices-table td.icon img {
    height: 3rem;
}

.connected-devices-table tr.add-new-device td:not(.clear-background) {
    background-color: #fffffff2;
}

.connected-devices-table tr.add-new-device td:nth-child(2) {
    border-radius: 0 0 0 .34rem;
}

.connected-devices-table tr.add-new-device td:last-of-type {
    border-radius: 0 0 .34rem;
}

.connected-devices-table td.icon-add-new-divice svg {
    fill:#d7d9d7;
}

.main-logo {
    width: 12rem;
    height: 4rem;
    position: absolute;
    right: 0;
}

/*Nested table styles*/
.fake-thead td {
    background: #ffcb06;
}

.repeater-icon-holder {
    display: flex;
    align-items: center;
}

.repeater-icon {
    margin-right: .5rem;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
}

.repeater-icon-holder svg {
    fill: #2f3d46;
    width: 2.5rem;
    height: 2.5rem;
}

.default-table tr.nested-table-tr:hover td:first-of-type {
    background-color: transparent;
}

.default-table tr.nested-table-tr:hover td:first-of-type .nested-table-fake-something {
    background-color: #f7f7f7;
}

td.nested-table-fake-nesting {
    padding: 0;
    border: none;
    background: transparent;   
}

.nested-table-fake-td {
    margin-left: 5rem;    
    display: flex;
    align-items: stretch;
    height: 100%;
}

.nested-table-fake-icon-holder {
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nested-table-fake-icon-holder svg {
    fill: #ffcb04;
    width: 2.5rem;
    height: 2.5rem;
}

.nested-table-fake-something {
    background: #d7d9d7;
    flex: 1;
    padding: 0 1rem;
    transition: all .4s;
    display: flex;
    align-items: center;
    border: solid black;
    border-width: 0 1px 1px;
}

/*add device to repeater*/
.default-table tr.add-new-device-repeater td:not(:first-child),
.default-table tr.add-new-device-repeater .nested-table-fake-something {
    background-color: #fffff2;
}
.default-table tr.add-new-device-repeater .nested-table-fake-icon-holder svg {
    fill: #d7d9d7;
}
/*****************************
        Floor styles 
 ****************************/
.floor-plan {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .34rem;
    background-color: #2b3b4463;
    background-size: cover;
}

/*Floor plan navigation*/
.floor-plan-nav-holder {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.floor-plan-nav-holder .nav-trigger {
    color: #fff;
    font-size: 2rem;
    width: 100%;
    transition: all .4s;
}

.floor-plan-nav-holder .nav-trigger:hover {
    color: #ffcb06;
}

.floor-plan-nav-holder .nav-trigger:hover > .floor-plan-nav {
    display: block;
}

.floor-plan-nav-holder .nav-trigger:hover > .icon-holder {
    background: #febb1a;    
}

.floor-plan-nav-holder .nav-trigger:hover > .icon-holder svg {
    fill: #000;
}

.floor-plan-nav-holder .icon-holder {
    cursor: pointer;
    background: #2f3d46;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    margin-left: auto;
    transition: background .4s;
    margin-bottom: .5rem;
}

.floor-plan-nav-holder .icon-holder > svg {
    fill: #fff;
}

.floor-plan-nav {
    background: #2f3d46;
    border-radius: .34rem;
    box-shadow: 0 0 3px 2px #c3b0b0;
    overflow: hidden;
    transition: all .4s;
    display: none;
    padding: 1rem;
}

.floor-plan-nav li:not(:last-of-type) {
    margin-bottom: 1rem;
}

.floor-plan-nav li span {
    padding: .3rem;
    flex: 1;
    text-align: left;
    transition: all .4s;
}

.floor-plan-nav li:hover span {
    background-color: #fff;
    color: #2f3d46;
    border-radius: .34rem;
}
   
.floor-plan-nav a,
.floor-plan-nav a:link,
.floor-plan-nav a:visited {
    display: block;
    color: #fff;
    transition: all .4s;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.floor-plan-nav a svg {
    fill: #fff;
    width: 1.8rem;
    margin-right: .3rem;
}

/*Floor plan fake overlay*/
.floor-plan-fake-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/*****************************
        New enrolment modal 
 ****************************/
.new-enrolment {
    background: rgba(0, 0, 0, 0.8);   
}

.new-enrolment .modal-dialog {
     margin-top: 15vh;
}

.new-enrolment .modal-content {
    background-color: transparent;
}

.new-enrolment .modal-header {
    position: relative;
    color: #feb913;
    margin-bottom: 3rem;
    border-bottom: 0;
}

.new-enrolment .modal-header h1 {
    font-size: 6rem;
    font-weight: 100;
}

.new-enrolment .modal-header p {
    font-size: 2.2rem;
    font-weight: 100;
}

.new-enrolment .modal-header .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #feb913;
    font-size: 6rem;
    font-weight: 100;
    opacity: .6;
    transition: all .4s;
}

.new-enrolment .modal-header .close:hover {
    opacity: 1;
}

.new-enrolment .modal-subtitle{
    color: #feb912;
    font-weight: 100;
    font-size: 1.5rem;
    margin: 0 0 1rem;
    padding: 0 1rem;
}

.new-enrolment .modal-body {
    background-color: #ababac;
    border-radius: .34rem .34rem 0 0;
        text-align: center;
    height: 30rem;
    display: flex;
    flex-direction: column;
  
}

.new-enrolment .modal-footer {
     background-color: #ababac;
     border-radius: 0 0 .34rem .34rem;
     border-top: none;
     display: flex;
}

.new-enrolment .modal-footer button { margin-right: auto; }

/*****************************
        New enrolment form 
 ****************************/
.new-enrolment-form {
    position: relative;
}

.new-enrolment-form .default-form__form-row {   
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.new-enrolment-form .default-form__label {
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.new-enrolment-form .default-form__input {
    flex: 1;
    margin-left: .5rem;
    background-color: #f3f3f3;
}

.new-enrolment-form .datapicker-icon {
    position: absolute;
    right: .75rem;
}

.new-enrolment-form .custom-select {
    flex: 1;
    height: 2.8rem;
    margin-left: .5rem;
} 

.new-enrolment-form .custom-select::after {
    line-height: 2.8rem;
}

.new-enrolment-form select {
    background-color: #f3f3f3;
    height: 100%;
    line-height: 1;
}

.new-enrolment-form .textarea-row {
    flex: 0 1 100%;
    display: flex;
    margin-left: 1rem;
}

.new-enrolment-form .textarea-label {
    flex: 0 1 100%;
    height: 100%;
    align-items: flex-start;
}

.new-enrolment-form textarea {
    height: 100%;
    margin-left: .5rem;
    flex: 0 1 100%;
    padding: .5rem;
    border-radius: .34rem;
    background-color: #f3f3f3;
}

.new-enrolment-form textarea:focus,
.new-enrolment-form .default-form__input:focus {
    box-shadow: 0px 0px 8px 2px #8d8a8a;
    outline: none;
}

.new-enrolment-form .btn { padding: .3rem 1.2rem;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end of new enrolment modal styles */

/*enrol project loader*/
.enrolment-loader {
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 101;
}

.enrolment-loader--success {
    background-color: #4a380ca1;
}

.enrolment-loader--error {
    background-color: #49130e7d;
}

.enrolment-loader__title {
    color: #fbc900;
    text-transform: uppercase;
    letter-spacing: .5rem;
    text-align: center;
    font-size: 3.5rem;
    margin-bottom: 0;
}

.enrolment-loader__info {
    color: #fbc900;
    font-size: 2.2rem;
    font-weight: 100;
}

.enrolment-loader__info--error,
.enrolment-loader__title--error {
    color: #dd4a39;
}

.enrolment-error {
    left: 0;
    z-index: 101;
}

.enrolment-success {
    left: 0;
    z-index: 101;
}

.modal-close {
    position: absolute;
    top: -15rem;
    right: -15rem;
    color: #feb913;
    font-size: 6rem;
    font-weight: 500;
    line-height: 1;
    transition: all .4s;
    background: transparent;
    outline: none;
    border: none;
    transition: all .8s;
}

.modal-close:hover {
     transform: rotate(360deg);
}

.modal-close.modal-error {color: #dd4a39;}

.enrolment-notification-holder {
    position: relative;
    width: 82%;
    margin: 8rem auto 4rem 13rem;
}

.enrolment-notification {
    padding: 2.5rem 1.5rem;
    background: #d7d9d7;
    border-radius: .34rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2b3b44;
    text-align: center;
    animation: fadeIn 2s;
}

.enrolment-notification__img {
    width: 18rem;
    position: absolute;
    left: -8.9rem;
    top: -5.5rem;
    z-index: 1;
    animation: fadeInLeft 2s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

@keyframes fadeInLeft {
    0% {
        transform: translate(-150%);
    }
    60% {
        transform: translate(15%);
    }
    80% {
        transform: translate(-10%);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/**************************************
 **                                  **
 **       Login Page CSS BELOW       **
 **                                  **
**************************************/
.login-background {
    position: fixed;
    background: url(../../lib/admin-lte/img/login-background.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    filter: brightness(0.3);
    z-index: 100;
}

.login {
    position: relative;
    width: 30rem;
    background: #ffffffad;
    border-radius: .5rem;
    padding: 8.5rem 1rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
}

.login__logo {
    position: absolute;
    top: -6rem;
    left: 0;
    right: 0;
    width: 25rem;
    margin: 0 auto;
}

.login__logo--shape {
    filter: drop-shadow(.4rem 0 0 #18232d) drop-shadow(0 .4rem 0 #18232d) drop-shadow(-.4rem -.1rem 0 #18232d);
}

.login__logo--text {
    top: 1rem;
    width: 20rem;
}

.login__title {
    margin: 1.5rem 0;
    font-size: 1.4rem;
    font-weight: normal;
    text-align: center;
}

.login-form__input-holder {
    position: relative;
    margin-bottom: 1.5rem;
}

.login-form__input-icon {
    position: relative;
    display: block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    background-color: #ffcb06;
    position: absolute;
    top: -.2rem;
    left: 0;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form__input-icon:after { /*right arrow styles*/
    left: 98%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 203, 6, 0);
    border-left-color: #ffcb06;
    border-width: .6rem;
    margin-top: -.6rem;
}

.login-form__input {
    width: 100%;
    height: 3.5rem;
    padding-left: 5rem;
    border: none;
    outline: none;
    background-color: #fff;
}

.login-form__login-options {
    margin-bottom: 1rem;
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.login-form__label {
    cursor: pointer;
    font-weight: normal;
}

.login-form__link:link,
.login-form__link:visited {
    position: relative;
    color: #000;
}

.login-form__link:after {
    content: "";
    width: 0;
    height: .1rem;
    background-color: #ffcb06;
    position: absolute;
    left: -.2rem;
    bottom: -.6rem;
    transition: width .2s;
}

.login-form__link:hover:after {
    width: 100%;
}

.login-form__loader img {
    height: 3.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-form .btn__main {
    position:relative;
    width: 100%;
    margin-top: 2.5rem;
    color: #fff;
    background: #ffcb04;
    letter-spacing: 1px;
}

.login-form .btn__main:hover {
    box-shadow: 0px 0.1rem 1rem #cdc5c5de;
}

.login-form .btn__main span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #ffcb06;
}

.login-form .btn__main img {
    width: 3.4rem;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end of login page styles */

.no-results__title {
    font-size: 2.1rem;
    color: #b8bbbd;
}

/*~~~~~~~~~~~~~~~~~~~~ About page */
.enrolment-settings-about {
    background-color: #f3f3f3;
    padding: 3rem;
    text-align: center;
    border-radius: .34rem;
    box-shadow: 0px 0px 8px 2px #8d8a8a;
}

.enrolment-settings-about__tittle {
    margin: 3rem 0;
    font-size: 3rem;
    font-weight: bold;
}

.enrolment-settings-about__links a,
.enrolment-settings-about__copy a {
    display: block;
    margin-bottom: .5rem;
    color: #2f3d46;
    font-weight: bold;
    transition: all .4s;
}

.enrolment-settings-about__copy a {
    display: inline-block;
}

.enrolment-settings-about__links a:hover,
.enrolment-settings-about__copy a:hover {
    letter-spacing: .1rem;
}

.enrolment-settings-about__logo {
    width: 16.5rem;
}

/********************************************************************** END OF MAIN DESIGN*/

/**************************************
 **                                  **
 **       Utility classes BELOW      **
 **     DO NOT ABUSE THIS SECTION.   **
 **           HULK ANGRY.            **
 **                                  **
**************************************/

/* 
    Center content with absolute positioning
*/
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.display-none {
    display: none;
}

.overflow-hidden {
    overflow: hidden;
}

.height100 {
    height: 100%;
}

.opacity50 {
    opacity: 0.5;
}

.opacity100 {
    opacity: 1;
}

.flex-me {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.cut-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end of utility styles */

/**************************
    Questionable stuff xD
***************************/


@-moz-document url-prefix() /*mozila*/ {
    td.default-table__tooltip-holder {
        background-clip: padding-box;
    }
}

.default-table .active-system td:not(.clear-background){
    background-color: #f7f7f7;
}
.popup-error{
    background-color: #f4f4f4;
    text-align: center;
    height: 10rem;
}
.hidden{
    display:none;
}
.visible {
    display: block !important;
}

/*
    Fancy error styles 
*/
.fancy-error-holder {
    position: relative;
    padding: .3rem 0;
    width: 100%;
}

input.fancy-error__input,
input.fancy-error__input:focus {
    border: 1px solid #8f0e0e;
    border-radius: .34rem;
    background: #e7a8a8;
    height: 3rem;
    margin-top: .5rem;
}

.fancy-error__icon {
    display: none;
}

input.fancy-error__input ~ .fancy-error__icon {
    display: block;
    position: absolute;
    right: .5rem;
    top: 1.8rem;
    color: #8f0f0e;
}

.fancy-error__message {
    display: block;
    position: absolute;
    top: .15rem;
    left: .75rem;
    background: #8f0e0e;
    line-height: 1;
    font-size: 1.1rem;
    color: #e7a7a8;
    padding: .2rem .5rem;
    font-weight: 600;
    border-radius: .34rem;
}
/*************** end fancy error*/

.no-set-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.no-set-image img {width: 20rem;}

/*misc*/
.detele-btn-holder {
    position: absolute;
    right: 1.2rem;
    top: 1rem;
}

.detele-btn-holder svg {    
    transition: all .4s;
    fill: #fff;
}

tr:hover .detele-btn-holder svg,
.default-table .active-system .detele-btn-holder svg {
    fill: #2b3b44;
}