body {
	/*margin-top: 50px; /* 50px is the height of the navbar - change this if the navbar height changes */
	background-color: #ffffff;
}

textarea {
    resize: vertical;
}

.navbar
{
    border-bottom:0 !important;
}

.navbar
{
    border-bottom:0 !important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus
{
    /*background-color:#2588c2 !important;*/
    /*background-image:radial-gradient(circle at top right, #27b1e0, #2588c2 50%);*/
    /*color:#ffffff !important;*/
    /*border-radius:5px !important;*/
    /*padding-top:10px;*/
    /*padding-bottom:10px;*/
    /*margin-top:5px;*/
    background-color:#e7e7e7;

}

.rowTopWelcome
{
    margin-top:-20px;
    background-color:#ffffff;
    color:#ffffff;
    padding:20px;
    background-image:url(/img/wave.png);
    background-size:cover;
    background-repeat:no-repeat;
    height:697px;
    width:100%;
    margin:0;
    margin-top: -20px;
}

.rowTopWelcomeShort
{
    margin-top:-300px;
    background-color:#ffffff;
    color:#000000;
    padding:20px;
    background-image:url(/img/wave.png);
    background-size:cover;
    background-repeat:no-repeat;
    height:697px;
}


/* landing page */

.lead {
    font-size: 1.2em;
    font-weight: 300;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.content-section-b-first {
    padding: 50px 0;

    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 10px;
    font-size: 1.8em;
    font-weight: 400;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    /* border-top: 3px solid #e7e7e7; */
    height:40px;
}

/* end landing page */


footer 
{
	margin: 50px 0;
	/*margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
	
}

h1, h2, h3, h4, h5, h6 { margin: none; }

.glyphicon { margin-right:10px !important; }



/* Additional table styling */
.table-hover tbody tr:hover td 
{
  background-color: #51a2e7 !important;
  color:#ffffff !important;
  cursor:pointer !important;
}

.table-hover tbody tr:hover th
{
	background-color:#468cc8 !important;
	color:#ffffff;
}

.table tbody tr th
{
	background-color:#468cc8 !important;
	color:#ffffff;
    text-shadow: 1px 1px rgba(0, 0, 0, .1);
}

.table > tbody > tr > th > a {
    color:#ffffff;
}

.table-hover > tbody > tr > th > a {
    color:#ffffff;
}
/* Additional table styling */



/* Placeholder dashboard ideas (This section  can be removed if no marketing page (default index page) is required) */
.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}
/* Placeholder dashboard ideas */



/***** Input Blocks Style *****/
.inputBlock > input[type='text']:not(:first-of-type):not(:last-of-type),
.inputBlock > .input-group:not(:first-of-type):not(:last-of-type) > input[type='text'],
.inputBlock > .input-group:not(:first-of-type):not(:last-of-type) > .input-group-addon {
    border-bottom: 0px;
    border-top: 0px;
    border-radius: 0px;
}

.inputBlock > input[type='text']:first-of-type,
.inputBlock > .input-group:first-of-type > input[type='text'],
.inputBlock > .input-group:first-of-type > .input-group-addon {
    border-bottom: 0px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.inputBlock > input[type='text']:last-of-type,
.inputBlock > .input-group:last-of-type > input[type='text'],
.inputBlock > .input-group:last-of-type > .input-group-addon {
    border-top: 0px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.inputBlock > .input-group > .input-group-addon {
    border-top: 1px solid #ccc !important;
    min-width: 100px;
    text-align: left;
}

.input-group > .input-group-addon.glyphicon {
    min-width: 0px;
    top: 0px !important;
}
/***** Input Blocks Style *****/



/* Custom class to add dividing lines between form-groups */
.form-group-divider { border-top: 1px solid #ccc; margin-bottom: 16px; }


/* Ribbon */
.ribbon
 {
     margin-top:-20px;
     border-bottom:solid 1px #d1d1d1;
     background-color:#e7e7e7;
     padding-top:4px;
     padding-bottom:4px;
 }

.ribbonConfig
{
    border-bottom:solid 1px #dea04f !important;
    background-color:#eeac57 !important;
}

.ribbon > div
{
	min-width:100px;

	border-radius:6px;
	text-align:center;
	margin-left:4px;
	font-size:0.8em;
	padding-top:4px;
	padding-bottom:4px;
	display:inline-block;
	padding-left:4px;
	padding-right:4px;
    position: relative;
    color:#2588c2;

}

.ribbonConfig > div
{
    border:solid 1px #eeac57 !important;
}

.ribbon > div > span.badge
{
    position:absolute;
    top:1px;
    right:1px;
    background-color:#d9534f;
}

.ribbon > div > span.badge.green
{
    background-color:#5cb85c;
}

.ribbon > div:hover
{
	background-color:#2588c2;
    background-image:radial-gradient(circle at top right, #27b1e0, #2588c2 90%);
	color:#ffffff;
    text-shadow:1px 1px rgba(0, 0, 0, 0.1);
	cursor:pointer;
}


.ribbon i
{
	font-size: 4em;
	margin: 0 auto;
	display: table;
	padding-bottom: 5px;
}

.ribbonItemSelected
{
    position:absolute;
    width:30px;
    height:3px !important;
    background-color: white;
    padding:0px;
    margin-left: calc((100% - 38px)/2);
    margin-left: -moz-calc((100% - 38px)/2);
    margin-left: -o-calc((100% - 38px)/2);
    margin-left: -webkit-calc((100% - 38px)/2);
    margin-top:2px;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
}

/* Ribbon */



/* Fade Animation */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}



/* End Fade In Animation */




.datepicker, .shortInput, .timepicker
{
    width:200px;
}

.ui-datepicker{
    background-image: none;
    background-color: #dddddd;
}

.ui-timepicker{
    background-image: none;
    background-color: #dddddd;
}

.ui-timepicker td{
    padding:4px 1px 2px 1px;
}

.ui-timepicker td a{
    padding:3px;
}

.ui-timepicker .periods{
    padding-right:3px;
}

input:disabled { color:#000000; }

.required.error, .compareInt.error, .compareDecimal.error, .compareEmail.error, .compareDate.error, input.error, span.error { border-color: #a94442; }
label.error { color: #a94442; }

@media print
{
    .noprint, .ribbon, .navbar, footer { display:none; }
    .printonly {display:default;}

    .print-full-width {
        width:100% !important;
    }

    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }
    .col-lg-12 {
        width: 100%;
    }
    .col-lg-11 {
        width: 91.66666666666666%;
    }
    .col-lg-10 {
        width: 83.33333333333334%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-8 {
        width: 66.66666666666666%;
    }
    .col-lg-7 {
        width: 58.333333333333336%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-5 {
        width: 41.66666666666667%;
    }
    .col-lg-4 {
        width: 33.33333333333332%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-2 {
        width: 16.666666666666664%;
    }
    .col-lg-1 {
        width: 8.333333333333332%;
    }

    input[type="text"] {
        border: none;
        padding: 0;
        margin: 0;
        height:auto;
    }

    textarea {
        border: none !important;
        padding: 0 !important;
    }

    select {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        padding-left: 0 !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none; /* If you want to remove the border as well */
        background: none;
    }

    select option {
        padding-left: 0 !important;
    }

    .glyphicon {
        padding: 0;
        border: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        padding-right: 10px;
    }

    .inputBlock > .input-group > .input-group-addon {
        border-top: none !important;
    }

    .page-break-before {
        page-break-before: always;
    }

    .panel {
        border-left: none;
        border-right: none;
    }
}

@media screen, projection
{
    .noprint {display:default;}
    .printonly{display:none;}
}

.form-footer {
    background-color: #d1d1d1;
    border-top: 1px solid #a1a1a1;
    bottom: 0px;
    left: 0px;
    padding: 10px 0px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index:5000;
}


.ui-datepicker
{
    z-index:100000001;
}

[data-href]
{
    cursor:pointer;
}

input[type=file] { display: none; }


h1
{
    font-weight:200 !important;
}

/* Required styling for panels with multiple sections. */
.panel > .panel-heading:not(:first-child) {
    border-top: 1px solid #d1d1d1;
    border-radius: 0px;
}

.textGreen
{
    color:green;
}

.textGray
{
    color:gray;
}

.cover {
    background-color: rgba(120,120,120,0.5);
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}

.cover > div {
    animation: colorchange 30s;
    -webkit-animation: colorchange 30s;
    background-color: #eee;
    border-radius: 10px;
    height: 140px;
    padding: 20px;
    position: absolute;
    left: calc((100% - 140px) / 2);
    left: -moz-calc((100% - 140px) / 2);
    left: -o-calc((100% - 140px) / 2);
    left: -webkit-calc((100% - 140px) / 2);
    text-align: center;
    top: calc((100% - 140px) / 2);
    top: -o-calc((100% - 140px) / 2);
    top: -moz-calc((100% - 140px) / 2);
    top: -webkit-calc((100% - 140px) / 2);
    width: 140px;
}

.cover > div > span {
    margin-bottom: 10px;
}

@keyframes colorchange {
    0%   {color: black;}
    10%  {color: gray;}
    20%  {color: darkred;}
    30%  {color: red;}
    40%  {color: orangered;}
    50%  {color: orange;}
    60%  {color: lightblue;}
    70%  {color: blue;}
    80% {color: darkblue;}
    90% {color: green;}
    100% {color: darkgreen;}
}

@-webkit-keyframes colorchange {
    0%   {color: black;}
    10%  {color: gray;}
    20%  {color: darkred;}
    30%  {color: red;}
    40%  {color: orangered;}
    50%  {color: orange;}
    60%  {color: lightblue;}
    70%  {color: blue;}
    80% {color: darkblue;}
    90% {color: green;}
    100% {color: darkgreen;}
}

div.screen-cover {
    background-color: rgba(108, 122, 137, 0.6);
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}

div.screen-cover > div.dialog-container {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid white;
    box-sizing: border-box;
    height: 540px;
    left: calc(50% - 250px);
    left: -moz-calc(50% - 250px);
    left: -o-calc(50% - 250px);
    left: -webkit-calc(50% - 250px);
    position: absolute;
    top: calc(50% - 270px);
    top: -moz-calc(50% - 270px);
    top: -o-calc(50% - 270px);
    top: -webkit-calc(50% - 270px);
    width: 504px;
    border-radius:3px;
}

div.screen-cover > div.dialog-container > div.content
{
    width:500px;
    height:500px;
    background-color: #e7e7e7;
    border-radius:3px;
}
 .nav-tabs > li > a {
    padding: 15px 50px;
    border-radius: 30px 30px 0 0;
    text-align:center;
    background-color: #e7e7e7;
}
#tabs .btn {
    padding: 40px 13px;
    border-radius: 10px;
    width: 15.7%;
    border-color: #e7e7e7;
    margin:3px;
    font-size: 2em;
    line-height: 100%;
    white-space: normal;
}

.btn.active {
    background-color:#2588c2 ;
}
#tabs .rad {
    padding: 20px;
}
.table1{
    width: 100%;
    table-layout: fixed;
}
.table1  tbody {
    text-align: center;
}
.table2{

    /*list-style: none;*/
    text-align: center;
    width: 100%;
}
.table2 label {
    display: inline-block;
    padding: 30px 40px;
    border-radius: 100%;
    font-size: 2em;
}
.table2  tbody {
     text-align: center;
 }
.table3{

    /*list-style: none;*/
    text-align: center;
    width: 100%;
}
.table3 label {
    display: inline-block;
    padding: 30px 40px;
    border-radius: 20px;
    font-size: 2em;
}
.table3  tbody {
    text-align: center;
}

 .radio-toolbar input[type="radio"] {
    display: none;
}
 .radio-toolbar label {
    background-color: #e7e7e7;
    cursor: pointer;
    cursor: hand;
}
 .radio-toolbar td [type="radio"]:checked+label {
    background-color: #2588c2;
}
.layout{
    display: flex;
    flex-wrap: wrap;

}

#btnSubmit {
    cursor: pointer;
    cursor: hand;
}
@media screen and (max-width: 1024px){

    .table3 label, .table2 label, #tabs .btn {
        font-size: 1.2em;
    }
    .table2 label {
      padding: 30px 37px;
    }

}

#myImage {
    display: none;
    margin: auto;
    padding: 50% 0;

}

@media only screen
and (orientation: portrait){
    form {
        display: none;
    }
    #myImage {
        display: block;
    }
}
#btnNew{
    float: right;
    display: block;
}

.displayTable {
    width: 100%;
    margin: auto;
 }
.displayTable, .tblFrm, .tblFrm {
    border:1px solid lightgrey;
    text-align: center;
    padding: 5px 5px;
}

.displayTable p, .tblFrm p, .tblFrm p {
    margin:0;
    line-height:30px;
    height: 30px;
}

.tableLength {
    text-align: center;
    width: 100%;
}