body {
    background: #dddbd1;
    overflow: hidden;
    font-size: 14px;
}

.bg-futuro {
    background-color: #99ffa3 !important;
}

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.nav-tabs {
    margin-bottom: 0;
}

.search-input {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    margin-left: .5rem!important;
}

.table__row{
    display: flex !important;
}

.nav-pills .nav-link {
    background: gainsboro;
    margin: 0 3px;
}

.nav-link a {
    color: #000 !important;
}

.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
    border: none !important;
}

.jumbotron-subtitle {
    padding: 10px;
    margin-bottom: 10px;
}

.jumbotron-custom {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 32px !important;
}
/*
.form-control-sm {
    height: calc(1.5em + .75rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
*/
.custom-file-label {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.logo-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.img-table-30 {
    height: 30px; 
    width: 30px;
    object-fit: cover;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #169c85;
}

.table td, .table th {
    vertical-align: middle !important;
    border-top: 1px solid #dee2e6;
}

.border-ab {
    border: 2px solid #D9534F !important;
}

.border-rc {
    border: 2px solid #1E73BE !important;
}

.border-fn {
    border: 2px solid #5CB85C !important;
}

.border-cl {
    border: 2px solid #FF0000 !important;
}

.border-et {
    border: 2px solid #EEEE22 !important;
}

.border-co {
    border: 2px solid #DD9933 !important;
}

.border-ob {
    border: 2px solid #900C3F !important;
}

.text-ab {
    color: #D9534F !important;
}

.text-rc {
    color: #1E73BE !important;
}

.text-fn {
    color: #5CB85C !important;
}

.text-cl {
    color: #FF0000 !important;
}

.text-et {
    color: #eeee22 !important;
}

.text-co {
    color: #DD9933 !important;
}

.text-ob {
    color: #900C3F !important;
}

.logo-img-30 {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.alert-custom {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    text-align: left !important;
    z-index: 999999 !important;
}

.toast-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
}

.blink-me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus,
input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus,
input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(22, 156, 133, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px
        rgba(22, 156, 133, 0.6);
    outline: 0 none;
}

table tr:first-child th {
    background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 30%, #f6f6f6 30%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(30%,#f6f6f6), color-stop(30%,#f6f6f6), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 30%,#f6f6f6 30%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 30%,#f6f6f6 30%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 30%,#f6f6f6 30%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 30%,#f6f6f6 30%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    padding: .5rem .3rem;
    color: #000;
}

.page-body {
    padding: 15px !important;
    margin-top: 55px;
    padding-bottom: 46px !important;
}

.navbar-custom {
    background-color: #144173;
    box-shadow: 0 8px 9px -9px #000;
    border-top: 3px solid #169c85;
}

.page-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 57px;
    background: #fff;
    padding: 0 8px !important;
    box-shadow: 0 8px 6px -12px #000;
    z-index: 99;
}

@media screen and (min-width: 768px) {
    .page-header.toggled {
        left: 260px;
    }
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #169c85;
    background-color: #169c85;
}

.btn-navbar {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: none;
}

.btn-primary {
    color: #fff;
    background-color: #144173;
    border-color: #144173;
}

.bg-primary {
    background-color: #144173 !important;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .85rem;
    color: #858796;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
}

.breadcrumb-custom {
    padding: 0;
    background: none;
    font-size: 12px;
    margin-bottom: 0;
}

.icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-custom .dropdown-list .dropdown-header {
    background-color: #169c85;
    border: 1px solid #169c85;
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #fff;
}

.navbar-custom .dropdown-list {
    padding: 0;
    border: none;
    overflow: hidden;
}

.navbar-custom .dropdown-list .dropdown-item {
    white-space: normal;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-left: 1px solid #e3e6f0;
    border-right: 1px solid #e3e6f0;
    border-bottom: 1px solid #e3e6f0;
    line-height: 1.3rem;
}

.navbar-custom .nav-item .nav-link .badge-counter {
    position: absolute;
    transform: scale(.7);
    transform-origin: top right;
    right: .25rem;
    margin-top: -.25rem;
}

.navbar-custom .dropdown .dropdown-menu {
    width: calc(100% - 1.5rem);
    right: .75rem;
}

.navbar-custom .dropdown-list {
    padding: 0;
    border: none;
    overflow: hidden;
}

.navbar-custom .dropdown-toggle::after {
    display:none;
}

.navbar-custom .dropdown {
    position: static;
}

.navbar-custom .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.navbar-custom .nav-item .nav-link {
    position: relative;
    height: 38px;
}

.navbar-custom .topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(38px - 8px);
    margin: auto 1rem;
}

.navbar-custom .nav-item .nav-link .img-profile {
    height: 2rem;
    width: 2rem;
    object-fit: cover;
}

@media (min-width: 576px) {
    .navbar-custom .dropdown .dropdown-menu {
        width: auto;
        right: 0;
    }
}

@media (min-width: 576px) {
    .navbar-custom .dropdown-list {
        width: 20rem!important;
    }
}

@media (min-width: 576px) {
    .navbar-custom .dropdown {
        position: relative;
    }
}

@media (min-width: 576px) {
    .d-sm-block {
        display: block!important;
    }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)
{
    height: 100% !important;
    overflow-y: visible !important;
}

/* Status Bar */
.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 10px
}

@media screen and (min-width: 768px) {
    .status-bar.toggled {
        left: 260px;
    }
}

/* Loading */
.loading {
    background-color:rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 99999;
}

.loading-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #169c85;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4); 
    } 100%, 0% {
        transform: scale(1.0); 
    } 
}

/* CSS login form */
.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: 10px;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
}

/* Lists */

.lists-container {
    display: flex;
    align-items: start;
    padding: 0;
    overflow-x: auto;
    height: calc(100vh - 11.1rem);
}

.list {
    flex: 0 0 27rem;
    display: flex;
    flex-direction: column;
    background-color: #e2e4e6;
    max-height: calc(100vh - 11.1rem);
    border-radius: 0.3rem;
    margin-right: 1rem;
}

.list:last-of-type {
    margin-right: 0;
}

.list-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 1rem;
}

.list-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: start;
    padding: 0 0.6rem 0.5rem;
    overflow-y: auto;
}

.list-items li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    background-color: #fff;
    padding: 0.65rem 0.6rem;
    color: #4d4d4d;
    border-bottom: 0.1rem solid #ccc;
    border-radius: 0.3rem;
    margin-bottom: 0.6rem;
    word-wrap: break-word;
    cursor: pointer;
}

.list-items li:last-of-type {
    margin-bottom: 0;
}

.list-items li:hover {
    background-color: #eee;
}

.add-card-btn {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    color: #838c91;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
}

.add-card-btn:hover {
    background-color: #cdd2d4;
    color: #4d4d4d;
    text-decoration: underline;
}

.add-list-btn {
    flex: 0 0 27rem;
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    background-color: #006aa7;
    color: #a5cae0;
    padding: 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background-color 150ms;
    text-align: left;
}

.add-list-btn:hover {
    background-color: #005485;
}

.add-card-btn::after,
.add-list-btn::after {
    content: '...';
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
    .lists-container {
        display: grid;
        grid-auto-columns: 27rem;
        grid-auto-flow: column;
        grid-column-gap: 1rem;
    }

    .list {
        display: grid;
        grid-template-rows: auto minmax(auto, 1fr) auto;
    }

    .list-items {
        display: grid;
        grid-row-gap: 0.6rem;
    }

    .logo,
    .list,
    .list-items li,
    .boards-btn,
    .board-info-bar,
    .board-controls .btn,
    .user-settings-btn {
        margin: 0;
    }
}