/*
 * Copyright (c) 2022  The AdvantEDGE Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Set IDCC color theme
$mdc-theme-primary: #379DD8;
$mdc-theme-secondary: #FF9800;
$mdc-theme-background: #FFFFFF;

// Set default margin to 0px
$mdc-layout-grid-default-margin: (
  desktop: 0px,
  tablet: 16px,
  phone: 16px
);

// Set default gutter to 10px
$mdc-layout-grid-default-gutter: (
  desktop: 10px,
  tablet: 16px,
  phone: 16px
) !default;

// MDC
@import 'material-components-web/material-components-web';

// Outlined Select issue causing horizontal scrolling
.mdc-select--outlined::before, .mdc-select--outlined::after {
    content: none;
}

// Colors
.mdc-dialog {
    @include mdc-dialog-max-width(865px, 20px);
    @include mdc-dialog-min-width(500px);
}
.detailed-dialog {
    @include mdc-dialog-max-width(1024px, 20px);
}

.rmwc-icon--size-large {
    font-size: 2.25rem;
    width: 1em;
    height: 1em;
}

// Ensure layout covers the entire screen

html {
    height: 100%;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}

// UI
#meep-container {
    // height: 100%;
    width: 100%;
    overflow-x: hidden;
}
.ui-body {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    // height: 100%;
    width: 100%;
    background-color: #fafafa;
}
.ui-content {
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    box-sizing: border-box;
}
.ui-main {
    padding: 16px;
}
.ui-background {
    background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/network.png);
}


// Visualization
.vis-network-placeholder {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}
.vis-network-div {
    display:inline-block;
    width:100%;
    height:100%;
    // margin-top: 10px;
    background-color: #FFFFFF;
}
div.vis-tooltip {
    background-color: #FFFFFF;
}
#vis-report {
    display:inline-block;
    width:200px;
    vertical-align:top;
}

// Element configuration
.cfg-network-element-div {
    height:60vh;
}

// Navigation
#idcc-toolbar {
    @include mdc-top-app-bar-ink-color(#fff);
}
// #idcc-logo {
//     height: 40px;
//     width: 40px;
//     padding-top: 4px;
//     padding-bottom: 4px;
// }
#idcc-title {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 22px;
}

#cfg-vis-network-container {
    padding: 10;
};
// #file-export-ta-div {
//     margin-top: 10px;
// }
#page-operate {
    display: none;
}

#refresh-interval-form-div {
    display: inline-block;
    vertical-align: middle;
    padding-left: 16px;
}

// Monitoring
#idcc-monitoring-iframe {
    height: 80vh;
    width: 100%;
    border-style: none;
}

// IDCC Styles
.text-color-main {
    color: #3e484f;
}
.idcc-page {
    padding: 10px;
    min-height: calc(100vh - 138px);
}
.idcc-elevation {
    background-color: #FFFFFF;
}
.idcc-button {
    @include mdc-button-ink-color(#fff);
}
.idcc-margin-top {
    margin-top: 10px;
}
.idcc-margin-left {
    margin-left: 20px;
}
.idcc-elevated-area {
    margin-bottom: 10px;
    padding: 10px;
}
.idcc-fullwidth {
    width: 100%;
}
.idcc-link:link, .idcc-link:visited {
    color: #379DD8;
}
.idcc-link:hover, .idcc-link:hover {
    color: #178fd4;
}

#new-element-error-message {
    color: firebrick;
}

// Under construction logo
.construction-div-img {
    height: 50px;
    vertical-align: middle;
}

// Markers
.custom-marker-pin {
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    background: #00ccff;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    border: 1px solid;
    border-color: #00a3cc;
}
// to draw white circle
.custom-marker-pin::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 2px 0 0 2px;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
}

// to align icon
.custom-marker-icon {
    position: absolute;
    width: 20px;
    font-size: 20px;
    left: 0;
    right: 0;
    margin: 11px auto;
    text-align: center;
    vertical-align: middle;
}

.custom-marker-icon-text {
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 8px;
    left: 0;
    right: 0;
    margin: 11px auto;
    // text-align: center;
    vertical-align: middle;
    font-family: 'Roboto';
    font-weight: 600;
}

.custom-marker-text {
    height: 20px;
    margin: 12px auto;
    font-size: 12px;
    font-family: 'Roboto';
    font-weight: 600;
}

.mdc-tab--active .mdc-tab__text-label {
    color: white
}

.mdc-tab__text-label {
    opacity: 1;
}

.mdc-tab-indicator>.mdc-tab-indicator__content--underline {
    background-color: white;
}

.mdc-tab__ripple:after, .mdc-tab__ripple:before {
    background-color: white;
}

.menu-tabs .mdc-tab__text-label {
    color: white;
}

.user-icon .material-icons {
    font-size: 36px;
}

// Mermaid styles
.seq-mermaid svg {
    height: auto;
}
