/*.phonebook-block {*/
/*    font-size: calc(var(--index)*.9);*/
/*}*/

.phonebook-block {
    /*overflow: hidden;*/
    height: 100vh;
}

.department-block {
    /*display: table;*/
    /*justify-content: center;*/
}

.modal-content {
    background-color: #d0e5dc;
}

.circle-image{
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 64px;
    height: 64px;
    border: rgba(43, 47, 50, 0.5) solid 1px;
    /*box-shadow: 3px 3px 3px rgb(166, 164, 164);*/
}

.circle-image img{
    width:100%;
    height:100%;
    object-fit: cover;
    /*transition: transform .6s;*/
}

.circle-image-big{
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: rgba(43, 47, 50, 0.5) solid 1px;
    /*box-shadow: 3px 3px 3px rgb(166, 164, 164);*/
}

.circle-image-big img{
    width:100%;
    height:100%;
    object-fit: cover;
    /*transition: transform .6s;*/
}

.circle-image img:hover{
    /*transform: scale(1.5);*/
}

.person-card {
    border: #d5d3d3 solid 1px;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 7px 7px 0 7px;
    background-color: rgba(209, 231, 221, 0.58);
    cursor: pointer;
    /*font-size: 14px;*/
    transition: transform .6s;
}

.person-card:hover {
    transform: scale(1.01);
    border: #a6a4a4 solid 1px;
    /*background: #82ba95;*/
    z-index: 1;
    transition: transform .2s;
}

.person-name {
    margin-bottom: 20px;
    line-height: 15px;
    font-weight: bold;
}

.person-organization {
    margin-bottom: 15px;
    line-height: 15px;
    font-style: italic;
}

.person-position {
    margin-bottom: 15px;
    line-height: 15px;
}

.btn-inside-search-bar i {
    color: gray;
}

.person-contact-link {
    margin-left: 5px;
    color: black;
}

.get-xlsx-link {
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .person-position {
        line-height: 10px;
    }
    .person-organization {
        line-height: 10px;
    }
    .department-block {
        font-size: calc(var(--index)*.75);
    }
}

@media only screen and (max-width: 575px) {
    .department-block {
        font-size: calc(var(--index)*1.3);
    }
}