/* for title of the page*/
.layout-content h1{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
}
/* for title of the page*/
.layout-content h2{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: 400;
}

.views-sme {
    margin: 0 12px;
    background-color: white;
}

.views-sme .views-exposed-form {
    float:right;
    text-align: center;
    background-color: white;
}

/*search bar*/
.views-field views-field-field-pe-organization views-field-taxonomy-vocabulary-12{
    text-align: left;
} 
.views-sme .views-exposed-form .js-form-item-taxonomy-vocabulary-12-target-id {
    float: left;
}
/*search bar*/
.views-sme .views-exposed-form .form-wrapper {
    display: flex;
    float: left;
}

/*button styling*/
/*#edit-submit-subject-matter-experts {*/
/*    background-color: #4CAF50;*/
/*    border: none;*/
/*    color: white;*/
/*    padding: 15px 32px;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*    display: inline-block;*/
/*    font-size: 16px;*/
/*    margin: 4px 2px;*/
/*    cursor: pointer;*/
/*}*/


/* table styling */

.views-field-taxonomy-vocabulary-12{
    display: flex;
    flex-wrap: wrap;
    text-align: left; 
    /*list-style-position: inside;*/
}

.views-sme .cols-4 {
    padding-top: 8px; 
    width : 100%;
    border-collapse: separate;
}

.views-sme .cols-4 th{
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: left;
    background: #4C8843;
    color: white;
    font-weight: bold;
}


.views-sme .cols-4 td {
    font-size: 95%;
    padding: 6px;
    border:  50px solid #ccc;
    text-align: left;
}

.views-sme .cols-4 td a, p{
    font-size: 95%;
    text-align: left;
}

/*make image responsive, but not recommend to use for this page*/
/*.views-sme .cols-4 td img{*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*}*/




/***************************************************************
Below this, these are the styling for individual nodes for sme
(content type : people)
It has been done in really naive way to not waste time on finding
our other ways to solve it. This is not pivotal.
tag strong was added in field--node--people.html.twig
Also, node--people.html.twig was newly written
****************************************************************/

.fullname strong{
    font-weight: bold;
    font-size: 18px;
}

.organization strong{
    font-weight: bold;
    font-size: 18px;
}
.role strong{
    font-weight: bold;
    font-size: 30px;
}
.title strong{
    font-weight: bold;
    font-size: 18px;
}
.description strong{
    font-weight: bold;
    font-size: 18px;
}
.sme strong{
    font-weight: bold;
    font-size: 18px;
}
.category strong{
    font-weight: bold;
    font-size: 18px;
}
.catg {
    display: flex;
    margin-left: auto;
}
.bio_image, .fullname,.title,.organization, .role, .description, .sme, .category {
    padding-left: 20px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}
.js-pager__items{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.js-pager__items li{
    list-style: none;
    padding: 0 5px;
}
.fullname{
    font-weight: bold;
}
@media (max-width: 725px){
.views-sme .cols-4 td{
    padding: 20px;
    text-align: left
 }
}
.views-field ,.views-field-field-pe-organization, .views-field-taxonomy-vocabulary-12 ,.views-align-left th, td{
    padding: 4px;
    width: 70%;
}
.My-Name, .views-field-field-thumbnail-image th, td{
    padding: 0.5px;
    width: 40%;
}
.views-field ,.views-field-field-thumbnail-image ,.views-align-left th,td {
    padding-left: 0.5px;
    width: 40%;
}