.layout-wrap {
    .section-content-right {
        @include transition3;
        .main-content {
            @include d-flex;
            flex-direction: column;
            min-height: 100vh;
            padding-top: 66px;
            padding-left: 320px;
            background: var(--Surface-3);
            transition: all 0.3s, background 0s ease;
            .main-content-inner {
                padding: 30px 30px 30px 30px;
                flex-grow: 1;
                .main-content-wrap {
                    width: 100%;
                    margin: auto;
                }
            }
            .bottom-page {
                @include flex(center,center);
                padding: 24px 8px 24px 24px;
                gap: 10px;
                background: var(--White);
                box-shadow: 0px 4px 24px 2px rgba(20, 25, 38, 0.05);
                .body-text {
                    color: #30303080;
                }
                a {
                    color: var(--Secondary);
                    &:hover {
                        color: var(--Main-Dark);
                    }
                }
            }
        }
    }
    &.full-width {
        .section-content-right {
            .main-content {
                padding-left: 0;
            }
            .header-dashboard {
                width: 100%;
                padding-left: 30px !important;
            }
        }
    }
}

.tf-section-2 {
    display: grid !important;
    gap: 30px 20px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.tf-section-3 {
    display: grid !important;
    gap: 30px 20px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.tf-section-4 {
    display: grid !important;
    gap: 30px 20px;
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.tf-section-5 {
    display: grid !important;
    gap: 30px 20px;
    grid-template-columns: repeat(3,minmax(0,1fr));
    > div {
        &:nth-child(1) {
            grid-column: span 2 / span 2 !important;
        }
        &:nth-child(2) {
            grid-column: span 1 / span 1 !important;
        }
    }
}

.button-zoom-maximize,
.button-dark-light {
    cursor: pointer;
}

.login-page {
    @include flex(center,center);
    align-items: stretch;
    min-height: 100vh;
    .left {
        width: 100%;
        background-image: url(../images/images-section/bg-login.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .login-box {
            @include flex(start,center);
            gap: 22px;
            flex-direction: column;
            padding: 30px;
            height: 100%;
            max-width: 540px;
            margin: 0 auto;
            h3 {
                color: var(--White);
                margin-bottom: 5px;
            }
            .bottom {
                margin-top: 18px;
            }
            input {
                color: var(--Surface-3);
                border: 1px solid #FFFFFF4D;
                background-color: transparent;
                &::placeholder {
                    color: var(--Surface-3);
                }
            }
            .tf-button {
                font-size: 16px;
                font-weight: 400;
            }
            &.type-signup {
                gap: 40px;
            }
        }
    }
    .right {
        width: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}


.offcanvas {
    width: 530px;
    border: none;
    padding: 30px;
    gap: 24px;
    &.offcanvas-end {
        border-radius: 14px 0px 0px 14px;
    }
    &.offcanvas-top {
        border-radius: 0px 0px 14px 14px;
        width: 100%;
    }
    &.offcanvas-start {
        border-radius: 0px 14px 14px 0px;
        height: 100%;
    }
    &.offcanvas-bottom {
        border-radius: 14px 14px 0px 0px;
        width: 100%;
    }
}
.offcanvas-header {
    padding: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #EDF1F5;
    h6 {
        color: #111111;
    }
    .btn-close {
        font-size: 18px;
        color: #111111;
        opacity: 1;
        border: none;
        outline: 0;
    }
}
.offcanvas-body {
    padding: 0;
    &::-webkit-scrollbar {
        width: 3px;
    }
    form {
        @include d-flex;
        flex-direction: column;
        gap: 20px;
        > fieldset {
            .body-title {
                color: #0A0A0C;
            }
            padding-bottom: 20px;
            border-bottom: 1px solid #EDF1F5;
            &:last-of-type {
                padding-bottom: 0;
                border-bottom: 0;
            }
        }
        .radio-buttons {
            display: grid !important;
            gap: 10px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            .item {
                width: 100%;
                max-width: 150px;
                input {
                    top: 10px;
                    left: 10px;
                }
                label {
                    width: 100%;
                    justify-content: start;
                    height: 44px;
                    padding: 12px 0 12px 40px;
                }
            }
        }
        &.form-theme-color {
            .radio-buttons {
                .item {
                    max-width: unset;
                    input {
                        width: 18px;
                        height: 18px;
                        font-size: 18px;
                        padding: 0;
                        border: none;
                        background-color: #fff !important;
                        &::before {
                            width: 18px;
                            height: 18px;
                            font-size: 18px;
                            border: none;
                            border-radius: 0;
                        }
                    }
                    label {
                        width: 40px;
                        height: 40px;
                        background-color: #FFFFFF;
                        border-radius: 14px;
                        border: 1px solid #EDF1F5;
                    }
                }
            }
        }
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}