.form-label{
    font-weight: bold;
}

.spouse{
    /* background-color:lightgreen; */
}

.spouse-box-1{
    border-color: #2196F3;
    /* background-color: lightgreen; */
    /*border-left: 26px solid #2196F3;*/
    border-left: 26px solid #ff6699;
    border-style: solid solid solid;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    /*padding-bottom: 10px;
    padding-top: 10px;*/
    padding: 10px;
    border-radius: 5px;
}

.spouse-box-2{
    border-color: #EEE86E;
    /* background-color: #019EAD; */
    border-left: 26px solid #EEE86E;
    border-style: solid solid solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

.card-header{
    font-family: "Times New Roman", Times, serif;
    /*background: #66e0ff;*/
    background: teal;
    color: white;
}

.card {
    border: 3px solid #3366cc;
    border-radius: 10px;
    margin-top: 20px;
}

.col-md-2{
    /*margin-top: 40px;*/
    font-size: 18px;
}

.col-md-8 {
  /*margin-top: 20px;*/
}

/*thead*/
#class_data thead { 
    font-weight: bold;
    background: #003a6c;
    color: #fff;
    font-size: 17px;

}

label {
    font-weight: bold !important;
    font-size: 19px;
    color: #004d4d;
}

.table-responsive{
    padding: 0 20px 0 20px;
}

#details{
    /*border: 2px solid lightblue;*/
    margin: 20px;
    padding: 30px;
    background: lightblue;
    /*border-radius: 10px;*/

}

/*loginpage*/

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

/*login page*/
#login_image {
  /*max-width: 100%; 
   height: auto;*/
                /*background-image: url("images/ateneo_background2.jpg");*/
                /*background-size: cover;                */
                /*z-index: 0;*/
                /*background-repeat: no-repeat;*/
}

/*datepicker*/
th.prev {
  background: red;
}

input {
    font-size: 20px;
    font-weight: bold;
}

/*login*/
#loginform{
  margin: 0 auto;
  
}

textarea {
  resize: none;
}



/*modal*/
/*.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
}*/
.modal-body {

  /* other stuff we already covered */

  /* cover the modal */
  /*position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;*/

  /* spacing as needed */
  /*padding: 20px 50px 20px 20px;*/

  /* let it scroll */
  /*overflow: auto;*/
  
}
.e_title{
  color: #f13c20;
  font-weight: bold;
  font-size: 15px;
  margin: 2px;
}

.e_body{
  padding-left: 3px;
}

.form-text {
  font-size: 13px; 
  color:red;
}

/* solution 1 for modal - header */
/*.modal-dialog{
    overflow-y: initial !important
}*/
/*.modal-body{*/
    /*height: 80vh;*/
    /*max-height: 80vh;
    overflow-y: auto;
}*/
/*solution 2 for modal - to have scroll bar*/
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.fa-birthday-cake {
  color: green;
}