.container{
    padding: 20px;
    max-width: 500px;
    height: 100%;
}
.container_flex{
    width: 100%;
}
.comments_container{
    padding: 20px;
    height: 500px;
    overflow-y: scroll;
}
.comments_container_flex{
    display: flex;
    padding-bottom: 20px;
}
.profile_display{
    flex: 1;
}
.comment_content{
    padding-left: 10px;
    flex: 8;
}
.like_icon{
    flex: 2;
    text-align: right;
}
.flag_flex{
    border-radius: 20px;
}
.name{
    color: #142A4A;
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
    word-break: keep-all;
    overflow: hidden;
    margin-top: 2px;
    text-overflow: ellipsis;
}
.timestamp{
    color: lightgrey;
    font-size: smaller;
    margin-left: 5px;
}
.comment{
    font-size: small;
    font-weight: 400;
    color: #142A4A;
    line-height: 1.428571429;
}
.like_btn{
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    opacity: 0.3;
    font-size: 12px;
    font-weight: 500;

}
.send_comment_prt{
    display: flex;
    padding: 2px;
    height: 60px;
}
.comment_field{
    flex: 10;
    background-color: #f4f4f4;
    margin: 0px auto;
    display: flex;
}
.send_comment{
    flex: 2;
    padding: 10px;
    background-color: #e8e8ea;
    text-align: center;
    display: flex;
    justify-content: center;
}
.comment_input{
    width: 100%;
    border: none;
    background-color: #f4f4f4;
    padding: 5px;
}
.send_comment_btn{
    outline: none;
    border: none;
    background-color: transparent;
}
.like_icon{
    color: lightgrey;
}


/* END OF COMMENTS SECTION */

/* BEGIN OF SEARCH SIDE */
.like_comment_prt{
    display: flex;
}
.like_btn_search{
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    opacity: 0.3;
    font-size: 12px;
    font-weight: 500;
}
.comment_btn_search{
    margin-left: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    opacity: 0.3;
    font-size: 12px;
    font-weight: 500;
}
.paid{
    font-weight: 300;
}
.timestamp_search{
    color: lightgrey;
    font-size: smaller;
    margin-left: 8px;
}
.search_field_prt{
    display: flex;
    padding-bottom: 10px;
}
.back{
    flex: 2;
        display: flex;
    align-items: center;
    justify-content: center;
    color: grey;
}
.field{
    flex: 8;
}
.close{
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: grey;
    margin-left: 5px;
}
.mlr_input{
    padding: 10px;
    height: 30px;
    border: none;
    border-radius: 20px;
    background-color: #e8e8ea;
    color: #142A4A;
    width: 200px;
    flex: 9;
    width: 100%;
}

.container{
    padding: 20px;
    width: 500px;
}
.header{
    position: relative;
    height:10vh;
    width:20vw;
    color: #142A4A;
    font-size: medium;
}
.twilio_container{
    margin-top: 20px;
}
.google_auth_header{
    display: flex;
    justify-content: space-between;
}
.twilio_header{
    display: flex;
}
.leading_section{
     display: flex;
     justify-content: center;
}
/* for normal setup buttons when relaxed */
.setup_btn{
    flex: 2;
    font-weight: 600;
    border-radius: 10px;
    background-color: #FFBC38;
    border: none;
    height: 36px;
    margin-top: 10px;
    /* outline: none; */
}
/* for normal setup buttons when relaxed and tso fa type is active */
.setup_btn_green{
    flex: 2;
    border-radius: 10px;
    background-color: #5ad75a;
    border: none;
    height: 36px;
    margin-top: 10px;
    outline: none;
    color : white
}
.google_auth_body{
    padding-top: 20px;
    -webkit-transition: height 200ms linear;
    -moz-transition: height 200ms linear;
    -o-transition: height 200ms linear;
    -ms-transition: height 200ms linear;
    transition: height 200ms linear;

}
.expand {
    height:400px;
}

.expand_twilio {
    height:150px;
}


.relax {
    height:0px;
}
.twilio_body{
    padding-top: 20px;
    -webkit-transition: height 200ms linear;
    -moz-transition: height 200ms linear;
    -o-transition: height 200ms linear;
    -ms-transition: height 200ms linear;
    transition: height 200ms linear;
}
#qr_view_id{
    margin-top: 20px;
}
.qr_view{
    margin: 0px auto;
    display: flex;
}
.copy_btn_view{
    margin: 0px auto;
    display: flex;
    width: 91px;
}
.qr_img, .token_desc{
    margin: 4px auto;
    font-size: small;
}
.token{
    margin: 0 auto;
    font-weight: 600;
    padding: 0px;
}

.token_header{
    font-size: small;
    margin-top: 30px;
    font-weight: 500;
    margin-bottom: 0px;
}
.mlr_input{
    padding: 10px;
    height: 30px;
    border: none;
    border-radius: 20px;
    background-color: #e8e8ea;
    color: #142A4A;
    width: 200px;
    flex: 9;
    margin-right: 10px;
    width: 100%;
}
.mlr_input_ctn{
    padding: 10px;
    height: 30px;
    border: none;
    border-radius: 20px;
    background-color: #e8e8ea;
    /* opacity: 0.3; */
    color: #142A4A;
     width: 100%;
    display: flex;
}
.flag_flex{
    padding-top: 6px;
    padding-left: 6px;
}
.code_flex{
    padding: 6px;
    font-size: small;
}
.mlr_sub_input{
    height: 28px;
    border: none;
    background-color: #e8e8ea;
    color: #142A4A;
    width: 160px;
    flex: 2;
}
.mlr_submit_btn{
    margin-top: 5px;
    border-radius: 20px;
    background-color: #142A4A;
    /* border: none; */
    height: 59px;
    /* width: 90px; */
    /* outline: none; */
    color: white;
    margin-left: 20px !important;
    /* font-size: inherit; */
    /* font-weight: 500; */
    padding: 20px;
}
.mlr_submit_btn_full{
    margin-top: 20px;
    border-radius: 18px;
    background-color: #142A4A;
    border: none;
    height: 48px;
    outline: none;
    color: white;
    width: 103%;
}
.setup_auth, .disable_auth{
    font-size: 14px;
    color: #142A4A;
    transition: all linear 0.5s;
    opacity: 1;
}

/* changing text and button color when expanded and relaxed */
.setup_btn_expand{
    flex: 2;
    border-radius: 10px;
    background-color: #ffd685;
    border: none;
    height: 36px;
    margin-top: 10px;
    outline: none;
}
.setup_btn_expand_green{
    flex: 2;
    border-radius: 10px;
    background-color: #d6f5d6;
    border: none;
    height: 36px;
    margin-top: 10px;
    outline: none;
}
.mlr_input_btn_container{
    display: flex;
}


@media only screen and (max-width: 600px) {
  .side_nav {
    display: none;
  }
  .nav {
    display: none;
  }
    .two_round_corner_prt{
        display: flex;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    .first{
        background-color: #eeeeee;
        height: 200px;
        width: 300px;
        border-radius: 40px;
         margin-bottom: 12px;
    }
  .second{
    margin-left: 0px;
    background-color: #eeeeee;
    height: 200px;
    width: 300px;
    border-radius: 40px;
    }
}

@media only screen and (min-width: 500px) {
    .two_round_corner_prt{
        display: flex;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    .first{
        background-color: #eeeeee;
        height: 200px;
        width: 300px;
        border-radius: 40px;
         margin-bottom: 12px;
    }
    .second{
        margin-left: 40px;
        background-color: #eeeeee;
        height: 200px;
        width: 300px;
        border-radius: 40px;
    }

}

/* for ipads */
@media only screen and (max-width: 800px) {
    .two_round_corner_prt{
        display: flex;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    .first{
        background-color: #eeeeee;
        height: 200px;
        width: 300px;
        border-radius: 40px;
         margin-bottom: 12px;
    }
    .second{
        margin-left: 0px;
        background-color: #eeeeee;
        height: 200px;
        width: 300px;
        border-radius: 40px;
    }

}

@keyframes placeHolderShimmer{
    0%{
        background-position: -600px 0
    }
    100%{
        background-position: 600px 0
    }
}

/* .container{
    padding: 50px;
    height: 100%;

    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    /* 1000px 104px; */

} */
.main_flex{
    display: flex;
}
.side_nav{
    height: 600px;
    flex: 2;
    text-align: center;
    justify-content: flex-start;
    padding: 40px;
}
.main_views{
    flex:10;
}
.nav{
    float: right;
}
.clear{
    clear: both;
}
.balance_text{
    height: 20px;
    background-color: #eeeeee;
    width: 150px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.shim_nav{
    height: 50px;
    background-color: #eeeeee;
    width: 150px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.separator{
    height: 50px;;
}