* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inconsolata', monospace;
    background-color: #E6E6E6;
    min-width: 1340px;
}

h1 {
    text-align: left;
}


h1.dashboard_heading {
    text-transform: uppercase;
    font-size: 1.5rem;
}

ul {
    list-style: none;
}

li {
    margin-bottom: 1px;
}

a {
    color: black;
    text-decoration: none; /* no underline */
}

#table_id {
    background-color: #ffffff;
}

.sidebar {
    grid-area: sidebar;
    background-color: #25C1CE;
}

.main_content {
    grid-area: main_content;
    background-color: #E6E6E6;
}

.sticky {
    position: sticky;
    top: 0px;

}

.flex-grid {
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 2fr 2fr 2fr;
    grid-template-areas: 'sidebar sidebar main_content main_content main_content main_content' 'sidebar sidebar main_content main_content main_content main_content' 'sidebar sidebar main_content main_content main_content main_content';
    grid-gap: 5px;
    height: 100vh;
    background-color: #E6E6E6;
}

.flex-grid > div {
    text-align: center;
    padding: 20px;
}


a.sidebar_link {
    display: block;
    background-color: #25C1CE;
    box-shadow: 0 5px 0 white;
    color: white;
    padding: 1em 1.5em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
}

a.sidebar_link:hover {
    background-color: #FF3D67;
    cursor: pointer;
}

a.sidebar_link:active {
    box-shadow: none;
    top: 5px;
}

.smry_stats {
    display: grid;
    grid-template-areas: 'total_open total_weighted total_number' 'total_open total_weighted total_number' 'total_open total_weighted total_number';
    grid-gap: 30px;
    margin-bottom: 20px;
    height: 8rem;
}

#total_open {
    grid-area: total_open;
    background-color: #ffffff;
    padding-top: 10px;

}

#total_weighted {
    grid-area: total_weighted;
    background-color: #ffffff;
    padding-top: 10px;
}

#total_number {
    grid-area: total_number;
    background-color: #ffffff;
    padding-top: 10px;
}

.stats_amount {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;
}

#header {
    display: flex;
    line-height: 3rem;
    background-color: black;
    opacity: 70%;
    color: white;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
}

.logo {
    padding-left: 20px;
}

.status {
    padding-right: 20px;
}

#logout_link {
    color: white;
}

#hint_id_new_password1{
    color: white !important;
}

#login_form {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}


.login_btn {
    box-sizing: border-box;
    appearance: none;
    background-color: white;
    border: 2px solid #454545;
    border-radius: 0.2em;
    color: #454545;
    cursor: pointer;
    display: flex;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: 5px;
    padding: 0.5rem;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}

.login_btn:hover,
.login_btn:focus {
    color: #fff;
    outline: 0;
}

.login_btn:hover {
    box-shadow: 0 0 40px 40px #454545 inset;
}

.crispy_flex {
    display: flex;
    width: 90vw;
}

.crispy_baseline {
    align-items: baseline;
}

.edit-oppty {
    max-width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 2rem;
    align-items: start;
}

.form-control {
    border: none;
    border-bottom: 1px solid black;
    color: black;
    background: white;
    outline-width: 0;
    border-radius: 0 !important;
    min-height: 2.3rem !important;
}

#edit-project-name {
    width: 90%;
    margin: 1rem auto;
}

.someclass {
    min-height: 2.5rem;
}

.grid {
    display: grid;
    max-width: 90vw;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 2rem;
}

.grid-form {
    grid-column: 1/ span 5;
}

.grid-name {
    grid-column: 1/ span 3;
}

.grid-web {
    grid-column: span 2;
}

.main-h1 {
    margin: 1rem auto;
    max-width: 90vw;
}

.base_alignment {
    margin: 0 auto;
    max-width: 90vw;
}
.grid-new-oppty {
    display: grid;
    text-align: left;
    grid-template-areas:
        'hexagroup project_branch question'
        'collaborator project_branch question'

        'customer name name'
        'amount win type'
        'start-date duration status'
        'city lob notes'
        'state lob notes'
        'submit . notes';
    grid-gap: 1rem;
}

.new-oppty-name {
    grid-area: name;
}

.new-oppty-hexagroup {
    grid-area: hexagroup;
}

.new-project_branch {
    grid-area: project_branch;
}

.new-oppty-lob{
    grid-area: lob;
}

.new-oppty-customer{
    grid-area: customer;
}

.new-oppty-question{
    grid-area: question;
}

.new-oppty-collaborator{
    grid-area: collaborator;
}

.new-oppty-amount{
    grid-area: amount;
}

.new-oppty-win{
    grid-area: win;
}

.new-oppty-start{
    grid-area: start-date;
}

.new-oppty-duration{
    grid-area: duration;
}

.new-oppty-city{
    grid-area: city;
}

.new-oppty-state{
    grid-area: state;
}

.new-oppty-type{
    grid-area: type;
}

.new-oppty-status{
    grid-area: status;
}

.new-oppty-notes {
    grid-area: notes;
}

.new-oppty-btn{
    grid-area: submit;
    max-width: 10rem;
}

.btn-group, .btn {
    width: 100% !important;
}

.rep-name {
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
}

/*Toggle switch main page*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #FF3D67;
}

input:focus + .slider {
    box-shadow: 0 0 1px #FF3D67;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.sentiment {
    margin: 0;
    border: 1px solid #22CECE;
    align-self: stretch;
    width: 100%;
    background-color: #FFB914;
    padding: .2rem;


}

.sentiment:hover {
    background-color: #FF8205;
}

.sentiment:focus {
    background-color: #FF8205;
    outline: none;
}

.sentiment .focused {
    background-color: #FF8205;
    outline: none;
}

.flex-sentiment {
    display: flex;
    justify-content: space-around;
    width: 90%

}

#teamscore {
    text-align: center;
    color: white;
    width: 90%;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 0.2rem;
}

#search-glass {
    transform: translateX(-30px);
}

.search-input {
    height: 2rem;
    padding-left: 1rem;
    border: none;
    border-radius: 20px;
    width: 50%;
    outline: none;
}

.hidden-div {
    display: none;
}

.bounty-link {
    padding-bottom: 1.5rem;
}

.bounty-link:hover {
    cursor: pointer;
}

.comming-soon {
    background-color: #cccccc !important;
    color: #6C757D !important;
}

.table_list {
    text-align: left;
    vertical-align: top;
    min-width: 8rem;
}

.activity-grid {
    display: grid;
    grid-template-areas:
    'date detail detail detail'
    'customer detail detail detail'
    'type detail detail detail'
    'button detail detail detail';
}

.activity-grid-item {
    padding-right: 3rem;
    text-align: left;
    justify-content: left;
}

.activity-date-item {
    grid-area: date;
}

.activity-customer-item {
    grid-area: customer;
}

.activity-type-item {
    grid-area: type;
}

.activity-detail-item {
    grid-area: detail;
}

.activity-button-item {
    grid-area: button;
    max-width: 12rem !important;
}

.sidebar-list-left{
    color: white;
    text-align: left;
    width: 85%;
    margin: auto;
}

.grid-new-contact{
    display: grid;
    text-align: left;
    grid-gap: 1rem;
    grid-template-areas:
    'fname lname company'
    'title email notes'
    'cellp office notes'
    'btn . notes'
;
}

.new-contact-fname{
    grid-area: fname;
}
.new-contact-lname{
    grid-area: lname;
}
.new-contact-company{
    grid-area: company;
}
.new-contact-title{
    grid-area: title;
}
.new-contact-email{
    grid-area: email;
}
.new-contact-notes{
    grid-area: notes;
}
.new-contact-cell{
    grid-area: cellp;
}
.new-contact-officep{
    grid-area: office;
}
.new-contact-btn{
    grid-area: btn;
    max-width: 10rem;
}
.image-codered-login{
    background-image: url("http://coderedsafety.com/sites/default/files/styles/16x9/public/2020-05/worker_3%402x.png?itok=bms5RHoc");
    background-size: cover;
    background-position: top;
}

.image-codered-logout{
    background-image: url("http://coderedsafety.com/sites/default/files/styles/16x9/public/2020-05/Code-Red-Safety-About_0.jpg?itok=2db3A3ZO");
    background-size: cover;
    background-position: top;
}
.ScrollStyle
{
    max-height: 1000px;
    overflow-y: scroll;
}