@import './variables.scss';
@import './mixins/_responsive.scss';
/*.ant-modal-mask, .ant-layout{
	-webkit-filter: blur(3px);
	filter: blur(3px);
}*/
.ant-modal-wrap{
    z-index: 1030;
}
.ant-modal{
    //top: 0!important;
    max-width: calc(95vw);
    top: auto;
	@include MQ(sm) {
		max-width: calc(84vw);
        top:100px;
	}
	// @include MQ(lg) {
	// 	top: 100px!important;
	// }
    
}

// Mobile like drawer
@media only screen and (max-width: 766px){
    .ant-modal-wrap{
        // display: flex;
        // align-items: center;

        .ant-modal:not(.ant-modal-confirm-confirm){
            position: fixed;
            top:0;
            left:0;
            width: 100%!important;
            max-width: calc(100vw);
            margin: 0;
            padding: 0;
            height: 100%;
            .ant-modal-content{
                width: 100%;
                height: 100%;
                display: flex;
                flex-flow: column nowrap;
                // padding-bottom: 40px;

                .ant-modal-close{
                    top:3px;
                    left: 10px;
                    right: auto;
                    background-color: var(--primary-background-color);
                    border-radius: 50%;
                    padding: 6px;
                    font-size: 20px;

                    .ant-modal-close-x{
                        width: 24px;
                        height: 24px;
                        line-height: 24px;
                        background: rgba(0, 0, 0, 0.45);
                        border-radius: 50%;
                        color: rgba(255, 255, 255, 0.80);
                    }
                    &:hover{
                        .ant-modal-close-x{
                            background: rgba(0, 0, 0, 0.75);
                        }
                    }
                }
                .ant-modal-header{
                    border-radius: 0;
                    box-shadow: var(--base-item-shadow);
                    z-index: calc(1 + 1);
                    padding: 6px 14px 6px 56px;
                    .ant-modal-title{
                        font-size: 16px!important;
                    }
                }
                .ant-modal-body{
                    position: relative;
                    overflow: auto;
                    height: 100%;
                    box-shadow: 0 22px 22px -22px rgba(15, 34, 58, 0.24) inset, 0 -22px 22px -22px rgba(15, 34, 58, 0.24) inset;
                    
                    .pms-form .action-bar-fixed{
                        padding: 15px 12px;
                        margin: 0!important;
                        display: flex;
                        bottom: 0;
                        align-items: center;
                        justify-content: space-between;
                        // .ant-col{
                        //     width: 100%;
                        // }
                        .pms-form-actions{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                        }

                        .ant-btn{
                            margin: 0!important;
                        }
                    }
                }
                .ant-modal-footer{
                    border-top: 1px solid var(--primary-background-color);
                    padding: 15px 12px;
                    z-index: 1;
                    text-align: center;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                    .ant-btn{
                        margin: 0!important;
                    }
                }
            }
        }
    }
}


.ant-modal .ant-modal-title{
	margin: 0!important;
	font-size: 22px!important;
	line-height: 30px!important;
	font-weight: 600!important;
	color: $primary-color!important;
	/*background: -webkit-linear-gradient(180deg, #00a0f5, #00f);
	background: -webkit-gradient(linear, left top, left bottom, from(#009ef6), to(#00f));
	background: -webkit-linear-gradient(top, #009ef6, #00f);
	background: -o-linear-gradient(top, #009ef6, #00f);
	background: linear-gradient(180deg, #009ef6, #00f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
}
.ant-modal .ant-modal-body{
/* 	background: #f0f2f5; */
    -webkit-overflow-scrolling: touch;
	background: $primary-background-color;
	padding: 14px;
	@include MQ(lg) {
		padding: 24px;
	}
}
.ant-modal .ant-modal-body h2{
    font-size: 1.2em;
}
.ant-modal .ant-modal-body p{
    font-size: 1em;
}
.ant-modal-footer{
	background: $primary-light-background-color;
	border-top: none;
	padding: 15px 24px;
}
.ant-modal .ant-modal-header{
	position: relative;
/* 	box-shadow: $base-item-shadow; */
 	border-bottom: none;
	background: $primary-light-background-color;
	padding: 6px 14px;
	@include MQ(lg) {
		padding: 16px 24px;
	}
    border-top-left-radius: var(--modal-title-radius);
    border-top-right-radius: var(--modal-title-radius);
}
.ant-modal .ant-modal-close .ant-modal-close-x{
	width: 42px;
    height: 42px;
	line-height: 42px;
	@include MQ(lg) {
		width: 56px;
    	height: 56px;
		line-height: 56px;
	}
}
.ant-confirm .ant-modal-body, .ant-modal .ant-modal-content{
/* 	background: #FFF; */
	background: $primary-background-color;
    border-top-left-radius: var(--modal-title-radius);
    border-top-right-radius: var(--modal-title-radius);
}
.modal-without-padding .ant-modal-body{
	padding: 0;	
}
.modal-white .ant-modal-body{
	background: $primary-light-background-color;
}
.ant-confirm-form.modal-white .ant-confirm-title-wrapper{
	margin-bottom: 0;
}
.ant-modal .main-container, .ant-modal .main-content, .ant-card .main-container, .ant-card .main-content{
	padding: 12px;
	@include MQ(lg) {
		padding: 20px;
	}
}
.modal-grey .ant-modal-body{
	background: #f3f3f3;
}

/* use css to set position of modal */
.vertical-center-modal {
    text-align: center;
    white-space: nowrap;
  }
  
  .vertical-center-modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }
  
  .vertical-center-modal .ant-modal {
    display: inline-block;
    vertical-align: middle;
    top: 0;
    text-align: left;
  }

.ant-modal.modal-actions{
    .ant-btn-block{
        margin-bottom: 20px;
    }
    .ant-btn-block:last-child{
        margin-bottom: 0px;
    }
}
.ant-modal.modal-preview{
    .ant-modal-body{
        padding:0;
        background: var(--primary-light-background-color);
    }
    .ant-modal-confirm-btns{
        padding: 10px 24px;
        margin: 0;
    }
    .ant-modal-confirm-content{
        margin: 0;
    }
}  
  /*
  // Use flex which not working in IE
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .vertical-center-modal .ant-modal {
    top: 0;
  }
  */
 .ant-drawer.no-padding{
    .ant-drawer-body{
        padding: 0;
    }
 }
 .ant-modal-wrap.custom-modal-title {
    .ant-modal-header{
        padding: 12px 20px 12px 20px;
    }
    .ant-modal-title{
        display: flex;
        align-items: center;
        
        .custom-modal-icon{
            // width: 70px;
            margin-right: 15px;
            .anticon{
                font-size: 17px;
                padding: 12px;
                border-radius: 50%;
                background-color: var(--secondary-light-background-color);

            }
        }
        .custom-modal-title{
            line-height: normal;
            font-size: 19px;
            small{
                display: block;
                margin-top: 5px;
                color: var(--primary-text-color-muted);
                font-weight: normal;
                font-size: 14px;
                line-height: 14px;
            }
        }
    }
}

.filter-modal{
    .ant-modal-body{
        padding-bottom: 0;
        .main-container{
            padding: 0;
        }
        .pms-form .ant-row{
            width: auto;
        }
        .pms-form-actions{
            margin: 20px 0;
            padding: 0 0 10px 0;
            text-align: center;
            min-height: auto;
            .ant-legacy-form-item-children{
                display: inline-block;
            }
            .ant-btn{
                margin: 0 10px;
            }
            &:hover{
                background: transparent;
            }
        }
    }
}
.ant-drawer{
    .ant-drawer-header{
        box-shadow: var(--base-item-shadow);
        border-bottom: none;
        z-index: calc(2 + 2);
        padding: 5px 5px 5px 5px;

        .ant-drawer-close{
            margin-left: 6px;
            margin-right: 10px;
            background-color: var(--primary-background-color);
            border-radius: 50%;
            padding: 6px 6px;
            font-size: 24px;
            
            // @media only screen and (max-width: 766px){
            //     order:1;
            // }

            &:hover{
                .anticon-close-circle{
                    color: var(--danger-color);
                }
            }
        }

        @include MQ(lg) {
            // padding: 0px 20px 0 10px;
            .ant-drawer-close{
                margin-right: 10px;
                padding: 6px 6px;
                font-size: 25px;
            }
        }
    }
}
.record-drawer.ant-drawer{
    .ant-drawer-content-wrapper{
        width: 100vw!important;
        max-width: 100%;
        @include MQ(lg) {
            max-width: calc(100vw - 80px);
        }
        .ant-drawer-body{
            padding: 0px;
            @include MQ(sm) {
                padding: 24px;
            }
        }
    }
    .ant-drawer-header{
        background: var(--primary-light-background-color);
    }
    &.reservation-drawer{
        .ant-drawer-header{
            // height: 90px;
            .heading-row{
                padding: 0;
                .heading-action-buttons{
                    margin: 0;
                    text-align: left;
                    @include MQ(sm) {
                        text-align: right;
                    }
                }
            }
            .reservation-item{
                padding: 0px 0 0 0;
                font-size: 14px;
                line-height: 20px;
                font-weight: normal;
                max-width: calc(100vw - 65px);
                .ant-typography{
                    font-size: inherit;
                    background: transparent;
                    text-align: left;
                    padding: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: keep-all;


                    &.ant-typography-edit-content{
                        height: 20px!important;
                        max-height: 20px!important;
                        padding: 0 0 0 0px!important;
                        overflow: hidden;
                        width: auto;
                        textarea{
                            width: 100%!important;
                            height: 20px!important;
                            max-height: 20px!important;
                            font-size: inherit;
                            line-height: 19px!important;
                            padding: 0px 0 0 12px!important;
                            margin: 0 0 0 0px!important;
                            border: none;
                            outline: none;
                            box-shadow: none;
                        }
                        // &-confirm{
                        //     display: inline-block;
                        // }
                    }
                    .anticon-edit{
                        font-size: 14px;
                    }
                }
                .ant-col:first-child{
                    flex: 0 0 40px!important;
                }
                &.ant-row{
                    flex-flow: initial;
                }
                .ant-avatar{
                    width: 30px!important;
                    height: 30px!important;
                    line-height: 30px!important;
                    font-size: 14px!important;
                    .ant-avatar-string{
                        line-height: 30px!important;
                    }
                }
            }
            @include MQ(sm) {
                .heading-row{
                    .heading-action-buttons{
                        text-align: right!important;
                    }
                }
            }
            @include MQ(lg) {
                padding: 11px 20px 11px 10px;
                // height: 64px;
                .reservation-item{
                    padding: 0px 0 0 0;
                    font-size: 16px;
                    line-height: 22px;
                    .ant-col:first-child{
                        flex: 0 0 45px!important;
                    }
                    .ant-avatar{
                        width: 35px!important;
                        height: 35px!important;
                        line-height: 35px!important;
                        font-size: 18px!important;
                        .ant-avatar-string{
                            line-height: 35px!important;
                        }
                    }
                }
            }
        }
        // .ant-drawer-title{
        //     .ant-btn.ant-btn-default{
        //         outline: 1px solid var(--secondary-dark-background-color);
        //     }
        // }
        .ant-drawer-body{
            padding: 0px;

            .ant-tabs-nav{
                position: sticky;
                top: 0;
                z-index: calc(2 + 2);
            }
            .ant-table-sticky-holder{
                top:46px!important;
            }
        }
    }
}

.filter-drawer.ant-drawer{
    z-index: 1090;
    .pms-form .ant-row{
        width: auto;
    }
    .ant-drawer-header{
        background: var(--primary-light-background-color);
    }
    .ant-drawer-content-wrapper{
        width: 100vw!important;
        max-width: 100%;
        @include MQ(sm) {
            max-width: 600px;
        }
        .main-container{
            padding: 0;
        }
        .ant-drawer-title{
            margin: 0!important;
            font-size: 16px!important;
            line-height: 16px!important;
            font-weight: 600!important;
            color: var(--primary-color)!important;
        }
        .ant-drawer-body{
            position: relative;
            padding: 12px;
            @include MQ(sm) {
                padding: 24px;
            }
        }
        .pms-form-actions{
            box-shadow: var(--base-item-shadow);
            text-align: unset;
            position: fixed;
            bottom: 0;
            min-height: auto;
            // width: 100%;
            width: 100vw!important;
            margin-left: -24px;
            margin-right: -24px;
            padding: 10px 16px;
            border-top: 1px solid var(--primary-background-color);
            background: var(--secondary-dark-background-color);
            @include MQ(sm) {
                max-width: 600px;
            }
            .ant-legacy-form-item-children{
                text-align: center;
                display: inline-block;
            }
            .ant-btn:first-child{
                float: left;
            }
            .ant-btn:last-child{
                float: right;
            }
            // &:hover{
            //     background: transparent;
            // }
        }
    }
}
.filter-drawer.ant-drawer.filter-drawer-actions{
    .ant-drawer-body{
        position: relative;
        padding: 12px 12px 65px 12px;
        @include MQ(sm) {
            padding: 24px 24px 65px 24px;
        }
    }
}