HOME

/* ---------------------------------------------------------------- */
/* 06.Form(Input, Comment)                             
/* ---------------------------------------------------------------- */
.custom-modal {
	.modal-header {
		text-align: center;
		padding: 10px 20px;
		button {
			background: transparent;
			border: none;
			span {
				font-size: 35px;
			}
		}
		h5,button {
			color: $color_white;
		}
		&.danger {
			background: $color_danger;
			color: $color_white;
		}
		&.success {
			background: $color_secondary;
			color: $color_white;
		}
	}
	.modal-body {
		padding: 20px;
		.form-popup-inner {
			text-align: center;
			.form-icon {
				margin-bottom: 30px;
				svg {
					width: 100px;
					height: 100px;
					border-radius: 50%;
				}
				&.danger {
					svg {
						fill: $color_danger;
						stroke: $color_danger;
						background: rgba($color_danger,0.1);
					}
				}
				&.success {
					svg {
						fill: $color_secondary;
						stroke: $color_secondary;
						background: rgba($color_secondary,0.1);
					}
				}
			}
		}
	}
	.modal-footer {
		padding: 20px;
		justify-content: center;
	}
	.popup-btn {
		font-weight: 500;
		padding: 10px 15px;
		text-align: center;
		border-radius: 5px;
		display: inline-block;
		transition: all 0.5s ease;
		text-transform: capitalize;
		color: $color_white !important;
		&:hover {
			color: $color_white !important;
			box-shadow: none;
		}
		&.danger {
			background: $color_danger;
			box-shadow: 0 10px 15px 0 rgba($color_danger,0.1);
			&:hover {
				background: darken($color_danger,10%);
			}
		}
		&.success {
			background: $color_secondary;
			box-shadow: 0 10px 15px 0 rgba($color_secondary,0.1);
			&:hover {
				background: darken($color_secondary,10%);
			}
		}
	}
}
.path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
}
.path.circle {
	animation: dash 0.9s ease-in-out;
}
.path.line {
	stroke-dashoffset: 1000;
	animation: dash 0.9s 0.35s ease-in-out forwards;
}
.path.check {
	stroke-dashoffset: -100;
	animation: dashCheck 0.9s 0.35s ease-in-out forwards;
}
#error_message {
	margin-top: 30px;
	display: block;
	padding: 20px;
	border-radius: 5px;
	word-break: break-word;
    font-weight: 500;
    border-left: 2px solid $color_danger;
    color: darken($color_danger,10%);
    background: rgba($color_danger, 0.1);
}
body[style],header[style] {
    padding-right:0 !important;
}
.modal-open {
    overflow: auto;
    padding-right:0 !important;
}
.comment-item {
    margin-bottom: 30px;
	transition: all 0.5s ease;
    display: flex;
	align-items: flex-start;
    p {
        margin-bottom: 15px !important;
    }
    .comment-item-title {
        margin-bottom: 8px;
	}
	.img {
		padding: 10px;
		flex: 0 0 120px;
		border-radius: 50%;
		margin-right: 20px;
		display: inline-block;
		border: 2px solid $color_primary;
		img {
			border-radius: 50%;
		}
	}
    .comment-meta {
        margin-bottom: 9px;
        span {
            display: inline-block;
            margin-right: 10px;
            color: $color_black;
            font-size: 14px;
            font-weight: 600;
            i {
                margin-right: 10px;
                color: $color_primary;
            }
        }
	}
	.comment-item-body {
		padding-bottom: 20px;
		border-bottom: 1px solid rgba($color_black, 0.05);
	}
    .reply-btn {
		font-size: 14px;
		font-weight: 500;
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 10px 15px;
		border-radius: 50px;
		display: inline-block;
		color: $color_dark_blue;
		transition: all 0.5s ease;
		border: 1px solid $color_soft_grey;
		&:hover {
			background:$color_primary;
			border-color: transparent;
			color: $color_white !important;
			i {
				color: $color_white !important;
			}
		}
        i {
            vertical-align: -1px;
            margin-right: 7px;
            display: inline-block;
			color: $color_primary;
			transition: all 0.5s ease;
        }
    }
    &.sub-comment-item {
        margin-left: 120px;
    }
}
.leave-comment-wrapper {
    .comment-form-group {
        margin-bottom: 20px;
        position: relative;
        .form-control {
			height: 60px;
			color: $color_black;
            outline: none;
            border: none;
			padding: 0 30px 0 30px;
            border-radius: 30px;
            transition: all 0.25s ease;
            box-shadow: 0 10px 15px 0 rgba($color_primary, 0.1);
			&:focus {
				outline: none;
				color: $color_black;
			}
		}
		textarea.form-control {
			height: auto;
			padding-top: 20px;
		}
    }
    button {
        border: none;
    }
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query (575px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width:575.98px) {
    .comment-item {
		display: block;
		.img {
			margin-right: 0;
			margin-bottom: 20px;
		}
	}
}