@media screen and (min-device-width : 320px) and (max-device-width : 480px){
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        -webkit-box-sizing: border-box !important;
           -moz-box-sizing: border-box !important;
                box-sizing: border-box !important;
    }

    #header {
         height: 72px !important;
         display:block !important;
    }

    #logoImage {
        height: 70px !important;
        margin-left: -8px !important;
    }
    
    #appspace {
        margin-top: 86px !important;
        margin-bottom: 20px !important;
    }

    #ProgressBarContain {
        margin:2px !important;
    }

    #login {
        width: 325px !important;
    }

    #manualCGO {
        font-size: 4px !important;
        border:none !important;
    }

    .headerTitle3 {
        margin-top:4px !important;
        margin-bottom: 4px !important;
        padding:0 !important;
    }
}

html {
    overflow-y: scroll;
}

body {
    background-color: white;
/*    background-color:#b48484;
    background: -webkit-linear-gradient(#000080, white, #000080);
    background: -o-linear-gradient(#000080, white, #000080);
    background: -moz-linear-gradient(#000080, white, #000080);
    background: linear-gradient(#000080, white, #000080);*/
}

input:not([type="button"]):not([type="radio"]):focus, input:not([type="button"]):not([type="radio"]).focus, select:focus, select.focus, textarea:focus, textarea.focus{
     border-style: solid;
     border-width: 1px;
     border-color: #B9E0FF;
     box-shadow: 0 0 5px 2px #999999;
     /*font-size:16px!important;*/
}

/*input:not([type="button"]):not([type="radio"]):focus, input:not([type="button"]):not([type="radio"]).focus, select:focus, select.focus, textarea:focus, textarea.focus{
    border-color: #B9E0FF !important;
    box-shadow: 0 0 5px 2px #999999 !important;
    border-radius:16px !important;
    font-size:12px!important;
    border:1px solid !important;
}*/

input[type="button"], input[type="submit"], button {
    /*background-color:black !important;
    color:white !important;
    border:1px solid #000080 !important;*/
    font-size:12px !important;
    /*border-radius:16px !important;*/
}

iframe {
    margin: 0 auto;
    display: block; 
    border: none;
}

thead {
    background-color:#CAC9C9;
}

/*BELOW FIXES PROBLEMS WITH SELECT ON IPHONE.  MUST USE SELECT-CONTAINER WRAPPER*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .5em;
    background: white;
    border: none;
    border-radius: 3px;
    padding: 1em 2em 1em 1em;
    font-size: 1em;
}

.select-container {
    position:relative; 
    display: inline;
    /*border-radius: 16px;*/
}

.select-container:after {
    content:""; 
    width:0; 
    height:0; 
    position:absolute; 
    pointer-events: none;
}

.select-container:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: .3em;
    right: .75em;
    border-top: 8px solid black;
    opacity: 0.5;
}

select::-ms-expand {
    display: none;
}
/*ABOVE FIXES PROBLEMS WITH SELECT ON IPHONE.  MUST USE SELECT-CONTAINER WRAPPER*/

h3 {
  padding-bottom: 5px;
  color: #800000;
}


label {
    font-weight: bold;
}

a:link {
  color: #009;
  text-decoration: none !important;
}

a:visited {
  color: #009;
  text-decoration: none;
}

a:hover {
  color: #66f;
  text-decoration: underline;
}

a:active {
  color: #66f;
  text-decoration: underline;
}

/*FONT AND TEXT*/
.bold {
    font-weight:bold;
}

/*NAMED ELEMENTS*/
/*SITE / HOME PAGE*/
#header {
    font-family:Arial;
    background-color:white; 
    height: 97px;
}

#logoImage {
    /*height: 80px !important;*/
    height: 97px;
    margin-top:-8px;
}

#login {
    position: relative;
    top: 250px;
    width: 425px;
    color: #800000;
    border: solid 1px black;
    border-width: 1px 2px 2px 1px;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    background-color: gray;
    background: -webkit-linear-gradient(gray, white, gray);
    background: -o-linear-gradient(gray, white, gray);
    background: -moz-linear-gradient(gray, white, gray);
    background: linear-gradient(gray, white, gray);
}

#logout {
    font-weight:bold;
    text-align:right;
    color:navy;
    margin-top:8px;
    cursor:pointer;
}

#logout:hover {
    color:maroon;
}

#ProgressBarContain {
    margin:16px;
}

#ProgressBar {
    position:absolute; 
    top:36px; 
    left:0; 
    height:12px !important;
    background-color:#2196f3 !important;
    color:white;
    font-weight:bold;
    text-align:right;
    font-size:.6em;
    width: 0;
    border-top:solid 1px white;
    border-right:solid 1px white;
}

#pkgDetail td {
    background: url('/Images/bulletBlue.png') no-repeat left center /16px;
    padding: 5px 0px 5px 20px;
}

/*COLORS*/
.grayGradiant {
    background-color: gray;
    background: -webkit-linear-gradient(gray, white, gray);
    background: -o-linear-gradient(gray, white, gray);
    background: -moz-linear-gradient(gray, white, gray);
    background: linear-gradient(gray, white, gray);
}

.lightblueGradiant {
    background-color: #94c0c7;
    background: -webkit-linear-gradient(#94c0c7, white, #94c0c7);
    background: -o-linear-gradient(#94c0c7, white, #94c0c7);
    background: -moz-linear-gradient(#94c0c7, white, #94c0c7);
    background: linear-gradient(#94c0c7, white, #94c0c7);
}

.textColorNavy {
    color:navy !important;
}

.textColorMaroon {
    color:maroon !important;
}

.textColorWhitesmoke {
    color:whitesmoke !important;
}

.textItalic {
    font-style: italic;
}

.textUnderline {
    text-decoration:underline;
}

.transpScriptAZ {
    font: 400 24px/1.3 'Arizonia', Helvetica, sans-serif;
    /*color: navy;*/
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1); 
    vertical-align:baseline;
}
/*BORDER COLORS*/
.defaultBorderColor {
    border-color:navy !important;
}

.borderColorMaroon {
    border-color:maroon !important;
}

/*BACKGROUND COLORS AND GRAPHICS*/
.bkgrndStainlessSteel {
    background-image: url('/images/_BG_StainlessSteel.jpg');
}

.bkgrndWhitesmoke {
    background-color: whitesmoke;
}

.bkgrndNavy {
    background-color: navy;
}

.bkgrndMaroon {
    background-color: maroon;
}

.bkgrndDimgray {
    background-color:dimgray;
}

.bkgrndSilver {
    background-color:#CAC9C9;
}

/*MARGINS*/
.marginLeft4 {
    margin-left: 4px;
}

/*MISC*/
/*REQUIRED FIELDS*/
.reqFld{
     background-color: #f5f5f5;
}
.reqFldBox{
     background-color: #f5f5f5;
     padding: 5px 0px 5px 0px;
}

.buttonBlack {
    color:white !important;
    background-color:black !important;
    padding:8px !important;
    border-radius:16px;
 }

  .buttonBlack:hover {
   background-color:#2196f3 !important;
   color:white !important;
   font-weight:bold;
  }

  .buttonBlack:disabled {
   color: white !important;
   cursor:not-allowed !important;
   opacity:0.7 !important;
  }

.subheader {
    background-color: black;
    color: white;
}

 /*.subheader input[type="button"], input[type="submit"], button {*/
  .subheader button {
  color:black !important;
  background-color:white !important;
  padding:8px !important;
  border-radius:16px !important;
  font-size:12px!important;
  border:1px solid #000000!important;
 }

    .subheader button:hover {
    background-color:#2196f3 !important;
    color:white !important;
    font-weight:bold;
    }

    .subheader button:disabled,
    button[disabled]{
    color: black !important;
    cursor:not-allowed !important;
    opacity:0.7 !important
    }

    .subheader input[type="text"] {
        border-radius:16px !important;
        /*font-size:16px!important;*/
        border:1px solid !important;
    }

.subheader2 {
    background-color: white;
    color: black;
}

 /*.subheader2 input[type="button"], input[type="submit"], button {*/
 .subheader2 button {
  color:white !important;
  background-color:black !important;
  padding:8px !important;
  border-radius:16px !important;
  font-size:12px!important;
  border:1px solid #000000!important;
 }

    .subheader2 button:hover {
    background-color:#2196f3 !important;
    color:white !important;
    font-weight:bold;
    }

    .subheader2 button:disabled,
    button[disabled]{
    color: white !important;
    cursor:not-allowed !important;
    opacity:0.3 !important
    }

    .subheader2 input[type="text"], select {
        border-radius:16px !important;
        /*font-size:16px!important;*/
        border:1px solid !important;
    }

.headerTitle1 {
    color: midnightblue !important;
    font-family:'Verdana';
    font-weight: bold;
    margin:0;
    padding-left:4px;
    text-shadow:1px 1px 0 #444;
}

.headerTitle2 {
    color: maroon !important;
    font-family:'Verdana';
    font-weight: bold;
    margin: 0;
    padding-left:4px;
    text-shadow:1px 1px 0 #444;
}

.headerTitle3 {
    /*color: maroon !important;*/
    /*color: black;*/
    font-family:Arial;
    font-weight: bold;
    float:left;
}

.centerExact {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
}

.transparentInput {
    background-color: transparent;
    border: 0px;
    outline: none;
    vertical-align: top;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 5px;
    color: black;
    cursor: none;
    vertical-align: text-top !important;
    overflow: hidden;
    font-family: Verdana;
    font-size: 1em;
    font-weight: bold;
    color: maroon;
    /*padding: 15px 2px 10px 2px;
    margin: 10px 0px 0px 0px;*/
}

.flex {
    flex:auto;
}

.wrapper {
    position: relative;
}

.menuAnchor:hover {
    color: white;
}

.iti-flag {
    background-image: url("/images/flags.png") !important;
}

.invalid {
    background:url('/images/invalid.png') no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}

.valid {
    background:url('/images/valid.png') no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}

.padding-narrow {
    padding: 8px 12px 8px 12px !important;
}