@media screen and (min-width : 1020px) and (max-width: 10000px){
    .pc-only{
        display: flex;
    }
    .mb-only{
        display: none;
    }
    .tablet-only{
        display: none;
    }

    .newfeed-content-sec{
        height : 180px;
        cursor:pointer;
    }

    .newfeed-image-sec{
        width : 35%;
    }

    .newfeed-info-sec{
        width : 65%;
    }

    .newFeed-info-title{
        font-size: 15px;
        font-weight: 600;
        margin : 0px;
        line-height: 15px;
    }

    .newFeed-info-description{
        margin : 0px;
        font-size: 14px;
    }

    .newFeed-detail-icon{
        font-size : 15px;
    }

    .newFeed-info-detail-sec{
        display: flex;
        justify-content: space-between;
        height :20%;
    }

    .newFeed-info-description-sec{
        height : 80%;
    }

}


@media screen and (min-width : 820px) and (max-width: 1020px){
    .pc-only{
        display: flex;
    }
    .mb-only{
        display: none;
    }
    .tablet-only{
        display: none;
    }

    .newfeed-content-sec{
        height : 180px;
    }

    .newfeed-image-sec{
        width : 35%;
    }

    .newfeed-info-sec{
        width : 65%;
    }

    .newFeed-info-title{
        font-size: 15px;
        font-weight: 600;
        margin : 0px;
        line-height: 15px;
    }

    .newFeed-info-description{
        margin : 0px;
        font-size: 14px;
    }
    .newFeed-detail-icon{
        font-size : 12px;
    }

    .newFeed-info-detail-sec{
        display: flex;
        justify-content: space-between;
        height : 20%;
    }

    .newFeed-info-description-sec{
        height : 80%;
    }

}


@media screen and (min-width : 450px) and (max-width: 820px){
    .pc-only{
        display: none;
    }
    .mb-only{
        display: none;
    }
    .tablet-only{
        display: flex;
    }

    .newfeed-content-sec{
        height : 150px;
    }

    .newfeed-image-sec{
        width : 40%;
    }

    .newfeed-info-sec{
        width : 60%;
    }

    .newFeed-info-title{
        font-size: 15px;
        font-weight: 600;
        margin : 0px;
        line-height: 15px;
    }

    .newFeed-info-description{
        margin : 0px;
        font-size: 14px;
    }

    .newFeed-detail-icon{
        font-size : 12px;
    }

    .newFeed-info-detail-sec{
        display: flex;
        justify-content: space-between;
        height : 20%;
    }
    .newFeed-info-description-sec{
        height : 80%;
    }

    .comment-writer-name-sec{
        width:calc(100% - 60px);
    }

}


@media screen and (max-width: 450px){
    .crisp-client {
        z-index: 999999 !important;
        height: 100% !important;
        width: 100% !important;
    }
    .pc-only{
        display: none;
    }
    .mb-only{
        display: flex;
    }
    .tablet-only{
        display: none;
    }

    .newfeed-content-sec{
        height : 180px;
    }

    .newfeed-image-sec{
        width : 40%;
    }

    .newfeed-info-sec{
        width : 60%;
    }

    .newFeed-info-title{
        font-size: 12px;
        font-weight: 600;
        margin : 0px;
        line-height: 12px;
    }

    .newFeed-info-description{
        margin : 0px;
        font-size: 10px;
    }

    .newFeed-detail-icon{
        font-size : 10px;
    }

    .newFeed-info-detail-sec{
        display: flex;
        justify-content: center;
        height : 25%;
    }
    .newFeed-info-description-sec{
        height : 75%;
    }
    .newFeed-detail-icon{
        padding : 5px;
    }

    .comment-writer-name-sec{
        width:calc(100% - 100px);
    }

}

.project-content-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    top: 64px;
    overflow-x: hidden;
}

@media screen and (min-width: 1020px) {
    .project-content-section {
        width: 95%;
        padding: 0;
    }
}

/*vertical align*/
.vertical-container{
    position: relative;
}

.vertical-element-middle-align{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/*-----end vertical align-----*/

/*--------app button--------*/
.button-active{
    background-color: #5148ff;
    color:white;
    cursor: pointer;
}

.button-disabled{
    background-color: #deebf3;
    color:black;
    cursor: not-allowed;
}

.web-button{
    height:40px;
    width : 120px;
    border-radius: 20px;
    border: none;
    font-size: 15px;
    font-weight : 600;
    /* padding: 10px; */
    /* border-color: #74b9ff; */
}

.normal-button{
    height:40px;
    border-radius: 6px;
    border:0;
    font-size: 15px;
    font-weight : 600;
    background-color: #5148ff;
    color:white;
    cursor:pointer;
    padding: 10px;
}

.normal-button:hover{
    cursor: pointer;
    transition : 0.5s;
    background-color:white;
    color:rgba(102,102,102,.7);
    border-radius: 6px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}


.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.link-btn{
    text-decoration: none;
    text-align: center;
    background-color: #1d8daf;
    color:white;
    cursor:pointer;
    height:40px;
    line-height: 40px;
    border-radius: 6px;
    border:0px;
    font-size: 15px;
    font-weight : 600;
    width: 240px;
    align-items:center;
}

.link-btn:hover {
    cursor: pointer;
    transition: .5s;
    background-color: white;
    color : rgba(102,102,102,.7);
    border-radius: 6px;
    border: solid 1px #1d8daf;
}

.select-btn{
    border-radius: 6px;
    height : 40px;
    border : 0px;
}

.loadmore-cmt-btn{
    color:#1d8daf;
    text-decoration: underline;
    cursor:pointer;
}


/*-------end app button-------*/


/*--------Preview image-------*/
.preview-image-sec{
    height : 100px;
    width : 130px;
    background-color: black;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    margin:5px;
    cursor:pointer;
}

.previewImage-delete-icon{
    position: absolute;
    top:10px;
    right:5px;
    color:red;
}

.previewImage-delete-icon:hover{
    cursor: pointer;
    color:#1d8daf;
    transition: 0.5s;
}

.upload-image{
    height: 100%;
    width: auto;
    object-fit: cover;

}

.text-bold{
    background-color: rgba(102,102,102,.7);
    border-radius : 2px;
    color:white;
    padding : 1px;
}

/*--------End Preview image-------*/

/*--------Waring-------*/
.warning-text{
    color: red;
    font-size: 13px;
    font-weight: 600;
}

.warning-sec{
    padding:20px;
    width:auto;
    height:auto;
    background-color : rgba(29, 141, 175, 0.31);
    border-radius:10px;
    display: flex;
    justify-content: center;
}

.warning-sec ul{
    width:auto;
    margin:0px;
}

/*--------End Waring-------*/


/*------Post------*/

.newfeed-container{
    margin: 10px auto;
    padding:0px;
}
.newfeed-sec{
    margin:auto;
    padding:0px;
    display: block;
    justify-content: center;
}

.newfeed-content-sec{
    padding : 0px;
    max-width: 1000px;
    width : 90%;
    border-radius: 6px;
    background-color: #e0e0e0;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}

.newFeed-image-sec{
    padding : 0px;
    height : 100%;
    background-color: rgba(102,102,102,.7);
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
}

.newFeed-image{
    height: 150%;
    width: auto;
    object-fit: cover;
}

/* .newFeed-info-title{
    font-size: 15px;
    font-weight: 600;
    margin : 0px;
    line-height: 15px;
}

.newFeed-info-description{
    margin : 0px;
    font-size: 14px;
} */

.interact-icon:hover{
    color: red;
}
.newFeed-icon-sec{
    width: 30px;
}
.newFeed-interact-sec{
    height : 10%;
}
.newFeed-info-title-sec{
    height : 20%;
}

.newFeed-info-content-sec{
    height : 70%;

}

.newFeed-info-description-sec{
    margin : auto;
    padding: 0px;
}

.newFeed-info-detail-sec{
    margin : auto;
    padding: 0px;
}

.newFeed-detail-icon{
    width : auto;
    font-weight : bold;
    color:rgba(102,102,102,.7);
}

.newFeed-avatar-sec{
    width : 50px;
    height : 50px;
    padding : 0px;
}

.newFeed-avatar-container{
    width: 50px;
    height : 50px;
    border-radius: 50%;
}

.newFeed-avatar{
    width: 50px;
    height : 50px;
    object-fit: cover;
    border-radius: 50%;

}

.newFeed-posterinfo-sec{
    margin-left : 5px;
    width:80%;
    overflow: hidden;
    padding : 0px;
}

.newFeed-posterinfo-text{
    font-size : 10px;
    font-weight : 700;
    padding:0px;
    margin : 0px;
}


.newFeed-post-hashtag{
    background-color: #1d8daf;
    border-radius: 3px;
    width:auto;
    padding : 1px 5px;
    margin : 0px 10px;
    color:white;
}

.rating-star-checked{
    color:orange;
}

.form-warning{
    border : solid 1px red;
}

.comment-btn-sec{
    width: auto;
    padding : 0px;
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.comment-picbtn{
    height : 28px;
    width : 28px;
    padding : 0px;
    background-color:white;
    border-radius: 50%;
    color:rgba(102,102,102,.7);
    border:solid 0px white;
}


.comment-btn-sec input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.comment-sendCmtBtn{
    width:auto;
    background-color:#1d8daf;
    color:white;
    border:0px;
    border-radius: 10px;
}

.comment-sendCmtBtn:hover{
    color:#1d8daf;
    background-color:white;
    transition: 0.5s;
}

textarea::-webkit-scrollbar{
    width: 0px;
}

body::-webkit-scrollbar{
    width: 10px;
}

body::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}

body::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border:0px;
    border-radius: 5px;

}

/*New feed v2*/
.bodyside{
    position:relative;
    background-color:#F0F2F5;
}

.newfeed-container2{
    border-radius:6px;
    width:100%;
    max-width: 800px;
    margin:0px auto 15px;
    padding: 0;
    background-color: white;
    height:auto;
}

.newFeed-content-small-sec2{
    cursor:pointer;
    margin: 0px 20px 10px;
    height:auto;
    padding:10px 0px;
    width: auto;
}

.newfeed-image-sec2 {
    width:100%;
    height: auto;
    max-height : 400px;
    background-color: rgba(102,102,102,.7);
    padding:0px;
    margin:auto;
    overflow:hidden;
    display: flex;
    justify-content: center;
}

.newfeed-image-container-float2{
    width:100%;
    padding:0px;
    overflow: hidden;
}

.newFeed-image2{
    width:100%;
    height : 350px;
    object-fit: cover;
}

.newFeed-info-title-sec2{
    height : auto;
    margin : 10px auto 0px;
    padding:0px;
}

.newFeed-info-title2{
    padding: 0px;
    height : auto;
    font-size: 15px;
    font-weight: 700;
    margin : 10px 0px;
    line-height: 17px;
}
.newFeed-info-text-sec2{
    height : auto;
    margin : 5px auto 20px;
    padding:0px;
}
.newFeed-info-text2{
    padding:0px;
    width:auto;
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
    margin:0px;

}

.newFeed-interact-sec2{
    height : 25px;
    width:auto;
    margin:10px 20px;
    padding: 0px;
}

.interact-icon2{
    width: 21.6px;
    height : 21.6px;
    padding:12px 0px;

}

.comment-sec{
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
}

.comment-avatar-sec{
    width:40px;
    height:40px;
    border-radius: 50%;
    margin:0px;
    padding:0px;
    cursor: pointer;
}

.comment-avatar{
    width:40px;
    height:40px;
    border-radius: 50%;
    padding:0px;
    object-fit: cover;
}

.comment-writer-name-sec{
    width: calc(100% - 60px - 130px);
    min-width:200px;
    padding : 0px;
}

.comment-writer-rating{
    width : 110px;
    padding : 0px;

}

.comment-post-sec{

    flex-wrap: wrap;
    height : 70px;
    padding:0px;
}

.icon-global{
    cursor: pointer;
}

/*-------end post-------*/


/*--------Modal  --------*/
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    overflow-y: scroll;
}
/*-----end modal------*/

/*-------input date-----*/
input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}
/*--------end date----*/

/*-----Carousel-----*/
.page-carousel-control-btn{
    background-color: rgba(0,0,0,.5);
    width: 5%;
}

.page-carousel-control-icon{
    color: white;
}

.page-carousel-indicator{
    background-color: rgba(0,0,0,.5);
}


/*---Carousel type 2----*/
:root {
    --carousel-width: 40vw;
    --carousel-height: calc(0.7 * var(--carousel-width));
    --carousel-padding: 5px;
}

@media (max-width: 479px) {
    :root {
        --carousel-width: 95vw;
    }
}

.viewport {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-frame {
    background: #fafafa;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    width: calc(var(--carousel-width) + (2 * var(--carousel-padding)));
    height: calc(var(--carousel-height) + (2 * var(--carousel-padding)));
}

.carousel {
    width: var(--carousel-width);
    height: var(--carousel-height);
}

.scroll {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

ul.scroll {
    margin: 0;
    padding: 0;
    list-style: none;
}

.scroll::-webkit-scrollbar {
    display: none;
}

.scroll-item-outer {
    width: 100%;
    height: 100%
}

.scroll-item {
    width: var(--carousel-width);
    height: 100%;
}

img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

@supports (scroll-snap-align: start) {

    /* modern scroll snap points */
    .scroll {
        scroll-snap-type: x mandatory;
    }

    .scroll-item-outer {
        scroll-snap-align: center;
    }
}

@supports not (scroll-snap-align: start) {

    /* old scroll snap points spec */
    .scroll {
        -webkit-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        -webkit-scroll-snap-destination: 0% center;
        scroll-snap-destination: 0% center;
        -webkit-scroll-snap-points-x: repeat(100%);
        scroll-snap-points-x: repeat(100%);
    }

    .scroll-item-outer {
        scroll-snap-coordinate: 0 0;
    }
}

.indicators {
    display: flex;
    width: 100%;
    justify-content: center;
}

ul.indicators {
    margin: 0;
    padding: 0;
    list-style: none;
}

.indicator {
    padding: 10px;
}

.indicator-button {
    cursor: pointer;
    background: none;
    border: none;
    color: #333;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.indicator-button:after {
    content: '○';
    font-size: 1.4em;
    padding: 12px 15px 17px;
}

.indicator-button:hover {
    color: #666
}

.indicator-button:active {
    color: #999;
    padding: 0;
}

.indicator-button[aria-pressed="true"]:after {
    content: '●';
}
/*---End Carousel type 2----*/


/*---Carousel type 3----*/
/* Swiper container stylng */
.swiper {
    width: 100%;
    height: auto;
    max-height : 400px;
}


.swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.swiper-button-next,
.swiper-button-prev {
    outline: none;
}


div.swiper-button-next,
div.swiper-button-prev {
    top: 52%
}


/*---End Carousel type 3----*/
/*-----End Carousel-----*/


/*-----3 parties login-----*/
.parties3-logo-login{
    height: 30px;
    width : 30px;
}

.parties3-logo-link{
    cursor: pointer;
    margin: 0px 10px;
}


/*-----ALIGN ICON ---*/
.line-seperate{
    margin:0px 12px;
    width: auto;
}

.newfeed-container2 hr{
    margin:0px 12px;
    width: auto;
}


.icon-align{
    padding-top:14px;
}


.modal-close-btn{
    width: 30px;
    height:30px;
    background-color:#F0F2F5 ;
    border-radius: 50%;
    cursor:pointer;
}

.modal-close-btn:hover{
    background-color:#BCC0C4;

}



.modal-body::-webkit-scrollbar{
    width: 0px;
}


.page-header{
    font-size: 25px;
    font-weight: 600;
}

.text-link{
    cursor: pointer;
    text-decoration: underline;
    color:blue;
}


/**Radio buttons**/
.toggle {
    align-items: center;
    border-radius: 100px;
    display: flex;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .toggle:last-of-type {
    margin: 0;
  }

  .toggle__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .toggle__input:not([disabled]):active + .toggle-track, .toggle__input:not([disabled]):focus + .toggle-track {
    border: 1px solid transparent;
    box-shadow: 0px 0px 0px 2px #121943;
  }
  .toggle__input:disabled + .toggle-track {
    cursor: not-allowed;
    opacity: 0.7;
  }

  .toggle-track {
    background: #e5efe9;
    border: 1px solid #5a72b5;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    height: 30px;
    margin-right: 12px;
    position: relative;
    width: 60px;
  }

  .toggle-indicator {
    align-items: center;
    background: #121943;
    border-radius: 24px;
    bottom: 2px;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 2px;
    outline: solid 2px transparent;
    position: absolute;
    transition: 0.25s;
    width: 24px;
  }

  .checkMark {
    fill: #fff;
    height: 20px;
    width: 20px;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
  }

  .toggle__input:checked + .toggle-track .toggle-indicator {
    background: #121943;
    transform: translateX(30px);
  }
  .toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
  }

  @media screen and (-ms-high-contrast: active) {
    .toggle-track {
      border-radius: 0;
    }
  }