.modal{
    .modal-dialog{min-width: 616px;}
    .modal-content{
        border-radius: 20px;
        padding-bottom: 42px;
        &.sign-up-fill{
            .desc.policy{
                margin-top: 21.3px;
                margin-bottom: 32px;
            }
        }
    }
    .modal-body{
        padding: 0 44px;
        padding-top: 46px;
    }
    .modal-title{
        font-family: "Pridi", sans-serif;
        font-weight: 500;
        font-size: 23px;
        text-align: center;
        width: 100%;
    }
    .close{
        border: 1px solid #707070;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #707070;
        font-size: 18px;
        padding: 0;
        margin: 0;
        opacity: 1;

    }
    .btn-back-fill{
        font-size: 37px;
        color: #707070;
        cursor: pointer;
    }
    .modal-header{
        padding: 0 21px;
        padding-top: 29px;
        padding-bottom: 27px;
    }
    .social{
        .link{
            height: 85px;
            line-height: 85px;
            border-radius: 50px;
            color: #fff;
            display: block;
            padding: 0 30px;
            font-size: 25px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            .icon{
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -2px;
                margin-right: 6px;
            }
            &.facebook{
                background-color: #3A5998;
            }
            &.google{
                background-color: #DD4B39;
            }
            &.apple{
                background-color: #000;
            }
            & + .link{
                margin-top: 30px;
            }
        }
    }

    .or{
        font-size: 22px;
        color: $color-mute;
        text-align: center;
        padding: 30px 0;
        font-weight: 300;
        font-family: 'Pridi', serif;
        position: relative;
        background-color: $color-light;
        &:before,
        &:after{
            content: '';
            position: absolute;
            top: 39px;
            width: 42%;
            height: 1px;
            border-top: 1px solid #E2E2E2;
        }
        &:before{left: 0;}
        &::after{right: 0;}
    }
    .mail{
        .link{
            border: 1px solid #ddd;
            height: 85px;
            line-height: 85px;
            border-radius: 50px;
            color: $color-darkgray;
            display: block;
            padding: 0 30px;
            font-size: 25px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            text-align: center;
            .icon{
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -2px;
                margin-right: 6px;
            }
        }
    }
    .action{
        text-align: center;
        font-family: "Pridi", sans-serif;
        font-size: 21px;
        font-weight: 300;
        margin-top: 30px;
        .link{text-decoration: underline; color: $color-darkgray;}
    }
    .desc.policy{
        font-family: 'Pridi', sans-serif;
        font-size: 21px;
        font-weight: 300;
        line-height: 1.4em;
        .link{text-decoration: underline; color: $color-darkgray;}
    }
    .modal-footer{
        border: none;
        margin-top: 67px;
        padding: 0 44px;
    }

    .form-default{
        .form-control{
            background-color: $color-light;
            padding: 5px 40px 5px 25px;
            border-radius: 0;
            &:focus ~ .floating-label,
            &:not(:placeholder-shown) ~ .floating-label{
                transition: all 200ms;
            }
        }
    }
    .remmember{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 12px;
        font-size: 21px;
        .checkbox-control{
            .icon{top: 4px;}
        }
        .title{font-size: 21px;}
    }
    .sign-in{
        .social{
            .link{
                color: $color-darkgray;
                border: 1px solid $color-darkgray;
                img{filter: brightness(0) invert(0);}
            }
        }
        .action{
            margin-top: 49px;
            .link{text-decoration: underline;}
        }
    }
    &.-review{
        .modal-dialog{max-width: 1078px;}
        .modal-title{font-weight: 300; font-size: 21px;}
        .image{
            .cover{
                position: relative;
                width: 185px;
                height: 182px;
                overflow: hidden;
                border-radius: 20px;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    object-fit: cover;
                }
            }
            .score-review{
                width: 100%;
                display: flex;
                padding-top: 12px;
                align-items: center;
                img{
                    filter: brightness(0) invert(0);
                    width: 16px;
                }
                .desc{
                    font-family: "Pridi", sans-serif;
                    font-weight: 300;
                    font-size: 19px;
                    padding-left: 7px;
                }
            }
        }
        .content{
            .title{
                font-family: "Mitr" , sans-serif;
                font-weight: 400;
                font-size: 32px;
                padding-bottom: 20px;
            }
            .score{
                font-size: 21px;
                padding-bottom: 38px;
                .rating{
                    padding-top: 10px;
                    .item-list{margin: 0 -5px; text-align-last: left;}
                    li{padding: 0 5px;}
                    .star{
                        background-position: left -66px;
                        width: 36px;
                        height: 36px;
                    //     cursor: pointer;
                    //     img{filter: brightness(1) invert(0); transition: all 200ms;}
                    //     &:hover,
                    //     &:hover ~ .star,
                    //     &.selected-star,
                    //     &.selected-star ~ .star{
                    //         img{filter: brightness(0) invert(0);}
                    //     }
                    }
                    .fullStar{background-position: left -100px;}
                    .tmp_fs{background-position: left 147px;}
                }
            }
            .title-review{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 21px;
                padding-bottom: 12px;
                .num-text{
                    float: right;
                    color: #bababa;
                }
            }
        }
        .form-default{
            .form-control{padding: 14px 40px 5px 25px;}
        } 
        .action{
            margin-top: 32px;
            text-align-last: left;
            .btn{
                font-family: "Mitr" , sans-serif;
                font-weight: 400;
                font-size: 25px;
                min-width: 326px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    &.-awards{
        .modal-dialog{max-width: 1078px;}
        .modal-title{font-weight: 300; font-size: 21px;}
        .modal-body{
            .image{
                width: 160px;
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 14px 0;
                border: 1px solid #DEDEDF;
                .cover{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    img{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        object-fit: contain;
                    }
                }
            }
            .desc{
                .title{
                  font-family: "DMSans", sans-serif;
                  font-weight: bold;
                  font-size: 21px;
                  line-height: 1.4em;  
                }
                .price{
                    font-family: "Pridi",sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    margin-top: 11px;
                    span{
                        font-family: "DMSans", sans-serif;
                        font-weight: 500;
                        font-size: 16px;
                    }
                }
                .use-points{
                    font-family: "Pridi",sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    color: $color-danger;
                    margin-top: 12px;
                }
            }
            .form-default{
                .desc{
                    margin-top: 20px;
                    .title-edit{
                        font-size: 25px;
                        padding-bottom: 25px;
                    }
                }
                .form-control{
                    background-color: #f8f7f5;
                    height: 54px;
                    border-radius: 5px;
                }
                .select2-container--default .select2-selection--single{border-radius: 5px;}
                .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, 
                .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                }
            } 
            .action{
                .btn{min-width: 326px}
            }
        }
        .awards-confirm{
            .modal-header{
                .head{
                    font-size: 32px;
                }
            }
            .desc{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                max-width: 341px;
                .number-order{
                    font-weight: 400;
                    font-size: 21px;
                    margin-bottom: 21px;
                }
                .desc-order{
                    & > div{
                        font-weight: 400;
                        font-size: 21px;
                        margin-bottom: 7px;
                    }
                    font-weight: 300;
                    font-size: 21px;
                    line-height: 1.4em;
                }
            }
        }
    }
    &.-gallery{
        .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;
            }
        }
    }
}

.showPSW{
    position: absolute;
    top: 10px;
    right: 40px;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
    background-color: $color-light;
}