@import "../../../styles/layout.scss";

.main-container{
    flex-direction: column;
    max-width: 450px;
    margin: auto;
}
.heading{
    margin: 0 16px 16px 16px;
    align-items: center;  
}
.chart-edit-card, .heading{
    max-width: 418px;
}
.chart-meta-form > *{
    width: 100%;
}
mat-slide-toggle{
    padding-top: 0.75em;
}
.button-panel{
    padding-top: 1.75em;
}
.back-button{
    margin-right: 6px;
}
mat-form-field{
    width: 100%;
}
.group{
    display: flex;
}
.group > mat-form-field{
    flex: 1;
    padding-right: 2px;
    padding-left: 2px;
}
.group > mat-form-field:first-child{
    padding-left: 0px;
}
.group > mat-form-field:last-child{
    padding-right: 0px;
}
.interval-field{
    width: 100px;
    flex: none !important;
}
@media #{$isWebContent}{
    .main-container{
        max-width: 800px;
        width: 800px;
    }
    .chart-edit-card, .heading{
        max-width: 768px;
        width: 768px;
    }  
    .web-view-group{
        display: flex;
    }
    .web-view-group > div{
        flex: 1;
    }
    div.summary-chart-type, div.summary-dates{
        flex: none !important;
        width: 175px;
    }
    div.summary-chart-type > h5, div.summary-dates > h5{
        margin: 0;
    }
    div.summary-interval{
        flex: none !important;
        width: 160px;
    }
    .web-view-group > mat-form-field{
        flex: 1;
        padding-right: 2px;
        padding-left: 2px;
    }
    .web-view-group > mat-form-field:first-child{
        padding-left: 0px;
    }
    .web-view-group > mat-form-field:last-child{
        padding-right: 0px;
    }
    .chart-type{
        flex: none !important;
        width: 220px;
    }
}
.warn-icon{
    font-size: 125%;
    position: relative;
    bottom: -4px;
}
h5{
    margin: 8px 0 0 0;
    color: rgba(0, 0, 0, 0.54);
}
h5.summary-title{
    margin: 0;
}
input.interval-input::-webkit-outer-spin-button,
input.interval-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.interval-input[type=number] {
    -moz-appearance:textfield;
}