body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* ------------- Things added by developer below.  Above was generated when project was created. --------------*/

/* ----- Customize Buttons ----- */

/* Botton Width */
.custom_btn_width200 {
    min-width: 200px;
    max-width: 200px;
}

/* ----- Customize Forms ----- */ 

/* Margin Smaller - makes spacing between horizontal inputs smaller */
.custom-form-horizontal-margin4 .form-group {
    margin-bottom: 3px;
}

/* ----- Customize Form Control ----- */

/* Padding Smaller */
/*.custom-form-control-padding {
    height: 30px;
    padding: 4px 4px 4px 8px;
    font-size: 14px; 
} */

/* ----- Customize Input ----- */

/* Font Larger / Input Height Smaller - padding top and bottom = 4, right and left = 10*/
.custom-input-sm-font14 {
    height: 30px; 
    padding: 4px 10px;
    font-size: 14px;
}

/* ----- Customize Panel ----- */

/* Padding Smaller so Height Smaller */
.panel-heading {
    /* padding: 4px 15px; */
    padding-top: 0px;
    padding-bottom: 0px;

}

/* Had to add this cuz Panel Title is always h3 even if you change it to h1 */
h1.panel-title {
    font-size: xx-large;
    color: inherit;
}
h2.panel-title {
    font-size: x-large;
    color: inherit;
}
h3.panel-title {
    font-size: large;
    color: inherit;
}
h4.panel-title {
    font-size: medium;
    color: inherit;
}
h5.panel-title {
    font-size: small;
    color: inherit;
}
h6.panel-title {
    font-size: x-small;
    color: inherit;
}

/* ----- Customize Background ----- */

/* Color Yellow - did not work - put the following inline until i find out why it didnt: @style = "background-color:yellow;" */
/* .custom-textarea-bgcolor-yellow {
    background-color: yellow;
}
    */

/* ----- Customize Nav Bar ----- */

/* Center Text in Nav Bar */
 
.custom-navbar-brand-inverse {
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
    color: #ffffff;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    display: block;
}

.custom-navbar-brand-inverse-xs {
    float: left;
    padding: 2px 2px;
    font-size: 12px;
    line-height: 20px;
    height: 50px;
    color: #ffffff;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    display: block;
}
/* Shrink Text On Small Device */
@media (min-width: 768px) {
    .custom-navbar-brand-inverse-xs {
        font-size: 18px;
        padding: 15px 15px;
    }
}

/* ----- Customize ASP Gridview for Pagination ----- */
/* See: http://www.codeproject.com/Tips/1085031/Easy-Bootstrap-Pagination-for-ASP-NET-Gridview */
/* Also add <PagerStyle CssClass="pagination-ys" /> to the grid control on the page!!!! */
/*gridview*/
.table table  tbody  tr  td a ,
.table table  tbody  tr  td  span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

.table table > tbody > tr > td > span {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}

.table table > tbody > tr > td:first-child > a,
.table table > tbody > tr > td:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.table table > tbody > tr > td:last-child > a,
.table table > tbody > tr > td:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.table table > tbody > tr > td > a:hover,
.table   table > tbody > tr > td > span:hover,
.table table > tbody > tr > td > a:focus,
.table table > tbody > tr > td > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/*end gridview */

/* ----- Customize classes for text left and right ----- */

/* It adds responsive classes for text left and right */
/* Found this gem on GitHub:https://github.com/twbs/bootstrap/issues/11292 */

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
    text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
    text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
    text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
    text-align: justify;
}

@media (max-width: 767px) {
    .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
        text-align: inherit;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-center-xs {
        text-align: center;
    }
    .text-right-xs {
        text-align: right;
    }
    .text-justify-xs {
        text-align: justify;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
        text-align: inherit;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-center-sm {
        text-align: center;
    }
    .text-right-sm {
        text-align: right;
    }
    .text-justify-sm {
        text-align: justify;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
        text-align: inherit;
    }
    .text-left-md {
        text-align: left;
    }
    .text-center-md {
        text-align: center;
    }
    .text-right-md {
        text-align: right;
    }
    .text-justify-md {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
        text-align: inherit;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-center-lg {
        text-align: center;
    }
    .text-right-lg {
        text-align: right;
    }
    .text-justify-lg {
        text-align: justify;
    }
}
/* ----- END Customize classes for text left and right ----- */

/* ----- Customize g-recaptcha for Captcha size to make it responsive ----- */

/* It adds responsive classes screen size */
/* Found this gem on GitHub:https://geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/ */
@media screen and (max-width: 767px){
#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}

@media screen and (min-width: 992px){
#rc-imageselect, .g-recaptcha {transform:scale(0.93);-webkit-transform:scale(0.93);transform-origin:0 0;-webkit-transform-origin:0 0;}
}