body {
    background-color: whitesmoke;
}

.jumbotron {
    background-color: white;
     -moz-box-shadow:    0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Used by iSearch pages for search area framing*/
.search_box {
    box-sizing: border-box;
    padding: 18px;
    border: 2px solid gainsboro;
    border-spacing: 4px;
    background-color: white;
}


/*Used by iSearch pages for grid area framing*/
.grid_box {
    box-sizing: border-box;
    padding: 25px;
    border: 2px solid gainsboro;
    border-spacing: 4px;
    background-color: white;
    
}

/*Used by pages containing form*/
.form_box {
                box-sizing: border-box;
                padding: 45px;
                padding-top: 55px;
                border: 2px solid gainsboro;
                border-spacing: 4px;
                background-color: white;

            }

.error_box {
   margin-bottom: 8px;
   width: 100%;
}

.hideField {
    display: none;
}

.codeField {
    display: none;
}

.innershadow {
   -moz-box-shadow:    0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.19);
}

.row {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 14px;
    padding-bottom: 2px;
}

.form-control {
    color: black;
    font-weight: bold;
}

.title_div {
    margin-bottom: 18px; border-bottom: 1px dotted silver; padding-bottom: 10px;
}

/*formats the program name table found at the upper left corner of each page*/
.program_name_tab {
    width: 100%;
    padding: 20px 5px;
    box-sizing: content-box;
    border-spacing: 0px;
    border-collapse: separate;
    border-bottom: 1px solid dimgray;
    background-color: white;
    margin-bottom: 10px;
}

.tar {
    text-align: right;
}


.deleteRecord {
    background-color: lightyellow;
    border: 3px solid orange;
}

.panel_top {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
            .panel_bottom {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }

  /* datatable customization*/
       /*search filter forecolor*/
        label {color: black;}
        /*header styling*/
         .gvv th{background-color: lavender; color: black;}
         /*row styling*/
         .gvv td{color: dimgray;}
        /*grid hover effects*/
        .table-hover tbody tr:hover td {
            background-color: yellow;
         }



#x {
    position: absolute;
    color: black;
    top: -17px;
    right: -16px;
}

.xCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -12px;
    right: -10px;
    font-size: 25px;
    line-height: 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.xCloseButton:hover {
    background-color: #ccc;
}

 #jmb {
  
  
  /*margin: 20px 20px 20px 20px;*/
  overflow: visible;
  position: relative;
}

 /*show hide objects*/


  input[type="text"].form-control, input[type="password"].form-control, select.form-control {
    height: initial;
    padding: 4px 6px;
    margin: 2px 0;
    border-radius: 4px;
    border: 2px solid gainsboro;
    box-shadow: none;
    background-color: whitesmoke;
    font-family: arial;
}

input[type="text"].form-control:focus, input[type="password"].form-control:focus, select.form-control:focus {
                    border-color: #039;
                }


textarea.form-control {
    padding: 4px 6px;
    margin: 2px 0;
    border-radius: 4px;
    border: 2px solid gainsboro;
    box-shadow: none;
    background-color: whitesmoke;
    font-family: arial;
}


textarea.form-control:focus{
                    border-color: #039;
                }


#col1, #col2, #col3, #col4, #col5, #col6 {
    float: left;
    width: 30%;
    margin: 10px;
    min-width: 200px;
}

 @media only screen and (max-width: 540px) {
                .column_xs {
                    display: none;
                }
    .my_ul {
        float: none;
    }
            }

  @media only screen and (max-width: 768px) {
                #tPageTitle {
                    display: none;
                }
                #spTotal {
                    display: inline;
                }

                .column_md {
                    display: none;
                }
    #navDiv1 {
        width: 100%;
    }
        
    
            }

            @media only screen and (max-width: 1200px) {
                .column_lg {
                    display: none;
                }
            }