/*--------------------------------------------------------------
    Phantom Custom Styling
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    background-color: #dfe6ea;
    background-repeat: no-repeat;
    background-size: contain;
    overflow-x: hidden;
}

a {
    color: #3c55f1;
}

.navbar1 {
    overflow: hidden;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    bottom: 0;
    width: 98%;
    justify-content: space-around;
    border-radius: 6px;
  }

.navbar1 a {
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
  display: block;
}

button,
input,
optgroup,
select,
textarea {
    font-family: 'Roboto', sans-serif;
}

#header {
    width: 100% !important;
}

#header .navbar {
    border-bottom: none;
}

.logo-wrapper {
    margin: 0 !important;
    line-height: 0 !important;
}

.navbar-fixed {
    height: auto;
    margin: 0 !important;
}

.navbar .navbar-main {
    padding: 0;
    height: 30px;
}

nav ul.left {
    display: flex;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
    height: 100%;
}

nav ul li {
    height: 100%;
    display: flex;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    padding-right: 10px;
}

nav ul li.active {
    background-color: transparent;
}

nav ul a {
    line-height: 38px;
    font-size: 13px !important;
    font-weight: 500;
    text-transform: capitalize;
    color: #7E8299;
}

nav,
nav .nav-wrapper i,
nav a.sidenav-trigger,
nav a.sidenav-trigger i {
    line-height: 38px;
    height: 38px;
}

.navbar .navbar-main {
    padding: 0;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

nav ul li a {
    transition-duration: .3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

nav ul li a:hover,
nav ul li.open a {
    background-color: rgba(255, 255, 255, 0.30) !important;
    transition-duration: .3s;
}

nav ul li.active a {
    background-color: rgba(255, 255, 255, 0.30) !important;
    transition-duration: .3s;
}

header .brand-logo img {
    height: 55px;
    background-color: #FFFFFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    top: 0;
    transition-duration: .3s;
}

header .brand-logo:hover img {

    transition-duration: .3s;
}

header .brand-logo {
    padding: 0;
}

.navbar-fixed .navbar-main {
    position: relative;
}

nav .nav-wrapper {
    position: relative;
    height: 60px;
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.left.nav-bar {
    margin: 0 auto;
}

#upload_mode_drop_down{
    top: 120px !important;
    width: 20% !important;
}

#chord_peds_chart_dropdown.dropdown-content,
#peds_table_details_option.dropdown-content,
/* #peds_table_count_option.dropdown-content, */
#class_wise_split_dropdown_jtc.dropdown-content{
    top:90px !important;
}

@media (max-width: 600px){
    .card-content #choose_function_drop_down {
        width: 50% !important;
}
}
#qc_count_text p,
#by_intervals_text p,
#unaudited_counts_text p,
#by_individuals_text p{
    font-size: 18px;
    margin: 0px 0px 7px 25px;
}

.dropdown-content:not(
    .dropdown-content.select-dropdown,
    .dropdown-content#upload_mode_drop_down, 
    ul#site_survey_type_dropdown, 
    .dropdown-content.download_raw_data,
    #chord_peds_chart_dropdown.dropdown-content,
    #peds_table_details_option.dropdown-content,
    #peds_table_count_option.dropdown-content,
    #projection_od_dropdown.dropdown-content,
    #asset_dropdown_card .dropdown-content,
    #site_install .dropdown-content,
    #search_results_result .dropdown-content,
    #analysis_toolkit_container .dropdown-content,
    #site_matching_table_div .dropdown-content,
    #summary_table_div .dropdown-content,
    #asset_history_table_display_data .dropdown-content,
    #class_wise_split_dropdown_jtc.dropdown-content,
    #asset_div .dropdown-content,
    #gis_peds .dropdown-content,
    #job_details_more_option) {
    height: auto !important;
    top: 30px !important; 
    left: 88% !important;
    width: 12% !important;
}

ul#site_survey_type_dropdown{
    left: 35% !important;
    top: 45px !important;
    width: 35% !important;
}

.data_exist{
    color: green !important;
}
.data_not_exist{
    color: red !important;
}

.dropdown-content.download_raw_data{
    height: auto !important;
    top: auto !important;
    left: 25% !important;
    width: 55% !important;
}

.data_exist{
    color: green !important;
}
.data_not_exist{
    color: red !important;
}

.gorupOfFetchRawDataBtn{
    width: 345px;
    text-align: left;
}

#openFetchRawDataModal{
    width: 40%;
    overflow: hidden;
}

header .brand-logo:hover {
    background-color: transparent !important;
}

.breadcrumbs-dark .col.s12 {
    display: flex;
    align-content: center;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    padding: 0 !important;
    justify-content: center;
}

.breadcrumb-item a i {
    position: relative;
    top: 4px;
    font-size: 18px;
}

#breadcrumbs-wrapper {
    display: inline-block;
    width: 100%;
    padding: 10px 10px 5px 10px !important;
}

.glass-button {
    background-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    font-weight: 500;
    padding: 0 1rem 0 3rem;
    color: #FFFFFF !important;
    transition-duration: .3s;
}

.glass-button:hover,
.glass-button.active {
    background-color: #FFFFFF !important;
    color: #3F4254 !important;
    transition-duration: .3s;
}

.white-button {
    background-color: #FFFFFF !important;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    color: #3F4254 !important;
    font-weight: 500;
}

.breadcrumbs-dark .btn {
    position: relative;
    font-size: 13px !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: 15px;
}

.breadcrumbs-dark .btn span,
.breadcrumbs-dark .btn:hover span {
    transition-duration: .3s;
}

.breadcrumbs-dark .breadcrumbs-title span {
    font-weight: 400;
    color: #161616;
}

#breadcrumbs-wrapper .breadcrumbs .active span {
    color: #013d7b;
}

.navbar-list.right li {
    padding: 0 !important;
}

.z-depth-1,
nav,
.card-panel,
.card,
.toast,
.btn,
.btn-large,
.btn-small,
.btn-floating,
.dropdown-content,
.collapsible,
.sidenav {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
}

.card,
.card .card-content {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.card .card-content .card-title {
    font-size: 12px;
    line-height: 32px;
    display: block;
    color: #000;
    font-weight: 600;
}

.breadcrumbs-dark .breadcrumbs-title span {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    top: 5px;
    margin-right: 5px;
}

nav ul.right .profile-button {
    padding: 15px !important;
}

.navbar .profile-button span.avatar-status i {
    bottom: 3px;
    right: 1px;
    color: #25C3AD !important;
    border: none !important;
    width: 7px !important;
    height: 7px !important;
}

.fixed-header .navbar-main {
    position: fixed !important;
    -webkit-animation: header-magic-animation .5s ease 1;
    animation: header-magic-animation .5s ease 1;
    z-index: 10002;
}

@keyframes header-magic-animation {
    0% {
        top: -80px;
    }

    100% {
        top: 0;
    }
}

.fixed-header nav ul li.active a,
.fixed-header nav ul a:hover {
    background-color: rgba(255, 255, 255, 0.30) !important;
    color: #7E8299;
}

.fixed-header nav ul a {
    color: #7E8299;
}

.breadcrumbs-dark .btn span i {
    position: absolute;
    left: 12px;
}

.dropdown-content li {
    overflow: hidden;
}

#profile-dropdown {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    top: 60px !important;
    -webkit-box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.2) !important;
    -moz-box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.2) !important;
    max-width: 200px;
}

#profile-dropdown li {
    float: left;
    width: 100% !important;
    clear: none !important;
    height: 40px;
    position: relative;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 40px !important;
    margin: 0 !important;
}

#profile-dropdown li:nth-child(2),
#profile-dropdown li:nth-child(4) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#profile-dropdown li:nth-child(4),
#profile-dropdown li:nth-child(5) {
    border-bottom: none !important;
}

#profile-dropdown li .avatar-status {
    position: absolute;
    padding: 0 !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 20px auto 0;
}

#profile-dropdown li span .avatar-profile-welcome {
    position: absolute;
}

#profile-dropdown li .avatar-profile-email {
    padding: 0 !important;
    font-size: 14px !important;
}

#profile-dropdown li a {
    padding: 0 !important;
    width: auto;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    color: #7E8299 !important;
    background-color: transparent !important;
    float: left;
    height: 40px;
    line-height: 40px;
}

#profile-dropdown li span {
    background-color: transparent !important;
}

#profile-dropdown li a i {
    position: relative;
    color: #223645;
    float: left;
    margin: 0 10px;
}

#profile-dropdown li .profile-avatar-welcome {
    position: relative;
    padding: 0 !important;
}

#profile-dropdown .avatar-profile-data {
    background-image: url("../../images/general/blurb-header.jpg");
    width: 100% !important;
    background-size: cover;
    background-position: center center;
    padding: 10px !important;
    height: auto !important;
    display: block;
}

#profile-dropdown .avatar-profile-data .avatar-profile-status {
    padding: 0 !important;
}

#profile-dropdown .avatar-profile-data .avatar-profile-status img {
    width: 50px !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#profile-dropdown .avatar-profile-data span {
    display: inline-block;
    width: 100%;
    text-align: center;
    clear: both !important;
    position: relative;
    padding: 5px !important;
    color: #FFF;
    font-size: 14px !important;
}

#main {
    max-width: 1400px;
    margin: 0 auto;
    z-index: 999;
}

.dashboard-revenue-wrapper .mt-2 {
    color: #181C32;
}

.super-aqua {
    background-color: #009E88 !important;
}

.ct-series-a .ct-bar,
.ct-series-a .ct-line,
.ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
    stroke: #009F8A !important;
}

.min-medium-height-card .card {
    max-height: 350px;
    height: 100vh;
}

.medium-height-card .card {
    max-height: 300px;
    height: 100vh;
}

.card .card-content h2.card-title {
    font-size: 20px !important;
    line-height: 40px !important;
    color: #3F4254 !important;
}

.blue-button {
    background-color: #6993FF !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    transition-duration: .3s;
}

.blue-button:hover {
    background-color: #4A7DFF !important;
    transition-duration: .3s;
}

.vert-center .card-content {
    display: flex;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.navbar-main .dropdown-content {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
    -moz-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
}

.dropdown-content {
    z-index: 999999;
}
.navbar-main .dropdown-content li {
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-main .dropdown-content li a {
    color: #7E8299 !important;
    font-weight: 500;
    min-width: 200px;
    padding: 12px 20px;
}

.min-small-height-card .card-content {
    height: 150px;
}

.pic-bg-box .card {
    background-image: url("../../images/general/picbg-1.jpg");
    background-size: 130%;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    background-position: center center;
    -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2) !important;
    -moz-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2) !important;
}

.pic-bg-box .card:hover {
    background-size: 160%;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.pic-bg-box .card-title {
    line-height: 26px !important;
    color: #3F4254 !important;
    font-size: 16px !important;
    text-transform: capitalize;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.pic-bg-box i {
    color: #3F4254 !important;
    margin: 20px auto 0;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.pic-bg-box .card:hover .card-title,
.pic-bg-box .card:hover i {
    color: #212121 !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.the-purple-box .card-content {
    background-image: url("../../images/general/helpbg.png");
    background-color: #663259;
    height: 170px;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.the-purple-box .card-content .col {
    margin: 0 !important;
}

.the-purple-box .card-content .card-title {
    font-size: 20px !important;
    color: #FFF;
    margin: 0 auto 20px;
}

.aqua-button {
    background-color: #1BC5BD !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    transition-duration: .3s;
}

.aqua-button:hover {
    background-color: #0BB7AF !important;
    transition-duration: .3s;
}

.user-stats-box .card {
    padding: 20px !important;
}

.user-stats-box.green-box .card {
    background-image: radial-gradient(circle, #39E3DB 0%, #1BC5BD 100%);
}

.justify-content-center {
    text-align: center;
}

#main {
    min-height: 100%;
    width: calc(100% - 240px);
    max-width: 100% !important;
    float: right;
}

.line-state-full-height .card .card-content {
    height: 98%;
}

.line-state-full-height .card .card-content .total-transaction-container {
    height: 98%;
}

.line-state-full-height .card .card-content .total-transaction-container #total-transaction-line-chart {
    height: 98%;
}

.user-stats-box.green-box .card .s12 i {
    font-size: 32px !important;
    color: #FFF;
    width: 32px;
}

.user-stats-box.green-box .card .s12 .stats-title-text {
    font-size: 18px !important;
    margin-left: 10px !important;
    color: #FFF;
    line-height: 34px;
    font-weight: 500;
}

.user-stats-box.green-box .card .bottom-border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 0 15px 0;
}

.user-stats-box.green-box .card .s12 .stats-title-number {
    font-size: 32px !important;
    font-weight: 600;
    color: #FFF !important;
}

.user-stats-box.green-box .card .bottom-border .s8 {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.user-stats-box.green-box .card .new-stats-box {
    padding: 15px 0 0 0;
}

.user-stats-box.green-box .card .new-stats-box .s8 {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.user-stats-box.green-box .card .s12 .stats-desc-text {
    color: #FFF;
    font-size: 14px !important;
    text-transform: capitalize;
    margin: 7px auto;
}

.user-stats-box.blue-box .card {
    background-image: radial-gradient(circle, #8DB7FF 0%, #6993FF 100%);
}

.user-stats-box.blue-box .card .s12 i {
    font-size: 32px !important;
    color: #FFF;
    width: 32px;
}

.user-stats-box.blue-box .card .s12 .stats-title-text {
    font-size: 18px !important;
    margin-left: 10px !important;
    color: #FFF;
    line-height: 34px;
    font-weight: 500;
}

.user-stats-box.blue-box .card .bottom-border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 0 15px 0;
}

.user-stats-box.blue-box .card .s12 .stats-title-number {
    font-size: 32px !important;
    font-weight: 600;
    color: #FFF !important;
}

.user-stats-box.blue-box .card .bottom-border .s8 {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.user-stats-box.blue-box .card .new-stats-box {
    padding: 15px 0 0 0;
}

.user-stats-box.blue-box .card .new-stats-box .s8 {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.user-stats-box.blue-box .card .s12 .stats-desc-text {
    color: #FFF;
    font-size: 14px !important;
    text-transform: capitalize;
    margin: 7px auto;
}

.title-with-buttons .card-title-wrapper {
    padding: 0px;
}

.title-with-buttons .card-title-wrapper .card-title {
    font-weight: 500;
    text-align: left;
}

.title-with-buttons .card-title-wrapper .flow-text {
    font-size: 14px !important;
    color: #B5B5C3 !important;
    font-weight: 500;
    float: left !important;
}

.title-with-buttons .title-dropdown-content {
    margin: 0 !important;
    padding: 30px 20px 30px 30px;
}

.title-with-buttons .title-dropdown-content li {
    float: left;
}

.title-with-buttons .title-dropdown-content li a {
    background-color: #E1E9FF;
    margin-left: 15px;
    font-size: 13px !important;
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 10px 14px 10px 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.title-with-buttons .title-dropdown-content li a:hover {
    background-color: #3b56fb !important;
    color: #E1E9FF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.title-with-buttons .title-dropdown-content li a i,
.title-with-buttons .title-dropdown-content li a svg {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 20px !important;
}

.select-wrapper .caret {
    position: absolute;
    z-index: 2;
    top: 0;
    /* right: -20px; */
    bottom: 0;
    margin: auto 0;
    fill: #607D8B;
}

.card .card-content .select-dropdown.dropdown-trigger,
.card .card-content .dt-search form input[type="search"] {
    padding: 0px 10px;
}

.select-dropdown.dropdown-trigger {
    border: none !important;
    background-color: #dee6fb !important;
    border-radius: 10px !important;
    padding: 0 10px !important;

}


table.dataTable {
    margin: 0 auto !important;
    width: 100% !important;
    border: 1px solid rgba(0, 0, 0, .07) !important;
    border-collapse: separate !important; 
    border-spacing: 0;
    overflow: hidden;
}

table.dataTable .thead-theme {
    position: relative;
}

table.dataTable .thead-theme tr th:last-child {
    border-right: none !important;
}

table.dataTable tbody tr {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #EBEDF3 !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
}


table.dataTable tbody tr td {
    text-align: left !important;
    color: #3e4571 !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 5px !important;
    background-color: transparent !important;
    text-transform: capitalize;
    border-radius: 0 !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
}

div.dt-container div.dt-layout-row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
table.dataTable tbody tr:hover {
    z-index: 2;
    position: relative;
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .20), 0 20px 100px 0 rgba(0, 0, 0, .20) !important;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .20), 0 20px 100px 0 rgba(0, 0, 0, .20) !important;
    transform: scale(1.04);
}

table.dataTable .thead-theme th .dt-column-header .dt-column-title {
    color: #ffffff !important;
}

table.dataTable tbody tr td a {
    color: #748096 !important;
}

table.dataTable tbody tr td:first-child {
    padding: 20px 20px 20px 60px !important;
    border-left: 2px solid transparent;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
}

table.dataTable tbody tr td:nth-last-child(2) {
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
}

table.dataTable tbody tr:hover td:first-child {
    border-left: 2px solid rgba(0, 0, 0, 0.2);
}

table.dataTable tbody tr:hover td:nth-last-child(2) {
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

table.dataTable tbody tr td:first-child::before {
    background-color: #E1E9FF !important;
    border: none !important;
    box-shadow: none !important;
    color: #3c55f1 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    line-height: 30px !important;
    top: 15px !important;
    left: 15px !important;
}

table.dataTable tbody tr td .green-text {
    background-color: #C9F7F5 !important;
    color: #1BC5BD !important;
    font-size: 12px !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 500 !important;
    height: auto !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
}

table.dataTable tbody tr:hover td .green-text {
    background-color: #1BC5BD !important;
    color: #C9F7F5 !important;
}

table.dataTable tbody tr td:nth-last-child(2) a {
    border: none !important;
    box-shadow: none !important;
    color: #203442 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 30px !important;
    top: 0 !important;
    text-align: center;
}

table.dataTable tbody tr td a i:not(#tickets table.dataTable tbody tr td a i) {
    margin: 0 !important;
    font-size: 18px !important;
    position: relative;
}

table.dataTable thead th {
    padding-top: 12px !important;
    padding-bottom: 12px !important; 
    height: auto !important;
    text-align: left !important;
    border-bottom: 1px solid #000000 !important;
}


table.dataTable thead th .dt-column-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

table.dataTable thead th .dt-column-order {
    margin-left: 5px !important;
}


table.dataTable thead th .dt-column-title,
table.dataTable thead th .dt-column-title span,
table.dataTable thead th .dt-column-title div span {
    padding: 2px;
    color: #000000 !important;
    font-weight: 700 !important; 
}

table.dataTable thead th .dt-column-order::before,
table.dataTable thead th .dt-column-order::after {
    padding-top: 5px;
    color: #000000 !important;
}

table.dataTable thead tr th {
    color: #000000 !important;
}


.dt-container .dt-search input {
    padding: 0 5% !important;
    border: 1px solid rgba(0, 0, 0, .07);
    width: 85% !important;
    color: #B5B5C3 !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.dt-container {
    padding-top: 0 !important;
}

.dt-container .select-wrapper input.select-dropdown {
    padding: 0 5% !important;
    border: 1px solid rgba(0, 0, 0, .07);
    position: none !important;
    width: 90% !important;
    color: #B5B5C3 !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.dt-container .select-wrapper .caret {
    float: right;
    right: 15px !important;
    pointer-events: none;
}


.dt-container .dt-info {
    padding: 15px 20px 10px 0;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    color: #7E8299 !important;
}

/*.dt-container .dt-paging {
    padding: 25px 0 10px 0;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7E8299 !important;
}*/

/* Target the specific nav container generated by DataTables 2.x */
.dt-container .dt-paging nav,
.dt-container .dt-paging nav[aria-label="pagination"] {
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    box-shadow: none !important;
    height: auto !important; 
    line-height: normal !important;
}


/* 1. Base style for all buttons */
.dt-container .dt-paging nav button.dt-paging-button,
.dt-container .dt-paging button.dt-paging-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: hsl(0, 0%, 27%) !important; 
    padding: 10px 15px !important; 
    font-size: 16px !important;
    min-width: 35px !important;
    margin: 0 2px !important;
    border-radius: 2px;
    transition: all 0.2s ease;
    box-shadow: none !important;
    display: inline-block !important;
    height: auto !important;
    text-transform: none !important; 
}


.dt-container .dt-paging nav button.dt-paging-button.current {
    background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%) !important;
    border: 1px solid #999 !important;
    color: #000 !important; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(0,0,0,0.1) !important;
}

.dt-container .dt-paging nav button.dt-paging-button:hover:not(.current):not(.disabled) {
    background: linear-gradient(to bottom, #585858 0%, #111 100%) !important;
    border: 1px solid #aaa !important;
    color: #ffffff !important;
}

.dt-container .dt-paging nav button.dt-paging-button.current:hover {
    color: #000 !important; 
    background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 100%) !important;
    border: 1px solid #888 !important;
    cursor: default; 
}

.dt-container .dt-paging nav button.dt-paging-button:hover {
    color: #000 !important;
}

/* 4. Disabled State */
.dt-container .dt-paging nav button.dt-paging-button.disabled {
    color: #bbb !important; 
    /* cursor: not-allowed !important; */
    opacity: 0.6;
}

/* 5. Ellipsis (...) */
.dt-container .dt-paging .ellipsis {
    padding: 0 8px;
    color: #777;
    background: transparent !important;
}

.dataTables_paginate .first,
.dataTables_paginate .last {
    display: none !important;
}


/* 
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging #page-length-option_previous,
.dt-container .dt-paging #page-length-option_next,
.dt-container .dt-paging .dt-paging-button {
    background-color: #E1E9FF !important;
    border: none !important;
    margin: 0 5px !important;
    text-transform: capitalize;
    color: #3b56fb !important;
    background-image: none !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-container .dt-paging .dt-paging-button:hover,
.dt-container .dt-paging #page-length-option_previous:hover,
.dt-container .dt-paging #page-length-option_next:hover {
    background-color: #3b56fb !important;
    border: none !important;
    color: #E1E9FF !important;
    background-image: none !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
} */

.dt-container span,
.dt-container .dt-length span {
    color: #748096 !important;
    letter-spacing: 1px;
    margin: 0 auto 0px !important;
    display: inline-block;
}

table.dataTable .thead-theme tr th:last-child {
    background-image: none !important;
}

.select-wrapper .dropdown-content {
    top: 48px !important;
    width: 100% !important;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
    -moz-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3) !important;
}

.select-wrapper .dropdown-content li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.dt-container .select-wrapper .dropdown-content li span {
    color: #7E8299 !important;
    font-weight: 500;
    min-width: 200px;
    padding: 10px 20px;
    font-size: 13px !important;
    margin: 0 !important;
    width: 100%;
}

/* .page-footer{
    position: relative;
    left: 0;
    right: 0;
} */
.img_footer{
    position: absolute;
    bottom: 0;
    right: 0;
}
.page-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 4;
}
/* #footer_map{
    position: absolute;
    bottom: 0;
    right: 0;
}
#footer_map .container span{
    font-family: 'Roboto', 'sans-serif';
} */

.topscroller {
    position: fixed;
    bottom: 20px !important;
    left: 20px !important;
    width: 200px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    opacity: 0;
    cursor: pointer;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    background-color: #C5D3FA;
    z-index: 1900;
    font-size: 14px;
    font-weight: 600;
}

.topscroller i {
    position: relative;
    top: 5px;
}

.topscroller:hover {
    background-color: #3b56fb;
    color: #C5D3FA;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.topscroller.activate {
    display: block;
    opacity: 1;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.card-title-wrapper.padding-title {
    padding: 30px;
}

.card-title-wrapper.padding-title .card-title {
    font-size: 18px;
    font-weight: 500;
}

.card-title-wrapper.padding-title .flow-text {
    font-size: 14px !important;
    color: #B5B5C3 !important;
    font-weight: 500;
}

#login-page .card-panel.border-radius-6.login-card {
    padding: 0;
    background-color: #FFF !important;
    display: grid;
    align-items: center;
    z-index: 1;
    grid-template-columns: 40% 60%;
}

.logo-box .responsive-img {
    width: 100px;
    position: relative;
    top: 5px;
}

#login-page input[type="text"],
#login-page input[type="password"] {
    background-color: #EEF1F4;
    padding: 10px 10px 10px 40px !important;
    border: none !important;
    margin: 0 !important;
    width: calc(100% - 40px) !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#login-page .input-field.col .prefix~label,
#login-page .input-field.col .prefix~.validate~label {
    width: calc(100% - 80px) !important;
    margin: 0 !important;
    top: 10px;
    left: 60px;
    color: #748096 !important;
    font-weight: 500;
}

#login-page .input-field>label:not(.label-icon).active {
    -webkit-transform: translateY(0px) scale(.0) !important;
    -ms-transform: translateY(0px) scale(.0) !important;
    transform: translateY(0px) scale(.0) !important;
}

#login-page .input-field>label.active {
    color: #246dbe !important;
}

#login-page .input-field .prefix.active {
    color: #246dbe !important;
}

#login-page .input-field i {
    padding: 0 !important;
    position: absolute !important;
    top: 24px !important;
    font-size: 20px !important;
    left: 30px !important;
    width: 20px !important;
}

.login-buttons-wrapper a {
    font-size: 14px !important;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    margin: 0 !important;
    color: #009f8a;
}

.login-buttons-wrapper a:hover {
    color: #4A7DFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.login-buttons-wrapper button.btn,
.login-buttons-wrapper button.btn:disabled,
.login-buttons-wrapper .temp-login-btn {
    background-color: #246dbe !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #FFF !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    padding: 5px 50px !important;
    margin: 0 !important;
    height: auto !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.login-buttons-wrapper button.btn:hover,
.login-buttons-wrapper button.btn:disabled:hover,
.login-buttons-wrapper .temp-login-btn:hover {
    cursor: pointer;
    background-color: #4A7DFF !important;
    color: #FFFFFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.login-card .title-text {
    font-size: 24px !important;
    font-weight: 600;
    padding: 0 25px;
}

.login-card .flow-text {
    font-size: 14px !important;
    padding: 0 25px;
    line-height: 24px;
}

#cookies_div {
    opacity: 1 !important;
}

#cookies_div p {
    font-size: 14px !important;
    line-height: 24px !important;
    color: #748096 !important;
}

#cookies_div p .modal-trigger {
    color: #3CA3F4 !important;
}

#cookies_div p .close {
    margin: 20px auto 0;
    background-color: #6993FF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

#cookies_div p .close:hover {
    background-color: #4A7DFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

#cookies_div .card-content {
    padding: 20px !important;
}

#cookies_div .card-alert {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.2);
    -moz-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.2);
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.2);
}

#login-page .logo-box {
    padding: 10px;
    border: none;
    text-align: center;
}

.footer-container .center {
    margin: 0 auto !important;
    float: none !important;
}

.anim-header {
    float: none;
    position: relative;
    right: 0;
    line-height: 50px;
    text-decoration: none !important;
    background: linear-gradient(to right, #FFFFFF 20%, #D6242D 40%, #D6242D 60%, #FFFFFF 80%);
    background-size: auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #FFFFFF;
    font-weight: 800;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: magic-word-anim 2s linear infinite;
    height: 50px;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.anim-header span {
    font-size: 18px;
    letter-spacing: 1px;
}

@keyframes magic-word-anim {
    to {
        background-position: 200% center;
    }
}

#magic-particles {
    background-color: transparent;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.datatables_container_large table.dataTable .thead-theme tr th {
    padding: 15px 20px 15px 15px !important;
    background-position: 93% center !important;
}

.datatables_container_large table.dataTable tbody tr td {
    padding: 15px !important;
}

.datatables_container_large table.dataTable tbody tr td:first-child {
    padding: 15px 15px 15px 50px !important;
}

.datatables_container_large table.dataTable tbody tr td:first-child::before {
    left: 10px !important;
    top: 20px !important;
}

.dt-container label {
    float: left;
}

.datatables_container_large table.dataTable tbody tr td .grey,
.datatables_container_large table.dataTable tbody tr td .amber,
.datatables_container_large table.dataTable tbody tr td .light-green {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 5px;
    color: #FFF !important;
    border-radius: 4px;
    font-size: 12px !important;
}

.datatables_container_large table.dataTable tbody tr td .amber {
    background-color: #4484AB !important;
}

.center-box {
    margin: 0 auto !important;
    float: none !important;
}

.magic-forms {
    padding: 30px !important;
    margin: 0 0 50px 0 !important;
}

.magic-forms .title-text {
    font-size: 12px;
    font-weight: bolder;
   letter-spacing: 2px;
    color: #000;
    text-align: left;
    margin-left: 15px;
}

.magic-forms input[type="text"],
.magic-forms input[type="password"],
.magic-forms input[type="email"] {
    background-color: #EEF1F4;
    padding: 10px 10px 10px 40px !important;
    border: none !important;
    margin: 0 !important;
    width: calc(100% - 40px) !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.magic-forms .input-field.col .prefix~label,
.magic-forms .input-field.col .prefix~.validate~label {
    width: calc(100% - 80px) !important;
    margin: 0 !important;
    top: 10px;
    left: 60px;
    color: #748096 !important;
    font-weight: 500;
}

.magic-forms .input-field>label:not(.label-icon).active {
    -webkit-transform: translateY(0px) scale(.0) !important;
    -ms-transform: translateY(0px) scale(.0) !important;
    transform: translateY(0px) scale(.0) !important;
}

.magic-forms .input-field>label.active {
    color: #6993FF !important;
}

.magic-forms .input-field .prefix.active {
    color: #6993FF !important;
}

.magic-forms .input-field i {
    padding: 0 !important;
    position: absolute !important;
    top: 24px !important;
    font-size: 20px !important;
    left: 30px !important;
    width: 20px !important;
}

.magic-forms .login-buttons-wrapper a {
    font-size: 14px !important;
    font-weight: 600;
    margin: 15px auto 0;
    display: inline-block;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.magic-forms .login-buttons-wrapper a:hover {
    color: #4A7DFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.magic-forms .login-buttons-wrapper button.btn,
.magic-forms .login-buttons-wrapper button.btn:disabled,
.magic-forms .login-buttons-wrapper .temp-login-btn {
    background-color: #6993FF !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #FFF !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    padding: 15px 50px !important;
    margin: 0 !important;
    height: auto !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    width: 100%;
}

.magic-forms .login-buttons-wrapper button.btn:hover,
.magic-forms .login-buttons-wrapper button.btn:disabled:hover,
.magic-forms .login-buttons-wrapper .temp-login-btn:hover {
    cursor: pointer;
    background-color: #4A7DFF !important;
    color: #FFFFFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.magic-forms .file-field .btn {
    padding: 10px 20px 10px 40px !important;
    height: auto !important;
    margin-left: 10px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.magic-forms .file-field .btn:hover {
    background-color: #4A7DFF !important;
}

.magic-forms .file-field .btn span {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.magic-forms .file-field .btn i {
    top: 10px !important;
    left: 35px !important;
}

.center-text h4 {
    text-align: center !important;
}

nav .nav-wrapper .nav-bar {
    background-color: #3b58ff !important;
    padding: 0 20px !important;
    border-radius: 0 0 6px 0;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.5);
    box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.5);
    width: calc(100% - 344px) !important;
}

nav .nav-wrapper .nav-bar li a span {
    color: #fff;
}

.sidebar {
    display: none !important;
    /* pa1 remove above */
    height: 100vh;
    width: 240px;
    top: 0;
    position: fixed;
    background-image: url("../../images/general/pattern2.jpg");
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    z-index: 1000;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.1);
    background-size: cover;
}

/* pa1 remove block start*/
#main {
    width: 100% !important;
}

/* pa1 remove block ends*/

nav .nav-wrapper .nav-bar li ul li a span {
    color: #606060;
}

#main.full-size {
    width: 100%;
}

#sidebar.full-size {
    width: 0;
    display: none;
}

#maximizer {
    display: none !important;
    /* pa1 remove above */
    position: fixed;
    display: inline-block;
    left: 240px;
    top: 50%;
    background-color: #768bff;
    width: 25px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    z-index: 9999;
    color: #fff;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s linear !important;
    -webkit-transition: background 0.3s linear !important;
    -moz-transition: background 0.3s linear !important;
}

#maximizer:hover {
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    background-color: #3b58ff;
}

#maximizer.resizer {
    left: 0;
}

#maximizer svg {
    font-size: 25px;
    position: relative;
    left: -4px;
    top: 7.5px;
    color: #fff;
}

#header.full-size {
    width: 100% !important;
}

.left.logo-box {
    background-color: #fff;
    border-radius: 0 0 0 6px;
    margin: 0 !important;
    padding: 0 15px !important;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.6);
    box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.6);
    position: relative;
}

.left.logo-box li {
    padding: 0;
}

.page-footer.footer {
    background-color: #fff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.page-footer.footer span {
    color: #606060;
}

.small-height-card .card {
    height: 150px !important;
}

.small-height-card .card-title,
.small-height-card .card .card-content h2.card-title,
.medium-height-card .card .card-content h4.card-title,
.medium-height-card .card .card-content h6.card-title,
.medium-height-card .card h4.card-title,
.title-with-buttons .card-title-wrapper .card-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bolder;
    font-family: 'Roboto', sans-serif;
    opacity: 0.7;
    margin-bottom: 10px !important;
    display: inline-block;
    width: 100%;
    line-height: 21px !important;
    padding: 20px;
    color:#000
}

.small-height-card .row {
    margin: 0 !important;
}

.user-stats-box .bottom-border {
    padding: 15px 20px;
}

.pinklike-box {
    background-color: #ffebf6;
}

.yellowlike-box {
    background-color: #ffe2ab;
}

.small-height-card .bottom-border {
    display: grid;
    grid-template-columns: 70% 30%;
    border-radius: 6px;
}

.small-height-card .bottom-border .no-margin {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.stats-box-wrapper {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 4%;
}

.small-height-card .bottom-border .stats-title-number {
    font-size: 28px;
    font-weight: bold;
}

.small-height-card .export-box .card-content {
    padding: 20px !important;
    background-image: url("../../images/general/pattern2.jpg");
    background-position: 0 80%;
    background-size: 200%;
}

.grey-button {
    background-color: #acbac1 !important;
}

.medium-height-card .card .card-content span.badge.new {
    position: absolute;
    right: 10px;
    top: 10px;
}

#current-balance-donut-chart .ct-fill-donut-label h5 {
    font-size: 28px;
    font-weight: bold;
    color: #f1b43e;
}

#current-balance-donut-chart .ct-fill-donut-label .small {
    text-align: center;
    font-weight: 500;
}

.large-stat-number {
    font-size: 28px;
    font-weight: bold;
}

nav .nav-wrapper #main-nav-bar.nav-bar.full-size {
    width: 100% !important;
}

nav .nav-wrapper #main-nav-bar.nav-bar .logout-full {
    float: right;
    display: flex !important;
    position: relative;
    right: -20px;
    border-bottom-right-radius: 6px;
}

nav .nav-wrapper #main-nav-bar.nav-bar .logout-full a {
    position: relative !important;
    color: #fff;
    padding-left: 35px;
    right: -10px;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0 0 6px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

nav .nav-wrapper #main-nav-bar.nav-bar .logout-full a i {
    position: absolute !important;
    left: 10px !important;
    font-size: 18px !important;
}

.sidebar .avatar-profile-data {
    text-align: center;
}

.sidebar .avatar-profile-data span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
}

.sidebar .avatar-profile-data span.avatar-status.avatar-online {
    width: 25%;
}

.sidebar .avatar-profile-data {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.sidebar .profile_menu li a {
    display: inline-block;
    width: 100%;
    padding: 10px 10px 10px 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    position: relative;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.sidebar .profile_menu li a:hover {
    background-color: #dfe6ea;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.sidebar ul {
    margin: 0;
}

.sidebar .profile_menu li a svg {
    position: absolute;
    left: 10px;
    top: 0;
    width: 25px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vertical-modern-dashboard .card {
    border: 1px solid #c5e2d4;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
    -webkit-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    -moz-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    box-shadow: 5px 5px 0 1px #c5e2d4 !important;
}

.vertical-modern-dashboard .card:hover {
    border: 1px solid #c5e2d4;
    -webkit-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    -moz-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    z-index: 99;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.sidebar .profile_menu li.nightmode a {
    cursor: pointer;
}

.sidebar .profile_menu li.nightmode a svg {
    animation: nightmode 2s linear infinite;
    color: #3b58ff;
}

@keyframes nightmode {
    0 {
        color: #757575;
    }

    50% {
        color: #f05b4f;
    }

    75% {
        color: #3b58ff;
    }

    100% {
        color: #009f8a;
    }
}

/**Night Mode**/

.nightmode_active {
    background-color: #212529;
    background-size: auto;
    background-repeat: repeat;
}

.nightmode_active nav .nav-wrapper .nav-bar {
    background-color: #2c323f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nightmode_active .sidebar .profile_menu li a,
.nightmode_active .sidebar .avatar-profile-data {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.nightmode_active .small-height-card .card-title,
.nightmode_active .small-height-card .card .card-content h2.card-title,
.nightmode_active .medium-height-card .card .card-content h4.card-title,
.nightmode_active .medium-height-card .card .card-content h6.card-title,
.nightmode_active .medium-height-card .card h4.card-title,
.nightmode_active .title-with-buttons .card-title-wrapper .card-title {
    color: #fff !important;
}

.nightmode_active .small-height-card .export-box .card-content {
    background-image: none !important;
}

.nightmode_active #breadcrumbs-wrapper.breadcrumbs-dark .breadcrumbs-title,
.nightmode_active .breadcrumbs-dark .breadcrumbs-title span,
.nightmode_active .breadcrumb-item a,
.nightmode_active #breadcrumbs-wrapper.breadcrumbs-dark a,
.nightmode_active #breadcrumbs-wrapper .breadcrumbs .active,
.nightmode_active #breadcrumbs-wrapper .breadcrumbs .active span,
.nightmode_active #breadcrumbs-wrapper .breadcrumbs>li+li::before,
.nightmode_active .card .card-content .card-title,
.nightmode_active .card-title-wrapper.padding-title .card-title,
.nightmode_active .title-with-buttons .card-title-wrapper .card-title,
.nightmode_active .card .card-content p,
.nightmode_active .card .card-content h5,
.nightmode_active table.centered thead tr th,
.nightmode_active table.dataTable tbody tr td a,
.nightmode_active .dt-container .dt-info,
.nightmode_active .sidenav li a,
.nightmode_active .sidenav li.open a i,
.nightmode_active .sidenav li>a>i.material-icons,
.nightmode_active .magic-forms .title-text,
.nightmode_active .magic-forms p {
    color: #fff !important;
}

.nightmode_active .page-footer.footer {
    background-color: #212529 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.nightmode_active .page-footer.footer span {
    color: #fff !important;
}

.nightmode_active .grey-button {
    color: #464c59 !important;
}

.nightmode_active .card,
.nightmode_active .border-grid.one-col .card {
    background-color: #464C59 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.nightmode_active .white_bg {
    background-color: #464C59;
}

.nightmode_active .ct-label {
    color: #FFFFFF !important;
    fill: #fff !important;
}

.nightmode_active .card .card-content .card-title,
.nightmode_active .card-title-wrapper.padding-title {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.nightmode_active .ct-grid {
    stroke: rgba(255, 255, 255, 0.3) !important;
}

.nightmode_active .dt-container .select-wrapper input.select-dropdown,
.nightmode_active .dt-container .dt-search input,
.nightmode_active .title-with-buttons .title-dropdown-content li a {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.nightmode_active table.centered tbody tr td,
.nightmode_active table.dataTable tbody tr td {
    color: #fff !important;
    background-color: #3d434b !important;
}

.nightmode_active table.centered tbody tr:hover td,
.nightmode_active table.dataTable tbody tr:hover td {
    background-color: #2a2e32 !important;
}

.nightmode_active table.dataTable tbody tr td a i,
.nightmode_active table.dataTable tbody tr td .green-text {
    color: #2a2e32 !important;
}

.nightmode_active .sidebar {
    background-color: #2c323f;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background-image: none !important;
}

.nightmode_active .sidebar .profile_menu li a:hover,
.nightmode_active .small-height-card .bottom-border .stats-title-text {
    color: #2c323f !important;
}

.nightmode_active #maximizer {
    background-color: #acbac1;
}

.nightmode_active #maximizer svg {
    color: #202428;
}

/**Night Mode End**/

.vertical-modern-dashboard {
    margin: 0 !important;
}

.full-height-wrapper {
    min-height: 100vh;
}

.magic-forms .file-field .file-path.validate {
    background-color: transparent;
}


@media screen and (min-width: 1556px) {
    #main.full-size .icon-fix .datatables_container_large table.dataTable tbody tr td:first-child::before {
        top: 10px !important;
    }
}

.intro-box {
    background-image: url("../../images/general/cassini-bg.jpg");
    display: grid;
    height: 100%;
    width: 100%;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.intro-box-container h1 {
    font-size: 35px;
    margin: 0;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
}

.login-buttons-wrapper .medium-small a {
    width: 80px;
}

.top-wrapper .col {
    position: relative;
}

.top-wrapper.row {
    margin: 20px auto 0;
    max-width: 96%;
}

.magic-search-wrapper .magic-search {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    width: calc(100% + 10px) !important;
    height: 50px !important;
    background-color: #FFF !important;
    padding: 5px 40px 5px 20px !important;
    border-radius: 6px !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.magic-search-wrapper .fas.fa-search {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
    right: 0;
    width: 50px;
    align-content: center;
    justify-content: center;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 18px !important;
    color: #223645;
}

.magic-search-wrapper .fas.fa-search::before {
    right: 3px;
    position: relative;
}

/* WebKit, Edge */
.magic-search-wrapper .magic-search::-webkit-input-placeholder,
.magic-search-wrapper .magic-search::placeholder {
    color: #223645 !important;
    opacity: 1 !important;
}

.sidenav-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left: 1px solid #f5f5f5;
}

.slide-out-right-title .col.s2 {
    padding-left: 0 !important;
    float: right;
    border-left: 1px solid #e5e5e5 !important;
}

#slide-out-right .border-bottom-1 {
    border-bottom: 1px solid #e5e5e5 !important;
}

#slide-out-right.sidenav {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02) !important;
}

#right-sidebar-nav #filter {
    padding: 1rem !important;
}

#controller #data-layers {
    width: auto !important;
    margin: 0 !important;
}

#controller #data-layers p {
    font-size: 15px;
    letter-spacing: 1px;
    /* margin: 0 !important; */
}

#survey_filter_card .col.s6.l12 {
    padding-left: 0 !important;
}

#controller .checkbox#active {
    position: relative;
}

#controller .checkbox#active::before {
    content: "\f00c";
    display: block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    position: absolute;
    top: -1px;
    color: #FFF !important;
    left: 3px;
}

.bottom-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    /* z-index: 99999; */
}

/* .bottom-wrapper .bottom-slideup-level-boxs, 
.bottom-wrapper .bottom-slideup-panel-triggers, 
.bottom-wrapper .bottom-slideup-range-boxs{
    position: relative;
    z-index: 1;
} */

.survey-type-content {
    position: absolute;
    bottom: 0;
    display: none;
    padding: 0;
    margin: 0;
}

.bottom-slideup-panel {
    position: absolute;
    bottom: -120px;
    width: 96%;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.bottom-slideup-panel.open {
    bottom: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-panel .bottom-slideup-panel-triggers {
    background: transparent;
    height: 100px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-panel.open .bottom-slideup-panel-triggers {
    height: 40px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-wrapper #controller .container-drawer {
    height: 100% !important;
}

.bottom-wrapper #controller .container-drawer ul {
    margin: 0 !important;
    height: 100%;
    display: flex;
    justify-content: center;
    width: 96% !important;
    flex-direction: row;
    padding: 0 !important;
    list-style: none !important;
}

.bottom-wrapper #controller .container-drawer ul li {
    display: flex;
    justify-content: center;
    flex: 1;
}

.bottom-wrapper #controller .container-drawer ul li a {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    padding: 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    justify-content: center;
    background-color: #FFF;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-wrapper #controller .container-drawer ul li a:hover {
    background-color: #e5e5e5 !important;
}

.bottom-wrapper #controller .container-drawer ul li a .iconify {
    font-size: 30px !important;
    color: #203442 !important;
}

.bottom-wrapper #controller .container-drawer ul li a .survey-item-text {
    padding-left: 20px;
    font-size: 13px !important;
    color: #213443;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.bottom-slideup-panel .bottom-slideup-panel-triggers button {
    height: 40px;
    background-color: #223645;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border: none !important;
    float: left;
    left: 30px;
    transition-duration: .3s;
    position: relative;
    z-index: 1;
}

.bottom-slideup-panel .bottom-slideup-panel-triggers button:hover {
    background-color: #d1516a !important;
    transition-duration: .3s;
}

.bottom-slideup-range .bottom-slideup-range-boxs button {
    height: 40px;
    background-color: #223645;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    border: none !important;
    float: left;
    left: 380px;
    position: relative;
    transition-duration: .3s;
}

.bottom-slideup-range .bottom-slideup-range-boxs button:hover {
    background-color: #d1516a !important;
    transition-duration: .3s;
}

.bottom-slideup-range .bottom-slideup-range-boxs button.bottom-slideup-level-box {
    /* opacity: 0; */
    right: 380px !important;
}

.bottom-slideup-level .bottom-slideup-level-boxs button {
    height: 40px;
    background-color: #223645;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border: none !important;
    float: left;
    left: 190px;
    position: relative;
    transition-duration: .3s;
    z-index: 1;
}

.bottom-slideup-part .bottom-slideup-part-boxs button {
    height: 40px;
    background-color: #223645;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border: none !important;
    float: left;
    left: 300px;
    position: relative;
    transition-duration: .3s;
}

.bottom-slideup-level .bottom-slideup-level-boxs button:hover,
.bottom-slideup-level .bottom-slideup-level-boxs button:hover {
    background-color: #d1516a !important;
    transition-duration: .3s;
}

.bottom-slideup-panel .bottom-slideup-panel-trigger {
    background: #FFF;
    height: 80px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border-radius: 6px 6px 0 0 !important;
    z-index: 2;
    position: relative;
    box-shadow: 0 1px 50px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
}

.bottom-slideup-panel.open .bottom-slideup-panel-trigger.selected {
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-panel .bottom-slideup-panel-triggers button span {
    font-size: 14px !important;
    margin-left: 10px;
    font-weight: 600;
    color: #FFF;
}

.bottom-slideup-range .bottom-slideup-range-boxs button span {
    font-size: 14px !important;
    margin-left: 10px;
    font-weight: 600;
    color: #FFF;
}

.bottom-slideup-level .bottom-slideup-level-boxs button span {
    font-size: 14px !important;
    margin-left: 10px;
    font-weight: 600;
    color: #FFF;
}

.bottom-wrapper #controller {
    margin: 0 !important;
    height: 100% !important;
    display: block;
}

.bottom-wrapper #controller #data-layers {
    display: flex;
    justify-content: center;
    width: 107% !important;
    flex-direction: row;
    overflow: hidden;
    border-radius: 6px 0 0 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
    height: 120px !important;
    margin-left: -5px !important;
}

.bottom-wrapper #controller #data-layers .button {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    align-items: end;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    padding: 10px;
}

.bottom-wrapper #controller #data-layers .button .checkbox#active {
    height: 100%;
    top: 0 !important;
    border-radius: 0 !important;
}

.bottom-wrapper .trigger-content,
.bottom-wrapper .trigger-content #survey_filter_card,
.bottom-wrapper .trigger-content #survey_filter_card #tasktype_filter {
    height: 100%;
}

.bottom-wrapper #controller #data-layers .button .checkbox {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFF !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 2px !important;
    top: 0 !important;
}

.bottom-wrapper #controller #data-layers .button .checkbox#active::before {
    content: "" !important;
    top: 0 !important;
    height: 100%;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #000 !important;
    opacity: 0.2;
}

.top-wrapper .magic-nav-wrapper {
    height: 50px;
    background-color: #FFF;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    width: 50px !important;
    display: flex;
    align-content: center;
    justify-content: center;
}

.top-wrapper .magic-nav-wrapper .navbar-list.left,
.top-wrapper .magic-nav-wrapper .navbar-list.left li,
.top-wrapper .magic-nav-wrapper .navbar-list.left li .sidenav-trigger {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 6px;
    justify-content: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-nav-wrapper .navbar-list.left li .sidenav-trigger:hover {
    background-color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-nav-wrapper .material-icons {
    color: #223645 !important;
    font-size: 28px !important;
    position: relative;
    top: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-nav-wrapper .navbar-list.left li .sidenav-trigger:hover .material-icons {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

#right-sidebar-nav .material-icons {
    width: 100% !important;
}

#right-sidebar-nav .material-icons .sidenav-close {
    display: block;
    color: #223645 !important;
    height: 55px;
    line-height: 55px;
}

.sidenav.right-aligned {
    right: auto !important;
    left: 0 !important;
    -webkit-transform: translateX(-105%);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-105%);
    -ms-transform: translateX(-100%);
    transform: translateX(-105%);
    transform: translateX(-100%);
}


.bottom-wrapper #controller #data-layers .button p {
    color: #223645 !important;
    font-weight: 400;
    z-index: 2;
    max-width: 70%;
    margin: 10px 0 10px 0;
}

.slide-out-right-title .col.s12.border-bottom-1.pb-0.pt-1 {
    padding: 0 !important;
}

.slide-out-right-title .col.s12.border-bottom-1.pb-0.pt-1 .row {
    margin: 0 !important;
    width: 100% !important;
}

.bottom-wrapper #controller #data-layers .button::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    color: #FFF !important;
    z-index: 3;
}

.bottom-wrapper #controller #data-layers .button:nth-child(1)::before {
    background: url('https://api.iconify.design/material-symbols/control-camera.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(2)::before {
    background: url('https://api.iconify.design/mdi/ocr.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(3)::before {
    background: url('https://api.iconify.design/codicon/law.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(4)::before {
    background: url('https://api.iconify.design/material-symbols/flip-camera-android.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(5)::before {
    background: url('https://api.iconify.design/healthicons/paved-road-outline.svg') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(6)::before {
    background: url('https://api.iconify.design/mdi/vector-link.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(7)::before {
    background: url('https://api.iconify.design/octicon/git-merge-queue-16.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(8)::before {
    background: url('https://api.iconify.design/ri/walk-fill.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(9)::before {
    background: url('https://api.iconify.design/carbon/cloud-satellite-services.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(10)::before {
    background: url('https://api.iconify.design/mdi/car-brake-parking.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(11)::before {
    background: url('https://api.iconify.design/ic/outline-local-car-wash.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(12)::before {
    background: url('https://api.iconify.design/material-symbols/door-sensor-outline-sharp.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(13)::before {
    background: url('https://api.iconify.design/mdi/layers-remove.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(14)::before {
    background: url('https://api.iconify.design/game-icons/park-bench.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(15)::before {
    background: url('https://api.iconify.design/material-symbols/park-outline.svg?color=%23223645') no-repeat center center / contain;
}

.bottom-wrapper #controller #data-layers .button:nth-child(16)::before {
    background: url('https://api.iconify.design/gis/layer-2-add-o.svg?color=%23223645') no-repeat center center / contain;
}

#slide-out-right .sidenav-title {
    text-align: left;
}

#slide-out-right .brand-logo img {
    width: 130px !important;
    top: 7px;
    position: relative;
    /*	filter: grayscale(1) brightness(1);*/
}

#slide-out-right .brand-logo {
    height: 55px;
    line-height: 55px;
}

#slide-out-right.sidenav .slide-out-right-body ul#slide-out.sidenav {
    height: calc(100% - 46px) !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    top: 1px;
}

#slide-out-right .sidenav-main {
    width: 100% !important;
    height: calc(100% - 55px);
    top: 55px;
}

#right-sidebar-nav #slide-out-right .sidenav-main .material-icons,
#right-sidebar-nav #slide-out-right .sidenav-main svg {
    width: 25px !important;
    float: left;
    margin-right: 20px !important;
    margin-left: 0 !important;
    color: #223645 !important;
    font-size: 24px !important;
    height: 35px;
}

.sidenav .collapsible li.bold.active-nav a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
}

.sidenav .collapsible li.dashboard-nav a {
    height: 60px;
}

.sidenav .collapsible li.dashboard-nav a span {
    width: auto;
    display: inline-block;
}

.sidenav .collapsible li.dashboard-nav a span.sub-title {
    width: calc(100% - 50px);
    height: 20px !important;
    line-height: 20px !important;
    position: relative;
    top: -15px;
    left: 45px;
    font-size: 13px !important;
    opacity: 0.7;
}

.sidenav .collapsible li.dashboard-nav a span.menu-title {
    height: 35px !important;
    line-height: 35px;
    font-size: 16px !important;
}

.menu-grouper {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.sidenav .navigation-header,
.sidenav-active-square .sidenav li>a.navigation-header,
.sidenav-active-square .sidenav li a.collapsible-header.navigation-header {
    background-color: #FFF !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    height: auto;
}

.sidenav .collapsible-header::after {
    content: "";
    background: url('https://api.iconify.design/ic/baseline-keyboard-arrow-right.svg?color=%23969696') no-repeat center center / contain;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2;
    top: 16px !important;
}

.sidenav .navigation-header .navigation-header-text {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    font-weight: 500;
    color: #223645 !important;
}

.menu-grouper-mini {
    padding: 10px 0;
}

.move_icon_left_small .material-icons {
    left: -5px;
    position: relative;
}

.menu-grouper-mini .menu-title {
    font-size: 15px !important;
    letter-spacing: 0.5px;
}

.version {
    display: inline-block;
    width: 100%;
    padding: 0 0 0 20px;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.bottom-slideup-panel .bottom-slideup-panel-triggers button svg {
    font-size: 18px !important;
    color: #FFF;
}

.bottom-wrapper .copyrights {
    left: 40%;
    height: 40px;
    /* background-color: #FFF !important; */
    padding: 10px 15px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important; */
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border: none !important;
    float: left;
    bottom: 20px;
    position: fixed;
}

.bottom-wrapper .copyrights p {
    margin: 0 !important;
    font-size: 12px !important;
    text-transform: capitalize;
    letter-spacing: 1px !important;
    font-weight: 500;
}

.top-wrapper .magic-profile-wrapper {
    float: right;
    height: 50px;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right {
    margin: 0 !important;
    height: 50px;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right .full-screen-maker,
.top-wrapper .magic-profile-wrapper .navbar-list.right .top-zoomein-button,
.top-wrapper .magic-profile-wrapper .navbar-list.right .top-zoomeout-button {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-wrapper .magic-profile-wrapper .full-screen-maker a,
.top-wrapper .magic-profile-wrapper .top-zoomein-button a,
.top-wrapper .magic-profile-wrapper .top-zoomeout-button a {
    background-color: #FFF !important;
    height: 50px !important;
    width: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .full-screen-maker a:hover,
.top-wrapper .magic-profile-wrapper .top-zoomein-button a:hover,
.top-wrapper .magic-profile-wrapper .top-zoomeout-button a:hover {
    background-color: #223645 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .full-screen-maker a svg,
.top-wrapper .magic-profile-wrapper .top-zoomein-button a svg,
.top-wrapper .magic-profile-wrapper .top-zoomeout-button a svg {
    color: #223645;
    font-size: 20px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .full-screen-maker a:hover svg,
.top-wrapper .magic-profile-wrapper .top-zoomein-button a:hover svg,
.top-wrapper .magic-profile-wrapper .top-zoomeout-button a:hover svg {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li {
    float: left;
    margin-left: 15px;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-help-icon a {
    background-color: #FFF !important;
    height: 50px !important;
    width: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-help-icon a:hover {
    background-color: #223645 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-help-icon a svg {
    color: #223645;
    font-size: 24px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-help-icon a:hover svg {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-profile-menu {
    background-color: #FFF !important;
    height: 50px !important;
    width: 50px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-profile-menu svg {
    color: #223645;
    font-size: 24px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-profile-menu:hover svg {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-profile-menu .profile-button {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF !important;
    border-radius: 6px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-profile-menu .profile-button:hover {
    background-color: #223645 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button {
    background-color: #FFF !important;
    height: 50px !important;
    width: auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard svg,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button svg,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button svg {
    color: #223645;
    font-size: 24px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard:hover svg,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button:hover svg,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button:hover svg {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard span,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button span,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button span {
    font-size: 14px !important;
    color: #223645;
    font-weight: 500;
    margin-left: 10px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard:hover span,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button:hover span,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button:hover span {
    color: #FFF !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard a,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button button,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button button {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    background: unset;
    border: none;
}

.top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard a:hover,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomein-button button:hover,
.top-wrapper .magic-profile-wrapper .navbar-list.right li.top-zoomeout-button button:hover {
    background-color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.slide-out-panel-container .slide-out-header h4 {
    margin: 0;
    padding: 0;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.slide-out-panel-container .slide-out-header {
    height: 60px;
}

.slide-out-panel-container .close-slide-out-panel {
    height: 100% !important;
    right: 0 !important;
    width: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    border-left: 1px solid #dddddd;
}

.slide-out-panel-screen {
    background-color: transparent !important;
}

.magic-dashboard-controls .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.magic-dashboard-controls .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.magic-dashboard {
    display: block;
    position: absolute;
    z-index: 2;
    background-color: #FFF;
    width: 96%;
    height: 70vh;
    margin: 0 auto;
    top: 15vh;
    left: 0;
    right: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px;
}

.magic-dashboard .magic-dashboard-trigger {
    margin: 0 !important;
    display: block;
    float: right;
    width: 220px !important;
    padding: 10px 0;
}

.magic-dashboard .magic-dashboard-trigger .switch {
    width: 100% !important;
    display: flex;
    align-items: center;
    font-size: 14px !important;
    color: #223645;
}

.magic-dashboard .magic-dashboard-trigger .switch .round {
    margin-left: 10px !important;
}

#dash-panel .dashboard-card-trigger .switch {
    font-size: 14px !important;
    color: #223645 !important;
    text-transform: capitalize;
    letter-spacing: 1px;
    width: 100%;
    justify-content: center;
    display: flex;
    cursor: pointer;
    padding: 0;
    height: 40px;
    line-height: 40px;
    font-weight: 500;
}

#dash-panel .dashboard-card-trigger .switch .round {
    margin-left: 15px;
    top: 8px;
    position: relative;
}

.magic-dashboard-trigger {
    display: grid;
    grid-template-columns: repeat(5, 20%) !important;
    background-color: #FFF;
    padding: 8px 0 !important;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
}

.magic-dashboard-trigger .dashboard-card-trigger {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.magic-dashboard-trigger .dashboard-card-trigger:last-child {
    border-right: none !important;
}

.slide-out-panel-container .slide-out-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 999 !important;
}

.slide-out-panel-container .slide-out-content {
    padding-top: 70px !important;
    /* change page height */
    height: calc(100% - 10px) !important;
    overflow-y: scroll;
}

.magic-dashboard-wrapper .row.vertical-modern-dashboard {
    float: left;
    display: block;
    max-width: 27.7%;
    min-width: 350px;
}

.magic-dashboard-wrapper .row.vertical-modern-dashboard .min-small-height-card {
    height: 330px;
}

.magic-dashboard-wrapper .row.vertical-modern-dashboard .min-small-height-card .card {
    height: 100%;
    -webkit-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    -moz-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    border: 1px solid #c5e2d4;
}

.magic-dashboard-control-job-table.row.vertical-modern-dashboard {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    margin: 50px auto 0 !important;
}

.slide-out-panel-container .magic-dashboard-wrapper img {
    width: 100% !important;
}

.magic-dashboard-wrapper .row.vertical-modern-dashboard {
    margin: 0 auto 30px !important;
}

.magic-dashboard-wrapper .card-title svg {
    font-size: 26px !important;
    margin: 10px !important;
    position: relative;
    top: 15px;
}

#dash-panel::before {
    content: "";
    background-image: url("../../images/dash-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    background-attachment: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

.slide-out-panel-container .slide-out-content {
    background-color: transparent !important;
}

#knowledge h5 {
    font-size: 20px !important;
    text-transform: capitalize !important;
}

#knowledge svg {
    font-size: 34px !important;
}

.top-wrapper .magic-nav-branding {
    display: flex;
    height: 50px;
    align-items: center;
}

.top-wrapper .magic-nav-branding .navbar-list.left {
    margin: 0 !important;
    display: flex;
}

.top-wrapper .magic-nav-branding .navbar-list.left li {
    display: inline-block;
    height: auto;
}

.top-wrapper .magic-nav-branding .navbar-list.left li .brand-logo {
    height: 50px;
    /* background-color: #FFF; */
    border-radius: 6px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important; */
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0 20px;
}

/* .top-wrapper .magic-nav-branding .navbar-list.left li .brand-logo:hover {
    background-color: #223645;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
} */

.top-wrapper .magic-nav-branding .navbar-list.left li img {
    width: 200px;
    height: auto !important;
    object-fit: contain;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    cursor: default;
}

/* .top-wrapper .magic-nav-branding .navbar-list.left li .brand-logo:hover img {
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    filter: brightness(0) invert(1);
} */

.mapboxgl-popup-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    font-size: 14px !important;
    font-weight: 400;
    padding: 20px !important;
    border-radius: 6px !important;
}

.mapboxgl-popup-content .mapboxgl-popup-close-button {
    font-size: 24px !important;
    color: #FFF !important;
    background-color: #c0382a !important;
    width: 30px !important;
    height: 30px;
    border-radius: 0 4px 0 4px;
}

#drawmap .mapboxgl-popup-content .mapboxgl-popup-close-button {
    font-size: 24px !important;
    color: #FFF !important;
    background-color: #c0382a !important;
    width: 26px !important;
    height: 22px;
    border-radius: 0 4px 0 4px;
}

.mapboxgl-popup-content ul {
    margin: 0 !important;
}

.mapboxgl-popup-content ul li {
    padding-left: 20px;
    margin-bottom: 7px;
    display: inline-block;
    font-weight: 400;
    color: #223645;
}

.custom-popup .mapboxgl-popup-content ul li::before {
    background: unset;
}

.mapboxgl-popup-content ul li::before {
    content: "";
    background: url('https://api.iconify.design/material-symbols/check-circle.svg?color=%23223645') no-repeat center center / contain;
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 15px;
}

.bottom-slideup-range {
    position: absolute;
    bottom: -80px;
    width: 96%;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    text-align: center;
    margin: 0 auto;
}

.bottom-slideup-tour {
    position: absolute;
    bottom: 20px;
    width: auto;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    text-align: center;
    left: auto;
    right: 600px;
    margin: 0;
}

.bottom-slideup-level {
    position: absolute;
    bottom: -120px;
    width: 96%;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.bottom-slideup-range.open {
    bottom: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level.open {
    bottom: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-range .bottom-slideup-range-boxs {
    background: transparent;
    height: 60px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level .bottom-slideup-level-boxs {
    background: transparent;
    height: 60px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-range .bottom-slideup-range-box-content {
    background: #FFF;
    height: 80px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border-radius: 6px 6px 0 0 !important;
    z-index: 2;
    position: relative;
    box-shadow: 0 1px 50px rgba(0, 0, 0, 0.4) !important;
}

.bottom-slideup-level .bottom-slideup-level-box-content {
    background: #FFF;
    height: 120px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border-radius: 6px 6px 0 0 !important;
    z-index: 2;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content {
    display: flex;
    height: 100%;
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content ul {
    display: flex;
    justify-content: center;
    width: 100% !important;
    flex-direction: row;
    height: 100%;
    border-radius: 6px 0 0 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
    margin: 0;
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    align-items: end;
    height: 100%;
    margin: 0 !important;
    position: relative;
    border-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a .iconify {
    font-size: 40px;
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a span {
    color: #223645 !important;
    font-weight: 400;
    z-index: 2;
    font-size: 15px;
    letter-spacing: 1px;
    margin: 20px auto 0 !important;
}

.bottom-slideup-range.active .bottom-slideup-range-boxs {
    height: 40px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level.active .bottom-slideup-level-boxs {
    height: 40px !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-range.active {
    bottom: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level.active {
    bottom: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    z-index: 9;
}

.bottom-slideup-range.active .bottom-slideup-range-box {
    border-radius: 6px 6px 0 0 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-range.active .bottom-slideup-range-box:hover {
    background-color: #6c25a1 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level.active .bottom-slideup-level-box {
    border-radius: 6px 6px 0 0 !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-level.active .bottom-slideup-level-box:hover {
    background-color: #d1516a !important;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.bottom-slideup-range-box-content h5 {
    font-size: 16px !important;
    color: #223645;
    font-weight: 600;
    margin: 20px auto 15px !important;
    text-align: left;
    padding-left: 20px;
}

.row.left-aligned .col.s12.m12 {
    padding-left: 30px;
}

.bottom-slideup-range-box-content .datepicker,
.bottom-slideup-range-box-content .timepicker {
    padding: 5px 20px !important;
    background-color: #dbeed6 !important;
    width: calc(92% - 40px) !important;
    border-radius: 6px !important;
}

.bottom-slideup-range-box-content button {
    background-color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0px auto;
}

.datepicker-day-button {
    border-radius: 0% !important;
}

.datepicker-table td.is-selected button.datepicker-day-button {
    background-color: #dee6fa !important;
}

.datepicker-table td.is-today button {
    color: #2193f1 !important;
}

.modal.datepicker-modal.open {
    z-index: 10000 !important;
}

.datepicker-date-display,
.timepicker-digital-display {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #2196F5;
}

.datepicker-container .confirmation-btns button,
.timepicker-container .confirmation-btns button {
    background-color: #223645 !important;
    color: #FFF !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
}

.datepicker-container td button,
.timepicker-container td button {
    color: #223645 !important;
}

.timepicker-digital-display .timepicker-text-container {
    top: 0 !important;
}

.row.left-aligned {
    text-align: left;
}

.bottom-slideup-range .datepicker::placeholder,
.bottom-slideup-range input[type="text"]::placeholder {
    color: #223645 !important;
    opacity: 1 !important;
}

.bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns {
    display: flex;
    margin: 0 !important;
    width: calc(100% - 50px);
    float: left;
}

.noUi-horizontal .noUi-handle,
.noUi-vertical .noUi-handle,
.noUi-target.noUi-horizontal .noUi-tooltip,
.noUi-connect {
    background-color: #2196f3 !important;
}

.range-selector-wrapper .row {
    margin: 0 !important;
    width: 100% !important;
}

.range-selector-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-slideup-range-box-content .range-selector-wrapper button {
    margin: 0 auto !important;
    padding: 0 10px !important;
    width: 100% !important;
    background-color: #3290f3 !important;
}

.bottom-slideup-range-box-content .range-selector-wrapper button:hover {
    background-color: #d85463 !important;
}

.range-selector-wrapper {
    padding-left: 10px !important;
}

.bottom-slideup-range-box-content .range-selector-wrapper button .iconify {
    font-size: 20px !important;
    position: relative;
    top: 2px;
    left: -10px;
}

.bottom-slideup-range .bottom-slideup-range-box-content .box-content {
    height: 100%;
    display: flex;
    align-items: center;
}

#traffic-counts {
    bottom: -100px !important;
    top: auto !important;
    width: 360px !important;
    display: flex !important;
    justify-content: center !important;
    flex-direction: row !important;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    left: 0 !important;
    position: absolute;
}

.bottom-slideup-level.active #traffic-counts {
    bottom: 120px !important;
}

#traffic-counts li {
    width: 33.3333333% !important;
}

#traffic-counts li a {
    padding: 10px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/** Tour Section **/

.tour-container {
    border: 1px solid #223645;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    top: 20px !important;
    border-radius: 0 !important;
}

.tour-container .shepherd-header {
    background-color: #FFF !important;
    border-bottom: 1px solid #223645;
    padding: 10px 30px !important;
}

.tour-container .shepherd-footer {
    padding: 0 !important;
}

.tour-container .shepherd-footer {
    display: flex;
    justify-content: center;
    width: 100% !important;
    flex-direction: row;
    height: 100%;
    padding: 0 !important;
    flex-wrap: wrap;
    margin: 0;
    border-top: 1px solid #223645 !important;
}

.tour-container .shepherd-footer button {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    align-items: end;
    height: 100%;
    margin: 0 !important;
    position: relative;
    border-radius: 0;
    border-right: 1px solid #223645 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    font-weight: 800;
    letter-spacing: 2px;
    background-color: #FFF !important;
    color: #223645 !important;
}

.tour-container .shepherd-footer button:last-child {
    border-right: none !important;
}

.tour-container .shepherd-header h3 {
    font-size: 16px !important;
    font-weight: 800;
}

.tour-container .shepherd-text {
    padding: 20px 30px !important;
    font-size: 16px !important;
    line-height: 32px;
}

.tour-container .shepherd-footer button.btn-grey {
    background-color: #cad5d5 !important;
    color: #223645 !important;
}

.tour-container .shepherd-footer button:hover {
    background-color: #223645 !important;
    color: #FFF !important;
}

.bottom-slideup-range .bottom-slideup-range-boxs button.bottom-tour-box {
    right: 180px !important;
}

.tour-container .shepherd-header .shepherd-cancel-icon {
    background-color: #FFF !important;
    color: #223645 !important;
}

.tour-container .shepherd-header::before {
    content: "";
    background: url('https://api.iconify.design/carbon/caret-sort-up.svg?color=%23223645') no-repeat center center / contain;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -10px;
    right: auto;
}

.tour-container[data-shepherd-step-id="step-main-nav"] {
    top: 20px !important;
    left: 30px !important;
}

.tour-container[data-shepherd-step-id="step-profile"],
.tour-container[data-shepherd-step-id="step-fullscreen"],
.tour-container[data-shepherd-step-id="step-help"] {
    left: -20px !important;
}
.tour-container[data-shepherd-step-id="step-search"]{
    left: -40px !important;
}
.tour-container[data-shepherd-step-id="step-mydash"] {
    left: -125px !important;
}
.tour-container[data-shepherd-step-id="step-add-job"] {
    left: 10px !important;
    margin-top:50px !important;
}
.tour-container[data-shepherd-step-id="step-bulk-video-upload"] {
    left: 10px !important;
    margin-top:55px !important;
}
.tour-container[data-shepherd-step-id="step-multi-site-comparision"] {
    left: 10px !important;
    margin-top:58px !important;
}
.tour-container[data-shepherd-step-id="step-marker-color-settings"] {
    left: 91px !important;
    margin-top:677px !important;
}
body .tour-container[data-shepherd-step-id="step-date"],
body .tour-container[data-shepherd-step-id="step-multilevel"],
body .tour-container[data-shepherd-step-id="step-survey"] {
    top: -30px !important;
}

body .tour-container[data-shepherd-step-id="step-date"]{
    top: -425px !important;
    left: 100px !important;
}

.tour-container[data-shepherd-step-id="step-main-nav"] .shepherd-header::before {
    left: 0;
}

.tour-container[data-shepherd-step-id="step-main-search"] .shepherd-header::before,
.tour-container[data-shepherd-step-id="step-main-dashboard"] .shepherd-header::before {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tour-container[data-shepherd-step-id="step-profile"] .shepherd-header::before {
    left: 325px;
    right: 0;
    margin: 0 auto;
}

.tour-container[data-shepherd-step-id="step-fullscreen"] .shepherd-header::before {
    left: 165px;
    right: 0;
    margin: 0 auto;
}

.tour-container[data-shepherd-step-id="welcome"] .shepherd-header::before {
    display: none !important;
}

.tour-container[data-shepherd-step-id="step-date"] .shepherd-header::before {
    left: -300px;
    right: 0;
    margin: 0 auto !important;
}

.tour-container[data-shepherd-step-id="step-multilevel"] .shepherd-header::before {
    top: auto !important;
    bottom: -10px !important;
    left: -120px;
    right: 0;
    margin: 0 auto !important;
    transform: rotate(180deg);
}

.tour-container[data-shepherd-step-id="step-survey"] .shepherd-header::before {
    top: auto !important;
    bottom: -10px !important;
    left: auto;
    right: 180px !important;
    margin: 0 auto !important;
    transform: rotate(180deg);
}

.tour-container[data-shepherd-step-id="step-search"] .shepherd-header::before {
    left: 318px !important;
}
.tour-container[data-shepherd-step-id="step-mydash"] .shepherd-header::before {
    left: 343px !important;
}
.tour-container[data-shepherd-step-id="step-add-job"] .shepherd-header::before {
    left: -10px !important;
    transform: rotate(-90deg);
    top:10px !important;
}
.tour-container[data-shepherd-step-id="step-bulk-video-upload"] .shepherd-header::before {
    left: -10px !important;
    transform: rotate(-90deg);
    top:10px !important;
}
.tour-container[data-shepherd-step-id="step-multi-site-comparision"] .shepherd-header::before {
    left: -10px !important;
    transform: rotate(-90deg);
    top:10px !important;
}
.tour-container[data-shepherd-step-id="step-marker-color-settings"] .shepherd-header::before {
    left: -10px !important;
    transform: rotate(-90deg);
    top:141px !important;
}
.bottom-slideup-tour .bottom-tour-box {
    height: 40px;
    background-color: #223645;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    color: #223645;
    border: none !important;
    float: right;
    position: relative;
    transition-duration: .3s;
}

.bottom-slideup-tour .bottom-tour-box:hover {
    background-color: #d1516a !important;
    transition-duration: .3s;
}

.bottom-slideup-tour .bottom-tour-box span {
    font-size: 14px !important;
    margin-left: 10px;
    font-weight: 600;
    color: #FFF;
}

body .widget-visible iframe {
    bottom: 20px !important;
}

.menu-grouper .collapsible-body {
    background-color: #FFF !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-grouper .collapsible-body li a {
    padding: 5px 5px 5px 20px !important;
    height: auto !important;
}

.menu-grouper-mini .menu-title a {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: #223645;
}

.version-box {
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0 !important;
    width: 100%;
    background-color: #FFF;
    z-index: 2;
}

.bottom-slideup-range .datepicker {
    background-color: #FFF !important;
    border-radius: 0 !important;
    height: 46px !important;
    padding: 0 20px !important;
    color: #223645 !important;
}

.date-picker-wrapper {
    padding-right: 0 !important;
}

.bottom-slideup-range-box-content input[type="text"] {
    font-size: 14px !important;
    font-weight: 600;
    padding-left: 0 !important;
}

.bottom-slideup-range-box-content input[type="text"].datepicker {
    width: 90% !important;
}

.surveys-panel .slide-out-content {
    height: auto;
}

.bottom-slideup-panel.magic-apply {
    background-color: #FFF !important;
}

.surveys-panel .title-with-buttons .card-title-wrapper {
    padding: 10px !important;
    width: 100% !important;
    text-align: left;
    float: left !important;
}

.surveys-panel .title-with-buttons .title-dropdown-content {
    padding: 10px !important;
    /* width: 75% !important; */
}

.bottom-slideup-level .bottom-slideup-level-box-content .box-content #survey_filter_card {
    width: 95% !important;
}

#minimap {
    height: 300px;
}

.map-card .card-title {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.surveys-panel .map-card .title-with-buttons .card-title-wrapper {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}

.surveys-panel .map-card .title-with-buttons .card-title-wrapper .card-title {
    padding: 0 !important;
    margin: 0 !important;
}

#minimap {
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    width: 100% !important;
}

#minimap .mapboxgl-canvas {
    width: 100% !important;
}

table.dataTable tbody tr.active {
    transform: scale(1.04);
    -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .20), 0 20px 100px 0 rgba(0, 0, 0, .20) !important;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .20), 0 20px 100px 0 rgba(0, 0, 0, .20) !important;
}

.surveys-panel .title-with-buttons {
    padding-top: 10px !important;
}

.surveys-panel .surveys_large_content .title-with-buttons .title-dropdown-content {
    width: 100% !important;
    justify-content: end;
    display: flex;
}

.surveys_large_content .card.card-theme {
    display: inline-block;
    width: 100%;
}

.surveys-panel .surveys_large_content .card.card-theme .title-with-buttons {
    display: inline-block;
    width: 100%;
    padding-top: 5px !important;
}

.surveys_large_content .switch {
    height: 80px;
    display: flex;
    align-items: center;
}

.surveys_large_content .switch label {
    font-size: 14px !important;
    font-weight: 500;
    color: #203240;
    top: 5px;
    position: relative;
}

#view-fractional-values label {
    font-size: 14px !important;
    font-weight: 500;
    color: #1f3240;
    margin: 0 auto 20px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.surveys_large_content .select_container label {
    top: -12px !important;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.calculation-box {
    height: 75px;
    width: 150px;
    position: absolute;
    bottom: 40px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
    text-align: center;
}

.draw-map-wrapper {
    height: 400px !important;
}

.draw-map-wrapper #drawmap,
.draw-map-wrapper.network_diagram #drawmap {
    height: 100% !important;
    border-radius: 10px !important;
    width: 100% !important;
}

.draw-map-wrapper.network_diagram,
.draw-map-wrapper.parking_density {
    height: 750px !important;
}

.draw-map-wrapper.parking_density .right svg {
    margin-top: -130px;
}

.draw-map-wrapper.parking_density .mapboxgl-map .mapboxgl-popup .mapboxgl-popup-content h3 {
    font-size: 15px;
}

#card_for_fullscreen.full_screen_enabled .draw-map-wrapper {
    height: 920px !important;
}

.drawmap-options .card-content {
    padding: 0 !important;
}

/* .card {
    -webkit-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    -moz-box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    box-shadow: 5px 5px 0 1px #c5e2d4 !important;
    border: 1px solid #c5e2d4;
} */

.draw-map-wrapper #drawmap .mapboxgl-canvas,
.draw-map-wrapper.network_diagram #drawmap .mapboxgl-canvas {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
}

.surveys_filter_wrapper .select_container {
    margin-right: 6% !important;
    width: 100% !important;
}

.surveys_filter_wrapper {
    display: flex;
    align-items: center;
    height: 80px;
}

.surveys_large_content .switch .lever {
    margin-right: 0 !important;
}

.card.map-card.card-theme {
    margin: 30px auto 0 !important;
}

.surveys-panel .drawmap-options .title-with-buttons {
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
}

.surveys-panel .drawmap-options .title-with-buttons .title-dropdown-content {
    padding-bottom: 5px !important;
}

.surveys-panel .drawmap-options .title-with-buttons .title-dropdown-content svg {
    top: 10px;
}

.surveys-panel .drawmap-options .title-with-buttons .title-dropdown-content li a {
    background-color: #3c55f1 !important;
    color: #FFF !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.surveys-panel .drawmap-options .title-with-buttons .title-dropdown-content li a:hover {
    background-color: #213544 !important;
}

.surveys-panel .filtered-data-wrapper .title-with-buttons .card-title-wrapper {
    width: 25% !important;
}

.surveys-panel .filtered-data-wrapper .title-with-buttons .title-dropdown-content {
    width: 75% !important;
}

.surveys-panel .surveys_large_content .surveys_filter_wrapper_buttons .card-title.center.title-with-buttons.card-title-theme {
    height: 74px !important;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
}

.dropdown-content.select-dropdown {
    max-height: 180px !important;
    overflow-y: scroll !important;
    z-index: 10001;
}

.bottom-wrapper #controller .container-drawer .inactive_survey_menu svg,
.bottom-wrapper #controller .container-drawer .inactive_survey_menu .survey-item-text {
    opacity: 0.5;
}

.job-options-buttons-wrapper .job-options-buttons {
    display: flex;
    width: 100%;
    padding: 0 20px 20px 20px !important;
}

.card.job-options-buttons-wrapper.card-theme {
    margin: 60px auto 50px 0;
}

.job-options-buttons ul {
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 100%;
}

.job-options-buttons ul li {
    margin: 5px;
}

.job-options-buttons ul li a {
    background-color: #dee6fc !important;
    color: #3a54f8 !important;
    display: flex;
    padding: 10px !important;
    align-items: center;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.job-options-buttons ul li a:hover {
    background-color: #3a54f8 !important;
    color: #FFF !important;
    transition: all 0.3s linear !important;
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

.job-options-buttons ul li a svg {
    font-size: 21px !important;
    margin-right: 10px;
}

/** Loader **/
.loader {
    background: #2c2d44;
    position: fixed;
    z-index: 9999999999999999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
}

.loader .vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

.loader .vertical-centered-box:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.loader .vertical-centered-box .content {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 0;
}

.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    margin-left: -60px;
    margin-top: -60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader .vertical-centered-box .content img {
    width: 80px;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    animation: rotate 1.2s infinite linear;
}

.loader-line-mask .loader-line {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#particles-background,
#particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    transform: scale3d(0.5, 0.5, 1);
}

#particles-background {
    background: #2c2d44;
    background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.magichider {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

.loader .vertical-centered-box .content h3 {
    font-size: 18px !important;
    margin: 180px auto 0 !important;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* #chart-sidebar-nav #slide-out-chart.sidenav.slide-out-chart-sidenav.leftside-navigation.left-aligned.ps.ps--active-x.ps--active-y{
    left: unset;
    right: 0;
} */
/* .sidenav1{
    position: fixed;
    z-index: 999;
    top: 0;
    overflow-y: auto;
    width: 250px;
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    margin: 0;
    padding-bottom: 60px;
    -webkit-transform: translateX(-100%);
    -webkit-transform: translateX(-105%);
    -ms-transform: translateX(-100%);
    -ms-transform: translateX(-105%);
    transform: translateX(-100%);
    transform: translateX(-105%);
    background-color: #fff;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 56px;
    overflow: hidden;
    width: inherit;
    height: 100%;
    left: 0;
    padding-bottom: 65px;
    -webkit-transition: auto !important;
    transition: auto !important;
    border: none;
    box-shadow: 0 4px 7px 0 rgb(0 0 0 / 20%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
} */

.bottom-slideup-panel-trigger.selected .trigger-content #survey_filter_card #tasktype_filter .container#controller .container-drawer ul li .data_filter_active {
    background-color: #ccc !important;
}

.tabs .tab a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tabs .tab .active {
    border-bottom: 1px solid;
    font-weight: 850;
}

/***********************************************************
                    Pa1 Mobile
***********************************************************/

@media only screen and (min-width: 700px) and (max-width: 1280px) {
    .top-wrapper .magic-profile-wrapper {
        width: 400px !important;
        padding: 0 !important;
    }

    .top-wrapper .magic-search-wrapper {
        width: 220px !important;
    }

    .top-wrapper .magic-profile-wrapper .navbar-list.right {
        width: 100% !important;
    }
}

@media only screen and (min-width: 240px) and (max-width: 699px) {
    .top-wrapper .magic-search-wrapper {
        width: 96% !important;
        margin: 22px auto 0 !important;
        padding: 0 !important;
    }

    .top-wrapper .magic-profile-wrapper {
        padding: 0 !important;
    }

    .top-wrapper .magic-profile-wrapper .navbar-list.right li.custom-dashboard {
        margin-left: 0 !important;
    }

    .top-wrapper .magic-profile-wrapper .navbar-list.right li {
        margin-left: 10px !important;
    }

    .top-wrapper .magic-profile-wrapper .navbar-list.right {
        width: 360px !important;
        margin: 20px auto 0 !important;
    }
}

@media only screen and (min-width: 670px) and (max-width: 699px) {
    .top-wrapper .magic-profile-wrapper .navbar-list.right {
        width: 360px !important;
        margin: 0 auto 0 !important;
    }

    .top-wrapper .magic-search-wrapper {
        width: 220px !important;
    }

    .top-wrapper .magic-search-wrapper {
        margin: 0 auto 0 !important;
    }

    .top-wrapper .magic-profile-wrapper {
        float: left !important;
        margin: 20px auto 0 !important;
        left: 30px !important;
    }
}

@media only screen and (max-width: 992px) {
    #slide-out-right.sidenav .slide-out-right-body ul#slide-out.sidenav {
        height: 100% !important;
        transform: none !important;
        width: 100% !important;
        top: 56px !important;
    }

    .magic-dashboard-wrapper .row.vertical-modern-dashboard #html-content-holder {
        overflow-x: scroll;
    }
}

@media only screen and (max-width: 669px) {
    .top-wrapper .magic-profile-wrapper {
        float: left !important;
        width: 100% !important;
    }

    .top-wrapper .magic-profile-wrapper .navbar-list.right {
        width: 100% !important;
        margin: 20px auto 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .slide-out-panel-container.open {
        height: 100vh !important;
    }
}

@media only screen and (min-width: 567px) and (max-width: 1300px) {
    .magic-dashboard-trigger {
        grid-template-columns: repeat(2, 50%) !important;
    }

    .magic-dashboard-trigger .dashboard-card-trigger {
        justify-content: flex-start !important;
        padding-left: 10px !important;
    }

    #dash-panel .dashboard-card-trigger .switch {
        justify-content: flex-start !important;
    }
}

@media only screen and (max-width: 566px) {
    .magic-dashboard-trigger {
        grid-template-columns: 100% !important;
    }

    .magic-dashboard-trigger .dashboard-card-trigger {
        justify-content: flex-start !important;
        padding-left: 10px !important;
    }

    #dash-panel .dashboard-card-trigger .switch {
        justify-content: flex-start !important;
    }
}

@media only screen and (min-width: 700px) and (max-width: 1400px) {
    .bottom-slideup-panel .bottom-slideup-panel-trigger {
        height: 200px;
    }

    .bottom-slideup-panel {
        bottom: -200px;
    }

    .bottom-wrapper #controller #data-layers .button {
        flex: 12%;
        height: 120px;
        border-bottom: 1px solid #d9d9d9;
    }
}

@media only screen and (min-width: 240px) and (max-width: 699px) {
    .bottom-slideup-panel .bottom-slideup-panel-trigger {
        height: 480px;
    }

    .bottom-slideup-panel {
        bottom: -480px;
    }

    .bottom-wrapper #controller #data-layers .button {
        flex: 21%;
        height: 120px;
        border-bottom: 1px solid #d9d9d9;
    }

    .bottom-wrapper .copyrights {
        width: 50% !important;
    }
}

@media only screen and (min-width: 700px) and (max-width: 977px) {
    .top-wrapper .magic-profile-wrapper {
        float: left !important;
        left: -15px !important;
        margin: 20px auto 0 !important;
    }
}

@media only screen and (min-width: 240px) and (max-width: 979px) {
    .bottom-slideup-tour {
        display: none !important;
    }

    .bottom-slideup-level {
        bottom: 60px;
        height: 60px !important;
    }

    .bottom-slideup-level.active {
        bottom: 60px !important;
        height: 400px !important;
    }

    .bottom-slideup-range.active {
        bottom: 460px !important;
    }

    .bottom-slideup-level .bottom-slideup-level-box-content {
        height: 420px;
        bottom: -60px;
    }

    .bottom-slideup-level.active .bottom-slideup-level-box-content {
        bottom: 0;
    }

    .bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li {
        flex: 100%;
        height: 35px;
        border-bottom: 1px solid #d9d9d9;
    }

    .bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a {
        flex-direction: row;
    }

    .bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a .iconify {
        font-size: 25px;
        left: 15px;
        position: relative;
    }

    .bottom-slideup-level .bottom-slideup-level-box-content .box-content ul li a span {
        margin: 5px auto 0 !important;
        width: 100%;
        text-align: left;
        padding-left: 30px;
    }

    .bottom-slideup-level.active #traffic-counts {
        display: none !important;
    }

    .bottom-slideup-level .bottom-slideup-level-boxs button,
    .bottom-slideup-range .bottom-slideup-range-boxs button {
        right: 0 !important;
    }

    .bottom-slideup-range {
        bottom: 120px;
        height: 60px !important;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content {
        height: 480px !important;
        bottom: -120px !important;
    }

    .bottom-slideup-range.active .bottom-slideup-range-box-content {
        bottom: 0 !important;
    }

    .bottom-slideup-range .bottom-slideup-range-boxs button.bottom-slideup-level-box {
        display: none !important;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns {
        margin: 0 !important;
        display: inline-block;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns .col {
        width: 50% !important;
        display: flex;
        flex-direction: column;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns .col .row .col {
        padding: 0 !important;
        width: 100% !important;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns .col .row .col h5 {
        padding: 0 !important;
    }

    .bottom-slideup-range-box-content .datepicker,
    .bottom-slideup-range-box-content .timepicker {
        padding: 5px !important;
        width: calc(100% - 10px) !important;
    }

    .bottom-slideup-range-box-content .datepicker,
    .bottom-slideup-range-box-content .timepicker {
        padding: 5px !important;
        width: calc(96% - 10px) !important;
        left: 4px;
        position: relative;
    }

    .bottom-slideup-range .bottom-slideup-range-box-content .equal-height-columns .col:nth-child(3) {
        width: 100% !important;
    }

    .bottom-slideup-range-box-content .range-selector-wrapper button {
        margin: 20px auto 0 !important;
    }
}


/*** Moving Horizontal Tabs ***/

@-webkit-keyframes movingTab {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes movingTab {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0%);
    }
}

.magichtabs {
    width: 100%;
    margin: auto;
}

.magichtabs .magichtabs--list {
    display: inline-block;
    margin: auto;
    position: relative;
    background-color: #e1e9ff;
    border-radius: 4px;
    z-index: 2;
    /* left: 20px; */
    top: 20px;
}

.magichtabs .magichtabs--list li {
    display: block;
    vertical-align: middle;
    width: auto;
    min-width: 100px;
    position: relative;
    z-index: 2;
    float: left;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.magichtabs .magichtabs--list li a {
    display: block;
    padding: 12px 0;
    transition: color ease 0.7s, box-shadow 0.5s;
    text-align: center;
    font-size: 14px !important;
    font-weight: 600;
    color: #213544;
    position: relative;
}

.magichtabs .magichtabs--list li a.actived {
    color: #ffffff;
}

.magichtabs .magichtabs--list li a.actived:hover {
    box-shadow: none;
}

.magichtabs .magichtabs--list li a:hover {
    box-shadow: 0 24px 18px -15px rgba(0, 0, 0, 0.09);
}

.magichtabs .magichtabs--list li.moving-tab {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 120%;
    top: -10%;
    background-color: #2194ef;
    box-shadow: 0 24px 18px -15px rgba(33, 53, 68, 0.45);
    transition: left 0.7s, box-shadow 0.5s;
    z-index: 1;
    border-radius: 4px;
}

.magichtabs .magichtabs--list li.moving-tab:hover {
    box-shadow: 0 24px 18px -15px rgba(117, 60, 148, 0.65);
}

.magichtabs .magichtabs--list li.moving-tab--interaction {
    animation: movingTab 0.4s forwards;
    transition: left 0.4s cubic-bezier(0.29, 1.42, 0.79, 1);
}

.magichtabs .magichtabs--content {
    text-align: left;
    padding: 60px 20px 20px 20px;
    border: 2px solid #e1e9ff;
    border-radius: 4px;
    margin-top: 0;
    top: -30px;
    position: relative;
    width: 100%;
}

.magichtabs .magichtabs--content div {
    display: none;
}

.magichtabs .magichtabs--content div.actived {
    display: block;
}

/*** Moving Vertical Tabs ***/
.magicvtabs {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 35% 65%;
}

.magicvtabs .magicvtabs--list {
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    background-color: #e1e9ff;
    border-radius: 4px;
    z-index: 2;
    padding: 0 !important;
    width: 100%;
}

.magicvtabs .magicvtabs--list li {
    display: flex;
    width: auto;
    min-width: 100px;
    position: relative;
    z-index: 2;
}

.magicvtabs .magicvtabs--list li a {
    display: grid;
    padding: 0 12px;
    transition: color ease 0.7s, box-shadow 0.5s;
    font-size: 14px !important;
    font-weight: 600;
    color: #213544;
    position: relative;
    border-bottom: 1px solid #ccc;
    text-align: left ;
    text-decoration: none;
    height: 100%;
    align-content: center;
    align-items: baseline;
    width: 100%;
    min-height: 50px;
}

.magicvtabs .magicvtabs--list li:nth-last-child(-n + 2) a {
    border-bottom: none !important;
}

.magicvtabs .magicvtabs--list li a.actived {
    color: #ffffff;
}

.magicvtabs .magicvtabs--list li a.actived:hover {
    box-shadow: none;
}

.magicvtabs .magicvtabs--list li a:hover {
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.09);
    /* Adjust shadow */
}

.magicvtabs .magicvtabs--list li.vmoving-tab {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #213544;
    box-shadow: 0 6px 6px -3px rgba(33, 53, 68, 0.45);
    transition: top 0.7s, box-shadow 0.5s;
    z-index: 1;
    border-radius: 4px;
}

.magicvtabs .magicvtabs--list li.vmoving-tab:hover {
    box-shadow: 0 6px 6px -3px rgba(117, 60, 148, 0.65);
}

.magicvtabs .magicvtabs--list li.vmoving-tab--interaction {
    animation: vmovingTab 0.4s forwards;
    transition: top 0.4s cubic-bezier(0.29, 1.42, 0.79, 1);
}

.magicvtabs .magicvtabs--content {
    text-align: left;
    padding: 20px 20px 20px 50px;
    border: 2px solid #e1e9ff;
    border-radius: 4px;
    position: relative;
    width: 100%;
    height: 90%;
    top: 5%;
    left: -5%;
}

.magicvtabs .magicvtabs--content div {
    display: none;
}

.magicvtabs .magicvtabs--content div.actived {
    display: block;
}



#magic-vertical-slider-container {
    position: relative;
    height: 300px;
    width: 54px;
    margin: 0;
    z-index: 99;
    left: 30px;
    /* background-color: #FFF; */
    border-radius: 6px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.04) !important; */
    display: flex;
    align-content: center;
    justify-content: center;
    top: 100px;
    padding: 30px 0 !important;
}

#magic-vertical-slider {
    height: 100%;
    width: 4px !important;
    border: none !important;
    background-color: rgba(33, 53, 68, 0.2);
    border-radius: 20px;
}

.magic-vertical-slider-tooltip {
    position: relative;
    width: 100px;
    text-align: center;
    background-color: #3293f7;
    color: #fff;
    padding: 7px;
    border-radius: 0 20px 20px 0;
    left: 40px !important;
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}

.magic-vertical-slider-tooltip::before {
    content: "";
    background: url('https://api.iconify.design/formkit/caretleft.svg?color=%233293f7') no-repeat center center / contain;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: -14px;
    top: 4px;
}

.magic-vertical-min-tooltip {
    bottom: 4px;
}

.magic-vertical-max-tooltip {
    top: -4px;
}

#magic-vertical-slider .ui-slider-range.ui-corner-all.ui-widget-header {
    background-color: #213544 !important;
}

#magic-vertical-slider .ui-state-default {
    background-color: #3293f7 !important;
    border: none !important;
    border-radius: 100px;
    width: 25px !important;
    height: 25px !important;
    left: -10px;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

#modal-list table {
    width: 100%;
    /* Optional: To make the table fill the container */
}

#modal-list td {
    /* text-align: right; */
    padding: 5px;
    /* Optional: Add some padding for better visual appearance */
}

#modal-list tr {
    border-bottom: none;
}


#magic-horizontal-slider-container {
    position: relative;
    height: 300px;
    width: 54px;
    margin: 0;
    z-index: 99;
    left: 30px;
    /* background-color: #FFF; */
    border-radius: 6px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.04) !important; */
    display: flex;
    align-content: center;
    justify-content: center;
    top: 100px;
    padding: 30px 0 !important;
}

#magic-horizontal-slider-container {
    height: 48px;
    width: 120px;
    top: 30px;
    padding: 31px 30px !important;
}


#magic-horizontal-slider {

    height: 6px !important;
    width: 334%;
    background-color: rgba(33, 53, 68, 0.2);
    border-radius: 6px;
    margin-left: -17px;
    margin-top: 150%;
    margin-right: -206%;
}

.magic-horizontal-slider-tooltip {
    position: relative;
    width: 60px;
    text-align: center;
    background-color: #3293f7;
    color: #fff;
    padding: 8px;
    border-radius: 4 20px 35px 2;
    left: 41px !important;
    font-size: 11px !important;
    font-family: system-ui;
    text-transform: uppercase;
    cursor: pointer;
    height: 21px;
    margin-left: -41px;
    margin-top: 16px;
    border: 3px solid transparent;
    line-height: 14px;
    border-radius: 10px;
    color: #000;
    font-weight: bold;
}

.magic-horizontal-slider-tooltip::before {
    left: 4px;
    top: -14px;
}

.magic-horizontal-min-tooltip {
    bottom: auto;
}

.magic-horizontal-max-tooltip {
    top: auto;
    bottom: -4px;
}

#magic-horizontal-slider .ui-slider-range.ui-corner-all.ui-widget-header {
        background-color: #115c94 !important;
    }


#magic-horizontal-slider .ui-state-default {
    background-color: #3293f7 !important;
    border: none !important;
    border-radius: 100px;
    width: 11px !important;
    height: 11px !important;
    left: -10px;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    margin-top: 1px;
}

#modal-list tr {
    border-bottom: none;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 177%;
}

.magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
    margin-top: 16px;
    margin-left: -84px;
}

.magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
    margin-top: 16px;
    padding: 0px;
    background: none;
}

.magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
    margin-top: 16px;
    padding: 0px;
    background: none;
}



/* .folder-structure .folders .folder,
.folder-structure .folders .job {
  margin: 0;
  box-shadow: none;
  border: none;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  /* background-color: #fff; */
  /* border-radius: 10px;
  line-height: 26px;
  transition: 300ms;
  color : #000;
} */

.nightmode_active .folder-structure .folders .folder,
.nightmode_active .folder-structure .folders .job,
.darkmode .folder-structure .folders .folder,
.darkmode .folder-structure .folders .job {
  color: #fff;
}

.folder-structure .folders .folder:hover,
.folder-structure .folders .job:hover {
    background-color: #eeeeee;
}

.nightmode_active .folder-structure .folders .folder:hover,
.nightmode_active .folder-structure .folders .job:hover,
.darkmode .folder-structure .folders .folder:hover,
.darkmode .folder-structure .folders .job:hover {
    background-color: #3a3a3a6e;
}

.folder-structure .folders i {
  margin-right: 1rem;
}

.folder-structure .folder .material-icons.folderIcon {
  color: #e7b307;
}

.folder-structure .folder .material-icons.folderCreateIcon {
  color: #e7b30773;
}

.folder-structure .folder .material-icons.selectCheckBox,
#jobsList .material-icons.selectCheckBox,
  #jobsListS3 .material-icons.selectCheckBox {
    color: #292929;
    vertical-align: middle;
    pointer-events: none;
}

.nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
.nightmode_active #jobsList .material-icons.selectCheckBox,
.darkmode .folder-structure .folder .material-icons.selectCheckBox,
.darkmode #jobsList .material-icons.selectCheckBox {
    color: #eeeeee;
}

.folder-structure .folder .material-icons.selectCheckBox.d-none,
#jobsList .material-icons.selectCheckBox.d-none {
    display : none;
}

#folderSelection .folder-structure #jobsList tr{
  pointer-events: none;
  opacity: 0.5;
}

.folder-structure .empty {
  color: #adadad;
}

.folder-structure input.folderNameEdit {
  padding: 0 !important;
  height: 24px !important;
  border: none !important;
}
.folder-structure input.folderNameEdit:focus,
.folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
.folder-structure
  input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
  border: none;
  box-shadow: none;
  height: 24px;
  margin: 0;
  padding: 0;
  font-weight: 700;
  color : #5a5a5a
  font-size: 15px;
}

.folder-structure #folderNav{
    display: flex;
}

.folder-structure #folderPath,
  .folder-structure #folderPathS3 {
  flex-grow: 100;
  height: 40px;
  background-color:rgba(0, 0, 0, .12);
  border-radius: 10px;
  padding: 10px;
  margin: auto;
}

.nightmode_active .folder-structure #folderPath,
.nightmode_active .folder-structure #folderPathS3,
.darkmode .folder-structure #folderPath,
  .darkmode .folder-structure #folderPathS3{
  background-color: #3a3a3a6e;
}

.folder-structure #folderPath .folderSpanTag,
  .folder-structure #folderPathS3 .folderSpanTag{
  font-weight: 400;
  padding : 6px;
  cursor: pointer;
  border: solid 1px #eeeeee00;
  border-radius: 5px;
  transition: 300ms;
}

.folder-structure #folderPath .folderSpanTag:hover,
  .folder-structure #folderPathS3 .folderSpanTag:hover{
  border: solid 1px #838383;
}

.folder-structure #folderPath .material-icons,
  .folder-structure #folderPathS3 .material-icons{
  font-size: 20px;
  vertical-align: text-bottom;
}

.folder-structure .folderIcons {
  width: fit-content;
  padding: 10px;
}
.folder-structure .folderIcons button {
  background-color: #00000000;
  border: none;
  color: #333 !important;
}

.nightmode_active .folder-structure .folderIcons button,
.darkmode .folder-structure .folderIcons button{
  color: #eeeeee !important;
}


.folder-structure .newProjectButtonDiv .newProjectButton{
    background-color: #008bc2;
    color: #eeeeee !important;
    padding: 7px 16px;
    vertical-align: middle;
    line-height: 20px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: none;
}

.folder-structure .newProjectButtonDiv{
    padding : 0 20px;
    margin: auto;
}

#jobsList .material-icons.settingsIcon,
  #jobsListS3 .material-icons.settingsIcon {
    color: #008bc2;
    vertical-align: middle;
}

.contextMenus {
  position: absolute;
  background-color: #ffffff;
  display: none;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 150px;
  height: fit-content;
  opacity: 0;
  transition: 300ms;
  padding: 5px 10px;
  color: #000000;
}

.contextMenus .material-icons {
  vertical-align: middle;
  padding: 0 5px;
  font-size: 18px;
}
.contextMenus li {
  padding: 10px 0px;
  cursor: pointer;
  border-radius: 5px;
  transition: 300ms;
}
.contextMenus li:hover {
    background-color: #eeeeee;
}
.contextMenus ul {
  margin: 0;
}

#contextMenuMultiple .countItem{
    font-weight: 500;
}

.folder-structure{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#moveButtons{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #ebebeb;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding :  20px;
}

#moveButtons button {
    border: none;
    background-color: #008bc2;
    color: #eeeeee;
    margin: 0 20px;
    height: 40px;
    width: 129px;
    border-radius: 10px;
    font-size: 16px;
}

#folderSelection #moveButtons{
  display: flex !important;
}

#jobsList{
    background-color : #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.nightmode_active #jobsList,
.darkmode #jobsList{
  background-color : #ffffff00;
}

#jobsList tr td:first-child,
  #jobsListS3 tr td:first-child{
    color : #000;
    font-weight: 600;
}

.nightmode_active #jobsList tr td:first-child,
.nightmode_active #jobsListS3 tr td:first-child,
.darkmode #jobsList tr td:first-child,
  .darkmode #jobsListS3 tr td:first-child{
  color : #ffffff;
}

#jobsList tr {
    border: none;
    padding: 10px 0px;
    cursor: pointer;
    border-radius: 5px;
    transition: 300ms;
}

.nightm.magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
    margin-top: 16px;
    margin-left: -84px;
}

.magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
    margin-top: 16px;
    padding: 0px;
    background: none;
}

.magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
    margin-top: 16px;
    padding: 0px;
    background: none;
}



/* .folder-structure .folders .folder,
.folder-structure .folders .job {
  margin: 0;
  box-shadow: none;
  border: none;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  /* background-color: #fff; */
  /* border-radius: 10px;
  line-height: 26px;
  transition: 300ms;
  color : #000;
} */

.nightmode_active .folder-structure .folders .folder,
.nightmode_active .folder-structure .folders .job,
.darkmode .folder-structure .folders .folder,
.darkmode .folder-structure .folders .job {
  color: #fff;
}

.folder-structure .folders .folder:hover,
.folder-structure .folders .job:hover {
    background-color: #eeeeee;
}

.nightmode_active .folder-structure .folders .folder:hover,
.nightmode_active .folder-structure .folders .job:hover,
.darkmode .folder-structure .folders .folder:hover,
.darkmode .folder-structure .folders .job:hover {
    background-color: #3a3a3a6e;
}

.folder-structure .folders i {
  margin-right: 1rem;
}

.folder-structure .folder .material-icons.folderIcon {
  color: #e7b307;
}

.folder-structure .folder .material-icons.folderCreateIcon {
  color: #e7b30773;
}

.folder-structure .folder .material-icons.selectCheckBox,
#jobsList .material-icons.selectCheckBox,
  #jobsListS3 .material-icons.selectCheckBox {
    col.magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        margin-left: -84px;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    
    
    /* .folder-structure .folders .folder,
    .folder-structure .folders .job {
      margin: 0;
      box-shadow: none;
      border: none;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      display: flex;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.5;
      padding: 1rem;
      /* background-color: #fff; */
      /* border-radius: 10px;
      line-height: 26px;
      transition: 300ms;
      color : #000;
    } */
    
    .nightmode_active .folder-structure .folders .folder,
    .nightmode_active .folder-structure .folders .job,
    .darkmode .folder-structure .folders .folder,
    .darkmode .folder-structure .folders .job {
      color: #fff;
    }
    
    .folder-structure .folders .folder:hover,
    .folder-structure .folders .job:hover {
        background-color: #eeeeee;
    }
    
    .nightmode_active .folder-structure .folders .folder:hover,
    .nightmode_active .folder-structure .folders .job:hover,
    .darkmode .folder-structure .folders .folder:hover,
    .darkmode .folder-structure .folders .job:hover {
        background-color: #3a3a3a6e;
    }
    
    .folder-structure .folders i {
      margin-right: 1rem;
    }
    
    .folder-structure .folder .material-icons.folderIcon {
      color: #e7b307;
    }
    
    .folder-structure .folder .material-icons.folderCreateIcon {
      color: #e7b30773;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox,
    #jobsList .material-icons.selectCheckBox,
      #jobsListS3 .material-icons.selectCheckBox {
        color: #292929;
        vertical-align: middle;
        pointer-events: none;
    }
    
    .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
    .nightmode_active #jobsList .material-icons.selectCheckBox,
    .darkmode .folder-structure .folder .material-icons.selectCheckBox,
    .darkmode #jobsList .material-icons.selectCheckBox {
        color: #eeeeee;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox.d-none,
    #jobsList .material-icons.selectCheckBox.d-none {
        display : none;
    }
    
    #folderSelection .folder-structure #jobsList tr{
      pointer-events: none;
      opacity: 0.5;
    }
    
    .folder-structure .empty {
      color: #adadad;
    }
    
    .folder-structure input.folderNameEdit {
      padding: 0 !important;
      height: 24px !important;
      border: none !important;
    }
    .folder-structure input.folderNameEdit:focus,
    .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
    .folder-structure
      input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
      border: none;
      box-shadow: none;
      height: 24px;
      margin: 0;
      padding: 0;
      font-weight: 700;
      color : #5a5a5a
      font-size: 15px;
    }
    
    .folder-structure #folderNav{
        display: flex;
    }
    
    .folder-structure #folderPath,
      .folder-structure #folderPathS3 {
      flex-grow: 100;
      height: 40px;
      background-color:rgba(0, 0, 0, .12);
      border-radius: 10px;
      padding: 10px;
      margin: auto;
    }
    
    .nightmode_active .folder-structure #folderPath,
    .nightmode_active .folder-structure #folderPathS3,
    .darkmode .folder-structure #folderPath,
      .darkmode .folder-structure #folderPathS3{
      background-color: #3a3a3a6e;
    }
    
    .folder-structure #folderPath .folderSpanTag,
      .folder-structure #folderPathS3 .folderSpanTag{
      font-weight: 400;
      padding : 6px;
      cursor: pointer;
      border: solid 1px #eeeeee00;
      border-radius: 5px;
      transition: 300ms;
    }
    
    .folder-structure #folderPath .folderSpanTag:hover,
      .folder-structure #folderPathS3 .folderSpanTag:hover{
      border: solid 1px #838383;
    }
    
    .folder-structure #folderPath .material-icons,
      .folder-structure #folderPathS3 .material-icons{
      font-size: 20px;
      vertical-align: text-bottom;
    }
    
    .folder-structure .folderIcons {
      width: fit-content;
      padding: 10px;
    }
    .folder-structure .folderIcons button {
      background-color: #00000000;
      border: none;
      color: #333 !important;
    }
    
    .nightmode_active .folder-structure .folderIcons button,
    .darkmode .folder-structure .folderIcons button{
      color: #eeeeee !important;
    }
    
    
    .folder-structure .newProjectButtonDiv .newProjectButton{
        background-color: #008bc2;
        color: #eeeeee !important;
        padding: 7px 16px;
        vertical-align: middle;
        line-height: 20px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        border: none;
    }
    
    .folder-structure .newProjectButtonDiv{
        padding : 0 20px;
        margin: auto;
    }
    
    #jobsList .material-icons.settingsIcon,
      #jobsListS3 .material-icons.settingsIcon {
        color: #008bc2;
        vertical-align: middle;
    }
    
    .contextMenus {
      position: absolute;
      background-color: #ffffff;
      display: none;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      width: 150px;
      height: fit-content;
      opacity: 0;
      transition: 300ms;
      padding: 5px 10px;
      color: #000000;
    }
    
    .contextMenus .material-icons {
      vertical-align: middle;
      padding: 0 5px;
      font-size: 18px;
    }
    .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        margin-left: -84px;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    
    
    /* .folder-structure .folders .folder,
    .folder-structure .folders .job {
      margin: 0;
      box-shadow: none;
      border: none;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      display: flex;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.5;
      padding: 1rem;
      /* background-color: #fff; */
      /* border-radius: 10px;
      line-height: 26px;
      transition: 300ms;
      color : #000;
    } */
    
    .nightmode_active .folder-structure .folders .folder,
    .nightmode_active .folder-structure .folders .job,
    .darkmode .folder-structure .folders .folder,
    .darkmode .folder-structure .folders .job {
      color: #fff;
    }
    
    .folder-structure .folders .folder:hover,
    .folder-structure .folders .job:hover {
        background-color: #eeeeee;
    }
    
    .nightmode_active .folder-structure .folders .folder:hover,
    .nightmode_active .folder-structure .folders .job:hover,
    .darkmode .folder-structure .folders .folder:hover,
    .darkmode .folder-structure .folders .job:hover {
        background-color: #3a3a3a6e;
    }
    
    .folder-structure .folders i {
      margin-right: 1rem;
    }
    
    .folder-structure .folder .material-icons.folderIcon {
      color: #e7b307;
    }
    
    .folder-structure .folder .material-icons.folderCreateIcon {
      color: #e7b30773;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox,
    #jobsList .material-icons.selectCheckBox,
      #jobsListS3 .material-icons.selectCheckBox {
        color: #292929;
        vertical-align: middle;
        pointer-events: none;
    }
    
    .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
    .nightmode_active #jobsList .material-icons.selectCheckBox,
    .darkmode .folder-structure .folder .material-icons.selectCheckBox,
    .darkmode #jobsList .material-icons.selectCheckBox {
        color: #eeeeee;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox.d-none,
    #jobsList .material-icons.selectCheckBox.d-none {
        display : none;
    }
    
    #folderSelection .folder-structure #jobsList tr{
      pointer-events: none;
      opacity: 0.5;
    }
    
    .folder-structure .empty {
      color: #adadad;
    }
    
    .folder-structure input.folderNameEdit {
      padding: 0 !important;
      height: 24px !important;
      border: none !important;
    }
    .folder-structure input.folderNameEdit:focus,
    .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
    .folder-structure
      input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
      border: none;
      box-shadow: none;
      height: 24px;
      margin: 0;
      padding: 0;
      font-weight: 700;
      color : #5a5a5a
      font-size: 15px;
    }
    
    .folder-structure #folderNav{
        display: flex;
    }
    
    .folder-structure #folderPath,
      .folder-structure #folderPathS3 {
      flex-grow: 100;
      height: 40px;
      background-color:rgba(0, 0, 0, .12);
      border-radius: 10px;
      padding: 10px;
      margin: auto;
    }
    
    .nightmode_active .folder-structure #folderPath,
    .nightmode_active .folder-structure #folderPathS3,
    .darkmode .folder-structure #folderPath,
      .darkmode .folder-structure #folderPathS3{
      background-color: #3a3a3a6e;
    }
    
    .folder-structure #folderPath .folderSpanTag,
      .folder-structure #folderPathS3 .folderSpanTag{
      font-weight: 400;
      padding : 6px;
      cursor: pointer;
      border: solid 1px #eeeeee00;
      border-radius: 5px;
      transition: 300ms;
    }
    
    .folder-structure #folderPath .folderSpanTag:hover,
      .folder-structure #folderPathS3 .folderSpanTag:hover{
      border: solid 1px #838383;
    }
    
    .folder-structure #folderPath .material-icons,
      .folder-structure #folderPathS3 .material-icons{
      font-size: 20px;
      vertical-align: text-bottom;
    }
    
    .folder-structure .folderIcons {
      width: fit-content;
      padding: 10px;
    }
    .folder-structure .folderIcons button {
      background-color: #00000000;
      border: none;
      color: #333 !important;
    }
    
    .nightmode_active .folder-structure .folderIcons button,
    .darkmode .folder-structure .folderIcons button{
      color: #eeeeee !important;
    }
    
    
    .folder-structure .newProjectButtonDiv .newProjectButton{
        background-color: #008bc2;
        color: #eeeeee !important;
        padding: 7px 16px;
        vertical-align: middle;
        line-height: 20px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        border: none;
    }
    
    .folder-structure .newProjectButtonDiv{
        padding : 0 20px;
        margin: auto;
    }
    
    #jobsList .material-icons.settingsIcon,
      #jobsListS3 .material-icons.settingsIcon {
        color: #008bc2;
        vertical-align: middle;
    }
    
    .contextMenus {
      position: absolute;
      background-color: #ffffff;
      display: none;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      width: 150px;
      height: fit-content;
      opacity: 0;
      transition: 300ms;
      padding: 5px 10px;
      color: #000000;
    }
    
    .contextMenus .material-icons {
      vertical-align: middle;
      padding: 0 5px;
      font-size: 18px;
    }
    .contextMenus li {
      padding: 10px 0px;
      cursor: pointer;
      border-radius: 5px;
      transition: 300ms;
    }
    .contextMenus li:hover {
        background-color: #eeeeee;
    }
    .contextMenus ul {
      margin: 0;
    }
    
    #contextMenuMultiple .countItem{
        font-weight: 500;
    }
    
    .folder-structure{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
         -khtml-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }
    
    #moveButtons{
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #ebebeb;
        display: none;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding :  20px;
    }
    
    #moveButtons button {
        border: none;
        background-color: #008bc2;
        color: #eeeeee;
        margin: 0 20px;
        height: 40px;
        width: 129px;
        border-radius: 10px;
        font-size: 16px;
    }
    
    #folderSelection #moveButtons{
      display: flex !important;
    }
    
    #jobsList{
        background-color : #fff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .nightmode_active #jobsList,
    .darkmode #jobsList{
      background-color : #ffffff00;
    }
    
    #jobsList tr td:first-child,
      #jobsListS3 tr td:first-child{
        color : #000;
        font-weight: 600;
    }
    
    .nightmode_active #jobsList tr td:first-child,
    .nightmode_active #jobsListS3 tr td:first-child,
    .darkmode #jobsList tr td:first-child,
      .darkmode #jobsListS3 tr td:first-child{
      color : #ffffff;
    }
    
    #jobsList tr {
        border: none;
        padding: 10px 0px;
        cursor: pointer;
        border-radius: 5px;
        transition: 300ms;
    }
    
    .nightmode_active #jobsList th,
    .nightmode_active #jobsList tr,
    .darkmode #jobsList th,
    .darkmode #jobsList tr {
      color : #fff;
      background-color : #ffffff00 !important;
    }
    .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        margin-left: -84px;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
        margin-top: 16px;
        padding: 0px;
        background: none;
    }
    
    
    
    /* .folder-structure .folders .folder,
    .folder-structure .folders .job {
      margin: 0;
      box-shadow: none;
      border: none;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      display: flex;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.5;
      padding: 1rem;
      /* background-color: #fff; */
      /* border-radius: 10px;
      line-height: 26px;
      transition: 300ms;
      color : #000;
    } */
    
    .nightmode_active .folder-structure .folders .folder,
    .nightmode_active .folder-structure .folders .job,
    .darkmode .folder-structure .folders .folder,
    .darkmode .folder-structure .folders .job {
      color: #fff;
    }
    
    .folder-structure .folders .folder:hover,
    .folder-structure .folders .job:hover {
        background-color: #eeeeee;
    }
    
    .nightmode_active .folder-structure .folders .folder:hover,
    .nightmode_active .folder-structure .folders .job:hover,
    .darkmode .folder-structure .folders .folder:hover,
    .darkmode .folder-structure .folders .job:hover {
        background-color: #3a3a3a6e;
    }
    
    .folder-structure .folders i {
      margin-right: 1rem;
    }
    
    .folder-structure .folder .material-icons.folderIcon {
      color: #e7b307;
    }
    
    .folder-structure .folder .material-icons.folderCreateIcon {
      color: #e7b30773;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox,
    #jobsList .material-icons.selectCheckBox,
      #jobsListS3 .material-icons.selectCheckBox {
        color: #292929;
        vertical-align: middle;
        pointer-events: none;
    }
    
    .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
    .nightmode_active #jobsList .material-icons.selectCheckBox,
    .darkmode .folder-structure .folder .material-icons.selectCheckBox,
    .darkmode #jobsList .material-icons.selectCheckBox {
        color: #eeeeee;
    }
    
    .folder-structure .folder .material-icons.selectCheckBox.d-none,
    #jobsList .material-icons.selectCheckBox.d-none {
        display : none;
    }
    
    #folderSelection .folder-structure #jobsList tr{
      pointer-events: none;
      opacity: 0.5;
    }
    
    .folder-structure .empty {
      color: #adadad;
    }
    
    .folder-structure input.folderNameEdit {
      padding: 0 !important;
      height: 24px !important;
      border: none !important;
    }
    .folder-structure input.folderNameEdit:focus,
    .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
    .folder-structure
      input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
      border: none;
      box-shadow: none;
      height: 24px;
      margin: 0;
      padding: 0;
      font-weight: 700;
      color : #5a5a5a
      font-size: 15px;
    }
    
    .folder-structure #folderNav{
        display: flex;
    }
    
    .folder-structure #folderPath,
      .folder-structure #folderPathS3 {
      flex-grow: 100;
      height: 40px;
      background-color:rgba(0, 0, 0, .12);
      border-radius: 10px;
      padding: 10px;
      margin: auto;
    }
    
    .nightmode_active .folder-structure #folderPath,
    .nightmode_active .folder-structure #folderPathS3,
    .darkmode .folder-structure #folderPath,
      .darkmode .folder-structure #folderPathS3{
      background-color: #3a3a3a6e;
    }
    
    .folder-structure #folderPath .folderSpanTag,
      .folder-structure #folderPathS3 .folderSpanTag{
      font-weight: 400;
      padding : 6px;
      cursor: pointer;
      border: solid 1px #eeeeee00;
      border-radius: 5px;
      transition: 300ms;
    }
    
    .folder-structure #folderPath .folderSpanTag:hover,
      .folder-structure #folderPathS3 .folderSpanTag:hover{
      border: solid 1px #838383;
    }
    
    .folder-structure #folderPath .material-icons,
      .folder-structure #folderPathS3 .material-icons{
      font-size: 20px;
      vertical-align: text-bottom;
    }
    
    .folder-structure .folderIcons {
      width: fit-content;
      padding: 10px;
    }
    .folder-structure .folderIcons button {
      background-color: #00000000;
      border: none;
      color: #333 !important;
    }
    
    .nightmode_active .folder-structure .folderIcons button,
    .darkmode .folder-structure .folderIcons button{
      color: #eeeeee !important;
    }
    
    
    .folder-structure .newProjectButtonDiv .newProjectButton{
        background-color: #008bc2;
        color: #eeeeee !important;
        padding: 7px 16px;
        vertical-align: middle;
        line-height: 20px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        border: none;
    }
    
    .folder-structure .newProjectButtonDiv{
        padding : 0 20px;
        margin: auto;
    }
    
    #jobsList .material-icons.settingsIcon,
      #jobsListS3 .material-icons.settingsIcon {
        color: #008bc2;
        vertical-align: middle;
    }
    
    .contextMenus {
      position: absolute;
      background-color: #ffffff;
      display: none;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      width: 150px;
      height: fit-content;
      opacity: 0;
      transition: 300ms;
      padding: 5px 10px;
      color: #000000;
    }
    
    .contextMenus .material-icons {
      vertical-align: middle;
      padding: 0 5px;
      font-size: 18px;
    }
    .contextMenus li {
      padding: 10px 0px;
      cursor: pointer;
      border-radius: 5px;
      transition: 300ms;
    }
    .contextMenus li:hover {
        background-color: #eeeeee;
    }
    .contextMenus ul {
      margin: 0;
    }
    
    #contextMenuMultiple .countItem{
        font-weight: 500;
    }
    
    .folder-structure{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
         -khtml-user-select: none;
         .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            margin-left: -84px;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        
        
        /* .folder-structure .folders .folder,
        .folder-structure .folders .job {
          margin: 0;
          box-shadow: none;
          border: none;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
          display: flex;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
          line-height: 1.5;
          padding: 1rem;
          /* background-color: #fff; */
          /* border-radius: 10px;
          line-height: 26px;
          transition: 300ms;
          color : #000;
        } */
        
        .nightmode_active .folder-structure .folders .folder,
        .nightmode_active .folder-structure .folders .job,
        .darkmode .folder-structure .folders .folder,
        .darkmode .folder-structure .folders .job {
          color: #fff;
        }
        
        .folder-structure .folders .folder:hover,
        .folder-structure .folders .job:hover {
            background-color: #eeeeee;
        }
        
        .nightmode_active .folder-structure .folders .folder:hover,
        .nightmode_active .folder-structure .folders .job:hover,
        .darkmode .folder-structure .folders .folder:hover,
        .darkmode .folder-structure .folders .job:hover {
            background-color: #3a3a3a6e;
        }
        
        .folder-structure .folders i {
          margin-right: 1rem;
        }
        
        .folder-structure .folder .material-icons.folderIcon {
          color: #e7b307;
        }
        
        .folder-structure .folder .material-icons.folderCreateIcon {
          color: #e7b30773;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox,
        #jobsList .material-icons.selectCheckBox,
          #jobsListS3 .material-icons.selectCheckBox {
            color: #292929;
            vertical-align: middle;
            pointer-events: none;
        }
        
        .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
        .nightmode_active #jobsList .material-icons.selectCheckBox,
        .darkmode .folder-structure .folder .material-icons.selectCheckBox,
        .darkmode #jobsList .material-icons.selectCheckBox {
            color: #eeeeee;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox.d-none,
        #jobsList .material-icons.selectCheckBox.d-none {
            display : none;
        }
        
        #folderSelection .folder-structure #jobsList tr{
          pointer-events: none;
          opacity: 0.5;
        }
        
        .folder-structure .empty {
          color: #adadad;
        }
        
        .folder-structure input.folderNameEdit {
          padding: 0 !important;
          height: 24px !important;
          border: none !important;
        }
        .folder-structure input.folderNameEdit:focus,
        .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
        .folder-structure
          input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
          border: none;
          box-shadow: none;
          height: 24px;
          margin: 0;
          padding: 0;
          font-weight: 700;
          color : #5a5a5a
          font-size: 15px;
        }
        
        .folder-structure #folderNav{
            display: flex;
        }
        
        .folder-structure #folderPath,
          .folder-structure #folderPathS3 {
          flex-grow: 100;
          height: 40px;
          background-color:rgba(0, 0, 0, .12);
          border-radius: 10px;
          padding: 10px;
          margin: auto;
        }
        
        .nightmode_active .folder-structure #folderPath,
        .nightmode_active .folder-structure #folderPathS3,
        .darkmode .folder-structure #folderPath,
          .darkmode .folder-structure #folderPathS3{
          background-color: #3a3a3a6e;
        }
        
        .folder-structure #folderPath .folderSpanTag,
          .folder-structure #folderPathS3 .folderSpanTag{
          font-weight: 400;
          padding : 6px;
          cursor: pointer;
          border: solid 1px #eeeeee00;
          border-radius: 5px;
          transition: 300ms;
        }
        
        .folder-structure #folderPath .folderSpanTag:hover,
          .folder-structure #folderPathS3 .folderSpanTag:hover{
          border: solid 1px #838383;
        }
        
        .folder-structure #folderPath .material-icons,
          .folder-structure #folderPathS3 .material-icons{
          font-size: 20px;
          vertical-align: text-bottom;
        }
        
        .folder-structure .folderIcons {
          width: fit-content;
          padding: 10px;
        }
        .folder-structure .folderIcons button {
          background-color: #00000000;
          border: none;
          color: #333 !important;
        }
        
        .nightmode_active .folder-structure .folderIcons button,
        .darkmode .folder-structure .folderIcons button{
          color: #eeeeee !important;
        }
        
        
        .folder-structure .newProjectButtonDiv .newProjectButton{
            background-color: #008bc2;
            color: #eeeeee !important;
            padding: 7px 16px;
            vertical-align: middle;
            line-height: 20px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            border: none;
        }
        
        .folder-structure .newProjectButtonDiv{
            padding : 0 20px;
            margin: auto;
        }
        
        #jobsList .material-icons.settingsIcon,
          #jobsListS3 .material-icons.settingsIcon {
            color: #008bc2;
            vertical-align: middle;
        }
        
        .contextMenus {
          position: absolute;
          background-color: #ffffff;
          display: none;
          border-radius: 5px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          width: 150px;
          height: fit-content;
          opacity: 0;
          transition: 300ms;
          padding: 5px 10px;
          color: #000000;
        }
        
        .contextMenus .material-icons {
          vertical-align: middle;
          padding: 0 5px;
          font-size: 18px;
        }
        .contextMenus li {
          padding: 10px 0px;
          cursor: pointer;
          border-radius: 5px;
          transition: 300ms;
        }
        .contextMenus li:hover {
            background-color: #eeeeee;
        }
        .contextMenus ul {
          margin: 0;
        }
        
        #contextMenuMultiple .countItem{
            font-weight: 500;
        }
        
        .folder-structure{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
             -khtml-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
        
        #moveButtons{
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #ebebeb;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding :  20px;
        }
        
        #moveButtons button {
            border: none;
            background-color: #008bc2;
            color: #eeeeee;
            margin: 0 20px;
            height: 40px;
            width: 129px;
            border-radius: 10px;
            font-size: 16px;
        }
        
        #folderSelection #moveButtons{
          display: flex !important;
        }
        
        #jobsList{
            background-color : #fff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .nightmode_active #jobsList,
        .darkmode #jobsList{
          background-color : #ffffff00;
        }
        
        #jobsList tr td:first-child,
          #jobsListS3 tr td:first-child{
            color : #000;
            font-weight: 600;
        }
        
        .nightmode_active #jobsList tr td:first-child,
        .nightmode_active #jobsListS3 tr td:first-child,
        .darkmode #jobsList tr td:first-child,
          .darkmode #jobsListS3 tr td:first-child{
          color : #ffffff;
        }
        
        #jobsList tr {
            border: none;
            padding: 10px 0px;
            cursor: pointer;
            border-radius: 5px;
            transition: 300ms;
        }
        
        .nightmode_active #jobsList th,
        .nightmode_active #jobsList tr,
        .darkmode #jobsList th,
        .darkmode #jobsList tr {
          color : #fff;
          background-color : #ffffff00 !important;
        }
        .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            margin-left: -84px;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        
        
        /* .folder-structure .folders .folder,
        .folder-structure .folders .job {
          margin: 0;
          box-shadow: none;
          border: none;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
          display: flex;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
          line-height: 1.5;
          padding: 1rem;
          /* background-color: #fff; */
          /* border-radius: 10px;
          line-height: 26px;
          transition: 300ms;
          color : #000;
        } */
        
        .nightmode_active .folder-structure .folders .folder,
        .nightmode_active .folder-structure .folders .job,
        .darkmode .folder-structure .folders .folder,
        .darkmode .folder-structure .folders .job {
          color: #fff;
        }
        
        .folder-structure .folders .folder:hover,
        .folder-structure .folders .job:hover {
            background-color: #eeeeee;
        }
        
        .nightmode_active .folder-structure .folders .folder:hover,
        .nightmode_active .folder-structure .folders .job:hover,
        .darkmode .folder-structure .folders .folder:hover,
        .darkmode .folder-structure .folders .job:hover {
            background-color: #3a3a3a6e;
        }
        
        .folder-structure .folders i {
          margin-right: 1rem;
        }
        
        .folder-structure .folder .material-icons.folderIcon {
          color: #e7b307;
        }
        
        .folder-structure .folder .material-icons.folderCreateIcon {
          color: #e7b30773;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox,
        #jobsList .material-icons.selectCheckBox,
          #jobsListS3 .material-icons.selectCheckBox {
            color: #292929;
            vertical-align: middle;
            pointer-events: none;
        }
        
        .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
        .nightmode_active #jobsList .material-icons.selectCheckBox,
        .darkmode .folder-structure .folder .material-icons.selectCheckBox,
        .darkmode #jobsList .material-icons.selectCheckBox {
            color: #eeeeee;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox.d-none,
        #jobsList .material-icons.selectCheckBox.d-none {
            display : none;
        }
        
        #folderSelection .folder-structure #jobsList tr{
          pointer-events: none;
          opacity: 0.5;
        }
        
        .folder-structure .empty {
          color: #adadad;
        }
        
        .folder-structure input.folderNameEdit {
          padding: 0 !important;
          height: 24px !important;
          border: none !important;
        }
        .folder-structure input.folderNameEdit:focus,
        .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
        .folder-structure
          input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
          border: none;
          box-shadow: none;
          height: 24px;
          margin: 0;
          padding: 0;
          font-weight: 700;
          color : #5a5a5a
          font-size: 15px;
        }
        
        .folder-structure #folderNav{
            display: flex;
        }
        
        .folder-structure #folderPath,
          .folder-structure #folderPathS3 {
          flex-grow: 100;
          height: 40px;
          background-color:rgba(0, 0, 0, .12);
          border-radius: 10px;
          padding: 10px;
          margin: auto;
        }
        
        .nightmode_active .folder-structure #folderPath,
        .nightmode_active .folder-structure #folderPathS3,
        .darkmode .folder-structure #folderPath,
          .darkmode .folder-structure #folderPathS3{
          background-color: #3a3a3a6e;
        }
        
        .folder-structure #folderPath .folderSpanTag,
          .folder-structure #folderPathS3 .folderSpanTag{
          font-weight: 400;
          padding : 6px;
          cursor: pointer;
          border: solid 1px #eeeeee00;
          border-radius: 5px;
          transition: 300ms;
        }
        
        .folder-structure #folderPath .folderSpanTag:hover,
          .folder-structure #folderPathS3 .folderSpanTag:hover{
          border: solid 1px #838383;
        }
        
        .folder-structure #folderPath .material-icons,
          .folder-structure #folderPathS3 .material-icons{
          font-size: 20px;
          vertical-align: text-bottom;
        }
        
        .folder-structure .folderIcons {
          width: fit-content;
          padding: 10px;
        }
        .folder-structure .folderIcons button {
          background-color: #00000000;
          border: none;
          color: #333 !important;
        }
        
        .nightmode_active .folder-structure .folderIcons button,
        .darkmode .folder-structure .folderIcons button{
          color: #eeeeee !important;
        }
        
        
        .folder-structure .newProjectButtonDiv .newProjectButton{
            background-color: #008bc2;
            color: #eeeeee !important;
            padding: 7px 16px;
            vertical-align: middle;
            line-height: 20px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            border: none;
        }
        
        .folder-structure .newProjectButtonDiv{
            padding : 0 20px;
            margin: auto;
        }
        
        #jobsList .material-icons.settingsIcon,
          #jobsListS3 .material-icons.settingsIcon {
            color: #008bc2;
            vertical-align: middle;
        }
        
        .contextMenus {
          position: absolute;
          background-color: #ffffff;
          display: none;
          border-radius: 5px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          width: 150px;
          height: fit-content;
          .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            margin-left: -84px;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-min-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        .magic-horizontal-slider-tooltip.magic-horizontal-max-tooltip{
            margin-top: 16px;
            padding: 0px;
            background: none;
        }
        
        
        
        /* .folder-structure .folders .folder,
        .folder-structure .folders .job {
          margin: 0;
          box-shadow: none;
          border: none;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
          display: flex;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
          line-height: 1.5;
          padding: 1rem;
          /* background-color: #fff; */
          /* border-radius: 10px;
          line-height: 26px;
          transition: 300ms;
          color : #000;
        } */
        
        .nightmode_active .folder-structure .folders .folder,
        .nightmode_active .folder-structure .folders .job,
        .darkmode .folder-structure .folders .folder,
        .darkmode .folder-structure .folders .job {
          color: #fff;
        }
        
        .folder-structure .folders .folder:hover,
        .folder-structure .folders .job:hover {
            background-color: #eeeeee;
        }
        
        .nightmode_active .folder-structure .folders .folder:hover,
        .nightmode_active .folder-structure .folders .job:hover,
        .darkmode .folder-structure .folders .folder:hover,
        .darkmode .folder-structure .folders .job:hover {
            background-color: #3a3a3a6e;
        }
        
        .folder-structure .folders i {
          margin-right: 1rem;
        }
        
        .folder-structure .folder .material-icons.folderIcon {
          color: #e7b307;
        }
        
        .folder-structure .folder .material-icons.folderCreateIcon {
          color: #e7b30773;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox,
        #jobsList .material-icons.selectCheckBox,
          #jobsListS3 .material-icons.selectCheckBox {
            color: #292929;
            vertical-align: middle;
            pointer-events: none;
        }
        
        .nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
        .nightmode_active #jobsList .material-icons.selectCheckBox,
        .darkmode .folder-structure .folder .material-icons.selectCheckBox,
        .darkmode #jobsList .material-icons.selectCheckBox {
            color: #eeeeee;
        }
        
        .folder-structure .folder .material-icons.selectCheckBox.d-none,
        #jobsList .material-icons.selectCheckBox.d-none {
            display : none;
        }
        
        #folderSelection .folder-structure #jobsList tr{
          pointer-events: none;
          opacity: 0.5;
        }
        
        .folder-structure .empty {
          color: #adadad;
        }
        
        .folder-structure input.folderNameEdit {
          padding: 0 !important;
          height: 24px !important;
          border: none !important;
        }
        .folder-structure input.folderNameEdit:focus,
        .folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
        .folder-structure
          input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
          border: none;
          box-shadow: none;
          height: 24px;
          margin: 0;
          padding: 0;
          font-weight: 700;
          color : #5a5a5a
          font-size: 15px;
        }
        
        .folder-structure #folderNav{
            display: flex;
        }
        
        .folder-structure #folderPath,
          .folder-structure #folderPathS3 {
          flex-grow: 100;
          height: 40px;
          background-color:rgba(0, 0, 0, .12);
          border-radius: 10px;
          padding: 10px;
          margin: auto;
        }
        
        .nightmode_active .folder-structure #folderPath,
        .nightmode_active .folder-structure #folderPathS3,
        .darkmode .folder-structure #folderPath,
          .darkmode .folder-structure #folderPathS3{
          background-color: #3a3a3a6e;
        }
        
        .folder-structure #folderPath .folderSpanTag,
          .folder-structure #folderPathS3 .folderSpanTag{
          font-weight: 400;
          padding : 6px;
          cursor: pointer;
          border: solid 1px #eeeeee00;
          border-radius: 5px;
          transition: 300ms;
        }
        
        .folder-structure #folderPath .folderSpanTag:hover,
          .folder-structure #folderPathS3 .folderSpanTag:hover{
          border: solid 1px #838383;
        }
        
        .folder-structure #folderPath .material-icons,
          .folder-structure #folderPathS3 .material-icons{
          font-size: 20px;
          vertical-align: text-bottom;
        }
        
        .folder-structure .folderIcons {
          width: fit-content;
          padding: 10px;
        }
        .folder-structure .folderIcons button {
          background-color: #00000000;
          border: none;
          color: #333 !important;
        }
        
        .nightmode_active .folder-structure .folderIcons button,
        .darkmode .folder-structure .folderIcons button{
          color: #eeeeee !important;
        }
        
        
        .folder-structure .newProjectButtonDiv .newProjectButton{
            background-color: #008bc2;
            color: #eeeeee !important;
            padding: 7px 16px;
            vertical-align: middle;
            line-height: 20px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            border: none;
        }
        
        .folder-structure .newProjectButtonDiv{
            padding : 0 20px;
            margin: auto;
        }
        
        #jobsList .material-icons.settingsIcon,
          #jobsListS3 .material-icons.settingsIcon {
            color: #008bc2;
            vertical-align: middle;
        }
        
        .contextMenus {
          position: absolute;
          background-color: #ffffff;
          display: none;
          border-radius: 5px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          width: 150px;
          height: fit-content;
          opacity: 0;
          transition: 300ms;
          padding: 5px 10px;
          color: #000000;
        }
        
        .contextMenus .material-icons {
          vertical-align: middle;
          padding: 0 5px;
          font-size: 18px;
        }
        .contextMenus li {
          padding: 10px 0px;
          cursor: pointer;
          border-radius: 5px;
          transition: 300ms;
        }
        .contextMenus li:hover {
            background-color: #eeeeee;
        }
        .contextMenus ul {
          margin: 0;
        }
        
        #contextMenuMultiple .countItem{
            font-weight: 500;
        }
        
        .folder-structure{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
             -khtml-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
        
        #moveButtons{
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #ebebeb;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding :  20px;
        }
        
        #moveButtons button {
            border: none;
            background-color: #008bc2;
            color: #eeeeee;
            margin: 0 20px;
            height: 40px;
            width: 129px;
            border-radius: 10px;
            font-size: 16px;
        }
        
        #folderSelection #moveButtons{
          display: flex !important;
        }
        
        #jobsList{
            background-color : #fff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .nightmode_active #jobsList,
        .darkmode #jobsList{
          background-color : #ffffff00;
        }
        
        #jobsList tr td:first-child,
          #jobsListS3 tr td:first-child{
            color : #000;
            font-weight: 600;
        }
        
        .nightmode_active #jobsList tr td:first-child,
        .nightmode_active #jobsListS3 tr td:first-child,
        .darkmode #jobsList tr td:first-child,
          .darkmode #jobsListS3 tr td:first-child{
          color : #ffffff;
        }
        
        #jobsList tr {
            border: none;
            padding: 10px 0px;
            cursor: pointer;
            border-radius: 5px;
            transition: 300ms;
        }
        
        .nightmode_active #jobsList th,
        .nightmode_active #jobsList tr,
        .darkmode #jobsList th,
        .darkmode #jobsList tr {
          color : #fff;
          background-color : #ffffff00 !important;
        }
        
        #jobsList tr:hover {
            background-color : #eee;
        }
        
        .nightmode_active #jobsList tr:hover,
        .darkmode #jobsList tr:hover {
          background-color: #3a3a3a6e !important;
        }
        
        .folder-structure .folders{
          padding-bottom: 70px;
        }
        
        .folder-structure .folders .title{
          padding: 20px 0 0 20px;
          font-size: 18px;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .folder-structure .folders #noProjectsAndJobs,
        .folder-structure .folders #noProjects,
        .folder-structure .folders #noJobs,
          .folder-structure .folders #hiddenJobs{
          text-align: center;
          font-size: 24px;
          color: black;
          padding: 30px;
        }
        
        .folder-structure .folders #hiddenJobs .material-icons{
          vertical-align: middle;
        }
        
        .folder-structure .folders #noProjectsAndJobs.d-none,
        .folder-structure .folders #noProjects.d-none,
        .folder-structure .folders #noJobs.d-none,
        .folder-structure .folders #hiddenJobs.d-none,
        .folder-structure .folders .title.d-none{
          display: none;
        }
        
        #folderSelection .closeBtn{
          margin: 10px;
          float: right;
          cursor: pointer;
          position: absolute;
          color: #fff;
          right: 5px;
          top: -3px;
          z-index: 10;
        } */
        
               opacity: 0;
          transition: 300ms;
          padding: 5px 10px;
          color: #000000;
        }
        
        .contextMenus .material-icons {
          vertical-align: middle;
          padding: 0 5px;
          font-size: 18px;
        }
        .contextMenus li {
          padding: 10px 0px;
          cursor: pointer;
          border-radius: 5px;
          transition: 300ms;
        }
        .contextMenus li:hover {
            background-color: #eeeeee;
        }
        .contextMenus ul {
          margin: 0;
        }
        
        #contextMenuMultiple .countItem{
            font-weight: 500;
        }
        
        .folder-structure{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
             -khtml-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
        
        #moveButtons{
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #ebebeb;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding :  20px;
        }
        
        #moveButtons button {
            border: none;
            background-color: #008bc2;
            color: #eeeeee;
            margin: 0 20px;
            height: 40px;
            width: 129px;
            border-radius: 10px;
            font-size: 16px;
        }
        
        #folderSelection #moveButtons{
          display: flex !important;
        }
        
        #jobsList{
            background-color : #fff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .nightmode_active #jobsList,
        .darkmode #jobsList{
          background-color : #ffffff00;
        }
        
        #jobsList tr td:first-child,
          #jobsListS3 tr td:first-child{
            color : #000;
            font-weight: 600;
        }
        
        .nightmode_active #jobsList tr td:first-child,
        .nightmode_active #jobsListS3 tr td:first-child,
        .darkmode #jobsList tr td:first-child,
          .darkmode #jobsListS3 tr td:first-child{
          color : #ffffff;
        }
        
        #jobsList tr {
            border: none;
            padding: 10px 0px;
            cursor: pointer;
            border-radius: 5px;
            transition: 300ms;
        }
        
        .nightmode_active #jobsList th,
        .nightmode_active #jobsList tr,
        .darkmode #jobsList th,
        .darkmode #jobsList tr {
          color : #fff;
          background-color : #ffffff00 !important;
        }
        
        #jobsList tr:hover {
            background-color : #eee;
        }
        
        .nightmode_active #jobsList tr:hover,
        .darkmode #jobsList tr:hover {
          background-color: #3a3a3a6e !important;
        }
        
        .folder-structure .folders{
          padding-bottom: 70px;
        }
        
        .folder-structure .folders .title{
          padding: 20px 0 0 20px;
          font-size: 18px;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .folder-structure .folders #noProjectsAndJobs,
        .folder-structure .folders #noProjects,
        .folder-structure .folders #noJobs,
          .folder-structure .folders #hiddenJobs{
          text-align: center;
          font-size: 24px;
          color: black;
          padding: 30px;
        }
        
        .folder-structure .folders #hiddenJobs .material-icons{
          vertical-align: middle;
        }
        
        .folder-structure .folders #noProjectsAndJobs.d-none,
        .folder-structure .folders #noProjects.d-none,
        .folder-structure .folders #noJobs.d-none,
        .folder-structure .folders #hiddenJobs.d-none,
        .folder-structure .folders .title.d-none{
          display: none;
        }
        
        #folderSelection .closeBtn{
          margin: 10px;
          float: right;
          cursor: pointer;
          position: absolute;
          color: #fff;
          right: 5px;
          top: -3px;
          z-index: 10;
        } */
        
             
        #jobsList tr:hover {
            background-color : #eee;
        }
        
        .nightmode_active #jobsList tr:hover,
        .darkmode #jobsList tr:hover {
          background-color: #3a3a3a6e !important;
        }
        
        .folder-structure .folders{
          padding-bottom: 70px;
        }
        
        .folder-structure .folders .title{
          padding: 20px 0 0 20px;
          font-size: 18px;
          font-weight: 500;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        }
        
        .folder-structure .folders #noProjectsAndJobs,
        .folder-structure .folders #noProjects,
        .folder-structure .folders #noJobs,
          .folder-structure .folders #hiddenJobs{
          text-align: center;
          font-size: 24px;
          color: black;
          padding: 30px;
        }
        
        .folder-structure .folders #hiddenJobs .material-icons{
          vertical-align: middle;
        }
        
        .folder-structure .folders #noProjectsAndJobs.d-none,
        .folder-structure .folders #noProjects.d-none,
        .folder-structure .folders #noJobs.d-none,
        .folder-structure .folders #hiddenJobs.d-none,
        .folder-structure .folders .title.d-none{
          display: none;
        }
        
        #folderSelection .closeBtn{
          margin: 10px;
          float: right;
          cursor: pointer;
          position: absolute;
          color: #fff;
          right: 5px;
          top: -3px;
          z-index: 10;
        } */
        
                -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }
    
    #moveButtons{
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #ebebeb;
        display: none;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding :  20px;
    }
    
    #moveButtons button {
        border: none;
        background-color: #008bc2;
        color: #eeeeee;
        margin: 0 20px;
        height: 40px;
        width: 129px;
        border-radius: 10px;
        font-size: 16px;
    }
    
    #folderSelection #moveButtons{
      display: flex !important;
    }
    
    #jobsList{
        background-color : #fff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .nightmode_active #jobsList,
    .darkmode #jobsList{
      background-color : #ffffff00;
    }
    
    #jobsList tr td:first-child,
      #jobsListS3 tr td:first-child{
        color : #000;
        font-weight: 600;
    }
    
    .nightmode_active #jobsList tr td:first-child,
    .nightmode_active #jobsListS3 tr td:first-child,
    .darkmode #jobsList tr td:first-child,
      .darkmode #jobsListS3 tr td:first-child{
      color : #ffffff;
    }
    
    #jobsList tr {
        border: none;
        padding: 10px 0px;
        cursor: pointer;
        border-radius: 5px;
        transition: 300ms;
    }
    
    .nightmode_active #jobsList th,
    .nightmode_active #jobsList tr,
    .darkmode #jobsList th,
    .darkmode #jobsList tr {
      color : #fff;
      background-color : #ffffff00 !important;
    }
    
    #jobsList tr:hover {
        background-color : #eee;
    }
    
    .nightmode_active #jobsList tr:hover,
    .darkmode #jobsList tr:hover {
      background-color: #3a3a3a6e !important;
    }
    
    .folder-structure .folders{
      padding-bottom: 70px;
    }
    
    .folder-structure .folders .title{
      padding: 20px 0 0 20px;
      font-size: 18px;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .folder-structure .folders #noProjectsAndJobs,
    .folder-structure .folders #noProjects,
    .folder-structure .folders #noJobs,
      .folder-structure .folders #hiddenJobs{
      text-align: center;
      font-size: 24px;
      color: black;
      padding: 30px;
    }
    
    .folder-structure .folders #hiddenJobs .material-icons{
      vertical-align: middle;
    }
    
    .folder-structure .folders #noProjectsAndJobs.d-none,
    .folder-structure .folders #noProjects.d-none,
    .folder-structure .folders #noJobs.d-none,
    .folder-structure .folders #hiddenJobs.d-none,
    .folder-structure .folders .title.d-none{
      display: none;
    }
    
    #folderSelection .closeBtn{
      margin: 10px;
      float: right;
      cursor: pointer;
      position: absolute;
      color: #fff;
      right: 5px;
      top: -3px;
      z-index: 10;
    } */
    
     
    #jobsList tr:hover {
        background-color : #eee;
    }
    
    .nightmode_active #jobsList tr:hover,
    .darkmode #jobsList tr:hover {
      background-color: #3a3a3a6e !important;
    }
    
    .folder-structure .folders{
      padding-bottom: 70px;
    }
    
    .folder-structure .folders .title{
      padding: 20px 0 0 20px;
      font-size: 18px;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .folder-structure .folders #noProjectsAndJobs,
    .folder-structure .folders #noProjects,
    .folder-structure .folders #noJobs,
      .folder-structure .folders #hiddenJobs{
      text-align: center;
      font-size: 24px;
      color: black;
      padding: 30px;
    }
    
    .folder-structure .folders #hiddenJobs .material-icons{
      vertical-align: middle;
    }
    
    .folder-structure .folders #noProjectsAndJobs.d-none,
    .folder-structure .folders #noProjects.d-none,
    .folder-structure .folders #noJobs.d-none,
    .folder-structure .folders #hiddenJobs.d-none,
    .folder-structure .folders .title.d-none{
      display: none;
    }
    
    #folderSelection .closeBtn{
      margin: 10px;
      float: right;
      cursor: pointer;
      position: absolute;
      color: #fff;
      right: 5px;
      top: -3px;
      z-index: 10;
    } */
    
     .contextMenus li {
      padding: 10px 0px;
      cursor: pointer;
      border-radius: 5px;
      transition: 300ms;
    }
    .contextMenus li:hover {
        background-color: #eeeeee;
    }
    .contextMenus ul {
      margin: 0;
    }
    
    #contextMenuMultiple .countItem{
        font-weight: 500;
    }
    
    .folder-structure{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
         -khtml-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }
    
    #moveButtons{
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #ebebeb;
        display: none;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding :  20px;
    }
    
    #moveButtons button {
        border: none;
        background-color: #008bc2;
        color: #eeeeee;
        margin: 0 20px;
        height: 40px;
        width: 129px;
        border-radius: 10px;
        font-size: 16px;
    }
    
    #folderSelection #moveButtons{
      display: flex !important;
    }
    
    #jobsList{
        background-color : #fff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .nightmode_active #jobsList,
    .darkmode #jobsList{
      background-color : #ffffff00;
    }
    
    #jobsList tr td:first-child,
      #jobsListS3 tr td:first-child{
        color : #000;
        font-weight: 600;
    }
    
    .nightmode_active #jobsList tr td:first-child,
    .nightmode_active #jobsListS3 tr td:first-child,
    .darkmode #jobsList tr td:first-child,
      .darkmode #jobsListS3 tr td:first-child{
      color : #ffffff;
    }
    
    #jobsList tr {
        border: none;
        padding: 10px 0px;
        cursor: pointer;
        border-radius: 5px;
        transition: 300ms;
    }
    
    .nightmode_active #jobsList th,
    .nightmode_active #jobsList tr,
    .darkmode #jobsList th,
    .darkmode #jobsList tr {
      color : #fff;
      background-color : #ffffff00 !important;
    }
    
    #jobsList tr:hover {
        background-color : #eee;
    }
    
    .nightmode_active #jobsList tr:hover,
    .darkmode #jobsList tr:hover {
      background-color: #3a3a3a6e !important;
    }
    
    .folder-structure .folders{
      padding-bottom: 70px;
    }
    
    .folder-structure .folders .title{
      padding: 20px 0 0 20px;
      font-size: 18px;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .folder-structure .folders #noProjectsAndJobs,
    .folder-structure .folders #noProjects,
    .folder-structure .folders #noJobs,
      .folder-structure .folders #hiddenJobs{
      text-align: center;
      font-size: 24px;
      color: black;
      padding: 30px;
    }
    
    .folder-structure .folders #hiddenJobs .material-icons{
      vertical-align: middle;
    }
    
    .folder-structure .folders #noProjectsAndJobs.d-none,
    .folder-structure .folders #noProjects.d-none,
    .folder-structure .folders #noJobs.d-none,
    .folder-structure .folders #hiddenJobs.d-none,
    .folder-structure .folders .title.d-none{
      display: none;
    }
    
    #folderSelection .closeBtn{
      margin: 10px;
      float: right;
      cursor: pointer;
      position: absolute;
      color: #fff;
      right: 5px;
      top: -3px;
      z-index: 10;
    } */
    
    or: #292929;
    vertical-align: middle;
    pointer-events: none;
}

.nightmode_active .folder-structure .folder .material-icons.selectCheckBox,
.nightmode_active #jobsList .material-icons.selectCheckBox,
.darkmode .folder-structure .folder .material-icons.selectCheckBox,
.darkmode #jobsList .material-icons.selectCheckBox {
    color: #eeeeee;
}

.folder-structure .folder .material-icons.selectCheckBox.d-none,
#jobsList .material-icons.selectCheckBox.d-none {
    display : none;
}

#folderSelection .folder-structure #jobsList tr{
  pointer-events: none;
  opacity: 0.5;
}

.folder-structure .empty {
  color: #adadad;
}

.folder-structure input.folderNameEdit {
  padding: 0 !important;
  height: 24px !important;
  border: none !important;
}
.folder-structure input.folderNameEdit:focus,
.folder-structure input.folderNameEdit:not([type]):focus:not([readonly]),
.folder-structure
  input.folderNameEdit[type="text"]:not(.browser-default):focus:not([readonly]) {
  border: none;
  box-shadow: none;
  height: 24px;
  margin: 0;
  padding: 0;
  font-weight: 700;
  color : #5a5a5a
  font-size: 15px;
}

.folder-structure #folderNav{
    display: flex;
}

.folder-structure #folderPath,
  .folder-structure #folderPathS3 {
  flex-grow: 100;
  height: 40px;
  background-color:rgba(0, 0, 0, .12);
  border-radius: 10px;
  padding: 10px;
  margin: auto;
}

.nightmode_active .folder-structure #folderPath,
.nightmode_active .folder-structure #folderPathS3,
.darkmode .folder-structure #folderPath,
  .darkmode .folder-structure #folderPathS3{
  background-color: #3a3a3a6e;
}

.folder-structure #folderPath .folderSpanTag,
  .folder-structure #folderPathS3 .folderSpanTag{
  font-weight: 400;
  padding : 6px;
  cursor: pointer;
  border: solid 1px #eeeeee00;
  border-radius: 5px;
  transition: 300ms;
}

.folder-structure #folderPath .folderSpanTag:hover,
  .folder-structure #folderPathS3 .folderSpanTag:hover{
  border: solid 1px #838383;
}

.folder-structure #folderPath .material-icons,
  .folder-structure #folderPathS3 .material-icons{
  font-size: 20px;
  vertical-align: text-bottom;
}

.folder-structure .folderIcons {
  width: fit-content;
  padding: 10px;
}
.folder-structure .folderIcons button {
  background-color: #00000000;
  border: none;
  color: #333 !important;
}

.nightmode_active .folder-structure .folderIcons button,
.darkmode .folder-structure .folderIcons button{
  color: #eeeeee !important;
}


.folder-structure .newProjectButtonDiv .newProjectButton{
    background-color: #008bc2;
    color: #eeeeee !important;
    padding: 7px 16px;
    vertical-align: middle;
    line-height: 20px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: none;
}

.folder-structure .newProjectButtonDiv{
    padding : 0 20px;
    margin: auto;
}

#jobsList .material-icons.settingsIcon,
  #jobsListS3 .material-icons.settingsIcon {
    color: #008bc2;
    vertical-align: middle;
}

.contextMenus {
  position: absolute;
  background-color: #ffffff;
  display: none;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 150px;
  height: fit-content;
  opacity: 0;
  transition: 300ms;
  padding: 5px 10px;
  color: #000000;
}

.contextMenus .material-icons {
  vertical-align: middle;
  padding: 0 5px;
  font-size: 18px;
}
.contextMenus li {
  padding: 10px 0px;
  cursor: pointer;
  border-radius: 5px;
  transition: 300ms;
}
.contextMenus li:hover {
    background-color: #eeeeee;
}
.contextMenus ul {
  margin: 0;
}

#contextMenuMultiple .countItem{
    font-weight: 500;
}

.folder-structure{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#moveButtons{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #ebebeb;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding :  20px;
}

#moveButtons button {
    border: none;
    background-color: #008bc2;
    color: #eeeeee;
    margin: 0 20px;
    height: 40px;
    width: 129px;
    border-radius: 10px;
    font-size: 16px;
}

#folderSelection #moveButtons{
  display: flex !important;
}

#jobsList{
    background-color : #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.nightmode_active #jobsList,
.darkmode #jobsList{
  background-color : #ffffff00;
}

#jobsList tr td:first-child,
  #jobsListS3 tr td:first-child{
    color : #000;
    font-weight: 600;
}

.nightmode_active #jobsList tr td:first-child,
.nightmode_active #jobsListS3 tr td:first-child,
.darkmode #jobsList tr td:first-child,
  .darkmode #jobsListS3 tr td:first-child{
  color : #ffffff;
}

#jobsList tr {
    border: none;
    padding: 10px 0px;
    cursor: pointer;
    border-radius: 5px;
    transition: 300ms;
}

.mapSatTab {
    height: 50px;
    background-color: #FFF;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    display: flex;
    align-content: center;
    justify-content: center;
}

.tablinks {
    color:#223645;
}

.nightmode_active #jobsList th,
.nightmode_active #jobsList tr,
.darkmode #jobsList th,
.darkmode #jobsList tr {
  color : #fff;
  background-color : #ffffff00 !important;
}

#jobsList tr:hover {
    background-color : #eee;
}

.nightmode_active #jobsList tr:hover,
.darkmode #jobsList tr:hover {
  background-color: #3a3a3a6e !important;
}

.folder-structure .folders{
  padding-bottom: 70px;
}

.folder-structure .folders .title{
  padding: 20px 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.folder-structure .folders #noProjectsAndJobs,
.folder-structure .folders #noProjects,
.folder-structure .folders #noJobs,
  .folder-structure .folders #hiddenJobs{
  text-align: center;
  font-size: 24px;
  color: black;
  padding: 30px;
}

.folder-structure .folders #hiddenJobs .material-icons{
  vertical-align: middle;
}

.folder-structure .folders #noProjectsAndJobs.d-none,
.folder-structure .folders #noProjects.d-none,
.folder-structure .folders #noJobs.d-none,
.folder-structure .folders #hiddenJobs.d-none,
.folder-structure .folders .title.d-none{
  display: none;
}

#folderSelection .closeBtn{
  margin: 10px;
  float: right;
  cursor: pointer;
  position: absolute;
  color: #fff;
  right: 5px;
  top: -3px;
  z-index: 10;
} */

ode_active #jobsList th,
.nightmode_active #jobsList tr,
.darkmode #jobsList th,
.darkmode #jobsList tr {
  color : #fff;
  background-color : #ffffff00 !important;
}

#jobsList tr:hover {
    background-color : #eee;
}

.nightmode_active #jobsList tr:hover,
.darkmode #jobsList tr:hover {
  background-color: #3a3a3a6e !important;
}

.folder-structure .folders{
  padding-bottom: 70px;
}

.folder-structure .folders .title{
  padding: 20px 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.folder-structure .folders #noProjectsAndJobs,
.folder-structure .folders #noProjects,
.folder-structure .folders #noJobs,
  .folder-structure .folders #hiddenJobs{
  text-align: center;
  font-size: 24px;
  color: black;
  padding: 30px;
}

.folder-structure .folders #hiddenJobs .material-icons{
  vertical-align: middle;
}

.folder-structure .folders #noProjectsAndJobs.d-none,
.folder-structure .folders #noProjects.d-none,
.folder-structure .folders #noJobs.d-none,
.folder-structure .folders #hiddenJobs.d-none,
.folder-structure .folders .title.d-none{
  display: none;
}

#folderSelection .closeBtn{
  margin: 10px;
  float: right;
  cursor: pointer;
  position: absolute;
  color: #fff;
  right: 5px;
  top: -3px;
  z-index: 10;
} */

.swal-title {
    color: #000000 !important;
}