:root{
    --blue:#007bff;
    --teal: #20c997;
    --success:#28a745;
    --green:#28a745;
    --secondary:#6c757d;
    --veryLightiesGray: rgba(000,000,000,.1);
    --verySoftGray:rgb(229 231 235);
    --veryLightGray:rgba(000,000,000,.35); 
    --veryLightishGray: #d3d3d3;
    --veryLightyGray:rgba(000,000,000,.6);
    --lightGray: #666;
    --softGray: #222;
    

}
*{
    transition: 300ms ease 0s;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf');
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Regular.ttf');
    font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
  font-display: swap;
}

.rubik{
    font-family: 'Rubik', sans-serif;
}
.poppins{
    font-family: 'Poppins', sans-serif;
}
.roboto{
  font-family: 'Roboto', sans-serif;
}
.active,
.active:hover{
background-color:var(--blue) !important;

}
.flex-important{
  display: flex !important;
}
.card{
    box-shadow: 1px 3px 10px rgba(000,000,000,.1)
}

.form-control:focus{
    box-shadow:0.1px 0.1px 5px #007bff;
}

/* textarea scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
    
}
::-webkit-scrollbar-thumb {
    background-color: var(--veryLightGray);
    border-radius: 50px;
}

.textShadowSm{
  
    text-shadow: 1px 1px 7px rgba(000,000,000,.3);

}

/* Hamburger Menu */
.hamburger {
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: all 0.25s;
    position: relative;
  }
  
.hamburger-middle,
.hamburger-top,
.hamburger-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: #000;
  transform: rotate(0);
  transition: all 0.5s;
}

.hamburger-middle {
  transform: translateY(7px);
}

.hamburger-bottom {
  transform: translateY(14px);
}

.open {
  transform: rotate(90deg);
  transform: translateY(0px);
}

.open .hamburger-top {
  transform: rotate(45deg) translateY(6px) translate(6px);
}

.open .hamburger-middle {
  display: none;
}

.open .hamburger-bottom {
  transform: rotate(-45deg) translateY(6px) translate(-6px);
}
.moveLeft{
    left:0 !important;
}
/******* Sweet Alert *********/
.sweetAlert-custom-class{
  color:#000;
  font-family: 'Rubik';
}


/******* datatable *******/

table.dataTable.nowrap th{

  border-bottom:1px solid var(--veryLightiesGray);
}
table.dataTable.nowrap td{
  white-space: wrap;
  border-bottom:1px solid var(--veryLightiesGray)
}



table#websitesDataTable.dataTable.nowrap td{
  padding:0px 10px
}




#websitesDataTable textarea::-webkit-scrollbar-thumb {
  background-color: transparent;
  
}

table.dataTable.no-footer{
  border-bottom: none;
  margin-bottom: 10px;
}

#activitiesTable.dataTable.nowrap th,
#activitiesTable.dataTable.nowrap td{
  border-bottom:none;
}

.dataTables_wrapper .top-row div{
  float: unset;
}


/******* datatable search *******/

.dataTables_filter{
  max-width: 300px;
  width: 100%;
}
.dataTables_filter label{
  display: flex;
  align-items: flex-end;
  margin-right: 30px;
 
 }


 
 .dataTables_wrapper .dataTables_filter input{
   border:1px solid #d3d3d3;
   outline: none;
   background-color: #fff;
   border-radius: unset;
   padding:5px 10px;
   width: 100%;
 
 }
 /******* datatable show entries dropdown *******/

 .dataTables_wrapper .dataTables_length select{
  border: none;
  outline:none;
 }



/******* datatable author name with arrow next icon *******/
 .data-author-name::after{
  content: '\f124';
  font: normal normal normal 14px/1 FontAwesome;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  color:#0000004d;
  left:5px;
  text-decoration: none !important;
}

#progress-container{
  transition:none !important;
}
#progress-container *{
  transition:none !important;
}

.transition-textarea-none textarea,
.transition-textarea-none input{
  transition:unset !important;
}



.transition-no *{
  transition:unset !important;
}

.text-grayish{
  color:rgb(156 163 175);
}

.hidden-notes{
  display: none;
  right: 90%;
  width: 300px;
  background-color: #e5e7eb  ;
  padding: 20px;
  top: 0;
  border-radius: 5px;
  line-height: 1.7em;
  max-height: 150px;
  overflow-y: scroll;
  z-index: 2;
}

.progress-notes:hover .hidden-notes{
  display: block;
}

@media only screen and (max-width:980px){
  .hidden-notes{
    display: none !important;
  }
}