@import "_vars.scss";
@import "_mixins.scss";


#CLX_LanguageInfo button, .homeButton, .menuButton, .displayButton, #CLX_LoginInfo button {
    background: transparent;
    border: none;

    &.textButton {
        @extend .align-items;

        div {
            margin-left: 0px;
        }
    }
}

.md-white {
    color: $windowColor;
}

#CLX_LoginInfo {
    right: 10rem;
}

#CLX_LanguageInfo {
    right: 3rem;
}


.mobile {
    display: none;
}

.not-mobile {
    display: block;
}

td.not-mobile {
    display: table-cell;
}

.align-items {
    display: flex;
    align-items: center;
}

.spacer{
    flex: 1 1 auto;
}

@mixin icon-colors {
    .no-valid {
        color: #f45b5b;
    }

    .valid {
        color: #5fd35f;
    }
}

.dialog {
    @include icon-colors;

    .noFixedHeader {
        .editTable {
            th {
                border-bottom: none;
            }
        }
    }

    .dialogFooter {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;

        .buttonDiv {
            display: flex;
            height: 100%;
            justify-content: center;
            margin-left: 0px;
            @extend .align-items;

            .textButton {
                @extend .align-items;
                margin-top: 0px;

                div {
                    margin-left: 0px;
                    font-weight: normal;
                }

                span {
                    font-weight: normal;
                }
            }
        }
    }

    .dialogToolbar {
        @extend .align-items;

        .combobox{
            button{
                margin-top: 0px !important;
            }
        } 
        
        .textButton {
            display: flex;
            align-items: center;

            div {
                margin-left: 0.8rem;
            }

            span {
                font-weight: 600;
            }
        }
    }
}


@media only screen and (min-width: 576px) and (max-width: 1024px) {
    #CLX_Root { 
        table.editTable, table.gradigTable {
            thead {
                tr {
                    th:nth-child(3) {
                        max-width: 8rem !important;
                        overflow: hidden !important;
                        text-overflow: ellipsis !important;
                    }

                    th {
                        &.iconColumn {
                            width: 20px !important;
                            max-width: 20px !important;
                            padding: 0px 0 0 0;
                            min-width: 1rem !important;
                        }
                    }

                    th:first-child {
                        &.iconColumn {
                            width: 1rem !important;
                            min-width: 1rem;
                        }
                    }
                }
            }

            tbody {
                td, th {
                    max-width: 8rem !important;
                    overflow: hidden !important;
                    text-overflow: ellipsis !important;
                    padding: 0 0.6rem 0 0.6rem;

                    .blendElement {
                        input[type=text] {
                            max-width: 8rem;
                        }
                    }

                    .combobox {
                        .dialogContextMenu {
                            position: fixed;
                        }
                    }
                }
            }
        }
    }
} 
 

@media (max-width:575px) {
        .content {
            width: 100%;
        }

        .topic-title span {
            margin-left: 0.6rem;
        }

        #CLX_LoginInfo {
            right: 2rem !important;
        }

        #CLX_LanguageInfo {
            width: 30px !important;
            right: 1rem !important;
        }

        .ellipsis {
            white-space: nowrap;
            overflow: hidden;
            @include pre(text-overflow, ellipsis);
        }

        .mobile {
            display: block;
        }

        td.mobile {
            display: table-cell;
        }

        .not-mobile {
            display: none;
        }

        td.not-mobile {
            display: none;
        }

        .hide-on-mobile {
            display: none;
        }

    .editTable {
        td {
            padding: 1.2rem 0.6rem !important;

            &.validationColumn {
                text-overflow: initial !important;
            }
        }
    }

        #CLX_LanguageInfo {
            width: 40px;
        }

    #CLX_Root {

        .option-button {
            height: 2.6rem;
            width: auto;
            border: 2px solid $mediumBlue;
            padding: 0 5px 0 5px;

            &.active {
                background: $mediumBlue;
                color: $windowColor;
            }
        }

        .small-popup {
            height: auto !important;
            width: 300px !important;
            left: calc((100% - 300px) / 2) !important;
            top: calc((100% - 135px) / 2) !important;
        }

        .dialog {
            .dialogBody.grading {
                .table-options {
                    display: flex !important;
                    justify-content: space-between;

                    .table-options__buttons {
                        display: flex;
                        justify-content: start;
                        padding-left: 0.8rem;
                        flex-wrap: wrap;
                        row-gap: 0.8rem;
                        max-width: 100%;
                        margin-top: 0.8rem;

                        button {
                            margin-right: 1rem;
                            max-width: 12rem;
                            @extend .ellipsis;
                        }
                    }

                    .more-menus {
                        margin-top: 0.8rem;
                        flex: 1;
                        display: flex;
                        justify-content: end;
                        padding-right: 0.5rem;
                    }
                }

                .dialogInfoTable:nth-child(2) {
                    display: none;
                }

                .dialogBlockFixed.dialogToolbar {
                    display: none;
                }

                @mixin common-table-headers {

                    th:nth-child(3) {
                        width: 40% !important;
                    }

                    th:nth-child(4) {
                        max-width: 40%;
                    }
                }


                .sorting-header {
                    margin-top: 2rem;

                    thead {
                        th {
                            height: 3.3rem;

                            .headerText {
                                padding: 0 12px 0 0;
                            }
                        }

                        th:nth-child(5), th:nth-child(6), th:nth-child(7), th:nth-child(8) {
                            display: none;
                        }


                        @include common-table-headers;
                    }
                }

                .dialogAccordionTable {
                    th {
                        &.iconColumn {
                            width: 20px !important;
                            max-width: 20px !important;
                            padding: 0px 0 0 0;
                            min-width: 1rem !important;
                        }
                    }

                    th:first-child {
                        &.iconColumn {
                            width: 1rem !important;
                            min-width: 1rem;
                        }
                    }
                }

                .noFixedHeader {
                    margin: -40px 0 0 0;


                    .dialogAccordionTable.editTable {
                        width: calc(100% - 5px);
                        border-collapse: collapse;
                        table-layout: fixed;

                        thead {
                            th {
                                height: 30px;
                            }
                        }

                        thead.actual-header {
                            height: 40px;

                            tr {

                                th {
                                    white-space: nowrap !important;
                                    overflow: hidden;
                                    max-width: 150px !important;


                                    .headerText {
                                        padding-right: 5px;
                                    }

                                    &.hide-column {
                                        display: none;
                                    }
                                }

                                th:nth-child(1), th:nth-child(2) {
                                    max-width: 20px;
                                }

                                th:nth-child(3) {
                                    width: 40% !important;
                                    padding-left: 5px;
                                }

                                @include common-table-headers;
                            }
                        }

                        tbody {

                            tr {
                                td .material-icons {
                                    font-size: 24px;
                                    margin-left: -0.3rem;
                                }

                                td:first-child {
                                    padding-left: 0px !important;
                                    @include icon-colors;
                                }

                                td.hide-column {
                                    display: none;
                                }

                                td:nth-child(2), td:nth-child(3) {
                                    @include icon-colors;
                                    text-overflow: ellipsis;
                                    -webkit-text-overflow: ellipsis;
                                    -khtml-text-overflow: ellipsis;
                                    -moz-text-overflow: ellipsis;
                                    -ms-text-overflow: ellipsis;
                                    white-space: nowrap !important;
                                    overflow: hidden;
                                    max-width: 150px;
                                }

                                td {
                                    .blendElement {
                                        input, div {
                                            width: calc(100% - 2px)
                                        }
 
                                        .combobox {
                                            display: flex;

                                            .dialogContextMenu {
                                                position: fixed;
                                            }
                                        }
                                    }

                                    .formRow {
                                        .subscriptionDetail {
                                            .checkBoxContainer {
                                                input {
                                                    width: auto;
                                                }
                                            }
                                        }
                                    }
                                }

                                .gradeInput {
                                    min-width: 50px !important;
                                    max-width: calc(100% - 5px );
                                    display: flex;

                                    .combobox {
                                        width: calc(100% - 0px);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .dialogFooter {
                border-top: 1px solid #dddddd;
                background: #ffffff;
                min-height: 4rem;
                line-height: 4rem;
                display: flex;
                justify-content: right;
                align-items: center;
                width: calc(100% - 3.6rem );


                .dialogIcon, .auto-save-hint {
                    display: none;
                }

                .buttonDiv {
                    .textButton {
                        margin-top: 0px;
                        display: flex;
                        align-items: center;

                        div {
                            margin-left: 0px;
                            font-weight: 300;
                        }

                        div:hover, span:hover {
                            color: $selectedColor;
                        }
                    }

                    div:hover, span:hover {
                        color: $selectedColor;
                    }
                }
            }

            .dialogBody.statistics {
                font-weight: 300;

                .dialogInfoTable {
                    width: 100%;
                }

                .ellipsisTable {
                    display: none;
                }

                .row {
                    border-top: 1px solid #dddddd;

                    .graph-info {
                        margin-top: 0px;
                        padding: 20px 32px;
                        border-top: 1px solid #dddddd;
                    }
                }
            }

            .dialogFooter {
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
                padding: 5px 5px;
                align-items: center;
                width: calc(100% - 2rem );

                .footerValidation {
                    width: 32rem !important;
                }

                .buttonDiv {
                    display: flex;
                    justify-content: space-between;

                    div {
                        margin-left: 5px;
                    }
                }
            }
        }

        .settings-overlay {
            display: flex;

            .modal_container {
                background: #ffffff;

                .default_notes, .delete_notes {
                    display: flex;
                    flex-direction: column;

                    &.hide {
                        display: none;
                    }

                    &.show {
                        display: flex;
                    }

                    .content_body {
                        flex: 3;
                        margin: 20px 20px;
                    }

                    .buttons {
                        display: flex;
                        justify-content: end;
                        flex: 1;

                        button {
                            margin: 0 8px 16px 8px;
                        }
                    }
                }

                .delete_notes {
                    &.show {
                        padding: 1.8rem 1.8rem 0;
                    }
                }
            }

            .dialogDraggable, .dialog {
                @extend .small-popup;
            }



            &.show {
                display: flex !important;
            }

            &.hide {
                display: none !important;
            }
        }
    }
    }
