@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
* {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

#loadingModal {
    display: none;
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 100%;
}

#mobile-dash-login-wrapper {
    display: none;
    width: 100%;
    height: 100vh;
}

#mobile-login {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #0f0f0fd5;
}

.login-logo {
    width: 300px;
    margin-top: 25px;
}

#mobile-login label {
    color: white;
}

input[type=text],
select {
    width: 90%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: rgb(0, 171, 250);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
}

.messageTxt {
    color: white;
}

.tMargin {
    margin-top: 200px;
}

#subBtn {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: rgb(0, 171, 250);
}

.login-txt {
    margin-top: 10px;
    color: White;
}


/*Mobile Dashboard*/

#mobile-dash-wrapper {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
}

#mobile-dash {
    width: 100%;
    height: 100%;
    background-color: #49494946;
}


/*Mobile Header*/

#mobile-dash-header {
    width: 100%;
    height: 75px;
    background-color: #0f0f0fd5;
}

.mobile-dash-logo {
    margin-top: 5px;
    width: 200px;
}


/*Mobile Dash Content*/

#mobile-dash-content {
    width: 100%;
    height: 800px;
    overflow: Scroll;
}

#mb1,
#mb2,
#mb3,
#mb4,
#mb5,
#mb6,
#mb7,
#mb8,
#mb9,
#mb10,
#mb11,
#mb12 {
    width: 100%;
    height: 0;
    background-color: #b1b1b1;
    display: none;
}

.monthName {
    position: absolute;
    left: 25px;
    margin-top: 20px;
}

.monthAmounts {
    position: absolute;
    right: 25px;
    margin-top: 20px;
}

#month-section {
    width: 100%;
    height: 75px;
    border-bottom: 1px solid #22222246;
    cursor: pointer;
}

#jobDiv {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #22222246;
}

.jobDateTxt {
    float: left;
    font-weight: bold;
    margin-left: 25px;
}

.descTxt {
    float: left;
    margin-left: 25px;
}

.jobPriceTxt {
    float: right;
    color: green;
    margin-right: 25px;
}


/*Payment Dashboard 3*/

#dashboard-wrapper {
    display: none;
    width: 100%;
    height: auto;
    background-color: #0f0f0fd5;
    padding-bottom: 50px;
}

#dashboard-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%;
    height: auto + 50px;
}

#dashboard-container h3 {
    margin-top: 15px;
    margin-left: 25px;
}

#main-totals {
    position: relative;
    color: white;
    width: 100%;
    height: 200px;
    border: 1px solid #49494946;
    background-color: #22222246;
    text-align: left;
}

#main-totals h1 {
    font-weight: bold;
    margin-top: 15px;
    margin-left: 25px;
}

#invoicePayBtn {
    position: relative;
    z-index: 11;
    float: left;
    width: 100%;
    height: 45px;
    margin-top: 25px;
}

#invoicePayBtn #payBtn {
    width: 100%;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
}

#paymentButton {
    z-index: 11;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    font-size: 1rem;
    margin-right: 25px;
    background-color: rgb(0, 171, 250);
    text-align: center;
}

#paymentButton p {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
}

#section-1 {
    margin-top: 25px;
    color: white;
    width: 100%;
    height: 500px;
    border: 1px solid #49494946;
    background-color: #22222246;
    text-align: left;
    overflow: scroll;
    scrollbar-color: 22222246;
}

#completedJob {
    float: left;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

#completedJob p {
    float: left;
    margin-left: 25px;
}

#paidCompletedJob {
    float: left;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

#paidCompletedJob p {
    float: left;
    margin-left: 25px;
    color: #818181fb;
}

.jCheckbox {
    float: left;
    margin-left: 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #49494946;
    background: rgb(171, 213, 251);
    background: linear-gradient(144deg, rgba(171, 213, 251, 1) 0%, rgba(0, 212, 255, 1) 100%);
}

.paidjCheckbox {
    float: left;
    margin-left: 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #1a1a1a21;
}

#jCheckbox {
    float: left;
    margin-left: 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #49494946;
    background: rgb(171, 213, 251);
    background: linear-gradient(144deg, rgba(171, 213, 251, 1) 0%, rgba(0, 212, 255, 1) 100%);
}

#jCheckbox:active {
    float: left;
    margin-left: 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #9696963a;
    background-color: none;
}

#paidjCheckbox {
    float: left;
    margin-left: 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #9696963a;
}

#section-2 {
    display: none;
    margin-top: 25px;
    color: white;
    width: 100%;
    height: 150px;
    border: 1px solid #49494946;
    background-color: #22222246;
    text-align: left;
}


/*Scrollbar*/

#section-1::-webkit-scrollbar {
    width: 1em;
    color: #22222246;
}

#section-1::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
}

#section-1::-webkit-scrollbar-thumb {
    background-color: rgb(0, 171, 250);
    outline: 1px solid slategrey;
}


/*Mobile Footer*/

#mobile-dash-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #22222246;
}