html {
    font-family: 'Open Sans';
}

html, body {
    background-color: #efeeef;
    font-size: 16px;
    font-family: 'Open Sans';
}


.container-large {
    width: 100%;
    min-height: 850px;
}

.article-main {
    width: 100%;
    min-height: 600px;
    background-color: white;
    padding: 20px;
}

.nav-bar {
    min-height: 50px;
}

.navigation {
    float: left;
    height: 90px;
    min-width: 50%;
    color: lightgray;
    text-align: center;
}

.navigation-item {
    height: 60px;
    min-width: 100px;
    text-align: center;
    float: left;
    margin-left: 6px;
    padding: 5px;
    margin-top: 20px;
}

.clicked {
    background: #1e1e1e;
}

.navigation-item-img {
}

.navigation-item > label {
    font-size: 15px;
    font-weight: 500;
}

    .navigation-item > label:hover {
        background-color: #1e1e1e;
        cursor: pointer;
    }

.navigation-item:hover {
    background-color: #1e1e1e;
    cursor: pointer;
}

.navigation > ul > li:hover {
    cursor: pointer;
}

.buttonLog, .buttonReg {
    cursor: pointer;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-left: 18px;
    padding-right: 18px;
    margin: 0 0 1.25rem;
    margin-left: 10px;
    position: relative;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    border: 0px;
    color: white;
    background-color: #666;
    transition: background-color 300ms ease-out;
    height: 30px;
}

    .buttonLog:hover, .buttonLog:focus, .buttonLog:hover, .buttonLog:focus {
        background-color: #39b54a;
        color: #fff;
    }

    .buttonReg:hover, .buttonReg:focus, .buttonReg:hover, .buttonReg:focus {
        background-color: #ff5153;
        color: #fff;
    }

.nav-brand {
    height: 50%;
    line-height: 100%;
    display: block;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    float: left;
    max-width: 50%;
    white-space: nowrap;
}

    .nav-brand > img {
        margin-top: 10px;
        height: 32px;
        width: 303px;
        float: left;
        margin-left: 10px;
    }

    .nav-brand:hover {
        color: red;
        cursor: pointer;
        background-color: transparent;
        text-decoration-line: none;
    }

.master-nav {
    background-color: #232323;
    /*padding-left: 23%;
    padding-right: 23%;*/
    /*padding-top: 15px;
    padding-bottom: 15px;*/
}

.nav-container {
    margin: auto;
    width: 950px;
    height: 50px;
}

.nav-logged-user {
    background-color: transparent;
    float: right;
    height: 100%;
    margin: 1px;
    padding: 2px;
    color: white;
}

    .nav-logged-user:hover {
        background-color: #3d4044;
    }

    .nav-logged-user > .dropdown-menu {
        left: -1px;
        background-color: white;
        color: white;
        text-align: left;
        padding: 2px;
        width: 100%;
    }

    .nav-logged-user > a {
        height: 90%;
        padding: 0;
        margin: 0;
    }


.dropdown-menu-item {
    padding: 5px;
    padding-right: 10px;
    margin-bottom: 5px;
    color: white;

}

    .dropdown-menu-item > i {
        margin-right: 10px;
    }

    .dropdown-menu-item:hover {
        background-color: #9d9d9d;
    }

.nav-logged-user-name {
    
    max-width: 70%;
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    float: left;
    padding-left: 8px;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-logged-company-name {
    min-width: 70%;
    max-width: 70%;
    height: 22px;
 font-size: 18px;
    font-weight: 600;
    float: left;
    text-align: left;
    padding-left: 8px;
    color: #B3B3B3;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-logged-user-image {
    height: 45px;
    width: 45px;
    display: inline-block;
    border: 2px solid black;
    float: left;
}

.nav-account-controls {
    float: right;
    min-width: 150px;
    margin-top: 10px;
    margin-right: 35px;
}

    .nav-account-controls > .btn {
        width: 70px;
        height: 40%;
        margin-right: 10px;
        padding: 2px;
    }

.content {
    width: 100%;
    text-align: center;
    min-height: 100%;
    margin: auto;
    position: relative;
}

.login-container {
    min-height: 200px;
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid #cdcdcd;
    box-shadow: 0px 0px 15px #9d9d9d;
    border-radius: 5px;
    background-color: white;
}

.login-container-header {
    width: 100%;
    height: 15%;
    padding: 8px;
    border-bottom: 2px solid #eee;
    text-align: left;
    padding-left: 25px;
    background-color: #454545;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 2px solid #454545;
}

    .login-container-header > i {
        width: 50px;
    }

    .login-container-header > label {
        font-size: 25px;
        font-weight: 600;
    }

.login-container-content {
    width: 100%;
    height: 80%;
    padding: 8px;
    text-align: left;
}


.login-container-content > fieldset {
    text-align: center;
    list-style-type: none;
    padding-left: 0px;
    margin-top: 5px;
}
    .login-container-content .btn {
        margin: auto;
        margin-top: 20px;
        background-color: #4cae4c;
        min-width: 50%;
    }

        .login-container-content > fieldset > .btn:hover {
            background-color: #64ba64;
        }

.login-field {
    width: 100%;
    text-align: center;
    margin: 4px;
    margin-bottom: 10px;
}

.agreement-field {
    font-size: 12px;
    margin: 8px 56px 8px 8px;
}

    .agreement-field > .argeement-checkbox {
        display: inline-block;
        width: 370px;
        text-align: left;
    }

    .agreement-field label {
        font-weight: normal;
    }

    .agreement-field a,
    .agreement-field a:active,
    .agreement-field a:focus,
    .agreement-field a:hover,
    .agreement-field a:visited {
        color: #007bff;
        text-decoration: underline;
    }

    .login-field > label {
        width: 30%;
        float: left;
        text-align: right;
    }

    .login-field > input[type=text] {
        width: 50%;
    }

    .login-field > input[type=password] {
        width: 50%;
    }

    .login-field > select {
        width: 50%;
    }

.login-container-footer {
    width: 100%;
    height: 30px;
    padding: 8px;
    border-top: 2px solid #eee;
    text-align: left;
    padding-left: 25px;
    background-color: #454545;
    color: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 2px solid #454545;
}



.company-table {
    width: 100%;
}

    .company-table > table {
        width: 100%;
        overflow: hidden;
        table-layout: auto;
    }


    .company-table thead {
        width: 100%;
        background-color: lightgray;
        font-weight: bold;
    }

    .company-table tr {
        height: 35px;
        border-bottom: 2px solid #cdcdcd;
    }

    .company-table tbody tr:hover {
        height: 35px;
        border-bottom: 2px solid #cdcdcd;
        background-color: rgba(10, 165, 255, 0.65);
        color: white;
        cursor: pointer;
    }


.company-table, td {
    text-align: center;
    text-overflow: clip;
    overflow: hidden;
}



.company-control-bar {
    width: 100%;
    height: 35px;
    margin-bottom: 5px;
}

.company-button {
    width: 125px;
    float: right;
    margin-left: 10px;
}

    .company-button button btn-success {
        width: 100%;
    }



.sub-form {
    border: 2px solid;
    border-radius: 5px;
    border-color: #cdcdcd;
    background-color: #fff;
    margin-bottom: 10px;
}

.content-area {
    width: 100%;
    margin-bottom: 6px;
    text-align: left;
    padding-left: 2%;
    padding-right: 2%;
}

select:disabled {
    background-color: rgba(220, 220, 220, 0.74);
}

.content-area-header {
    width: 100%;
    padding: 8px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
    text-align: left;
    padding-left: 25px;
    font-size: large;
    font-weight: 600;
}

.content-area-subheader {
    width: 100%;
    font-size: large;
    font-weight: 600;
    border-bottom: 2px solid #cdcdcd;
    margin-top: 10px;
    margin-bottom: 10px;
}


.optional > i {
    float: right;
    margin-top: 5px;
}



.optional > .fa-times-circle-o {
    color: red;
}

.optional > .fa-check-square-o {
    color: green;
}


.exchange {
    background-color: #3398CC;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 2px solid #3398CC;
}

.pipedrive {
    background-color: #3D4044;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 2px solid #3D4044;
}

.content-area-item {
    margin-bottom: 6px;
    padding: 1%;
    border-bottom: 1px solid #eee;
    text-align: left;
    padding-left: 25px;
    overflow: hidden;
}

    /*.content-area-item > label, input, button, input[type=text], select {
        text-align: left;
        max-width: 300px;
        padding-right: 5px;
        font-family: 'Segoe UI';
        font-weight: 400;
    }*/

    .content-area-item > label {
        text-align: left;
        min-width: 35%;
        margin-right: 10px;
    }

    .content-area-item > input[type=text] {
        max-width: 55%;
        min-width: 40%;
    }

    .content-area-item > input[type=password] {
        max-width: 55%;
        min-width: 40%;
    }

    .content-area-item > select {
        max-width: 40%;
        min-width: 40%;
        overflow: hidden;
    }


    .content-area-item > .btn {
        text-align: center;
        max-width: 300px;
        min-width: 25%;
        background-color: #d9534f;
        border-color: #d43f3a;
        margin: 0 auto;
    }

.button-container > .btn {
    width: 100%;
}


.content-area-footer {
    width: 100%;
    padding: 3px;
    overflow: auto;
}

    .content-area-footer > button {
        float: right;
        width: 150px;
        margin-right: 5px;
    }

    .content-area-footer > span {
        color: #c9302c;
        font-size:medium;
        font-weight:700;
        float:right;
        margin-right: 10px;
        margin-top:10px;
    }

.company-name-header {
    font-size: 40px;
    font-weight: 600;
    text-align: left;
}

    .company-name-header > .btn {
        margin-top: 15px;
    }

.mob-company-name-header {
    font-size: 30px;
    font-weight: 600;
    text-align: left;
}

.admin-component {
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
}

.stat-view {
    max-width: 300px;
    min-width: 300px;
    min-height: 100px;
    max-height: 100px;
    position: relative;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #9d9d9d;
    color: white;
    font-size: 60px;
    text-align: right;
    padding-left: 20px;
    padding-right: 20px;
}

.table-view {
    border-radius: 4px;
    box-shadow: 1px 1px 2px #9d9d9d;
    color: black;
    background-color: #fcfcfc;
    margin: 10px;
}



.stat-view > i {
    font-size: 80px;
    float: left;
}


.stat-comp-count {
    background-color: #ed6d49;
}

.stat-user-count {
    background-color: #3693cf;
}

.stat-sync-count {
    background-color: #2ecc71;
}

.stat-service-status {
    background-color: #34495e;
}

.admin-container {
    height: auto;
    overflow: hidden;
}

.admin-right {
    width: auto;
    overflow: hidden;
}


.admin-left {
    float: left;
    margin-top: 10px;
}

.log-entry {
    background-color:lightgray;
    margin:5px;
    text-align:left;
}

.log-entry > ul{
    background-color:lightgray;
    
    text-align:left;
}

.log-entry > ul > li{
    line-height:25px;

}

.log-entry-header {
    height: 30px;
    line-height:30px;
    background-color:gray;
    text-align:left;
    padding-left:15px;
    font-size:medium;
    font-weight:400;
    color: white;
}


.company-nav-box {
    width: 90%;
    box-shadow: 0px 0px 15px #9d9d9d;
    height: 90%;
    margin: 0 auto;
    padding: 35px;
    margin-top: 20px;
    background-color: #fefefe;
    border-radius: 15px;
    font-size: 20px;
    font-weight:300;
    color: #333;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.company-nav-text {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
    color: #333;
}

.company-nav-box:hover {
    color:#3398CC;
    cursor:pointer;
    font-size:22px;
    box-shadow: 0px 0px 25px #3398CC;
}

.help-nav{
    text-align:left;
    font-size:14px;
}
.help-nav:hover{
    cursor:pointer;
}

.help-article{
    margin-left:130px;
    float:left;
    width:85%;
}

.scroll-nav{
    list-style:none;
    position:fixed;

    box-shadow: 0px 0px 15px #9d9d9d;
    padding: 20px;
    margin-top: 20px;
    background-color: #fefefe;
    border-radius: 15px;
    font-size: 20px;
    font-weight:300;
    color: #333;
}

.scroll-nav__heading{
    font-size:20px;
    font-weight:600;
}

.scroll-nav__list{
    list-style:none;
    text-align:left;
    margin:0;
    padding:10px;
    font-size:18px;
}

.scroll-nav__item.active.in-view > a{
    color:#3398CC !important;
}

.section-header{
    text-align:left;
    color:#3398CC;
}

.section-text{
    text-align:justify;
}

.section-image{
    max-width:100%;
    margin-bottom:10px;
    margin-top: 20px;
    background: rgba(51, 152, 204, 0.10);
    border-radius:10px;
    padding:1px;
    font-size:16px;
    font-weight:500;
}

.section-image > img{
     max-width:95%;
     margin:5px;
     margin-bottom:20px;
     
     opacity:1;
}

.section-seperator{
    margin-top:30px;
    margin-left:30px;
    margin-right:30px;
    height:3px;

    background-color:rgba(51, 152, 204, 0.51);
    margin-bottom:30px;
}

#upgrade {
    margin: 9px;
}

.center-row-content {
    display: table;
    margin-right: auto;
    margin-left: auto;
}

@media only screen and (max-width: 530px) {
    .button_holder {
        width: 130px;
    }
}