@import url('https://fonts.googleapis.com/css?family=Varela+Round');

* {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

::-moz-selection {
    color: #fff;
    background: rgb(80, 124, 196)
}

::selection {
    color: #fff;
    background: rgb(80, 124, 196)
}

body {
    margin-top: 50px;
    background-color: #f5f8f3
}

a:focus,
a:hover {
    text-decoration: none
}

h1 {
    margin-top: 0 !important;
    padding-top: 10px !important
}

footer {
    text-align: center;
    background-color: #333;
    color: #fcfcfc;
    padding: 10px
}

textarea {
    resize: none
}

i {
    margin-right: 10px
}

tbody i {
    margin-right: 0;
    padding: 5px;
}

span>i {
    margin-right: 0
}

tr a {
    color: #000
}

.break-line {
    white-space: pre-line;
}

.panel {
    border-radius: 5px;
    border: 0;
    background: rgba(238, 238, 238, .8)
}

.panel-heading {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.panel-color {
    margin-bottom: 35px
}

.panel-color .panel-heading {
    color: #000;
    text-align: center;
    border: 2px solid rgb(80, 124, 196);
    background-color: #fff;
    border-radius: 7px
}

.panel-color .panel-heading:hover {
    background-color: rgb(80, 124, 196);
    color: #fff;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease
}

.panel-color .panel-default {
    color: #fff;
    text-align: center;
    background-color: #21020e;
    padding: 10px 15px;
    border: 2px solid #928f90
}

.panel-color a {
    text-decoration: none;
    color: #000
}

.panel-color a:hover {
    color: #fff
}

.panel-atalhos {
    background-color: #789c4b;
    color: #fff;
    padding: 10px;
    text-align: center
}

.panel-login {
    margin: auto;

    background-color: #1a4382;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 30px 0px 30px 0px;
    padding: 20px;
    border: 2px solid #fff;
}

.panel-title {
    font-weight: 700
}

.btn-ativar {
    color: #fff;
    background-color: #b4c508
}

.btn-dindin {
    color: #fff;
    background-color: rgb(80, 124, 196)
}

.btn-dindin:hover,
.btn-ativar:hover {
    color: #fff;
    background-color: rgb(80, 124, 196)
}

.btn-login {
    color: #fff;
    background-color: #154055;
    transition: all 0.3s;
}

.btn-login:hover,
.btn-login:active,
.btn-login:visited,
.btn-login:focus {
    border: 2px solid rgb(80, 124, 196);
    color: rgb(80, 124, 196);
    background-color: #154055;
}

.btn-block {
    padding: 9px
}

.navbar-inverse {
    background-color: rgb(80, 124, 196);
    border: 0;
    height: 51px
}

.nav>li>a>img {
    margin-right: 8px
}

.logoMenu {
    background-color: rgb(80, 124, 196);
    width: 180px;
    height: 40px;
    padding-left: 15px
}

#wrapper {
    padding-left: 0
}

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff
}

.huge {
    font-size: 50px;
    line-height: normal
}

@media (min-width: 768px) {
    #wrapper {
        padding-left: 180px;
        background-color: rgb(80, 124, 196);
        padding-bottom: 5px;
    }

    #page-wrapper {
        padding: 10px;
        min-height: 100%;
        margin-bottom: -5px;
        -webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .4);
        -moz-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .4);
        box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, .4);
    }
}

.top-nav {
    padding: 0 15px
}

.top-nav>li {
    display: inline-block;
    float: left;
    margin-left: 10px
}

.top-nav>li>a {
    padding-top: 16px;
    padding-bottom: 15px;
    line-height: 20px;
    color: #fff
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: rgb(80, 124, 196)
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

.top-nav>.open>.dropdown-menu>li {
    width: 100%;
    padding: 0
}

.top-nav>.open>.dropdown-menu>li>a {
    white-space: normal;
    padding: 10px 15px
}

.remover-margin {
    margin-bottom: 0
}

.side-nav {
    position: fixed;
    left: 180px;
    width: 180px;
    margin-left: -180px;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 34px;
    top: 50px;
}

.side-nav>li>a {
    width: 180px
}

.side-nav li a:hover,
.side-nav li a:focus {
    outline: none;
    background-color: #154055;
}

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
    font-size: 12px;
    width: 180px;
    padding: 9px 8px;
}


.side-nav>li>ul {
    padding: 0
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #999
}

.side-nav>li>ul>li>a:hover {
    color: #fff
}

.flot-chart {
    display: block;
    height: 400px
}

.flot-chart-content {
    width: 100%;
    height: 100%
}

.huge {
    font-size: 46px;
    text-align: right
}

.font-panel {
    font-weight: 700
}

.font-extrato {
    color: #aed47f
}

.center {
    margin: auto;
    text-align: center
}

.login {
    margin-top: 15px
}

.bglogin {
    margin-top: 100px;
    background-color: #dcdcdc
}

.topo {
    background-color: rgb(80, 124, 196);
    margin-top: -100px;
    padding: 17px;
}

.img-background {
    background-color: rgb(80, 124, 196);
    padding: 10%;
    height: 100vh;
}

.rodape {
    background-color: #154055;
    font-size: 12px;
    min-height: 35px;
    text-align: center;
    color: #fff
}

.rodape p {
    padding-top: 5px;
    margin-bottom: 0;
}

.fullpage {
    min-height: 630px;
    margin: 15px 0 20px
}

.crud-add {
    display: inline-block;
    text-align: right;
    margin-top: -70px
}

.obrigatorios {
    text-align: right;
    color: red;
    font-size: 12px
}

.upper td {
    text-transform: uppercase
}

.tab-pane {
    padding: 10px
}

.cursor {
    cursor: pointer
}

.navbar-nav>li>a {
    padding-top: 14px;
    padding-bottom: 14px
}

#boxTroco {
    color: green;
    padding: 10px;
    text-align: right;
    font-size: 28px
}

.right {
    text-align: right
}

.tituloInterno {
    font-size: 18px;
    padding: 0;
    margin: 0;
    color: #fff;
    margin-top: -45px !important;
    padding-left: 20px;
    position: absolute
}

.btn-acoes {
    max-width: 45%;
    padding-right: 12px
}

.text-center {
    text-align: center
}

.form-control {
    height: 40px;
    border-radius: 1px solid
}

.margin-top {
    margin-top: 15px
}

.btn-ver {
    background-color: #0b4360;
    color: #fff;
    border: 0
}

.btn-ver:hover {
    background-color: #032c41;
    color: #fff;
    border: 0
}

.recuperar-senha:hover {
    color: #fff
}

.table {
    font-size: 11px
}

.t-modal .modal-content {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.t-modal .modal-header {
    padding: 30px 15px;
    text-transform: uppercase;
    background-color: rgb(80, 124, 196)
}

.t-modal .modal-title,
.modal-header .close {
    color: #fff
}

.t-modal .modal-footer {
    border: none
}

.text {
    color: #507cc4
}

.text.filtrar:hover {
    cursor: pointer;
    color: #305aa3;
}

.text.filtrar:active {
    color: #104992;
}

.text-link {
    color: rgb(80, 124, 196)
}

.text-link:hover {
    color: #b4c508
}

#lista-clientes_row_0,
#ultimas-notificacoes_row_0,
#lista-camadas_row_0,
#lista-servicos_row_0,
#lista-fornecedores_row_0,
#lista-produtos_row_0,
#lista-usuarios_row_0,
#lista-agendamentos_row_0,
#lista-comandas_row_0,
#geral-cliente_row_0,
#lista-enderecos_row_0,
#lista-entregador_row_0,
#lista-relacao_pedidos_row_0,
#forma-pagamento_row_0,
#lista-entregadores_row_0 {
    background-color: rgb(80, 124, 196);
    color: #fff
}

.whiteLine {
    background-color: #fff;
    color: #000
}

.redLine {
    background-color: red;
    color: #fff
}

.btn-buscar {
    background-color: #abdb71;
    color: #fff
}

.btn-buscar:hover,
.btn-buscar:active {
    background-color: #90be59;
    color: #fff;
    border: 1px solid #000
}

.btn-recuperar {
    background-color: #90be59;
    color: #fff;
    padding: 6px 20px
}

.btn-recuperar:hover,
.btn-recuperar:active {
    background-color: #90cf59
}

.painel-remover {
    border: 1px solid #eee
}

.page-header a {
    text-decoration: none
}

.center {
    text-align: center
}

.stepper {
    padding: 8px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 4px;
    margin-right: 4px;
    margin-left: 4px;
    font-size: 18px
}

.stepper-active {
    background-color: rgb(80, 124, 196);
    color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 8px;
    font-size: 18px
}

.stepper:hover {
    background-color: #abdb71;
    color: #fff
}

span.stepper-next {
    text-decoration: underline;
    cursor: pointer;
    font-size: 15px
}

.id {
    background-color: #eee;
    padding: 14px
}

.page-header {
    margin: 14px 0 20px
}

.cores {
    margin-right: 10px
}

.cores:focus {
    border: 2px #eee
}

#avatar {
    max-width: 150px;
    max-height: 200px;
    min-height: 200px
}

.relatorios-panel {
    margin-top: 23%
}

.mensagem {
    border: 1px solid #eee;
    padding: 10px
}

.img-painel {
    width: 80px
}

.btn-buscar {
    padding: 8px 7px
}

button#salvar {
    margin-top: 5px;
    margin-left: 60px;
    padding: 6px 25px
}

.nav-tabs>li>a {
    color: rgb(80, 124, 196)
}

.table-striped thead {
    background-color: rgb(80, 124, 196);
    color: #fff
}

.fa-5x {
    font-size: 6em;
    margin-left: 15px
}

.imagem {
    height: 150px;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    border-radius: 50%;
    min-height: 150px;
    min-width: 145px;
    width: 145px;
    margin-top: 15px
}

.active-menu {
    background-color: #058ed0;
    border-left: 0px solid #fff;
    width: 180px
}

.btn-verificado {
    padding: 5px 5px
}

.btn-verificado-nao {
    padding: 8px 10px
}

.logoDinDin {
    width: 80%;
    margin-left: -0px;
}

.logoDinDinLogin {
    width: 150px
}

.sem-borda {
    border: none
}

img.avatar {
    width: 145px;
    border-radius: 50%;
    min-height: 150px;
    height: 150px;
    border: 1px solid #ccc
}

img.avatar-lista {
    width: 30px;
    max-width: 30px;
    max-height: 30px;
    height: 30px
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    vertical-align: middle;

}

span#editaCliente {
    padding: 10px 15px
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: rgb(80, 124, 196) !important
}

.top-message {
    margin-top: -80px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 16px;
    color: rgb(80, 124, 196)
}

span.badge {
    bottom: 5px;
    margin-left: 5px;
    position: relative;
    background-color: rgb(237, 6, 6);
    /*#337ab7d6*/
    color: #fff;
    font-size: 9px;
}

.box-mensagem {
    border: 2px solid rgb(80, 124, 196);
    border-radius: 8px;
    padding: 9px
}

.navbar-nav>li {
    overflow: hidden;
    border-bottom: solid 1px #f5efff;
}



a.btn.btn-default.btn-voltar {
    border: 1px solid #000
}

#valor_transacoes,
#qtd_transacoes {
    font-weight: bold
}

.hide-menu {
    color: rgb(80, 124, 196);
    margin-top: 5px;
    cursor: pointer;
    padding-left: 180px
}

img.img-mobile2 {
    height: 65px;
    max-height: 65px;
    width: 70px;
    max-width: 70px;
    padding-top: 5px
}

.lists-page {
    padding-top: 10%
}

.panel-heading.panel-black-list,
.panel-heading.panel-black-list:hover {
    background-color: #000;
    color: #fff;
    font-size: 30px
}

.panel-heading.panel-white-list,
.panel-heading.panel-white-list:hover {
    background-color: #fff;
    color: #000;
    font-size: 30px
}

.panel-heading.panel-green-list,
.panel-heading.panel-green-list:hover {
    background-color: green;
    color: #fff;
    font-size: 30px
}

.btn-black,
.btn-black:hover,
.btn-black:active {
    background-color: #000;
    color: #fff;
    border: 1px solid #000
}

.btn-white,
.btn-white:hover,
.btn-white:active {
    background-color: #fff;
    color: #000;
    border: 1px solid #000
}

.btn-green,
.btn-green:hover,
.btn-green:active {
    background-color: rgb(80, 124, 196);
    color: #fff;
    border: 1px solid rgb(80, 124, 196)
}

.remove-message {
    margin-bottom: 0
}

.top-flex {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: -80px;
    margin-bottom: 40px;
    margin-left: 240px
}

#menuMobile {
    display: none !important;
}

#menuMobile {
    max-height: 80vh !important;
    background-color: rgb(80, 124, 196)
}

#menuMobile li {
    line-height: 15px !important;
    font-size: 12px !important;
    padding: 0
}

@media (max-width: 768px) {
    #menuDesktop {
        display: none;
    }

    #menuMobile {
        display: block !important;
    }

    .logoDinDin {
        margin-top: 15px
    }

    #page-wrapper {
        margin-top: 80px
    }

    .side-nav {
        background-color: rgb(80, 124, 196);
        top: 25px;
        width: 100%;
        height: 100%
    }

    .top-nav>li {
        margin-left: 100px;
        bottom: 50px
    }

    .top-message {
        margin-top: 15px
    }

    .crud-add {
        margin-bottom: 10px
    }

    #alterar {
        margin-bottom: 10px
    }

    span#editaCliente {
        margin-left: 195px
    }

    .btn-voltar {
        margin-top: 55px
    }

    button#salvar {
        margin-left: 175px;
        margin-bottom: 20px;
        margin-top: -20px
    }

    .imagem {
        margin: auto;
        position: relative
    }

    .navbar-inverse {
        height: 75px
    }

    button.navbar-toggle {
        margin-top: 20px
    }

    .navbar-inverse .navbar-toggle:focus,
    .navbar-inverse .navbar-toggle:hover {
        background-color: rgb(80, 124, 196)
    }

    .panel-login {
        width: 290px;
        margin-top: 50px
    }

    .img-background {
        padding: 0
    }

    .img-mobile {
        width: 20%;
        margin-top: -20%;
        margin-left: 80%
    }

    .transacoes {
        margin-left: 20px
    }

    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border: none
    }

    .nav>li {
        padding: 2px
    }

    .status {
        margin-bottom: -40px
    }

    ol.breadcrumb.text-center {
        margin-top: 50px
    }

    .panel-user {
        margin-top: 40px
    }

    ol.breadcrumb.text-center.remove-margin {
        margin-top: 5px
    }

    .navbar-inverse .navbar-toggle {
        border-color: #fff
    }

    .navbar-inverse .navbar-nav>li>a {
        color: #fff;
        font-size: 18px;
        width: 100%
    }

    img.avatar {
        width: 145px;
        margin-top: 1px;
        border-radius: 50%
    }

    .active-menu {
        background-color: #058ed0;
        border-left: 3px solid #fff;
        width: 100%
    }

    .top-flex {
        text-align: center;
        margin-top: 0;
        margin-bottom: 10px;
        margin-left: 0;
        flex-direction: column
    }

    .rodape {
        position: relative !important
    }
}

#mini-menu {
    background-color: rgb(80, 124, 196)
}

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

.ui-autocomplete {
    background-color: rgba(165, 225, 255, 0.8) !important;
}

.plus {
    background-color: green;
    color: #FFF;
    padding: 5px;
    border-radius: 20px;
    margin-right: 3px;
}

.panel-green {
    background-color: green;
    color: #fff;
}

.panel-red {
    background-color: red;
    color: #fff;
}

.panel-orange {
    background-color: orange;
    color: #fff;
}

.boxText {
    background-color: #fcfcfc;
    border-top: solid 2px #ccc;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: rgba(246, 239, 252, 0.13);
    border-top: solid 2px #5cb0cc;
}

.Previewbox {
    background-color: rgba(246, 239, 252, 0.13);
    border-top: solid 2px #5cb0cc;

    padding-top: 20px;
    padding-left: 10px;


}

header {
    text-align: center;
    background-color: #FFF;
    border-top: solid 3px #337ab7;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-bottom: solid 1px #fcfcfc;
}

header img {
    width: 250px;
    margin-bottom: 10px;

}

.priceBox {
    background: #ecf7fc;
    text-align: right;
    vertical-align: middle;
    height: 120px;
    padding-top: 10px;
    color: #337ab7;
}

.seeitem {
    border-top: solid 1px #ecf7fc;
    display: inline-block;
    width: 100%;
}

.page-headerexterno {
    position: fixed;
    top: 0px;
    right: 10px;
    z-index: 100000;
    border: 0px;
}

.blue {
    color: #8d3cfc;
}

.attach {
    width: 100%;
}

.attachBox {
    min-height: 100px;
}

textarea {
    resize: vertical;
    overflow: visible;
}

.topicoAjuda {
    margin-bottom: 15px;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #154055;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #154055;
}

.active-menu {
    background-color: #058ed0 !important;
}

span.greenBox {
    background-color: blue !important;
    color: #FFF !important;
    display: inline-block !important;
    padding-left: 5px;
    padding-right: 5px;
}

span.redBox {
    background-color: red !important;
    color: #FFF !important;
    display: inline-block !important;
    padding-left: 5px;
    padding-right: 5px;
}

.avatar-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
}

.page-progress .project {
    position: relative;
    margin-bottom: 10px;
}

/* PAGE - PROGRESS PROJECT */
.page-progress .project .name {
    margin: 5px 0 10px 5px;
    border: solid;
    border-width: 0 0 2px 0;
    border-color: #6d6d6d;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.page-progress .project {
    padding: 5px;
    background-color: #f9f9f9;
    display: table;
    width: 100%;
    border: 1px solid;
    border-color: #000000;
}

.page-progress .bar .bar-progress {
    float: left;
}

.page-progress .bar-progress {
    position: relative;
    float: right;
    width: 40px;
    text-align: center;
}

.page-progress .bar-progress label {
    font-size: 10px;
}

.page-progress .bar-progress .bar-activity {
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 30px;
    height: 5px;
    background-color: #2d8df3;
}

.recovery {
    color: #fff;
    text-align: left !important;
    cursor: pointer;
    margin-top: 5px;
}

.recovery:hover {
    text-shadow: 1px 1px 1px #888;
}

.red {
    color: red !important;
}

.slide {
    text-align: center;
    width: 100%;
    ;
}

thead>tr>td>a {
    color: #FFF;
    text-decoration: underline;
}

thead>tr>td>a : hover {
    color: yellow;
    text-decoration: underline;
}

.alertaPonto {
    background-color: red;
    text-align: center;
    width: 100%;
    color: #FFF;
    padding: 10px;
    font-weight: bold;
}

.lista-transacoes_col_0 {

    text-align: center;
}


.form-tags span.badge.badge-primary {
    background-color: rgb(80, 124, 196) !important;
    font-size: 11px;
}

.form-tags button.close {
    padding-right: 3px;
    color: #FFF !important;
}

.input-testes {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 0 16px;
    cursor: pointer;
    user-select: none;
}

.input-testes input {
    height: 24px;
    margin-bottom: 6px;
    box-shadow: none;
    cursor: pointer;
}

.input-testes input:focus {
    box-shadow: none;
}

.seq_num {
    font-size: 14px;
    font-weight: bold;
}

.btn-seq-cima,
.btn-seq-baixo {
    margin: 0 10px;
    height: 26px;
    width: 26px;
    padding: 0;
}

.btn-seq-cima:focus,
.btn-seq-baixo:focus {
    outline: none !important;
}

#lista-transacoes tbody tr:first-child td:nth-child(2) .btn-seq-cima,
#lista-transacoes tbody tr:last-child td:nth-child(2) .btn-seq-baixo {
    visibility: hidden;
    pointer-events: none;
}

#lista-transacoes .lista-transacoes_col_1 {
    width: 120px;
}

.p-0 {
    padding: 0 !important;
}

.barra-progresso {
    position: relative;
    width: 65%;
    height: 65%;
    margin-left: 4px;
}

.circle {
    height: 100%;
    right: 0px;
    position: absolute;
    border: solid 2px #ffffff;
    border-top-color: #5bc0de;
    border-radius: 50%;
}

.border {
    width: 100%;
    transform: rotate(135deg);
    animation: spin 1.3s steps(2) .2s infinite;
    -webkit-animation: spin 1.3s linear infinite;
}

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

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

.btn:focus {
    outline: none !important;
}

.ml-1 {
    margin-left: 10px;
}

.tr-black {
    background-color: black !important;
    color: #fefefe !important;
    font-weight: bold;
}

.tr-red {
    background-color: red !important;
    color: #fefefe !important;
    font-weight: bold;
}

.tr-black .filtrar,
.tr-red .filtrar {
    color: #fefefe;
}

.tr-black a,
.tr-red a {
    color: #fefefe !important;
    font-weight: bold;
}

.tr-orange {
    background-color: orange !important;
    color: #000 !important;
}

.tr-orange .filtrar,
.tr-orange a {
    color: #000 !important;
}

.tr-yellow {
    background-color: yellow !important;
}

.tr-yellow .filtrar,
.tr-yellow a {
    color: #000 !important;
}

.jsgrid-header-row th {
    background-color: #507cc4 !important;
    color: #fff;
}

.jsgrid-header-cell,
.jsgrid-cell,
.jsgrid-cell .btn {
    font-size: 11px !important;
}

.jsgrid-cell .btn.btn-success:not(.btn-xs) {
    height: 24px;
    padding: 0;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.card-selecionado td {
    background-color: #507cc4 !important;
    color: #fff !important;
}

.card-selecionado td .text {
    color: #fff !important;
}

#alerta-card {
    position: absolute;
    right: 0;
    top: 11px;
}

#alerta-card i {
    margin-right: 4px;
}

.card-indicadores {
    background-color: #507cc4;
    border: 1px solid #104992;
    border-radius: 5px;
    color: #fff;
    margin-right: 8px;
    margin-top: 12px;
    padding: 12px;
    float: right;
    font-weight: bold;
}

/* =======
    margin-left: 10px !important;
} */
.progress-bar {
    --progress: 100;
    height: 30px;
    width: 100%;
    padding: 5px;
    background-color: #f5f5f5;
    box-shadow: 0 0 1px #000;
    display: flex;
    margin-bottom: 12px;
}

.progress-bar::before {
    content: "";
    width: calc(var(--progress) * 1%);
    background-color: hsl(calc((1 - var(--progress) / 100) * 120), 80%, 50%);
    transition: all 0.2s ease;
}

.notification {
    position: absolute;
    z-index: 999999;
    bottom: 50px;
    right: 50px;
    font-size: 16px;
    background-color: #fff;
    color: #032c41;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 14px 28px 14px;
    padding-top: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    text-align: center;
    width: 280px;
}

.notification img {
    margin: 0 auto;
    height: 100px;
    width: 100px;
}

.notification img[src='/images/rocket.gif'] {
    height: 113px;
    width: 150px;
}

#lista-timesheet tr td:last-of-type {
    width: 35px;
}