/* custom styles for project */
div.intro {
    font-family: 'DM Sans',sans-serif;
    font-size: 16px;
}

nav {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
}

.div-metrics {
    font-family: 'DM Sans', sans-serif;
    color: white;
    margin: auto;
    background-color: #2727277c;
    margin-bottom: 0;
    font-size: 16px;
}

.box-metrix {
    margin-top: 15px;
    overflow: hidden;
}

@media only screen and (max-width:768px){
    .div-metrics {
        margin-top: 1px;
        margin-bottom: 1px;
        font-size: 11px;
        padding: 0.25%;
    }
    .box-metrix {
        margin-top: 1%;
    }
    .div-metrics p {
        font-size: 13px;
    }
    
}

@media only screen and (min-width:769px) and (max-width:960px) {
    .div-metrics {
        margin: auto;
        font-size: 12px;
    }
    .box-metrix {
        margin-top: 2%;
    }
    .div-metrics p {
        font-size: 18px;
    }
    
}

@media only screen and (min-width:962px) {
    .div-metrics p {
        font-size: 27px;
    }
    .box-metrix {
        margin-top: 2%;
    }
}

.div-metrics p {
    margin-top: 2px;
    color: #f89624;
    font-weight: bold;
}

#speech-div {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    margin: auto;
}

.hate-speech {
    font-family: 'DM Sans', sans-serif;
}

#sidebar {
    background-color: #272727;
    height: 100vh;
}

#sidebar {
    min-width: 100px;
    max-width: 250px;
}

#sidebar.active {
    margin-left: -250px;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}

.sidebar-header {
    background-color: gray;
    border: 1px solid #f89624;
}

#sidebrand:hover {
    color: white;
}

#sidebar a {
    color: #B3B3B3;
}

#sidebar ul li a {
    padding: 8px !important;
    font-size: 16px !important;
    display: block;
}

#sidebar ul li a:hover {
    background: white;
    color:rgb(61, 61, 61);
}

.form-control:focus {
    border-color: #B3B3B3 !important;
    box-shadow: none !important;
}

#ml-result { 
    border: 3px double #c7c7c7;;
}

textarea:disabled {
    background-color: white !important;
}

.ml-box img {
    border: 1px groove #dfdede;
    border-radius: 5px;
    padding: 3px;
}

#ml-text {
    caret-color: #272727;
}

#ml-text::placeholder {
    font-style: italic;
    font-size: medium;
}

#result {
    caret-color: transparent;
}

div.res-obj {
    font-family: 'DM Sans',sans-serif;
    font-size: 16px;
    background-color: white;
}

h1, h2, h3, h4, h5 ,h6 {
    font-weight: bold;
}

.res-obj h4 {
    color: black;
    background-color: #f89624;
    padding: 2px;
}

div.key-finding {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    background-color: white;
}

.key-finding h4 {
    color: black;
    background-color: #f89624;
    padding: 2px;
    border: 1px solid white;
}

.women-sm h4 {
    font-family: 'DM Sans',sans-serif;
    color: black;
    text-transform: capitalize;
}

.card-hstyle {
    font-family: 'DM Sans',sans-serif;
    color: #272727;
    padding: 1px;
    font-size: 15px;
    font-style: normal;
}

.geek-img:hover {
    transform: scale(1.05);
}

.women-sm div {
    font-family: 'DM Sans',sans-serif;
}

div.social-response {
    font-family: 'DM Sans',sans-serif;
    background-color: #ffffff;
}

.social-response h4 {
    font-family: 'DM Sans',sans-serif;
    text-transform: capitalize;
    color: black;
}

div.ovawp-proof {
    background-color: #ffffff;
}

.ovawp-proof ul {
    list-style-image: url('/static/images/icons8-checkmark-14.png');
}

.ovawp-proof li {
    font-size: 16px;
}

.chart-btn {
    font-family: 'DM Sans',sans-serif;
}

.ovawp-proof {
    font-family: 'DM Sans',sans-serif;
}

div.other-factors {
    font-family: 'DM Sans',sans-serif;
}

.other-factors h4 {
    font-family: 'DM Sans',sans-serif;
    color: #272727;
}

.my-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.footer {
    background-color: black;
    overflow: hidden !important;
    font-family: 'DM Sans', sans-serif;
}

.footer hr {
    border: 1.5px groove rgb(61, 61, 61);
    width: 95%;
    margin-top: 0;
}

.footer h6 {
    color:#f89624;
}

.footer i {
    font-size: 18px;
    color: #9c9c9c;
}

.footer p {
    color: #9c9c9c;
}

/* table styling*/

.table {
    font-family: 'DM Sans', sans-serif;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > 
tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tr > td {
    vertical-align: middle; }
  
  .table > tbody > tr > td, .table > tbody > tr > th {
    padding: 5px; }
  
  .table > tr > td, .table > tr > th {
    padding: 5px; }
  
  .table thead th {
    border-bottom-width: 2px;
}
  
.table td, .table th {
    font-size: 14px;
    border-top-width: 0px;
    border-bottom: 1px solid;
    border-color: #B3B3B3 !important;
    padding: 0 25px !important;
    height: 40px;
    vertical-align: middle !important; 
}
  
/* table full-width */
.table-full-width {
    margin-left: -15px;
    margin-right: -15px; 
}

/* table-responsive */
.table-responsive {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
}
    
/* animate body */

.reveal {
    position: relative;
    opacity: 0;
}
.reveal.active {
    opacity: 1;
}
.active.fade-bottom {
    animation: fade-bottom 1s ease-in;
}
.active.fade-left {
    animation: fade-left 1s ease-in;
}
.active.fade-right {
    animation: fade-right 1s ease-in;
}

@keyframes fade-bottom {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
}
@keyframes fade-left {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
@keyframes fade-right {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  .slide-view {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 2s ease-out 0s 1 slideInFromLeft;
  }