@import "../helpers/colors.scss";

.content-wrapper {
    // padding: 10% 2%;
    padding-top: 92px;
    width: 100%;
    background-color: #f7f7f7;

    main {
        //   &::before {
        //    content: " ";
        //    opacity: 0;
        //    background: url('../../../img/icons/star.svg');
        //    @include bg-props(cover, center, no-repeat);
        //    position: absolute;
        //    bottom: 5px;
        //    left: -36px;
        //    height: 30px;
        //    width: 30px;
        //  }

        section {
            &.tutorial {
                .pageTitle {
                    color: $black;
                    font-size: 2.6rem;
                    @include boldFont();
                    margin-left: 0;
                    position: relative;
                    margin-bottom: 30px;

                    i {
                        &.ci {
                            width: 40px;
                            height: 30px;
                            display: inline-block;
                            padding: 0;
                            vertical-align: text-top;
                            margin-right: 15px;

                            &.ci-computer-green {
                                background: url(../../../img/icons/computer-green.svg);
                                background-size: contain;
                                background-position: center;
                                background-repeat: no-repeat;
                            }
                        }
                    }
                }

                .modal-card {
                    height: 330px;

                    &::before {
                        background: none;
                    }
                    p {
                        min-height: 30px;
                    }
                }

                .loader {
                    margin: 0 auto;
                    border: 8px solid $lightGray;
                    /* Light grey */
                    border-top: 8px solid $green;
                    /* Blue */
                    border-radius: 50%;
                    width: 60px;
                    height: 60px;
                    animation: spin 1.5s linear infinite;
                }

                @keyframes spin {
                    0% {
                        transform: rotate(0deg);
                    }

                    100% {
                        transform: rotate(360deg);
                    }
                }
            }
        }
    }
}

@media (max-width: 1440px) {
    .content-wrapper {
        main {
            section {
                &.tutorial {
                    .modal-card {
                        height: auto;
                    }
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    .content-wrapper main section.tutorial .modal-card p {
        min-height: 45px;
    }
}
@media (max-width: 1202px) {
    .content-wrapper main section.tutorial .modal-card h4 {
        min-height: 40px;
    }
}