/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*  
    Created on : 31/mai/2017, 14:21:30
    Author     : pedro
*/

*{
    font-family: 'Lato', sans-serif;    
    -webkit-font-smoothing: antialiased;
    color: #263843;
}

body{
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
    font-smooth: always;

    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    overflow: hidden;
    width: 100%;
    height: 100vh; 
    background-color: #333333;
}


/*COLORS*/
.ColorAzure{background-color: #009EFF;}
.ColorCoralRed{background-color: #FF4151;}
.ColorEmerald{background-color: #54C853;}
.ColorEmeralLight{background-color: #54C853;}
.ColorKournikova{background-color: #FFE96D;}
.ColorCoral{background-color: #FF8B58;}
.ColorAzureRadiance{background-color: #007CFF;}
.ColorAlabaster{background-color: #F8F8F8;}
.ColorSilver{background-color: #B9B9B9;}
.ColorSilverShine{background-color: #E1E1E1;}
.ColorGray{background-color: #909090;}
.ColorDoveGray{background-color: #686868;}
.ColorScorpion{background-color: #5C5C5C;}
.ColorMineDust{background-color: #393939;}
.ColorMineCoal{background-color: #333333;}
.ColorMineShaft{background-color: #2C2C2C;}
.ColorMineShaftLigh{background-color: #333333;}
.ColorTextDoveGray{color: #686868;}
.ColorTextAlabaster{color: #F8F8F8;}
.ColorTextSilver{color: #B9B9B9;}
.ColorTextSilverShine{color: #E1E1E1;}
.ColorTextGray{color: #909090;}
.ColorTextCoral{color: #FF8B58;}
.ColorTextCoralRed{color: #FF4151;}
.ColorTextAzure{color: #009EFF;}
.ColorTextEmerald{color: #54C853;}
/*COLORS*/


/*AUX*/
.shadow{
    box-shadow: 0px 0px 10px #00000030;
}
.border{
    border: 1px solid #B9B9B9;
}
.border-green{
    border: 2px solid #54C853;
}
.border-radius-round{
    border-radius: 50%;
}
.border-dashed{
    border: 1px dashed #B9B9B9;
}
.border-top-gray{border-top: 1px solid #909090;}
.two-logos{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../image/logos/2_logos.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
h2{    
    color: #5C5C5C;
    font-weight: 700;
    font-size: 24px;
}
.hidden{
    display: none;
}
/*AUX*/


.scrollY{overflow-y: auto;}
.scrollX{overflow-x: auto;}

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #232323;
  border-radius: 3px;  
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #5C5C5C;
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #686868;
}

/*INPUTS*/
.input-text{
    outline: 0;
    border-radius: 10px;
    height: 40px;
    line-height: 38px;
    width: 100%;
    border: 1px solid #B9B9B9;
    text-indent: 20px;
    font-size: 14px;
    font-weight: 300;
}

.input-text-20{
    outline: 0;
    border-radius: 10px;
    height: 30px;
    line-height: 28px;
    width: 100%;
    border: 1px solid #B9B9B9;
    text-indent: 10px;
    font-size: 12px;
    font-weight: 300;
}

.input-text-form{
    outline: 0;
    border-radius: 10px;
    height: 40px;
    line-height: 38px;
    width: 100%;
    border: 0px solid #fff;
    text-indent: 20px;
    font-size: 14px;
    font-weight: 300;
}
.input-text-form:disabled{
    background-color: #686868;
}
.input-text-form-30{
    outline: 0;
    border-radius: 10px;
    height: 30px;
    line-height: 28px;
    width: 100%;
    border: 0px solid #fff;
    text-indent: 10px;
    font-size: 12px;
    font-weight: 300;
}

.input-textarea{ 
    width: 100%;    
    height: auto;      
    max-height: 300px;
    border: 0px;
    background-color: transparent;
    outline: 0;  
    border-radius: 5px;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;    
    display: inline-block;
    text-indent: 5px;
}
.input-textarea::placeholder{
    text-indent: 5px;
}
.input-textarea:focus{
    background-color: #F8F8F8;
    text-indent: 5px;
}

.input-textarea-12{
    line-height: 15px;
    min-height: 20px;
}
.input-textarea-16{
    line-height: 22px;
    min-height: 22px;
}
.input-textarea-26{ 
    line-height: 32px;
    min-height: 32px;
}

.input-filter{
    outline: 0;
    border-radius: 10px;
    height: 40px;
    background-color: transparent;
    border: 0px solid #565656;
    font-size: 12px;
    font-weight: 300;
    width: 100%;
}

/*INPUTS*/

/*BUTTONS*/
.regular-button{
    outline: 0;
    border-radius: 10px;
    height: 40px;    
    width: 100%;
    border: 0px solid #fff;    
    cursor: pointer;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 700;
}
.regular-button:active{
    -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}
.regular-button:disabled{
    background-color: #686868;
}
.button-regular-30{
    outline: 0;
    border-radius: 10px;
    height: 30px;
    line-height: 28px;
    width: 100px;
    border: 0px solid #fff;    
    cursor: pointer;
    font-size: 10px;
    text-transform: capitalize;
    font-weight: 700;
}
.button-regular-30:active{
    -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}
.button-regular-40{
    outline: 0;    
    height: 40px;
    line-height: 38px;
    width: 100%;
    min-width: 40px;
    border: 0px solid #fff;    
    cursor: pointer;
    font-size: 10px;
    text-transform: capitalize;
    font-weight: 700;
}
.button-regular-40:active{
    -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}
/*BUTTONS*/


/*ICONS*/
.button-icon-end{
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 50%;
}
/*ICONS*/


/*LOGIN*/
.login_card{
    position: relative;
    width: 320px;
    height: 280px;
    border-radius: 10px;
}
/*LOGIN*/


/*RADIO BTN*/
.grid-radio-btn div:first-of-type{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.grid-radio-btn div:last-of-type{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/*RADIO BTN*/


/*LABELS*/
.label-size-10{font-size: 10px;}
.label-size-11{font-size: 11px;}
.label-size-12{font-size: 12px;}
.label-size-14{font-size: 14px;}
.label-size-16{font-size: 16px;}
.label-size-20{font-size: 20px;}
.label-size-26{font-size: 26px;}
.label-weight-light{font-weight: 300;}
.label-weight-bold{font-weight: 700;}
.label-weight-black{font-weight: 900;}
.label-overflow{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-textbox-small{
    font-size: 12px;
    height: 36px;
    line-height: 18px;
    word-break: break-all;
    white-space: break-spaces;
    overflow: hidden;
}
/*LABELS*/



/*---*/
.addBtn{
    position: absolute;
    min-width: 40px;
    min-height: 30px;    
    top: 20px;
    right:0px;
    box-shadow: 1px 2px 11px 0px rgba(0, 0, 0, 0.2);
    z-index: 888;
}
.addBtnElements{
    display: none;
}
.rotate{
    -webkit-transform: rotate(0deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(0deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(0deg);  /* IE 9 */
    -o-transform: rotate(0deg);  /* Opera 10.50-12.00 */
    transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
    transition: all 0.25s ease-out;
}
.rotated{
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
    transition: all 0.25s ease-out;
}
/*---*/

.backBtn{
    position: relative;
    width: 70px;
    min-height: 30px;        
    box-shadow: 1px 2px 11px 0px rgba(0, 0, 0, 0.2);
    z-index: 888;    
}

.content-filter{
    position: relative;
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
    height: 80px;
    z-index: 777;
}

/*CLIENT*/
.client-card-holder{
    position: relative;
    width: 100%;
    max-height: calc(100% - 100px);
    min-height: 70px;
    margin-bottom: 50px;
    grid-row-gap:    20px;
    grid-column-gap: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.client-card{
    position: relative;
    width: 100%;
    height: 70px;
    border-radius: 5px;
    
}
.client-card-title{
    width: 100%;
    height: 30px;
    display: flex;       
}
.client-card-logo{
    height:60px;      
}
.client-card-logo img {
    width: 150px;
    height: 100%;
    object-fit: contain;
    padding: 10px;    
}
.client-card-footer{
    width: 100%;
    height: 30px;
    display: flex;    
}
/*CLIENT*/


/*PROJECT*/
.project-card-holder{
    position: relative;
    width: 100%;
    max-height: calc(100% - 70px);
    min-height: 70px;
    margin-bottom: 50px;
    grid-row-gap:    20px;
    grid-column-gap: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.project-card{
    position: relative;
    width: 100%;
    height: 70px;
    border-radius: 5px;
    
}
.project-card-team{
    position: relative;
    width: 100%;
    height: 100%;
}
.project-card-title{
    width: 100%;
    height: 30px;
    display: flex;       
}
.project-card-footer{
    width: 100%;
    height: 30px;
    display: flex;    
}
/*PROJECT*/


/*TASK*/
.task-card-holder{  
    position: relative;
    width: 100%;
    height: 100%;    
    min-height: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
.task-card{
    position: relative;
    width: 100%;
}
.task-card-logo{
    height:40px;    
}
.task-card-logo img {
    height: 100%;
    object-fit: contain;
    padding: 10px;
    width:100px;
}
.task-note-holder{
    height: calc(100% - 150px);
}
/*TASK*/
.task-add{  
    position: relative;
    width: 100%;  
    padding-left: 20px;
    padding-right: 20px;
}
/*TASK*/


/*CARD*/
.card-holder{  
    position: relative;
    width: calc(100vw - 160px);
    height: calc(100vh - 150px);
    overflow-y: hidden;
    overflow-x: auto;
    transition: width 500ms;
}
.card-column{
    position: relative;
    min-width: 340px;
    height:calc(100vh - 150px);
    overflow: hidden;
}
.card-column:nth-child(odd){
    background-color: #333333;
}
.card-column:nth-child(even){
    background-color: #2C2C2C;    
}
.card-column:nth-child(odd) .card-column-title{
    background-color: #2C2C2C;
}
.card-column:nth-child(even) .card-column-title{
    background-color: #333333;    
}

.card-column-title{
    width: 100%;
    height:50px;    
}
.card-column-add{
    z-index: 888;
    top: 40px;   
    width: 20px;
    height: 20px;
    background-size: 16px;
    transition: height          0.15s ease,
                width           0.15s ease,
                top             0.15s ease,
                background-size 0.15s ease;
}
.card-column-add:hover{
    background-size: 24px;
    top: 35px;   
    width: 30px;
    height: 30px;
}
.card-column-add:active{
    background-size: 22px;
    top: 36px;   
    width: 28px;
    height: 28px;
}
.card-column-content{
    width: 100%;
    height:calc(100% - 40px);
}
.content_holder ul{
    list-style-type: none;
}
.content_holder #content-scroll{
    height: calc(100% - 150px); 
}
.card-column-content ul{
    padding: 20px;
    margin: 0;
    list-style-type: none;
    height: 100%
}
.card{
    position: relative;
    width: 300px;
    min-height: 50px;
}
.card-title{
    position: relative;    
    max-height: 140px;
}
.card-description{
    position: relative;    
    max-height: 140px;
}
.card-tags{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;    
}
.card-tags:empty{
    display: none;
    margin-top: 0px !important;
}
.card-tags > div{
    margin-right: 10px;
    margin-bottom: 10px;
}
.card-placeholder{
    width: 300px;
    border: 1px dashed #5C5C5D;
    border-radius: 10px;
    margin-bottom: 10px;
}

.card-info-holder{
    height: calc(85vh - 110px);
}

.card-complete{
    position: absolute;
    bottom: 20px;
    left: 20px;    
}

.card-copy{
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 140px;
}

.card-attachment-holder{
    position: relative;
    width: 100%;
    height: auto;    
    padding-bottom: 20px;
}

.card-attachment{
    width: 100px;
    height: 100px;   
    word-wrap: break-word;
    cursor: pointer;
}

.close{
    opacity: 0.65;
}

.close .ColorScorpion{
    border-top: 10px solid rgba(84, 200, 83, 1); 
}

#checkListItem{
    list-style-type: none;
    padding-left: 0px;
}
/*CARD*/


/*DASHBOARD*/
.dashboard-user-today-info{
    height: calc(100vh - 240px);
}
.dashboard-user-today-info-scroll{
    height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.dashboard-height-50{
    height: calc(50% - 10px);
}

.hover-server:hover div{
    display: block;
}

.hover-server > div{
    z-index: 999;
    top: 40px; 
}.emoji-holder

/*DASHBOARD*/

/*CHAT*/
.chat-list-item:hover{
    background-color: #393939;
}

.chat-room-holder{
    position: relative;
    width: calc(100% - 40);
    height: calc(100vh - 110px);
}

.chat-room-head{
    position: relative;
    width: 100%;
    height: 80px;
    min-height: 80px;
    border-bottom: 5px solid #393939;
}

.chat-room-messages{
    position: relative;
    width: 100%;
    /*height: calc(100vh - 270px);*/
    height: auto;
}

.chat-room-input{
    position: relative;
    width: 100%;
    height: 100px;    
}

.chat-room-input textarea{    
    width: calc(100% - 10px);    
    min-height: 20px;
    line-height: 24px;
    outline: none;
    border: 0px solid #F8F8F8;    
    text-indent: 10px;    
    overflow:hidden;
}   

.chat-room-input textarea:focus{
    background-color: #F8F8F8;
}

.channel-list-holder{
    height: calc(100vh - 200px);
}

.chat_room_holder{
    position: absolute;
    top: 0px;
    left: -600px;
    width: 600px;
    z-index: 444;
    box-shadow: -4px 4px 14px #00000057;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #393939;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #393939;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #393939;
}


/*UserCheckList*/

.user-checklist-holder{
    height: calc(100vh - 160px);
}

#userCheckListUL{
    list-style-type: none;
    padding-left: 0px;
    margin-top: 7px;
}

#userCheckListUL .input-textarea{text-indent: 0px;line-height: 20px; padding:0px;}

/*EMOJI*/

.emoji-holder{
    position: absolute;    
    bottom: -3px;    
    right: -3px;
    width: 240px;
    height: 240px;
    z-index: 777;
    border-bottom-right-radius: 15px;
    display: none;
}


.emoji-icon: hover{
    background-color: #333333;
}
/*EMOJI*/

.gantt-item-background{
    background-image:url('../image/system/risco.png');
    background-position-x: -5px;
    background-position-y: 3px;
    background-repeat-y: no-repeat;
    background-size: 40px 24px;
}

.ui-resizable-helper {    
    background-color: #f4f4f4;
    opacity: .2;
    border-radius: 5px;
}


@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
      .client-card-holder{
          max-height: calc(100% - 100px);
      }
      
      .content_holder #content-scroll{
          max-height: calc(100% - 170px);
      }
}