html, body { height: 100%; width: 100%; display: block; }
body { overflow:auto }

th {
    text-align:center;
}
.grid { position: relative; list-style: none; width: 100%; display: grid; clear: both; margin: 0; max-width: 100%; padding:0; border-bottom:1px solid #DDD !important; }
.grid tr { position: relative; float: left; overflow: hidden;	max-width: 100%; width: 100%; cursor: pointer; display:inline-table }
.grid .mascara {	padding:2em; color:#fff; text-transform: uppercase; }
.grid .mascara::before, .grid .mascara::after { pointer-events: none; }
.grid .mascara, .grid .mascara > a { position: absolute; top: 0; left: 0;	width: 100%; height: 100%; }
.grid .mascara h2 { word-spacing: -0.15em; font-weight: 300; font-size:1.5rem!important }
.grid .mascara h2 span {	font-weight: 800; }
.grid .mascara h2 i { font-size: 2rem!important; margin-right: 15px; vertical-align:baseline; }

.grid .no-display { width:0 }

.borda-img{
    border:1px solid #333;
}
.grid td:not(.no-display), .grid th:not(.no-display) { width:auto; font-size:18px; vertical-align:middle; padding:8px; }

.grid thead { font-size: 18px; }

.efeito .mascara { top: auto; bottom: 0; padding: .5em 1em; color: #3c4a50;	background: #ffc400; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s, color 2s; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); z-index:99 }
.efeito p.icon-links { float: right; margin:0 }
.efeito h2, .efeito p.icon-links a { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;	-webkit-transform: translate3d(0,200%,0); transform: translate3d(0,200%,0); display: inline-block; color:#FFF!important; margin:0 2px; box-shadow:none!important; }

.ativa { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-animation: cor 2s; animation: cor 2s; }
.desativa { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-animation: volta-cor 1s; animation: volta-cor 1s; }

.efeito h2 { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; color:#FFF }
.efeito:hover p.icon-links a:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.efeito:hover p.icon-links a:nth-child(2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.efeito:hover p.icon-links a:first-child { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.dataTables_length select { width:auto!important }

.arquivochat {

    height: 30px;
    margin-bottom: 5px;
    cursor: pointer;
}


/*.photo {*/

/*height: 50px;*/
/*width: 50px;*/
/*    max-width: 50px !important;*/

/*}*/
.photo img{
    border: 2px solid #333;

}

.diachat{

    text-align: center;
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 10px;
}

.horaenviome {
    float:right;
    clear:both;
    font-size: 8px;
    color: #fff;
}

.horaenviothem {
    float:left;
    clear:both;
    font-size: 8px;
    color: #fff;
}

.btnchatdel img {

    border: 1px #fff solid;
    background-color: #fff;
    cursor: pointer;
    height: 30px;
    width: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 3px;

}

.btnchatedit img {

    border: 1px #fff solid;
    background-color: #fff;
    cursor: pointer;
    height: 30px;
    width: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 3px;
}

/* Muda Cor */
@-webkit-keyframes cor {
    from {background-color: red;}
    to {background-color: #ffc400;}
}

@keyframes cor {
    from {background-color: red;}
    to {background-color: #ffc400;}
}	

@-webkit-keyframes volta-cor {
    from {background-color: #ffc400;}
    to {background-color: red;}
}

@keyframes volta-cor {
    from {background-color: #ffc400;}
    to {background-color: red;}
}

#divload {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    padding-left: 250px;
    background: #F9F9F9;
}

#divload #load {
    margin-top: calc(100% - 65%);
    padding-top: 0;
}  

.ativo { border-left: 8px solid #8BC34A !important; background: #F9FBE7 !important; }
.inativo { border-left: 8px solid #FFC107 !important; background: #FFF8E1 !important; }
.excluido { border-left: 8px solid #FF5722 !important; background: #FBE9E7 !important; }


/*tarefas status*/
.pendente { border-left: 8px solid #ffea00 !important; background: #fff9c4 !important; }
.novatarefa { border-left: 8px solid #80d8ff  !important; background: #e1f5fe !important; }

.status{
    width: 90%;
}

.abas {

    margin-top: -16px;

}

.dataTables_wrapper {

    margin-top: -30px;
}

.sorting_asc {

    width: 0px;

}

@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure, .grid td {  display: inline-block; float: left; margin: 0 auto; }
    .grid td:not(.no-display), .grid th:not(.no-display) { float:left; }
    .efeito .sorting_1 { width: 50%; height: 100%;  display: table; line-height: 3.2em; }
}

.tblesquerda th{
    text-align: left !important;
    width: 15% !important;
}

.bc-preto{
    border-color: #000;;
}