/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    white-space: nowrap;
    line-height: 60px;
}

/* General */

a {
    color: #000;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

.top50 {
    margin-top: 50px;
}

/* ******* */

header {
  background-image: url("../images/ocean3.png");
  min-height: 260px;
  max-height: 260px;
  height: 260px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  position: relative;
}

.headerContainer {
  position: absolute;
  margin: 20px;
  width: auto;
}

.logo {
  position: absolute;
  top: 78px;
  max-height: 100px;
}

.product {
  position: absolute;
  right: 20px;
  bottom: 20px;
  max-height: 60px;
}

/* The navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Grid System */
@media (min-width: 1366px) {
    .container {
        max-width: 1306px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1380px;
    }
}

/* Bootstrap Over-rides*/
.navbar-nav, .nav-item, .nav-link .btn {
    color: #fff;
    font-size: 0.9em;
    font-family: 'Roboto Mono', sans-serif;
}

.navbar-nav {
    float: right;
    padding: 20px 60px;
}

/* Worker Profile Card */
.profile-card {
    color: #4472C7;
    width: 100%;
    padding: 0 0 20px 0;
    -webkit-border-radius: 2%;
    border-radius: 2%;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.12);
    /*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.12);*/
    box-shadow: 4px 8px 4px rgba(0,0,0,0.1),-4px 0 4px rgba(0,0,0,0.1);
}

    .profile-card header {
        width: 100%;
        background: #4472C7;
        min-height: 80px;
        max-height: 80px;
        padding: 4px 20px 4px 20px;
        display: inline-block;
        float: left;
        text-align: center;
        margin-bottom: 70px;
    }

        .profile-card header a {
            display: inline-block;
            text-align: center;
            position: relative;
            margin: 10px 30px;
        }

            .profile-card header a > img {
                width: 100px;
                max-width: 100%;
                -webkit-border-radius: 6%;
                border-radius: 6%;
                -webkit-transition: -webkit-box-shadow 0.3s ease;
                transition: box-shadow 0.3s ease;
                -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.06);
                box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.06);
            }

    .profile-card h1 {
        font-size: 1.6em;
    }

    .profile-card h2 {
        font-size: 1.2em;
    }

    .profile-card header a:hover > img {
        -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);
    }

    .profile-card .profile-details {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }

    .profile-card .profile-chart {
        width: 100%;
        text-align: center;
    }


.client-card {
    padding-top: 2px;
}

    .client-card div {
        text-align: center;
    }

        .client-card div a {
            display: inline-block;
            text-align: center;
            position: relative;
        }

            .client-card div a > img {
                width: 40px;
                max-width: 40px;
                -webkit-border-radius: 10%;
                border-radius: 10%;
                -webkit-transition: -webkit-box-shadow 0.3s ease;
                transition: box-shadow 0.3s ease;
                -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.06);
                box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.06);
            }
            
.profile-cr {
    font-family: 'Roboto mono';
    text-transform: uppercase;
    color: #4472C7;
    border: 1px solid #4472C7;
    text-align: center;
    min-height: 200px;
    max-width: 200px;
    padding: 5px;
    margin: auto;
}

.ratingTable {
    background: #fff;
    font-family: 'Roboto mono', sans-serif;
    text-align: center;
    padding: 0 0 15px;
    margin-top: 25px;
    box-shadow: 4px 8px 4px rgba(0,0,0,0.1),-4px 0 4px rgba(0,0,0,0.1);
}

    .ratingTable .ratingTable-header {
        color: #fff;
        background-color: #969696;
        padding: 45px 15px 45px 20px;
        margin: -25px 0 25px;
        border-radius: 0 20px 0 0;
        box-shadow: 4px -4px 0 0 rgba(255,255,255,0.5) inset,-5px 5px 10px rgba(0,0,0,0.2);
        display: inline-block;
        position: relative;
    }

        .ratingTable .ratingTable-header:before {
            content: '';
            background: linear-gradient(to right bottom,transparent 45%, #969696 50%);
            height: 25px;
            width: 15px;
            position: absolute;
            left: -15px;
            top: 0;
        }

    .ratingTable .title {
        font-size: 25px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 25px;
    }

    .ratingTable .price-value {
        font-size: 80px;
        font-weight: 700;
        line-height: 80px;
    }

    .ratingTable .ratingTable-footer a {
        color: #12BDC4;
        font-size: 28px;
        font-weight: 600;
        text-transform: uppercase;
        transition: all 0.3s ease 0s;
    }

        .ratingTable .ratingTable-footer a:hover {
            text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
        }

    /* #2F75B5 AWARE */
    .ratingTable.aware .ratingTable-header {
        background-color: #2F75B5;
    }

        .ratingTable.aware .ratingTable-header:before {
            background: linear-gradient(to right bottom,transparent 45%, #2F75B5 50%);
        }

    .ratingTable.aware .ratingTable-footer a {
        color: #2F75B5;
    }

    /* #9BC2E6 KNOWLEDGE */
    .ratingTable.knowledge .ratingTable-header {
        background-color: #9BC2E6;
    }

        .ratingTable.knowledge .ratingTable-header:before {
            background: linear-gradient(to right bottom,transparent 45%, #9BC2E6 50%);
        }

    .ratingTable.knowledge .ratingTable-footer a {
        color: #9BC2E6;
    }

    /* #DDEBF7 SKILL */
    .ratingTable.skill .ratingTable-header {
        background-color: #DDEBF7;
        color: #2F75B5;
    }

        .ratingTable.skill .ratingTable-header:before {
            background: linear-gradient(to right bottom, transparent 45%, #DDEBF7 50%);
        }

    .ratingTable.skill .ratingTable-footer a {
        color: #DDEBF7;
    }

@media only screen and (max-width: 990px) {
    .ratingTable {
        margin-bottom: 50px;
    }
}

th.aware, td.aware {
    background-color: #2F75B5;
    color: #fff;
    font-weight: 800;
}

th.knowledge, td.knowledge {
    background-color: #9BC2E6;
    color: #fff;
    font-weight: 800;
}

th.skill {
    background-color: #DDEBF7;
    color: #2F75B5;
    font-weight: 800;
}

td.skill {
    background-color: #DDEBF7;
    color: #2F75B5;
    font-weight: 800;
}

.hidden {
    display: none;
}