.profile-page{
    margin-top: 112px;
    min-height: 500px;
    padding-top: 80px;
    padding-bottom: 96px;
    overflow: hidden;
    .wrapper-profile,
    .menu-profile{margin-left: 72px; width: 374px;}
    .wrapper-profile{
        border: 1px solid #DFDFDF;
        padding-top: 20px;
        padding-bottom: 15px;
        .img-profile{
            .cover{
                position: relative;
                width: 161px;
                height: 161px;
                border-radius: 50%;
                margin: 0 auto;
                overflow: hidden;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    object-fit: cover;
                }
            }
            .custom-file-input{cursor: pointer;}
            .custom-file-input:lang(en) ~ .custom-file-label:after{display: none;}
            .custom-file-input:focus ~ .custom-file-label{box-shadow: none;}
            .edit-pic{
                margin-top: 8.7px;
                .custom-file-label{
                    font-family: "Pridi",sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    cursor: pointer;
                    border: none;
                    text-align: center;
                    text-decoration: underline;
                }
            }
        }
        .text-name{
            text-align: center;
            margin-top: 8.3px;
            font-family: "DMSans", sans-serif;
            font-weight: bold;
            font-size: 35px;
            padding-bottom: 14.7px;
            line-height: 1em;
        }
        .b-rank{
            border-top: 1px solid #DFDFDF;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 14px;
            .icon-rank{margin-right: 20px;}
            .name-rank{
                font-family: "Pridi" ,sans-serif;
                font-weight: 300;
                font-size: 21px;
                text-align: center;
                line-height: 1.6em;
                strong{
                    font-family: "Mitr" ,sans-serif;
                    font-weight: 500;
                    font-size: 30px;
                }
            }
        }
    }
    .menu-profile{
        .item-list{margin-top: 33px;}
        li{
            width: 100%;
            background-color: #f8f7f5;
            transition: all 200ms;
            & + li{border-top: 1px solid #E2E2E2;}
            &.active{
                .link{font-weight: 500;}
            }
            &.active,
            &:hover{
                background-color: $color-danger;
                .link{
                    color: $color-light;
                    .img-icon{background-color: $color-light;}
                }
            }
        }
        .text{margin-left: 60px;}
        .link{
            font-family: "Pridi" , sans-serif;
            font-weight: 300;
            font-size: 25px;
            color: $color-darkgray;
            display: flex;
            align-items: center;
            padding: 17px 24px;
            transition: all 200ms;
            .img-icon{
                width: 58px;
                height: 58px;
                border-radius: 50%;
                background-color: $color-none;
                display: flex;
                align-items: center;
                justify-content: center;
                float: left;
                transition: all 200ms;
            }
        }
    }
    .h-title{
        font-weight: 500;
        font-size: 36px;
        padding-bottom: 45px;
        margin: 0;
        &.-fav{padding-bottom: 0;}
    }
    .action{
        margin-top: 23px;
        &.-edit{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        &.-trip{
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        &.-history{
            margin-top: 0;
            .btn-review{
                width: 100%;
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 21px;
                min-width: 288px;
                background-color: $color-success;
                color: $color-light;
            }
        }
    }
    .help-block{text-align: right;}
    .btn-profile{
        font-family: "Pridi", sans-serif;
        font-weight: 300;
        font-size: 21px;
        border: 1px solid #707070;
        min-width: 288px;
    }
    .form-default{
        .select2-container--default .select2-selection--single{border-radius: 5px;}
        .select2-container--default .select2-selection--single .select2-selection__rendered{color: #b2b2b2; line-height: 54px; font-size: 21px;}
        .form-control{
            padding: 10px 40px 10px 25px;
            height: 54px;
            &::placeholder{color: #b2b2b2; font-size: 21px;}
        }
        textarea{height: auto !important;}
        .select2-container .select2-selection--single{height: 54px;}
    }
    .btn-cancel{
        font-family: "Pridi", sans-serif;
        font-weight: 300;
        font-size: 21px;
        min-width: 288px;
    }
    .text-help{
        font-family: "Pridi", sans-serif;
        font-weight: 300;
        font-size: 19px;
        margin-top: 9px;
        color: #b2b2b2;
        text-align: right;
    }
    .nav-my-trip{
        li{
            width: calc(100% / 3);
            border-bottom: 1px solid #DFDFDF;
            position: relative;
            .link{
                position: relative;
                &:before{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 6px;
                    background-color: #c45741;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    transform: scaleX(0);
                    transition: all 400ms;
                }
                &.active,
                &:hover{
                    &:before{transform: scaleX(1);}
                }
            }
            
            // &:nth-child(1){
            //     &:before{width: 75%;}
            // }
            &:nth-child(2){
                .link{margin: 0 auto;}
            }
            &:nth-child(3){
                .link{float: right;}
            }
            
        }
        &.-style-ii{
            li{
                width: calc(100% / 2);
            }
        }
        .link{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 23px;
            color: $color-darkgray;
            padding: 8.5px;
            padding-bottom: 16px;
            max-width: fit-content;
        }
    }
    .dropdown-menu{
        transform: translate(-180px, 10px) !important;
        border: none;
        box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: 0.1);
        padding: 7px;
        min-width: 180px;
        img{width: 28px;}

    }
    .pagination{
        .active{
            .link{
                background-color: $color-darkgray;
                color: $color-light;
            }
        } 
    } 
    .trip-filter{
        margin-top: 51px;
        margin-bottom: 46px;
        .sort{padding-top: 0;}
        .form-group{margin: 0;}
        .form-control{width: 303px;}
        .block-control{
            position: relative;
            .btn-search{
                position: absolute;
                top: -5px;
                left: 250px;
                width: auto;
                min-width: auto;
                img{
                    width: 32px;
                    filter: brightness(0) invert(0);
                    transition: all 200ms;
                }
                &:hover{
                    img{filter: brightness(1) invert(0);}
                }
            }
        }
    }
    .trip-cancel{
        .item-list{margin-top: 27px;}
        li{
            width: 100%;
            padding: 35px 0;
            background-color: transparent;
            transition: all 200ms;
            position: relative;
            &:not(:last-child){border-bottom: 1px solid #DFDFDF;}
            &:before{
                content: '';
                position: absolute;
                top: 0;
                left: -86px;
                bottom: 0;
                right: 0;
                width: 100vw;
                height: 100%;
                background-color: transparent;
                transition: all 200ms;
            }
            &:hover{
                &:before{
                    background-color: #f8f7f5;
                }
            }
        }
        .wrapper{
            .cover{
                position: relative;
                width: 140px;
                height: 140px;
                border-radius: 20px;
                overflow: hidden;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    object-fit: cover;
                }
            }
            .title{
                font-weight: 300;
                font-size: 30px;
                line-height: 1em;
            }
            .trip-progress{
                font-family: "Pridi" , sans-serif;
                font-weight: 400;
                font-size: 21px;
                color: $color-danger;
                line-height: 1em;
                margin-top: 10px;
                &.success{color: #bababa;}
            }
            .desc{
                font-weight: 300;
                font-size: 21px;
                line-height: 1em;
                margin: 0;
                position: absolute;
                bottom: 0;
            }
            .action{
                margin-top: 0;
                .btn-follow-payment{
                    font-family: "Pridi" , sans-serif;
                    font-weight: 300;
                    font-size: 21px;
                    border: 1px solid $color-darkgray;
                    background-color: $color-light;
                    min-width: 263px;
                    &:hover{background-color: $color-darkgray;}
                }
            }
        }
    }

    &.trip-detail{
        padding: 0;
        .content{width: 100%;}
        .title{
            padding-top: 79px;
            padding-bottom: 60px;
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 23px;
        }
        .h-title{
            font-weight: 400;
            font-size: 39px;
            text-decoration: underline;
            padding-bottom: 25px;
        }
        .rating-review{
            display: flex;
            align-items: center;
            img{
                width: 16px;
                filter: brightness(0) invert(0);
            }
            .desc{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 19px;
                color: #b2b2b2;
                padding-left: 7px;
            }
        }
        .b-icon{
            // width: 100%;
            // padding-right: 75px;
            // display: flex;
            .item-list{
                margin: 0 -24px;
                li{padding: 0 24px;}
            }
            .detail{
                cursor: pointer;
                .feather{font-size: 36px;}
            }
            .text{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 15px;
                color: $color-success;
                text-decoration: underline;
                text-align: center;
                padding-top: 9px;
            }
            .social-list{
                margin: 0 -2px;
                li{padding: 0 2px;}
            }
        }
        .favorite{
            // position: absolute;
            width: 40px;
            height: 46px;
            // top: 25px;
            // left: 42%;
            z-index: 1;
            .b-fav{
                cursor: pointer;
                position: relative;
                .fa-heart-o{color: $color-light; font-size: 38px;}
                .fr-main{opacity: 1; transition: all 200ms; filter: brightness(0);}
                .fr-hover{
                    position: absolute;
                    top: 0;
                    right: 0;
                    left: 0;
                    bottom: 0;
                    object-fit: contain;
                    opacity: 0;
                    filter: brightness(0);
                    transition: all 200ms;
                }
                &.active{
                    .fr-main{opacity: 0;}
                    .fr-hover{opacity: 1; filter: brightness(1) invert(0);}
                }
                &:hover{
                    .fr-main{opacity: 0;}
                    .fr-hover{opacity: 1;}
                }
            }
            .feather{
                font-size: 40px;
                color: $color-light;
            }
        }
        .block{
          font-family: "Pridi" , sans-serif;
          font-weight: 300;
          font-size: 21px; 
          line-height: 1.4em;
          strong{font-weight: 500;}
          &.-mt{margin-top: 63px;}
          &.-pb{padding-bottom: 90px;}
          .link{color: $color-danger; text-decoration: underline;}
        }
        .line{margin: 25px 0;}
        .zone{
            font-family: "Pridi", sans-serif;
            font-weight: 500;
            font-size: 21px;
            .item-list{
                margin: 0 -8.5px;
                li{padding: 0 8.5px; margin-bottom: 10px;}
                .icon{
                    font-family: "DMSans", sans-serif;
                    font-weight: bold;
                    font-size: 25px;
                    color: $color-light;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    background-color: $color-danger;
                    &.-cancelled{background-color: #bababa;}
                }
            }
        }
        .action{
            &.follow-payment{
                position: absolute;
                right: 0;
                top: 0;
                margin: 0;
            }
        }
        .btn-follow-payment{
            font-family: "Pridi" , sans-serif;
            font-weight: 300;
            font-size: 21px;
            border: 1px solid #282828;
            background-color: #fff;
            min-width: 263px;
            &:hover{background-color: $color-darkgray;}
        }

        .desc{
            &.-line-dashed{
                position: relative;
                &:before{
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: calc(100% - 123px);
                    top: 32px;
                    left: 13px;
                    border-right: 1px dashed #707070;
                }
            }
        }
        .price-sum{margin-bottom: 32px;}
        .zone-price{
            width: 360px;
            margin-left: 58px;
            padding-bottom: 22px;
            &:not(:last-child){
                border-bottom: 1px solid #DFDFDF;
                margin-bottom: 21px;
            }
            .box{
                width: 56px;
                height: 56px;
                border: 1px solid #707070;
                font-family: "DMSans", sans-serif;
                font-weight: bold;
                font-size: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 16px;
                position: relative;
                // &:before{
                //     content: '';
                //     position: absolute;
                //     top: 30px;
                //     left: -46px;
                //     width: 80%;
                //     height: 1px;
                //     border-top: 1px dashed #707070;
                // }
            }
        }
        .wrapper-line{
            ul,
            li,
            li > div{
                position: relative;
                &:before,
                &:after{
                    content: '';
                    position: absolute;
                    border-left: 1px dashed #707070;
                }
            }
            ul{
                padding-top: 1em;
                // & > li{padding: 1em 0 0 1em;}
            }
            & > li{
                ul{
                    &:before{
                        height: 0.7em;
                        top: 10px;
                        left: 16px;
                        width: 1px;
                    }
                    & > li{
                        &:not(:last-of-type){
                            &:before{
                                height: 3px;
                                left: 25px;
                                top: 1.4em;
                                width: 8%;
                                border-left: none;
                                border-top: 1px dashed #707070;
                            }
                            &:after{
                                height: 99%;
                                left: 25px;
                                top: 0;
                                width: 3px;
                            }
                            & > div{
                                border-bottom: 1px solid #E2E2E2;
                                margin-bottom: 21px;
                            }
                        }
                        &:last-of-type{
                            &:before{
                                height: 3px;
                                left: 25px;
                                top: 1.4em;
                                width: 8%;
                                border-left: none;
                                border-top: 1px dashed #707070;
                            }
                            &:after{
                                height: 1.4em;
                                left: 25px;
                                top: 0;
                                width: 3px;
                            }
                        }
                    }
                }
                & > ul{
                    &:before{
                        left: 25px;
                    }
                    &:after{
                        left: 0;
                        width: 100%;
                    }
                }
            }
        }
        .btn-cancel{text-decoration: underline;}
    }
    .gallery-list{
        width: calc(100vw - 100%);
        height: calc(100vh - 200px);
        .cover{padding-bottom: 100%;}
        .slick-prev, 
        .slick-next{
            border: none;
            top: 40%;
            width: auto;
            height: auto;
            font-size: 185px;
        }
        .slick-prev{left: 50px;} 
        .slick-next{right: 24%;}
    }
    .num-review{
        font-family: "DMSans", sans-serif;
        font-weight: bold;
        font-size: 25px;
        display: flex;
        align-items: center;
        height: 100%;
        div{
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background-color: $color-danger;
            color: $color-light;
            font-weight: bold;
            font-size: 24px;
            text-align: center;
            line-height: 62px;
            margin-right: 14px;
        }
    }
    .review-i{
        li{
            width: 100%;
            padding: 40px 0;
            &:not(:last-child){
                border-bottom: 1px solid #E2E2E2;
            }
            .wrapper{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                .cover{
                    position: relative;
                    width: 131px;
                    height: 131px;
                    margin-right: 84px;
                    img{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        object-fit: cover;
                    }
                }
                .title{
                    font-weight: 500;
                    font-size: 21px;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .t-review{max-width: calc(100% - 120px); line-height: 1em;}
                    .date{
                        font-weight: 300;
                        font-size: 19px;
                        color: #b2b2b2;
                    }
                }
                .rating-star{margin-top: 8px;}
                .desc{
                    font-size: 21px;
                    line-height: 1.5em;
                    margin-top: 19px;
                }
            }
        }
    }
    &.awards{
        .my-rank{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            padding-top: 27px;
            padding-bottom: 24px;
        }
        .progress-rank{
            .item-list{margin: 0 -130px;}
            li{
                width: calc(100% / 3);
                position: relative;
                text-align: center;
                padding: 0 130px;
                &:after{
                    content: '';
                    position: absolute;
                    width: 120%;
                    height: 30px;
                    background-color: #ebebeb;
                    top: 80px;
                    left: -60%;
                    z-index: -1;
                }
                &:first-child{
                    &:after{content: none;}
                }
                .main{display: none;}
                &.active{
                    .desc{
                        margin-bottom: 20px;
                        .text{
                            font-size: 39px;
                            color: $color-success;
                        }
                        .up-level{display: none;}
                    }
                    .main{display: block;}
                    .second{display: none;}
                    &:after{background-color: $color-success;}
                }
            }
            .desc{
                .text{
                    font-family: "Mitr" , sans-serif;
                    font-weight: 400;
                    font-size: 21px;
                    color: #bababa;
                }
                .up-level{
                    font-weight: 300;
                    font-size: 16px;
                }
            }
        }
        .wrapper-progress-bar{
            position: relative;
            width: 100%;
            height: 30px;
            background-color: #e2e2e2;
            border-radius: 20px;
            .progress-bar{
                position: absolute;
                top: 8px;
                left: 10px;
                height: 15px;
                border-radius: 20px;
                background-color: $color-success;
                max-width: 98%;
                transition: all 200ms;
            }
        }
        .wrapper-progress{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            width: 100%;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        .desc-awards{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            padding-top: 26px;
            line-height: 1;
            div{
                font-family: "DMSans", sans-serif;
                font-weight: bold;
                font-size: 65px;
                color: $color-success;
            }
        }
        .award-list{
            margin-top: 19px;
            .slick-list{
                margin: 0 -28px;
                .item{padding: 0 28px;}
            }
            .slick-dots{
                bottom: -40px;
                li{
                    button{
                        box-shadow: 0 3px 6px rgba($color: #000000, $alpha: 0.1);
                        background-color: $color-danger;
                    }
                    &.slick-active{
                        button{background-color: $color-danger;}
                    }
                }
            }
            .wrapper{
                border: 1px solid #DEDEDF;
                border-top: 5px solid $color-danger;
                .image{
                    width: 100%;
                    height: 248px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border-bottom: 1px solid #DEDEDF;
                    position: relative;
                }
                .desc{
                    padding: 6.5px 19px 17px 19px;
                    .points{
                        font-family: "DMSans", sans-serif;
                        font-weight: bold;
                        font-size: 36px;
                        line-height: 0.5em;
                        color: $color-danger;
                        margin-top: 8px;
                        span{
                            font-family: "Pridi", sans-serif;
                            font-weight: 300;
                            font-size: 16px;
                        }
                    }
                    .title{
                        font-family: "DMSans", sans-serif;
                        font-weight: bold;
                        font-size: 21px;
                        line-height: 1.2em;
                        &.text-limit{
                            max-height: calc(1.2em * 2);
                            -webkit-line-clamp: 2;
                        }
                    }
                    .price{
                        font-family: "Pridi",sans-serif;
                        font-weight: 300;
                        font-size: 16px;
                        span{
                            font-family: "DMSans", sans-serif;
                            font-weight: 500;
                            font-size: 16px;
                        }
                    }
                    .action{
                        .btn{min-width: 100%;}
                    }
                }
                &.-traveler,
                &.-conqueror{
                    border-top: 5px solid #BABABA;
                    .image{
                        &:before{
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            width: 100%;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            background-color: #dededf;
                        }
                        &:after{
                            content: '';
                            position: absolute;
                            width: 40px;
                            height: 50px;
                            background-image: url(./../img/icon/lock-gray.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                            top: 10px;
                            right: 10px;
                        }
                    }
                    .action{
                        .btn{
                            background-color: #dededf;
                            pointer-events: none;
                        }
                    }
                }
                &.-traveler{
                    .image{
                        &:before{
                            content: 'สำหรับสมาชิกระดับนักเดินทาง';
                        }
                    }
                }
                &.-conqueror{
                    .image{
                        &:before{
                            content: 'สำหรับสมาชิกระดับผู้พิชิตยอดเขา';
                        }
                    }
                }
            }
        }
    }
    &.coupon{
        .b-coupon{
            padding-top: 38px;
            .item-list{
                margin: 0 -36px;
                li{
                    padding: 20px 36px; width: 100%;
                    &:not(:last-child){
                        border-bottom: 1px solid #DFDFDF;
                    }
                    .link{
                        font-family: "Pridi", sans-serif;
                        font-weight: 300;
                        font-size: 16px;
                        text-decoration: underline;
                        color: $color-darkgray;
                    }
                }
            }
        }
        .form-group{margin: 0; position: relative;}
        .form-control{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            background-color: $color-light;
            height: 52px;
            border: 1px solid $color-darkgray;
            border-radius: 0;
            pointer-events: none;
        }
        .copy-code{
            position: absolute;
            font-family: "DMSans", sans-serif;
            font-weight: 500;
            font-size: 16px;
            color: #bababa;
            border: none;
            background-color: $color-none;
            outline: 0;
            top: 50%;
            right: 10px;
            transform: translate(0, -60%);
        }
        .desc{
            margin: 0;
            font-size: 21px;
            span{
                font-size: 16px;
            }
        }
        li{
            &.exp{
                .form-control{
                    height: 52px;
                    color: #B2B2B2;
                    border: 1px solid #B2B2B2;
                    border-radius: 0;
                    pointer-events: none;
                }
                .copy-code{display: none;}
                .desc{color: #bababa;}
                .link{color: $color-none; pointer-events: none; opacity: 0;}
            }
        }
    }
    &.setting{
        .action{
            .btn{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 21px;
                min-width: 288px;
            }
        }
        .wrapper{
            &.disable{
                .b-title{
                    color: #b2b2b2;
                }
            }
            .link{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 18px;
                text-decoration: underline;
                color: $color-darkgray;
            }
        }
        .b-title{
            .title{
                font-family: "Pridi", sans-serif;
                font-weight: 500;
                font-size: 21px;
            }
            .desc{
                font-size: 21px;
                margin-top: 16px;
            }
        }
        .switch{
            position: relative;
            display: inline-block;
            width: 62px;
            height: 33px;
            input{
                opacity: 0;
                width: 0;
                height: 0;
                &:checked{
                    & + .slider{
                        background-color: $color-danger;
                        &:before{
                            transform: translateX(29px);
                        }
                    }
                }
                &:focus{
                    & + .slider{
                        box-shadow: 0 0 1px $color-danger;
                    }
                }
            }
            .slider{
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #B2B2B2;
                transition: all .4s;
                &:before{
                    position: absolute;
                    content: '';
                    height: 26px;
                    width: 26px;
                    left: 4px;
                    bottom: 4px;
                    background-color: $color-light;
                    transition: all .4s;
                }
                &.round{
                    border-radius: 34px;
                    &:before{border-radius: 50%;}
                }
            }
        }
    }
}
.line{
    width: 100%;
    height: 1px;
    border-top: 1px solid #DFDFDF;
    margin: 34px 0;
}
.sort{
    &.-style-ii{
        li{
            border-top: 1px solid $color-darkgray;
            border-bottom: 1px solid $color-darkgray;
            border-left: 1px solid $color-darkgray;
            min-width: 156px;
            &:last-child{border-right: 1px solid $color-darkgray;}
        }
    }
}
.P-review{padding-top: 54px;}
.select2-container--open .select2-dropdown--below{border: 1px solid #DEDEDF; border-radius: 5px; overflow: hidden; top: 8px;}
.select2-results__option{background-color: $color-light;}
.select2-container--default .select2-results > .select2-results__options{font-family: "Pridi", sans-serif;}
.profile-detail{
    .desc{
        font-family: "Pridi" , sans-serif;
        font-weight: 300;
        font-size: 25px;
        line-height: 1.3em;
        margin-top: 23px;
        .title{
            font-weight: 500;
        }
        .title-edit{margin-bottom: 13px;}
    }
    .year{
        font-family: "DMSans" , sans-serif;
        font-weight: 500;
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 45px;
    }
    .card{
        margin-top: 0;
        border: 1px solid #BABABA;
        &.-history,
        &.-favorite{
            width: 809px;
            margin-top: 35px;
            .favorite{left: 42%;}
        }
        &.-favorite{
            .body{
                padding: 18px 24px 0 30px;
                .detail{
                    font-size: 16px;
                    strong{
                        font-family: "DMSans", sans-serif;
                        font-weight: 500;
                        font-size: 30px;
                    }
                }
            }
        }
        .favorite{left: 38%;}
        .body{
            border-left: 1px solid #BABABA;
            .desc{
                font-family: "Mitr", sans-serif;
                font-weight: 400;
                margin-top: 0;
                padding-top: 5px;
                line-height: 1.4em;
                &.text-limit{height: calc(1.4em * 2); -webkit-line-clamp: 2; white-space: unset;}
                &.text-date{
                    margin-top: 35px;
                    font-size: 30px;
                    font-weight: 300;
                    color: $color-darkgray;
                }
            }
            .detail{
                strong{
                    font-family: "Mitr", sans-serif;
                    font-weight: 300;
                    font-size: 30px;
                }
            }
            .dropdown{
                .detail{cursor: pointer;}
            }
        }
    }
    .wrapper-date-trip{
        width: 131px;
        height: 131px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #707070;
        border-radius: 20px;
        line-height: 1.6em;
        .text{
            font-family: "Pridi", sans-serif;
            font-size: 21px;
            font-weight: 300;
        }
        strong{font-size: 30px; font-weight: 500;}
    }
}