.analytics-card {
    position: relative;
    width: 48.5%;
    min-width: 610px;
    height: 470px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 30px 0 rgba(157, 157, 167, 0.15);
    margin: 8px;
    &.wide {
        width: 100%;
    }
    .date-picker {
        position: absolute;
        top:15px;
        left:15px;
    }

    .title {
        position: absolute;
        top: 63px;
        left: 15px;
        font-size: 1.2em;
        border-bottom: #999999 2px dotted;
        font-weight: bold;
        max-width: 400px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &.input {
            border-bottom: none;
        }
    }

    .top-right-buttons {
        position: absolute;
        top: 15px;
        right: 15px;
        display: inline-flex;
        .ui.buttons {
        margin-left: 12px;
            height: 36px;
            .ui.button {
                i {
                    transition: color 0.3s;
                    color: #999999;
                    font-size: 1.3em;
                }
                &.selected {
                    i {
                        color: #212121;
                    }
                }
                &:hover {
                    i {
                        color: #555555;
                    }
                }
            }
        }
    }

    .graph-render-zone {
        position: absolute;
        height: 350px;
        width: 95%;
        top: 100px;
        left: 15px;
        g {
            rect:hover {
                cursor: pointer;
            }
            path:hover {
                cursor: pointer;
            }
        }
        &.line {
            rect:hover {
                cursor: default;
            }
        }
    }

    .bottom-right-buttons {
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: inline-flex;
    }
}

.analytics-dashboard {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    padding-top: 20px;
}

.ui.button.export-card-button{
    margin: 0px 0px 0px 12px;
    & + i {
        display: none;
    }
}
.ui.button.export-all-button{
    margin:0px
}

.ui.popup.export-all-popup{
   padding:0px;
   margin:0px;
   border: unset;
}


.top-menu-red-dropzone {
    z-index: 3;
    position: absolute;
    height: 49px;
    width: 100%;
    border-bottom: dashed @red 5px;
    background-color: fade(@red, 10%);
    padding-top: 12px;
    &.hover {
        background-color: fade(@red, 100%);
        border-bottom: none;
        .ui.header.red {
            color: #fff !important;
        }
    }
}

.item.toggle-item {
    .check.icon.card-settings-checkmark {
        margin-left: 0.5em;
    }
}

.ui.input.analytics-settings-number-input {
    padding: 0.5em;
    display: block;
        input {
            width: 100%
        }
}

.settings-portal-modal{
    .ui.grid.sequence-selector-grid {
        margin-left: unset;
        margin-right: 1em;
    }
}

.ui.dropdown .menu>.item.disabled-popup-item {
    // required because using the disabled prop on dropdown
    // menu items stops the popup from being triggered
    cursor: default;
    opacity: .45;
    &:hover{
        background-color: rgba(0,0,0,0);
    }
}