@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

body,
html {
    font-family: 'Roboto', sans-serif !important;
}

#sidebar {
    float: left;
    height: 100vh;
    z-index: 1;
    width: 95px;
}

#myKanban {
    margin-top: 10px;
}

#myKanban .kanban-board .kanban-title-board {
    color: rgb(255, 255, 255) !important;
}

#main-content {
    margin-left: 5%;
    height: 89vh;
    overflow-x: auto;
    overflow-y: hidden;
}

.kanban-board {
    height: 80vh;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    flex-direction: column;
}

.kanban-drag {
    overflow-y: auto;
    flex: 1;
}

.kanban-board-header {
    text-align: center;
    background: rgb(150, 18, 18);
    border-radius: 10px 10px 0px 0px;
}

.kanban-item {
    border-radius: 5px;
    cursor: grab !important;
}

.div-btns {
    background-color: #dbdbdb;
    padding: 5px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

.btn-nova-atividade {
    margin-left: 15px;
    background: rgb(150, 18, 18);
    color: white;
    width: auto;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-color: #000000;
}

.btn-gerar-lead {
    margin-left: 15px;
    background: rgb(0, 63, 114);
    color: white;
    width: auto;
    --bs-btn-hover-bg: #0093c0;
    --bs-btn-hover-color: #000000;
}

.btn-importar-lead {
    margin-left: 15px;
    background: rgb(0, 114, 99);
    color: white;
    width: auto;
    --bs-btn-hover-bg: rgb(3, 202, 176);
    --bs-btn-hover-color: #000000;
}

.btn-filtro-kanban {
    margin-left: 15px;
    background: rgb(0, 114, 85);
    color: white;
    width: auto;
    --bs-btn-hover-bg: #2dc000;
    --bs-btn-hover-color: #000000;
}

.btn-limpar-filtro-kanban {
    margin-left: 15px;
    background: rgb(114, 0, 0);
    color: white;
    width: auto;
    --bs-btn-hover-bg: #c0002a;
    --bs-btn-hover-color: #ffffff;
}

.btn-atualizar {
    margin-left: 15px;
    background: rgb(62, 0, 121);
    color: white;
    width: auto;
    --bs-btn-hover-bg: #8c54c0;
    --bs-btn-hover-color: #ffffff;
}

.text-span {
    background: rgb(150, 18, 18);
    border-radius: 50%;
    height: 52px;
    width: 52px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    margin-right: 6px;
    margin-left: 15px;
    font-size: 15px;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.item-title {
    font-size: larger;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 10px;
}

.item-title:hover {
    cursor: pointer;
    color: red;
}

.item-header {
    font-size: small;
    font-weight: 500;
}

.item-body {
    font-size: smaller;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.shadow-right {
    box-shadow: 2px 0 4px 0 rgba(33, 32, 64, .12);
}

.item.value {
    margin-top: 10px;
}

.ico-value {
    margin-right: 5px;
}

.item-value {
    margin: .3rem 0;
    display: flex;
}

.tags-container {
    display: flex;
}

.minitag-green {
    display: inline-block;
    height: 42px;
    position: relative;
    content: "";
    cursor: pointer;
    margin: 0 13px 0 0;
    padding: 10px 28px 10px 20px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 4px 1px 1px 4px;
    border-radius: 4px 1px 1px 4px;
    font: normal normal normal 20px/24px "Antic", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: #1abc9c;
    -webkit-box-shadow: 0 5px 0 0 #16a085, 5px 5px 0 0 #16a085;
    box-shadow: 0 5px 0 0 #16a085, 5px 5px 0 0 #16a085;
}

.minitag-green:before {
    display: inline-block;
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 6px;
    right: -16px;
    border: 0 solid #1abc9c;
    -webkit-border-radius: 1px 1px 4px;
    border-radius: 1px 1px 4px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #1abc9c;
    -webkit-box-shadow: 0 6px 0 0 #16a085;
    box-shadow: 0 6px 0 0 #16a085;
    -moz-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

.minitag-green:after {
    display: inline-block;
    z-index: 2;
    width: 12px;
    height: 12px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 16px;
    right: 0;
    border: 0 solid #018dc4;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #fcfcfc;
    -webkit-box-shadow: 5px 5px 0 0 #16a085 inset;
    box-shadow: 5px 5px 0 0 #16a085 inset;
}

.minitag-orange {
    display: inline-block;
    height: 42px;
    position: relative;
    content: "";
    cursor: pointer;
    margin: 0 13px 0 0;
    padding: 10px 28px 10px 20px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 4px 1px 1px 4px;
    border-radius: 4px 1px 1px 4px;
    font: normal normal normal 20px/24px "Antic", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: #e67e22;
    -webkit-box-shadow: 0 5px 0 0 #d35400, 5px 5px 0 0 #d35400;
    box-shadow: 0 5px 0 0 #d35400, 5px 5px 0 0 #d35400;
}

.minitag-orange:before {
    display: inline-block;
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 6px;
    right: -16px;
    border: 0 solid #1abc9c;
    -webkit-border-radius: 1px 1px 4px;
    border-radius: 1px 1px 4px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #e67e22;
    -webkit-box-shadow: 0 6px 0 0 #d35400;
    box-shadow: 0 6px 0 0 #d35400;
    -moz-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

.minitag-orange:after {
    display: inline-block;
    z-index: 2;
    width: 12px;
    height: 12px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 16px;
    right: 0;
    border: 0 solid #018dc4;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #fcfcfc;
    -webkit-box-shadow: 5px 5px 0 0 #d35400 inset;
    box-shadow: 5px 5px 0 0 #d35400 inset;
}

.minitag-blue {
    display: inline-block;
    height: 42px;
    position: relative;
    content: "";
    cursor: pointer;
    margin: 0 13px 0 0;
    padding: 10px 28px 10px 20px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 4px 1px 1px 4px;
    border-radius: 4px 1px 1px 4px;
    font: normal normal normal 20px/24px "Antic", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: #3498db;
    -webkit-box-shadow: 0 5px 0 0 #2980b9, 5px 5px 0 0 #2980b9;
    box-shadow: 0 5px 0 0 #2980b9, 5px 5px 0 0 #2980b9;
}

.minitag-blue:before {
    display: inline-block;
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 6px;
    right: -16px;
    border: 0 solid #1abc9c;
    -webkit-border-radius: 1px 1px 4px;
    border-radius: 1px 1px 4px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #3498db;
    -webkit-box-shadow: 0 6px 0 0 #2980b9;
    box-shadow: 0 6px 0 0 #2980b9;
    -moz-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

.minitag-blue:after {
    display: inline-block;
    z-index: 2;
    width: 12px;
    height: 12px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 16px;
    right: 0;
    border: 0 solid #018dc4;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #fcfcfc;
    -webkit-box-shadow: 5px 5px 0 0 #2980b9 inset;
    box-shadow: 5px 5px 0 0 #2980b9 inset;
}

.minitag-red {
    display: inline-block;
    height: 42px;
    position: relative;
    content: "";
    cursor: pointer;
    margin: 0 13px 0 0;
    padding: 10px 28px 10px 20px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 4px 1px 1px 4px;
    border-radius: 4px 1px 1px 4px;
    font: normal normal normal 20px/24px "Roboto", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: #db3434;
    -webkit-box-shadow: 0 5px 0 0 #b92929, 5px 5px 0 0 #b92929;
    box-shadow: 0 5px 0 0 #b92929, 5px 5px 0 0 #b92929;
}

.minitag-red:before {
    display: inline-block;
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 6px;
    right: -16px;
    border: 0 solid #bc1a1a;
    -webkit-border-radius: 1px 1px 4px;
    border-radius: 1px 1px 4px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #db3434;
    -webkit-box-shadow: 0 6px 0 0 #b92929;
    box-shadow: 0 6px 0 0 #b92929;
    -moz-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

.minitag-red:after {
    display: inline-block;
    z-index: 2;
    width: 12px;
    height: 12px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 16px;
    right: 0;
    border: 0 solid #c40101;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #fcfcfc;
    -webkit-box-shadow: 5px 5px 0 0 #b92929 inset;
    box-shadow: 5px 5px 0 0 #b92929 inset;
}

.minitag-black {
    display: inline-block;
    height: 42px;
    position: relative;
    content: "";
    cursor: pointer;
    margin: 0 13px 0 0;
    padding: 10px 28px 10px 20px;
    border: 0 solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 4px 1px 1px 4px;
    border-radius: 4px 1px 1px 4px;
    font: normal normal normal 20px/24px "Roboto", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: #2b2b2b;
    -webkit-box-shadow: 0 5px 0 0 #2b2b2b, 5px 5px 0 0 #2b2b2b;
    box-shadow: 0 5px 0 0 #2b2b2b, 5px 5px 0 0 #2b2b2b;
}

.minitag-black:before {
    display: inline-block;
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 6px;
    right: -16px;
    border: 0 solid #2b2b2b;
    -webkit-border-radius: 1px 1px 4px;
    border-radius: 1px 1px 4px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #2b2b2b;
    -webkit-box-shadow: 0 6px 0 0 #2b2b2b;
    box-shadow: 0 6px 0 0 #2b2b2b;
    -moz-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
}

.minitag-black:after {
    display: inline-block;
    z-index: 2;
    width: 12px;
    height: 12px;
    position: absolute;
    content: "";
    cursor: pointer;
    top: 16px;
    right: 0;
    border: 0 solid #2b2b2b;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: #fcfcfc;
    -webkit-box-shadow: 5px 5px 0 0 #2b2b2b inset;
    box-shadow: 5px 5px 0 0 #2b2b2b inset;
}


.minitag-green,
.minitag-orange,
.minitag-blue,
.minitag-red,
.minitag-black {
    height: 20px !important;
    padding: 4px 14px 4px 8px !important;
    font-size: 12px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    margin-right: 25px !important;
}

.minitag-green:before,
.minitag-orange:before,
.minitag-blue:before,
.minitag-red:before,
.minitag-black:before {
    width: 15px !important;
    height: 15px !important;
    top: 2px !important;
    right: -8px !important;
}

.minitag-green:after,
.minitag-orange:after,
.minitag-blue:after,
.minitag-red:after,
.minitag-black:after {
    width: 6px !important;
    height: 6px !important;
    top: 10px !important;
}

.tag {
    display: inline-flex;
    align-items: center;
    background-color: black;
    color: white;
    padding: 1px 5px;
    border-radius: 20px;
    font-family: Arial, sans-serif !important;
    font-size: 10px;
    margin-top: 5px;
}

.tag-red {
    background-color: #b11f1f !important;
}

.tag-orange {
    background-color: #e06512 !important;
}

.tag-yellow {
    background-color: #f3ab0e !important;
}

.tag-black {
    background-color: #000000 !important;
    color: white !important;
}

.date {
    font-weight: bold;
    margin-right: 8px;
}

.days {
    background: white;
    color: black;
    padding: 2px 4px;
    border-radius: 12px;
    font-weight: bold;
    margin: 1px;
}

.days-red {
    color: #b11f1f !important;
}

.days-orange {
    color: #e06512 !important;
}

.days-yellow {
    color: #f3ab0e !important;
}

.kanban-item[data-class="sit-aberto"] {
    border: 4px solid #424242;
    border-radius: 5px;
}

.kanban-item[data-class="sit-finalizado"] {
    border: 4px solid #257530;
    border-radius: 5px;
}

.kanban-item[data-class="sit-bloqueado"] {
    border: 4px solid #d18800;
    border-radius: 5px;
}

.kanban-item[data-class="sit-cancelado"] {
    border: 4px solid #970000;
    border-radius: 5px;
}

.kanban-item[data-class="atv-finalizada"] {
    background: #716d6d;
    color: white
}

.kanban-item[data-class="atv-perdida"] {
    background: #adabab;
    color: white
}

.datas {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tags {
    text-align: right;
}

[[CSS_CORES]]