body {
    padding-top:0px;
}
.hdrbgimg {
    background-repeat: repeat-y;
    background-image: url("../../images/templateImages/HdrHexagonBkg.png");
    background-color: black;
}
.hdrtitle {
    font-size: 48px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    text-transform: uppercase;
}
@media (min-width: 768px) and (max-width: 991px) {
    .hdrpmlogo {
        width: 95%;
    }
    .hdrtitle {
        font-size: 38px;
    }
}
@media (max-width: 767px) {
    .hdrmaincontent {
        /*height: 230px;*/
        height: 200px;
    }
    .hdrbgimg {
        /*height: 230px;*/
        height: 200px;
    }
    .hdrtopsect {
        /*height: 180px;*/
        height: 160px;
    }
    .hdrpmlogo {
        position: relative;
        top: 10px;
        left: 10px;
        display: inline;
    }
    .hdrsearchcls1 {
        float: left;
        vertical-align: bottom;
    }
    .hdrtitle {
        font-size: 38px;
        vertical-align: central;
    }
}
@media (max-width: 450px) {
    .hdrmaincontent {
        /*height: 230px;*/
        height: 200px;
    }
    .hdrtopsect {
        /*height: 180px;*/
        height: 160px;
    }
    .hdrpmlogo {
        width: 100%;
        height: auto;
    }
    /*.hdrbgimg {
        background: #151515;
    }*/
    .hdrtitle {
        font-size: 25px; /*font-size: 36px;*/
    }
}
/*.clockinbutton {
    width: 250px;
    height: 250px;
    background-color: green;
    color: white;
    font-size: 48px;
}
.clockoutbutton {
    width: 250px;
    height: 250px;
    background-color: red;
    color: white;
    font-size: 48px;
}*/
/*.btn-xlarge {
    padding: 38px 38px;
    font-size: 48px;
    //change this to your desired size line-height: normal;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}*/
/*.btn-xlarge {
    width: 250px;
    height: 250px;
    font-size: 48px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 1px 1px 5px;
}*/
/*Large buttons for Time Clock*/
.btn-xlarge {
    width: 250px;
    height: 250px;
    font-size: 48px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    border: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: inset 0 -9.2px rgba(0, 0, 0, 0.12), inset 6px 0 rgba(0, 0, 0, 0.1);
    outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -moz-outline: none;
}

    .btn-xlarge:active, .btn-xlarge.active {
        outline: none;
        -moz-outline: none;
        background-image: none;
        -webkit-box-shadow: inset 0 9px 5px rgba(0, 0, 0, 0.125) !important;
        position: relative;
        box-shadow: inset 0 9px 15px rgba(0, 0, 0, 0.125) !important;
        top: 3px;
        left: -3px;
    }

    .btn-xlarge:focus {
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
    }

.btn-sm {
    padding-top: 1.5px;
}

.btn-tmclock1 {
    width: 250px;
    height: 250px;
    font-size: 30px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: inset 0 -9.2px rgba(0, 0, 0, 0.12), inset 6px 0 rgba(0, 0, 0, 0.1);
    outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -moz-outline: none;
}

    .btn-tmclock1:active, .btn-tmclock1.active {
        outline: none;
        -moz-outline: none;
        background-image: none;
        -webkit-box-shadow: inset 0 9px 5px rgba(0, 0, 0, 0.125) !important;
        position: relative;
        box-shadow: inset 0 9px 15px rgba(0, 0, 0, 0.125) !important;
        top: 3px;
        left: -3px;
    }

    .btn-tmclock1:focus {
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
    }

/*Used for Table Row Coloring*/
.grey {
    background-color: grey;
}

.approved {
    background-color: green;
}

.rejected {
    background-color: red;
}

.pending {
    background-color: yellow;
}

/*xxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxx*/
/*.btn-custom {
    width: 250px;
    height: 250px;
    font-size: 48px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    background-color: hsl(0, 69%, 22%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
    background-image: -moz-linear-gradient(top, #b42121, #5e1111);
    background-image: -ms-linear-gradient(top, #b42121, #5e1111);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
    background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
    background-image: -o-linear-gradient(top, #b42121, #5e1111);
    background-image: linear-gradient(#b42121, #5e1111);
    border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
    -webkit-font-smoothing: antialiased;
}*/
/***********************************************/
.alert-custlighta {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-custlighta hr {
    border-top-color: #f7e1b5;
}

.alert-custlighta .alert-link {
    color: #66512c;
}
/***********************************************/
.bootstrap-timepicker-widget {
    color: white;
}
.bootstrap-timepicker-widget table td a {
    color: white;
}
    .bootstrap-timepicker-widget table td a:hover {
        background-color: #000;
        color: white;
    }
/***********************************************/
.scale1 {
    margin: 15px;
    -ms-transform: scale(1); /* IE */
    -moz-transform: scale(1); /* FF */
    -webkit-transform: scale(1); /* Safari and Chrome */
    -o-transform: scale(1); /* Opera */
}

.scale2 {
    margin: 15px;
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}
.scale3 {
    margin: 15px;
    -ms-transform: scale(3); /* IE */
    -moz-transform: scale(3); /* FF */
    -webkit-transform: scale(3); /* Safari and Chrome */
    -o-transform: scale(3); /* Opera */
}