/* container includes all items in this page*/
.container {
    width: 90%;
    margin: auto;
    /* center horizontally */
    margin-bottom: 50px;
}

.container>p {
    font-size: 14px;
    color: #444444;
}

/* select area includes select-options and "search" button */
.select-area {
    display: flex;
    width: 80%;
    margin: auto;
    margin-top: 40px;
    align-items: center;
    justify-content: space-between;
}

select {
    border: none;
    outline: none;
    /* removes the outline (black border) when element is clicked */
}

.fa-arrow-right-arrow-left{
    margin: 0px 12px !important;
}

#search-btn {
    border: none;
    border-radius: 3px;
    padding: 8px 20px;
    margin-left: 10px;
    background-color: #116466;
    color: white;
    cursor: pointer;
}

/*start: exchange currency css style*/
.currency-exchange-section{
    height: 20%;
    width: 30%;
    background-color: #ffa9586b;
    padding: 20px;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%), 0 6px 20px 0 rgb(0 0 0 / 0%);
    color: #000000;
    opacity: 1;
}

.currency select{
    background-color: transparent;
    color: #192c1e;
    width: 150px;
    border: none;   
    border-radius: 5px;
    font-weight: bold;
}

.currency input{
    background-color: transparent;
    color: #192c1e;
    width: 100px;
    border: none;
    border-radius: 30px;
    padding: 2px;
    margin-top: 4px;
    margin-right: 10px;
    font-weight: bold;
}

.currency select option{
    background-color: #efefef;
    color: #192c1e;
}

select:focus, input:focus{
    outline: 1;
    outline-color: rgba(80, 78, 78, 0.326);
}

.date-view{
    margin: 0px;
    margin-bottom: 5px;
    color: #192c1e75;
    font-size: small;
}
/*end: exchange currency css style*/

.result-area {
    visibility: hidden;
    width: 80%;
    margin: auto;
    /* center horizontally */
    margin-top: 50px;
    margin-bottom: 355px;
}
.result{
    color: #116566c1;
    padding-bottom: 25px;
}
.morelink{
    color: #116466;
}

/* profile class has 2 divs: profile-content (information about translator) and side-content (price - time) */
.profile {
    display: flex;
    /* display divs side by side */
    justify-content: space-between;
    /* seperate divs in flex direction (x axis) */
    align-items: center;
    /* center divs vertically */
    background-color: #d1e8e2;
    border-radius: 10px;
    margin-bottom: 40px;
    padding: 10px 0;
}

/* profile-content class has 2 divs: img-ratings (translator's profile picture with his/her rating) and profile-info */
.profile-content {
    width: 80%;
    display: flex;
    /* display divs side by side */
    align-items: center;
    /* center divs vertically */
    padding: 10px 0;
}

/* img-rating class consist of profile picture of translator and his/her rating */
.img-rating {
    display: flex;
    /* display divs in flex direction (default flex direction is row, so it displays side by side) */
    flex-direction: column;
    /* change flex direction to column (y axis)*/
    justify-content: space-between;
    /* seperate items vertically (in flex direction: y axis) */
    align-items: center;
    /* center items horizontally */
    width: calc(100px + 10%);
    /* calc function help us to calculate different kinds of values */
}

.img-rating .profile-pic {
    width: 100px;
    border-radius: 50%;
    /* make profile picture circular */
    margin-bottom: 15px;
}

/* style translator's profile information*/
.profile-info {
    width: 70%;
    margin-right: 5%;
    
    text-align: justify;
}

.profile-info p {
    margin: 15px 0;
}

.profile-info h3 {
    margin: 0;
}

.side-content {
    display: flex;
    /* display divs in flex direction */
    flex-direction: column;
    /* change flex direction to column (y axis) */
    align-items: center;
    /* center items horizontally */
    text-align: center;
    margin-right: 20px;
    margin: 10px 10px;
    border: 2px solid #b8dcd3;
    border-radius: 5px;
    width: 20%;
}

.side-info {
    font-size: 18px;
    font-weight: bold;
}

.view-profile {
    border: none;
    border-radius: 3px;
    background-color: #ffa958;
    color: white;
    padding: 8px 8px;
    margin-bottom: 10px;
    cursor: pointer;
}

/*for paragraph expander*/
.read-more .morecontent div {
    display: none;
}
.read-more{
    color: #424242;    
}
#rating>div {
    margin-right: 3px;
}

#rating>div:nth-child(6) {
    margin-right: 0px;
}

/* tablet */
@media screen and (max-width: 780px){
    .result-area, .select-area{
        width: 90%;
    }
    .profile-content{
        width: 90%;
    }
    .profile{
        flex-direction: column;
    }
    .img-rating{
        align-items: flex-start;
        width: 125px;
    }
    .side-content{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        padding: 0 10px;
    }
    .side-info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        
    }
    .side-info p{
        margin-right: 15px;
    }
    .view-profile{
        margin: 0px;
    }
}

@media screen and (max-width: 519px){
    .profile-content{
        align-items: flex-start;
    }
    .side-content{
        flex-direction: column;
        width: fit-content;
        margin: auto;
        padding: 10px 40px;
    }
    .side-info{
        font-size: 14px;
        flex-direction: column;
    }
    .side-info p{
        margin: 5px 0px;
    }
    .profile-info{
        text-align: initial;
        font-size: 12px;
        margin-left: 10px;
        margin-right: 0px;
        width: 75%;
    }
    .profile-info p{
        margin: 10px 0;
    }
    .img-rating{
        align-items: center;
        width: 90px;
    }
    .img-rating .profile-pic{
        width: 75px;
        margin-bottom: 10px;
    }
   .rating{
       width: 80px !important;
       height: 20px !important;
   }
    .rating > div{
        width: 16px !important;
        height: 16px !important;
    }
    .jqx-rating-image{
        width: 15px !important;
        height: 15px !important;
        padding: 0px;
    }
    .view-profile{
        margin-top: 5px;
        font-size: 14px;
    }
    .select-area{
        width: 100%;
    }
    #search-btn{
        margin-left: 0px;
        margin-top: 10px;
    }
}