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

footer {
    margin-top: 50px;
    color: black;
}

input, label  {
    margin-top: 10px;    
} 

input {
    margin-left: 5px;
}

select {
    width: 175px;
    height: 25px; 
    margin-left: 5px;
    margin-top: 10px;     
}

input[type="checkbox"] {
  margin-top: 20px; 
  height: 20px;
}

textarea {
    font-weight: 600;
}

.messages {
    color: black;
}

a:hover {
    color: red !important;
} 

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

.plan-description {
    width: 300px;
    height: 150px !important;
}

.alert-info {
    color: black;
    background-color: yellow;
}

.height-short {
    height: 20px;
}

.height-medium {
    height: 50px;
}

.height-tall {
    height: 100px;
}

.height-xtall {
    height: 400px;
}

.btn {
    width: 100px;
}

.link {
    margin-top: 10px;
}

.big-select-btn {
   width: 300px; 
}

.text-box-info {
    width: 300px;
    height: 400px;
}

.borders {
    outline: 2px solid black;
}

.utility-info {
    width: 350px;
    height: 190px;  
    border: 5px solid green; 
    border-radius: 15px; 
    margin: 10px;
    color: black;
    background-color: white;  
    padding: 10px;     
}

.utility-header {    
    color: red;
    font-size: large;
    height: 50px;
    margin-top: 10px;
}

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


/* 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;
}

.validation-summary-errors {
    color: red; 
} 

.selected {
    color: white;
    background-color: green;
}

.account, .confirm-account {
    width: 350px;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#btnDualFuel {
    border: 5px solid green; 
    color: green;
    background-color: white;
    border-radius: 10px;
    height: 50px;
    font-size: large; 
}

#btnElectricOnly {
    border: 5px solid red; 
    color: red;
    background-color: white;
    border-radius: 10px;
    height: 50px;
    font-size: large;  
}

#btnGasOnly {
    border: 5px solid blue; 
    color: blue;
    background-color: white;
    border-radius: 10px;
    height: 50px;
    font-size: large;
}

#btnDualFuel:hover, #btnElectricOnly:hover, #btnGasOnly:hover  {
    background-color: lightgray;
}

#cmbElectricCo, #cmbGasCo {
    width: 330px;
    height: 30px;    
    border-radius: 10px; 
}

#cmbElectricCo {
    border: 5px solid red;
    color: red;
}

#cmbGasCo {
    border: 5px solid blue;
    color: blue;
}

#cmbElectricCo:hover, #cmbGasCo:hover {
    background-color: lightgray;
}
    
#Contract {    
    margin-top: -7px;
    margin-bottom: 3px;   
    padding-left: 10px;
    padding-right: 10px; 
    overflow: auto;   
    height: 300px;
    background: white; 
    color: black;  
    border: 5px green;
    border-radius: 10px;
    font-size: 14px;    
}

 #signature {
    width: 600px;
    height: 146px;
    background: white;
    outline: 2px solid black;
    margin-top:50px;
    margin-bottom: 50px;    
}