#courses-view {

    table {
        margin: 32px;
        width: ~"calc(100% - 64px)";
    }
}

#course-view {

    margin: 32px;

    .form-component {

        margin: 16px 0;

        label {
            font-weight: bold;
            font-size: 16px;
        }

        input {
            max-width: 250px;
        }
    }

    #save-course {
        margin-bottom: 16px;
        width: 300px;

        .inline-spinner {
            margin-left: 16px;
        }
    }

    i.fui-cross, .remove-data {
        color: #C0392B;
        justify-self: flex-end;
        
        &:hover {
            opacity: 0.6;
        }
    }

    #lessons-container {
        h4 {
            font-size: 16px;
        }

        ul {
            list-style: none;
            margin: 16px 0;
            padding-bottom: 16px;
            padding-left: 0;
            max-width: 710px;

            .lesson-view {
                .lesson-list-item {
                    display: flex;
                    flex-direction: row;
                    background-color: #dfe6e9;
                    padding: 16px;
                    align-items: center;
                    border-bottom: 1px solid #ddd;

                    input {
                        width: 600px;
                        margin-left: 8px;
                        margin-right: auto;
                    }

                    i.fui-cross {
                        margin-left: 16px;
                    }


                    i.fa-bars {
                        margin-left: 16px;
                    }
                }

                .lesson-data-container {
                    padding: 16px;

                    ul {
                        margin: 0;
                    }
                }

                .lesson-data-view {
                    
                    padding: 8px;

                    display: flex;
                    align-items: center;


                    i.fa-bars {
                        margin-right: 16px;
                    }

                    .lesson-data-name {
                        width: 100px;
                        display: inline-block;
                    }

                    a {
                        margin: 0 8px;
                        display: inline-block;
                    }
                }
            }
        }
    }


    #lesson-data-container {

        #upload-container {
            max-width: 800px;
        }




        .lesson-note-config-view {
            .notes-preview {
                margin: 16px 0;
                width: 800px;
                height: 1100px;

        

                iframe {
                    width: 100%;
                    height: 100%;
                    border: none; 
                    box-shadow: none;
                }
            }
        }
    }
}

#exercise-config-view {

    padding: 32px;
    
    .loading {
        display: block;
    }

    .main-content {
        display: none;
    }

    .form-component {

        margin: 16px 0;

        label {
            font-weight: bold;
            font-size: 16px;
        }

        input {
            max-width: 250px;
        }
    }    

    #sentences-container {

        .sentences-label {
            font-weight: bold;
            font-size: 16px;
        }

        ul {
            list-style: none;

            .configure-sentence-view {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin: 16px 0;

                textarea {
                    margin-left: 16px;
                }


                .sentence-solution-link {
                    margin-left: 16px;
                }

                .fui-cross {
                    margin-left: 16px;
                }
                
            }
        }            
    }
}