.function-from-template-content {
    .ncl-function-from-template-color-set();

    padding: 0 72px 0 63px;

    .configuration-form {
        display: flex;

        .function-name-wrapper {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 2px;

            .projects-drop-down {
                width: 40%;
                margin-right: 48px;

                .input-label {
                    font-size: 14px;
                    font-weight: 600;
                    color: @dusk-three;
                }

                igz-default-dropdown {
                    .default-dropdown {
                        background-color: @white;

                        .default-dropdown-field {
                            &:focus {
                                background-color: inherit;
                            }
                        }
                    }
                }
            }

            .function-name {
                width: 100%;

                .input-label {
                    font-size: 14px;
                    font-weight: 600;
                    color: @dusk-three;
                }

                igz-validating-input-field {
                    margin-left: 2px;
                }
            }
        }
    }

    .templates-wrapper {
        .title {
            font-size: 16px;
            font-weight: bold;
            color: @dusk-three;
        }

        .templates-controls {
            display: flex;
            padding-right: 16px;
            margin-top: 2px;
            height: 55px;

            .templates-search-input {
                width: 66%;
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: flex-end;
                margin-right: 20px;

                .search-icon {
                    color: @greyish-purple;
                    font-size: 18px;
                    position: absolute;
                    left: 8px;
                    top: 24px;
                }

                .input-field {
                    width: 100%;
                    border: none;
                    background-color: transparent;
                    color: @greyish-purple;
                    border-bottom: 1px solid @greyish-purple;
                    padding: 3px 0 9px 32px;

                    &:focus {
                        outline: none;
                        color: @dusk-three;
                        border-bottom: 1px solid @light-blue-two;
                    }
                }
            }

            .templates-runtime-drop-down {
                width: 13%;

                .input-label {
                    font-size: 14px;
                    font-weight: 600;
                    color: @dusk-three;
                }

                igz-default-dropdown {
                    .default-dropdown {
                        background-color: @white;

                        .default-dropdown-field {
                            &:focus {
                                background-color: inherit;
                            }
                        }
                    }
                }
            }

            .templates-pagination {
                min-width: 241px;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;

                .title {
                    font-size: 13px;
                    font-weight: normal;
                    color: @dusk-three;
                }

                .igz-pagination {
                    padding-right: 0;
                    padding-bottom: 0;
                }
            }
        }

        .function-templates {
            .function-templates-form {
                display: flex;
                position: relative;
                flex-flow: row wrap;
                align-items: flex-start;
                margin-top: 32px;

                .function-template-wrapper {
                    width: 352px;
                    min-height: 169px;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
                    margin: 0 16px 14px 0;
                    position: relative;

                    &:hover,
                    &.selected {
                        .function-template {
                            position: absolute;
                            box-shadow: inherit;

                            .function-template-content {
                                .template-description {
                                    max-height: unset;
                                }

                                .template-read-more {
                                    display: none;
                                }
                            }
                        }
                    }

                &.last-line.selected, &:hover.last-line {
                    .function-template {
                        position: relative;
                    }
                }

                &.selected {
                    .function-template {
                        border: 2px solid @template-tile-border-color;
                        z-index: 2;

                            .function-template-content {
                                .template-create-button {
                                    width: 100%;
                                    display: flex;
                                    margin-top: 24px;

                                    .ncl-primary-button {
                                        margin-left: unset;
                                    }
                                }

                                .template-create-button {
                                    justify-content: center;
                                }

                                .function-name {
                                    margin-top: 16px;
                                }

                                .projects-drop-down,
                                .function-name {
                                    .input-label {
                                        color: @dusk-three;
                                        font-size: 14px;
                                        font-weight: 500;
                                        margin-bottom: 8px;
                                    }
                                }

                                .buttons-wrapper {
                                    display: flex;
                                    justify-content: flex-end;
                                    margin-top: 24px;

                                    button:not(:first-child) {
                                        margin-left: 8px;
                                    }
                                }
                            }
                        }
                    }

                    .function-template {
                        width: 100%;
                        min-height: 169px;
                        padding: 24px;
                        background-color: @white;
                        border-radius: 2px;
                        z-index: 1;

                        .function-template-content {
                            color: @dusk-three;

                            .template-title {
                                font-size: 18px;
                                font-weight: bold;
                                width: 100%;
                                margin-bottom: 15px;
                            }

                            .template-description {
                                width: 100%;
                                max-height: 62px;
                                font-size: 14px;
                                overflow: hidden;
                            }

                            .template-read-more {
                                color: @greyish-purple;
                                font-style: italic;
                            }
                        }
                    }
                }
            }
        }
    }
}