#progress-bar {
    width: 100px;
    background: #cccccc;
    position: relative;
}

#progress-bar-percentage {
    background: #3A4757;
    padding: 5px 0px;
    color: #FFF;
    text-align: center;
    height: 15px;
}

#progress-bar-percentage-red {
    background: #FF0000;
    padding: 5px 0px;
    color: #FFF;
    text-align: center;
    height: 15px;
}

#progress-bar-percentage-green {
    background: #18e545;
    padding: 5px 0px;
    color: #FFF;
    text-align: center;
    height: 15px;
}

#progress-bar-percentage span {
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
}

.all-rounded {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#progress-bar a:link {
    color: #ffffff;
}

#progress-bar a:visited, #progress-bar a:hover, #progress-bar a:active {
    color: #ffffff;
}




.WHATIFprogress-bar {
    width: 100px;
    background: #d5d5d5;
    position: relative;
}

.WHATIFprogress-bar-percentage {
    background: #2173bd;
    /*padding: 5px 0px;*/
    color: #FFF;
    text-align: center;
    height: 8px;
}

.WHATIFprogress-bar-percentage-red {
    background: red;
    /*padding: 5px 0px;*/
    color: #FFF;
    text-align: center;
    height: 8px;
}

.WHATIFprogress-bar-percentage-green {
    background: #18e545;
    /*padding: 5px 0px;*/
    color: #FFF;
    text-align: center;
    height: 8px;
}


.AdditionalDataHTMLLabel {
    width: 300px;
    height: 45px;
}

.AdditionalDataHTMLControl {
    height: 45px;
}

span.issueMaterialCheckBox input {
    width: 2em !important;
    height: 2em !important;
}


        #mainDiv {
            width: 550px;
            height: 380px;
            background-color: #eee;
    
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;

            margin: auto;

            border:1px solid #ccc;
            padding:20px;
        }

        .round {
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
        }

        #txtDCPIN {
            height:40px;
            width:500px;
            font-size:14pt;
        }

        #txtDCUserName
        {
            height:40px;
            width:500px;
            font-size:14pt;
        }

        #txtDCPassword
        {
            height:40px;
            width:500px;
            font-size:14pt;
        }

        #txtOperationID
        {
            height:40px;
            width:250px;
            font-size:14pt;
        }

#txtBarcode {
    height: 40px;
    width: 250px;
    font-size: 14pt;
}

        #txtProductionOrder
        {
            height:40px;
            width:250px;
            font-size:14pt;
        }

#txtDocumentNumber {
    height: 40px;
    width: 250px;
    font-size: 14pt;
}

        #txtMachine
        {
            height: 40px;
            width: 250px;
            font-size: 14pt;
        }

        p {
            font:18px arial,sans-serif;
        }

         h1 {
            font-weight:bold;
            margin: 0;
    font-style: normal;
    font-variant: normal;
    font-size: 24px;
    line-height: normal;
    font-family: arial, sans-serif;
}

         h2 {
            font-weight:bold;
    font-style: normal;
    font-variant: normal;
    font-size: 20px;
    line-height: normal;
    font-family: arial, sans-serif;

    margin: 0;
}

         h3 {
            font:18px arial,sans-serif;
            margin: 0;
            }

         h2NotBold {
    font-style: normal;
    font-variant: normal;
    font-size: 20px;
    line-height: normal;
    font-family: arial, sans-serif;

    margin: 0;
}

        #top {
            background-color: #fff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 23px;
        }


        .myButton {
	        -moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	        -webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	        box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
	        background-color:#3A4757;
	        border:1px solid #314179;
	        display:inline-block;
	        cursor:pointer;
	        color:#ffffff;
	        font-family:arial;
	        font-size:18px;
	        font-weight:bold;
	        padding:6px 12px;
	        text-decoration:none;
            margin-left: 0px;
        }


.myMobileButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    -webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
    background-color: #3A4757;
    border: 1px solid #314179;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 58px;
    width: 100%;
    height: 100px;
    font-weight: bold;
    padding: 6px 12px;
    text-decoration: none;
    margin-left: 0px;
}

        .topButton {
            display: inline-block;
            margin-left: 5px;
            margin-right: 5px;
        }

.myButtonRed {
    -moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    -webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
    background-color: red;
    border: 1px solid #314179;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 12px;
    text-decoration: none;
    margin-left: 0px;
}

.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
	background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
	background-color:#5972a7;
}
.myButton:active {
	position:relative;
	top:1px;
}


#chkRework { /* Change width and height */
   width:2em !important;
   height:2em !important;
}

#chkUpdateAdditionalData {
    width: 2em !important;
    height: 2em !important;
}

#chkOperationComplete { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkSplitLot { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkCrewSize { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkSelectScrap { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkPrintWIPTag { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkChecked { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}


#chkPrintBarcode { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkReturnSize2 { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkReturnSize3 { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkReturnSize4 { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkReturnSize5 { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}

#chkFreeStock1, #chkFreeStock2, #chkFreeStock3, #chkFreeStock4, #chkFreeStock5 { /* Change width and height */
    width: 2em !important;
    height: 2em !important;
}


        .textBox {
            height:40px;
            width:200px;
            font-size:14pt;
        }

        #txtNotes {
            height:150px;
            width:700px;
            font-size:14pt;
        }

.buttonPositionMobile {
    position: absolute;
    top: calc(50% - 20px); /* Button Height is 49px. Round up to 50px. Minus 30px for padding top and padding bottom. Remainder gives the amount to minus 50% by. 50px - 30px = 20px. calc(50% - 20px) */
    text-align: center;
    width: 100%;
}

#buttonListMobile {
    width: 100%;
    border: 5px solid #3A4757;
    float: left;
    background-color: #eee;
    height: 100%;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

#leftcolumn { width: 280px; border: 5px solid #3A4757; float: left; background-color: #eee; height:100%; -moz-border-radius: 12px; -webkit-border-radius: 12px;}
#rightcolumn { border: 5px solid #3A4757; background-color: #eee; overflow: auto; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding:20px;}

#xdivActiveTimeCards {border: 5px solid #3A4757; background-color: #eee; -moz-border-radius: 12px; -webkit-border-radius: 12px;}
#divLogOnJob {border: 5px solid #3A4757; background-color: #eee; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding:20px;}