cms_thermo_active/Step/wwwroot/assets/styles/base/assisted-tooling.less

// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.assisted-tooling-container,
.assisted-toolingfive-container {
    height: 624px;
    width: 704px;
    top: calc(~'50% - 312px');
    left: calc(~'50% - 352px');
    display: flex;
    justify-content: center;
    align-items: center;
    .assisted-tooling-box,
    .assisted-toolingfive-box {
        width: 704px;
        height: 624px;
        border-radius: 2px;
        background-color: @color-background-white;
        .assisted-tooling-header,
        .assisted-toolingfive-header {
            width: 100%;
            height: 60px;
            color: @color-darkish-blue;
            border-bottom: solid 2px @color-silver;
            .assisted-tooling-header-label,
            .assisted-toolingfive-header-label {
                font-size: 20px;
                padding: 19px 0 0 24px;
            }
            button.close {
                display: flex;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: none;
                background-color: #002680;
                color: #fff;
                margin-top: 15px;
                margin-right: 14px;
                font-size: 16px;
                float: right;
                cursor: pointer;
                .fa {
                    display: flex;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
            button.close:active {
                background-color: @color-clear-blue ;
                color: #fff;
            }
        }
        .assisted-tooling-body,
        .assisted-toolingfive-body {
            width: 100%;
            height: calc(~'100% - 142px');
            background-color: @color-battleship-grey;
            .assisted-tooling-body-group,
            .assisted-toolingfive-body-group {
                height: 100%;
                font-size: 18px;
                line-height: 1.11;
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                a {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    color: @color-white;
                    text-decoration: none;
                }
                img {
                    margin-top: 10px;
                }
            }
        }
        .assisted-toolingfive-body {
            display: flex;
            background-color: @color-background-white;
            font-size: 18px;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            line-height: 1.11;
            color: @color-greyish-brown;
        }
        .assisted-tooling-footer,
        .assisted-toolingfive-footer {
            height: 78px;
            width: 100%;
            display: flex;
            align-items: center;
            border-top: solid 2px @color-silver;
        }
        .assisted-toolingfive-footer {
            display: flex;
            flex-flow: row-reverse;
        }
    }
}

.assisted-toolingtwo-container,
.assisted-toolingthree-container,
.assisted-toolingfour-container {
    height: 624px;
    width: 704px;
    top: calc(~'50% - 312px');
    left: calc(~'50% - 352px');
    display: flex;
    justify-content: center;
    align-items: center;
    .assisted-toolingtwo-box,
    .assisted-toolingthree-box,
    .assisted-toolingfour-box {
        width: 704px;
        height: 624px;
        border-radius: 2px;
        background-color: @color-background-white;
        .assisted-toolingtwo-header,
        .assisted-toolingthree-header,
        .assisted-toolingfour-header {
            width: 100%;
            height: 60px;
            color: @color-darkish-blue;
            border-bottom: solid 2px @color-silver;
            .assisted-toolingtwo-header-label,
            .assisted-toolingthree-header-label,
            .assisted-toolingfour-header-label {
                font-size: 20px;
                padding: 19px 0 0 24px;
            }
            button.close {
                display: flex;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: none;
                background-color: #002680;
                color: #fff;
                margin-top: 15px;
                margin-right: 14px;
                font-size: 16px;
                float: right;
                cursor: pointer;
                .fa {
                    display: flex;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
            button.close:active {
                background-color: @color-clear-blue ;
                color: #fff;
            }
        }
        .assisted-toolingtwo-body,
        .assisted-toolingthree-body,
        .assisted-toolingfour-body {
            width: 100%;
            height: calc(~'100% - 142px');
            .assisted-toolingtwo-body-header,
            .assisted-toolingthree-body-header,
            .assisted-toolingfour-body-header {
                height: calc(~'100% - 114px');
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                .assisted-toolingtwo-body-htext,
                .assisted-toolingthree-body-htext,
                .assisted-toolingfour-body-htext {
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 1.11;
                    color: @color-greyish-brown;
                    margin-bottom: 15px;
                }
                .assisted-toolingthree-body-box {
                    display: flex;
                    flex-flow: row;
                }
            }
            .assisted-toolingtwo-body-group,
            .assisted-toolingthree-body-group,
            .assisted-toolingfour-body-group {
                height: 114px;
                font-size: 14px;
                line-height: 1.11;
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                background-color: @color-battleship-grey;
                a {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    color: @color-white;
                    text-decoration: none;
                }
                img {
                    margin-top: 10px;
                }
            }
        }
        .assisted-toolingtwo-footer,
        .assisted-toolingthree-footer,
        .assisted-toolingfour-footer {
            height: 78px;
            width: 100%;
            display: flex;
            align-items: center;
            border-top: solid 2px @color-silver;
        }
    }
}