body {
    background: url("images/whitey.jpg") repeat scroll 0 0 #fff;
    background-size: 220px 220px;
}

.ahq_blue {
    color: #00a3e3;
}

.ahq_blue_bg {
    background-color:#00a3e3;
    
}

/* bootstrap add ons */
.dropdown-menu {
    background-color: lightgrey;
    font-size: small;
}

input[type="text"].login,
input[type="password"].login {
    font-size:13px;
}

.btn.login {
    width: 90%;
    border-bottom: unset;
    float:right;
}

/* end bootstrap addons */



.heading {
    color: red;
}

.arrdepfile {
    cursor: hand;
    color: red;
}

/* Crewjobs Photos */
.arrphotos {
    width:40%;
}

/* CrewJobs New*/
button.crewbuttons {
    color:red;
    width: 200px !important;
}

.datenav {
    background: transparent;
    border: none;
    cursor: pointer;
}

.button-badge {
    display: inline-block;
    background: white;
    color: hsl(40, 100%, 20%);
    text-decoration: none;
    padding: 5px 10px;
    margin:3px;
    border-radius:5px;
}

[data-notifications] {
    position: relative;
}

[data-notifications]:after {
    content: attr(data-notifications);
    position: absolute;
    background: red;
    border-radius: 50%;
    display: inline-block;
    padding: 0.1em;
    color: #f2f2f2;
    right: -15px;
    top: -5px;
    text-align:center;
    height: 20px;
    width: 20px;
    font-size:small;
    
}

.dashbutton {
    width:50%;
    float:left;
}


/* covid safe check in */
img.covid-qrcode {
    width:40%;
    padding:5%;
    border-radius:25px;
}    

img.covid-safe {
    width:25%;
}

div.covid-heading {
    text-align: center;
    font-size:25pt;
    padding: 10px;
}

div.covid-body {
    text-align:center;
    font-size:20pt;
    padding-bottom:20px;
}
/* end covid safe check in */

.tick {
    float: right;
    margin-right:10px;
    display: inline-block;
    transform: rotate(45deg);
    height: 24px;
    width: 12px;
    border-bottom: 6px solid #78b13f;
    border-right: 6px solid #78b13f;

}

.schedulefooter {
    padding-left:5px;
    padding-right:5px;
    padding-bottom:5px;
    position:relative;
    display: inline-block;
    width:100%;
}

.cross {
    float: right;
    margin-right:5px;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(45deg);    
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-image: linear-gradient(red, red), linear-gradient(red, red);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 5px 100%, 100% 5px;/* size it to a ratio(%) or static size (px, em, ..) */
  }

.spinner {
    float:right;
    position:relative;
    margin-right:5px;
    width:24px;
    height:24px;
}
/**===== circle1 =====*/
.spinner-spinner {
    display: block;
    position: absolute;
    height: 24px;
    width: 24px;
    border: 3px rgba(0, 0, 0, 0.25) solid;
    border-top: 3px black solid;
    border-bottom: 3px black solid;
    border-radius: 50%;
    -webkit-animation: spin1 1s infinite linear;
            animation: spin1 1s infinite linear;
  }
  
  @-webkit-keyframes spin1 {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
  }
  @keyframes spin1 {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
  }
  /** END of circle1 */

@media screen and (max-width:600px) {

    body {
        margin-left:10px;
        margin-right:10px;
    }

    /* bootstrap add ons */
    .navbar {
        border-radius:5px;
        padding-top: .1rem;
        padding-bottom: .2rem;
    }

    /* end bootstrap addons */

    /* New Client */
    input[type="text"].addclient {
        font-size:14pt;
        width:100%;
        margin:0;
        padding:0;
        color:#00a3e3;
    }

    /* New Client */
    table.newclient {
        table-layout: fixed;
        width:100%;
        border-collapse:separate;
        border-spacing: 0 5px;
    }

    table.newclient tr td {
        background-color:#00a3e3;
    }    

    table.newclient tr td:first-child {
        padding-left:5px;
        border-top-left-radius:10px;
        border-bottom-left-radius:10px;
    }

    table.newclient tr td:last-child {
        padding-right:5px;
        border-top-right-radius:10px;
        border-bottom-right-radius:10px;
        width:100%;
    }

    /* New Client */
    td.tdlabel {
        font-size:10pt;
        width:40%;
        color: #fff;
        height:40px;
    }    

    /* New Client */ /* payroll modal */
    
    input[type="text"], 
    input[type="password"],
    input[type="number"],
    input[type="time"],
    textarea,
    select {
/*        margin-top:10px; */
        /*width:calc(100vw - 20px); */
        width:100%;
        font-size:18pt;
    }

    .heading {
        color: green;
    }
    
    .header-text {
        background-color: black;
        color:green;
    }

    /* CrewJobs New*/
    button.crewbuttons {
        color:red;
        width: 100% !important;
        height:40px !important;
        font-size: larger;
    }

    /* covid safe check in */
    img.covid-qrcode {
        width:90%;
        padding:5%;
        border-radius:25px;
    }    
    
    img.covid-safe {
        width:50%;
    }

    div.covid-heading {
        text-align: center;
        font-size:30pt;
        padding: 10px;
    }

    div.covid-body {
        text-align:center;
        font-size:22pt;
        padding-bottom:20px;
    }
    /* end covid safe check in */

}

@media screen and (max-width: 991px) {

    input[type="text"], 
    input[type="number"], 
    textarea, 
    select {
        width:100%;
        font-size:18pt;
    }
}

@media screen and (max-width: 419px) {

    input[type="text"], 
    select {
        width:100%;
        font-size:18pt;
    }

    input[type="button"] {
        /*width:40%;*/
    }

    .nav-link {
        padding: 0;
    }

}