/* Main Styles */
*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin:0;
    padding:0;
}

#container {
    width:100%;
    max-width:1024px;
    height:auto;
    position:fixed;
    position:absolute;
    margin:0 auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

#content {
    float:left;
    width:95%;
    height:auto;
    min-height:768px;
    margin-left:2.5%;
    margin-right:2.5%;
}

.message-container {
    float:left;
    width:100%;
    margin-top:-5px;
    margin-bottom:5px;
    text-align:center;
    border:2px solid #3E94CE;;
}

.message-text {
    font-size:1.2em;
    display:inline-block;
}

.error-text {
    color:red;
}

.bold {
    font-weight:bold;
}

.chargeouts-change-container {
    float:left;
    margin-top:10px;
}

.float-right {
    float:right;
}

.menu-bar {
    float:left;
    width:100%;
    padding:5px;
    margin-bottom:10px;
    color:white;
    background-color:#3E94CE;
}

.menu-box {
    float:left;
    width:200px;
    height:40px;
    margin:5px;
    background-color:white;
}

.menu-box-left {
    float:left;
    width:50%;
    height:100%;
    background: rgba(0, 0, 0, 0);
    color:black;
}

.menu-box-right {
    float:left;
    width:50%;
    height:100%;
    background: rgba(0, 0, 0, 0);
    border-left:1px solid black;
}

.title-bar {
    float:left;
    width:100%;
    padding:5px;
    margin-bottom:10px;
    text-align:center;
    color:white;
    background-color:#A0A0A0;
}

.title-button {
    float:left;
    width:15%;
}

.title-button-hidden {
    visibility: hidden;
}

.title {
    float:left;
    width:70%;
    font-size:1.5em;
    text-align:center;
}

.title-cashier {
    right:0;
    float:right;
    width:15%;
}

.form-control-modified {
    border-radius: 20px;
}

.btn-default-modified {
    border-radius:20px;
}

.btn-red {
    color:white;
    background-color:red;
}

.pagination-container {
    float:left;
    padding-left:10%;
}

@media screen and (min-width: 768px) {
    .message-text {
        text-align:1.5em;
    }
}

@media screen and (min-width: 1024px) {
    
}

/* Home Styles */
.home-menu-container {
    float:left;
    width:50%;
    height:auto;
    margin-bottom:30px;
}

.home-menu-container button {
    float:left;
    width:80%;
    height:40px;
    margin-left:10%;
    margin-bottom:10px;
    font-size:1.2em;
}

.home-menu-title {
    float:left;
    width:100%;
    padding:5px;
    margin-top:20px;
    font-size:16pt;
    font-weight:bold;
    text-align:center;
}

.home-menu-transactions-container {
    float:left;
    width:100%;
    margin-bottom:20px;
}

.home-menu-transactions-title {
    float:left;
    width:100%;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
}

.home-menu-transactions-line {
    float:left;
    width:100%;
    border-bottom:1px solid lightgray;
    padding:5px;
    cursor:pointer;
}

#home-clock-in-form {
    float:left;
    width:100%;
    height:60px;
}

#home-clock-in-form input {
    width:95%;
    height:100%;
    margin-left:10px;
    font-size:1.2em;
}

#home-clock-ins-container {
    float:left;
    width:50%;
    height:auto;
    padding-left:10px;
}

#home-username {
    padding-top:6px;
    font-weight:bold;
    text-transform:capitalize;
}

#home-admin-container {
    float:left;
    width:100%;
    font-size:1.5em;
    padding-left:40%;
    margin-bottom:10px;
}

.tg {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td {
    font-size:14px;
    padding:2px 10px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}

.tg th {
    font-size:14px;
    font-weight:normal;
    padding:2px 10px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}

.tg .tg-s6z2 {
    text-align:center;
}

@media screen and (min-width: 768px) {
    #home-menu-container {
        width:50%;
    }

    #home-clock-in-form {
        width:50%;
    }
}

@media screen and (min-width: 1024px) {

}

/* Account Styles */
#login-form {
    width:100%;
    max-width:250px;
    margin:0 auto;
}

#manage-assign-memos-container {
    float:left;
    width:100%;
    margin:0 auto;
    padding:10px;
}

#manage-create-container {
    float:left;
    width:100%;
    min-height:280px;
    padding:10px;
}

#manage-delete-container {
    float:left;
    width:100%;
    min-height:280px;
    padding:10px;
}

#manage-create-form {
    width:100%;
    max-width:250px;
    margin:0 auto;
}

#manage-delete-form {
    width:100%;
    max-width:250px;
    margin:0 auto;
}

#manage-assign-memos-form {
    width:100%;
    max-width:750px;
    margin:20px auto;
}

.assign-memos-half {
    float:left;
    width:100%;
    height:35px;
}

.manage-assign-memos-checkbox {
    display:block;
    float:left;
    width:100%;
}

.manage-assign-memos-checkbox input {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}

.manage-assign-memos-checkbox input:checked {
    background: #abd;
}

#set-password-container {
    width:95%;
    max-width:400px;
    margin:0 auto;
}

#account-clock-in-report-container {
    width:96%;
    max-width:400px;
    margin:0 auto;
}

.account-clock-in-name {
    float:left;
    width:40%;
}

.account-clock-in-created_at {
    float:left;
    width:60%;
}

/* New login form */
#account-login-form {
    width:100%;
    max-width:375px;
    height:627px;
    margin-left:auto;
    margin-right:auto;
}

.account-login-user {
    float:left;
    width:100%;
    height:25%;
}

.account-login-name {
    float:left;
    width:100%;
    height:50%;
    text-align:center;
    font-size:3.0em;
}

.account-login-password {
    float:left;
    width:100%;
    height:50%;
}

.account-login-password input {
    width:100%;
    height:100%;
    font-size:3.0em;
    text-align:center;
    background-color:lightgray;
}

#account-password {
    -webkit-text-security: circle;
}

.manage-cashiers-container {
    float:left;
}

.manage-cashiers-line {
    float:left;
    width:100%;
}

.manage-cashiers-name {
    float:left;
    width:50%;
    padding-left:10px;
}

.manage-cashiers-unread-memos {
    float:left;
    width:10%;
}

.manage-cashiers-clockin {
    float:left;
    width:40%;
}

@media screen and (min-width: 768px) {
    #manage-create-container {
        width:50%;
        border-right:1px solid #006cb8;
    }

    #manage-delete-container {
        width:50%;
    }

    #manage-assign-memos-container {
        width:100%;
    }

    .assign-memos-half {
        width:50%;
    }

    .manage-cashiers-line {
        float:left;
        width:50%;
    }
}

/* Bills Styles */
.bills-awaitingapproval-container {
    float:left;
    width:100%;
    height:auto;
}

.bills-awaitingapproval-line {
    float:left;
    width:100%;
    padding:5px;
    border-bottom:1px solid black;
    cursor:pointer;
}

.bills-awaitingapproval-line-name {
    float:left;
    width:40%;
}

.bills-awaitingapproval-line-reference {
    float:left;
    width:20%;
}

.bills-awaitingapproval-line-date {
    float:left;
    width:15%;
    text-align:right
}

.bills-awaitingapproval-line-total {
    float:left;
    width:10%;
}

.bill-awaitingapproval-container {
    float:left;
    width:100%;
    height:auto;
    padding:20px;
}

.bill-awaitingapproval-line {
    float:left;
    width:100%;
}

.bill-awaitingapproval-name {
    font-size:14pt;
    font-weight:bold;
}

.weighbridge-transactions-container {
    float:left;
    width:100%;
    height:auto;
    padding:5px;
}

.weighbridge-transactions-line {
    float:left;
    width:100%;
    height:auto;
    padding:5px;
    border-bottom:1px solid lightgray;
    font-size:10pt;
    cursor:pointer;
}

.weighbridge-transactions-labels {
    float:left;
    width:100%;
    height:auto;
    padding:5px;
    font-size:10pt;
    font-weight:bold;
    cursor:pointer;
    border-bottom:1px solid black;
}

.weighbridge-transactions-checkbox {
    float:left;
    width:5%;
}

.weighbridge-import-auto-btn {
    width:100%;
    height:200px;
}

.weighbridge-transactions-sequence-number {
    float:left;
    width:10%;
}

.weighbridge-transactions-customer-id {
    float:left;
    width:20%;
}

.weighbridge-transactions-customer-id a:link, .weighbridge-transactions-customer-id a:hover, .weighbridge-transactions-customer-id a:visited {
    color:black;
    text-decoration:none;
}

.weighbridge-transactions-carrier-id {
    float:left;
    width:15%;
}

.weighbridge-transactions-vehicle-id {
    float:left;
    width:10%;
}

.weighbridge-transactions-weight-net {
    float:left;
    width:10%;
}

.weighbridge-transactions-date-out {
    float:left;
    width:5%;
}

.weighbridge-transactions-order-number-container {
    float:right;
    width:200px;
}

.weighbridge-transaction-container-half {
    float:left;
    width:50%;
    height:auto;
}

.weighbridge-transaction-form {
    float:left;
    width:100%;
    padding:20px;
}

.weighbridge-transaction-line {
    float:left;
    width:100%;
    padding:5px;
}

.weighbridge-transaction-label {
    float:left;
    width:200px;
    padding-top:5px;
    font-weight:bold;
}

.weighbridge-transaction-input {
    float:left;
    width:200px;
}

.weighbridge-totals-container {
    float:left;
    width:100%;
    height:auto;
    padding:5px;
}

.weighbridge-carrier-report-form {
    float:left;
    width:300px;
    margin:10px;
}

.weighbridge-chargeout-customer-notes {
    float:left;
    color:red;
    width:100%;
    padding:5px;
}

.weighbridge-reports-transactions-customer {
    float:left;
    width:400px;
}

.weighbridge-reports-transactions-customer label {
    font-weight:bold;
}

.customers-container {
    float:left;
    width:100%;
    padding:10px;
}

.customers-line {
    float:left;
    width:100%;
    padding:5px;
    cursor:pointer;
    border-bottom:1px solid lightgray;
}

.customers-column-10 {
    float:left;
    width:10%;
}

.customers-column-20 {
    float:left;
    width:20%;
}

.customers-column-30 {
    float:left;
    width:30%;
}

.customer-line {
    float:left;
    width:100%;
    padding:5px;
}

.customer-label {
    float:left;
    width:200px;
    padding-top:5px;
    font-weight:bold;
}

.customer-input {
    float:left;
    width:200px;
}

.products-container {
    float:left;
    width:100%;
    padding:10px;
}

.products-line {
    float:left;
    width:100%;
    padding:5px;
    cursor:pointer;
    border-bottom:1px solid lightgray;
}

.products-column-10 {
    float:left;
    width:10%;
}

.products-column-20 {
    float:left;
    width:20%;
}

.product-line {
    float:left;
    width:100%;
    padding:5px;
}

.product-label {
    float:left;
    width:200px;
    padding-top:5px;
    font-weight:bold;
}

.product-input {
    float:left;
    width:200px;
}

.vehicles-container {
    float:left;
    width:100%;
    padding:10px;
}

.vehicles-line {
    float:left;
    width:100%;
    padding:5px;
    cursor:pointer;
    border-bottom:1px solid lightgray;
}

.vehicles-column-10 {
    float:left;
    width:10%;
}

.vehicles-column-20 {
    float:left;
    width:20%;
}

.vehicle-line {
    float:left;
    width:100%;
    padding:5px;
}

.vehicle-label {
    float:left;
    width:200px;
    padding-top:5px;
    font-weight:bold;
}

.vehicle-input {
    float:left;
    width:200px;
}

.carriers-container {
    float:left;
    width:100%;
    padding:10px;
}

.carriers-line {
    float:left;
    width:100%;
    padding:5px;
    cursor:pointer;
    border-bottom:1px solid lightgray;
}

.carriers-column-10 {
    float:left;
    width:10%;
}

.carriers-column-20 {
    float:left;
    width:20%;
}

.carrier-line {
    float:left;
    width:100%;
    padding:5px;
}

.carrier-label {
    float:left;
    width:200px;
    padding-top:5px;
    font-weight:bold;
}

.carrier-input {
    float:left;
    width:200px;
}

.account-application-form {
    float:left;
    width:300px;
    margin:10px;
}

.spreadsheet-container {
    float:left;
    width:100%;
}