@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --color-default: #f7f8fa;
    --color-red: #ff4e4e;
    --color-orange: #ffbb40;
    --color-blue: #7e7eff;
    --color-purple: #da99ff;
    --color-white: #f7f8fa;
    --background-color-default: #ffffff20;
    --background-color-red: #ff000020;
    --background-color-orange: #ffaa0020;
    --background-color-blue: #0000ff30;
    --background-color-purple: #dd00ff20;
    --background-color-white: #f7f8fa;
    --neon-color-default: #fff;
    --neon-color-red: #f00;
    --neon-color-orange: #fb0;
    --neon-color-blue: #88f;
    --neon-color-purple: #f7f;
    --neon-border-default: #999;
    --neon-border-red: #b00;
    --neon-border-orange: #b97b00;
    --neon-border-blue: #6363ff;
    --neon-border-purple: #a95aec;
    --dropdown-color-default: #33333344;
    --dropdown-color-orange: #553300;
}

/*!
 * "7segment" is lisenced under the SIL Open Font License 1.1
 * by https://torinak.com/7segment
 */
@font-face {
    font-family: "7segment";
    src: url("/fonts/7segment.woff") format("woff"); /* chrome, firefox */
    font-display: swap;
}

html, body {
    font-family: Arial;
    color: white;
    background-color: black;
}

a, .btn-link {
    color: #69b658;
}

.btn-clear {
    border: none;
    background-color: transparent;
}
.content {
    padding-top: 1.1rem;
}

::-webkit-resizer {
    background-color: var(--neon-border-default);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    border-radius: .25rem;
    box-shadow: inset 0 0 8px rgba(200, 200, 200, .9);
}

::-webkit-scrollbar-thumb {
    background-color: var(--neon-border-default);
    border-radius: .25rem;
    box-shadow: 0 0 0 1px rgba(255, 225, 255, .5);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #fff;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.system-title {
    color: white;
}

.system-font {
    font-family: Arial;
}

.glow-green {
    color: white;
    text-shadow: 1px 1px 10px var(--neon-border-default), -1px -1px 10px var(--neon-border-default), -1px 1px 10px var(--neon-border-default), 1px -1px 10px var(--neon-border-default);
}

.glow-red {
    color: black;
    text-shadow: 0 0 10px red, 1px 0 1px red, -1px 0 1px red, 0 1px 1px red, 0 -1px 1px red;
}

.text-emp {
    text-shadow: 0 0 5px #e19a86, 0 0 2.5px #854535, 0 0 2.5px #5c150c;
}

.text-stretch {
    transform: scale(1, 1.3);
    line-height: 1.5rem;
}

a, a:link, a:visited, a:hover, a:active {
    color: #69b658;
}

#graph-area {
    padding-bottom: 1rem;
    height: 69vh;
}
/*
    SYSTEM-BOX
*/
.system-row {
    margin-bottom: 4rem;
}
div.system-row:nth-of-type(4) {
    margin-bottom: 1rem;
}

.system-box {
    box-sizing: border-box;
    padding: .5rem;
    color: var(--color-white);
    background-color: var(--background-color-default);
    border: 4px solid var(--color-default);
    border-radius: 10px;
    text-align: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 10px var(--neon-color-default);
    box-shadow: 0 0 .5rem var(--neon-border-default), inset 0 0 .5rem var(--neon-border-default);
}

    .system-box.red {
        color: var(--color-red);
        background-color: var(--background-color-red);
        border-color: var(--color-red);
        text-shadow: 0 0 10px var(--neon-color-red);
        box-shadow: 0 0 .5rem var(--neon-border-red), inset 0 0 .5rem var(--neon-border-red);
    }

    .system-box.orange {
        color: var(--color-orange);
        background-color: var(--background-color-orange);
        border-color: var(--color-orange);
        text-shadow: 0 0 10px var(--neon-color-orange);
        box-shadow: 0 0 .5rem var(--neon-border-orange), inset 0 0 .5rem var(--neon-border-orange);
    }

    .system-box.blue {
        color: var(--color-blue);
        background-color: var(--background-color-blue);
        border-color: var(--color-blue);
        text-shadow: 0 0 10px var(--neon-color-blue);
        box-shadow: 0 0 .5rem var(--neon-border-blue), inset 0 0 .5rem var(--neon-border-blue);
    }

    .system-box.purple {
        color: var(--color-purple);
        background-color: var(--background-color-purple);
        border-color: var(--color-purple);
        text-shadow: 0 0 10px var(--neon-color-purple);
        box-shadow: 0 0 .5rem var(--neon-border-purple), inset 0 0 .5rem var(--neon-border-purple);
    }

    .system-box .number {
        font-size: 3vw;
        color: black;
        text-shadow: 0 0 10px var(--color-white), 1px 0 1px var(--color-white), -1px 0 1px var(--color-white), 0 1px 1px var(--color-white), 0 -1px 1px var(--color-white);
    }

    .system-box.red .number {
        text-shadow: 0 0 10px var(--color-red), 1px 0 1px var(--color-red), -1px 0 1px var(--color-red), 0 1px 1px var(--color-red), 0 -1px 1px var(--color-red);
    }

    .system-box.orange .number {
        text-shadow: 0 0 10px var(--color-orange), 1px 0 1px var(--color-orange), -1px 0 1px var(--color-orange), 0 1px 1px var(--color-orange), 0 -1px 1px var(--color-orange);
    }

    .system-box.blue .number {
        text-shadow: 0 0 10px var(--color-blue), 1px 0 1px var(--color-blue), -1px 0 1px var(--color-blue), 0 1px 1px var(--color-blue), 0 -1px 1px var(--color-blue);
    }

    .system-box.purple .number {
        text-shadow: 0 0 10px var(--color-purple), 1px 0 1px var(--color-purple), -1px 0 1px var(--color-purple), 0 1px 1px var(--color-purple), 0 -1px 1px var(--color-purple);
    }

    .system-box .name {
        margin-bottom: 0;
        font-size: 1.2vw;
    }
    .system-box .abbr {
        margin-bottom: 0;
        font-size: 1vw;
    }

/*
    Status-Panel
*/
#status-panel {
    perspective: 500px;
}
.status-panel-wrap {
    transition: transform .2s linear;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateX(90deg);
}
#status-panel.show .status-panel-wrap {
    transform: rotateX(0deg);
}
#status-panel.alert1 .status-panel-wrap {
    animation: alert-ani 1.5s ease-out infinite;
}
.symbol {
    display:none;
}

#status-panel.show.seijou {
    filter: drop-shadow(0px 0px 6px white);
}

#status-panel.show.chuui,
#status-panel.show.keikoku,
#status-panel.show.juuyou,
#status-panel.show.keihou,
#status-panel.show.keikai,
#status-panel.show.kinkyu {
    animation: alert-ani 1.5s ease-out infinite;
    filter: drop-shadow(0px 0px 6px red);
}

#status-panel.show.seijou #sts-seijou,
#status-panel.show.chuui #sts-chuui,
#status-panel.show.keikoku #sts-keikoku,
#status-panel.show.juuyou #sts-juuyou,
#status-panel.show.keihou #sts-keihou,
#status-panel.show.keikai #sts-keikai,
#status-panel.show.kinkyu #sts-kinkyu {
    display: block !important;
}


@keyframes alert-ani {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}

.info-stripe {
    display:none;
}

#status-panel.show.seijou #sts-green,
#status-panel.show.chuui #sts-orange,
#status-panel.show.keikoku #sts-orange,
#status-panel.show.juuyou #sts-red,
#status-panel.show.keihou #sts-orange,
#status-panel.show.keikai #sts-orange,
#status-panel.show.kinkyu #sts-red {
    display: block !important;
}


#stripe-pattern {
    fill: #52b552;
}

    #stripe-pattern.white {
        fill: white;
    }

    #stripe-pattern.orange {
        fill: orange;
    }

    #stripe-pattern.red {
        fill: red;
    }

#stripe-pattern2 {
    fill: red;
}
    #stripe-pattern2.orange {
        fill: orange;
    }

.status {
    margin-top: .5em;
}

.sts-box {
    border: solid 2px var(--neon-color-default);
    border-radius: 4px;
    text-align: center;
    margin: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    font-weight: bold;
    color: var(--color-default);
    font-size: 1.0rem;
}
.sts-msg1 {
    font-size: 1.1em;
}
.sts-msg2 {
    font-size: 1.1em;
}

#status-panel.show.seijou .sts-box {
    border-color: var(--neon-color-default);
    color: var(--color-default);
}

#status-panel.show.chuui .sts-box,
#status-panel.show.keikoku .sts-box,
#status-panel.show.juuyou .sts-box,
#status-panel.show.keihou .sts-box,
#status-panel.show.keikai .sts-box,
#status-panel.show.kinkyu .sts-box {
    border-color: var(--neon-color-red);
    color: var(--color-red);
}

.auto-recovery {
    display: none;
}
.auto-recovery.show {
    display:inherit;
}


/*
    Page-Button-Panel
*/
#page-button-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    #page-button-panel .btn {
        background-color: var(--background-color-default);
        color: var(--color-default);
        border-color: var(--neon-border-default);
    }

    #page-disp {
        font-size: 1.25rem;
    }
/*
    Recovery-Button-Panel
*/
#recovery-button-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    #recovery-button-panel .btn {
        width: 100%;
        background-color: var(--background-color-default);
        color: var(--color-default);
        border-color: var(--neon-border-default);
    }

        #recovery-button-panel .btn.btn-reenact {
            color: white;
            text-shadow: 1px 1px 10px var(--neon-border-default), -1px -1px 10px var(--neon-border-default), -1px 1px 10px var(--neon-border-default), 1px -1px 10px var(--neon-border-default);
        }

/*
    Elapsed-Time-Panel
*/
#elapsed-time-panel {
    padding: 0.25rem;
    perspective: 500px;
}

#elapsed-time-panel .rotate-panel {
    /*transform: rotate3d(-.3, -1, -.2, 60deg);*/
    font-size: .75em;
    text-align: center;
}

    #elapsed-time-panel .rotate-panel .title {
        font-size: 1.25em;
    }

.timer-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    height: 50px;
}
.timer {
    position: absolute;
    font-family: "7segment";
    color: var(--color-default);
    font-size: 3rem;
    text-align: center;
    text-shadow: 0 0 10px var(--neon-color-default);
    white-space: nowrap;
    margin-top: -10px;
}
    .timer .hm {
        font-size: 1em;
    }
    .timer .s {
        font-size: .65em;
    }
.timer.timer-base {
    color:var(--background-color-default);
    text-shadow:none;
}

#workaround-panel {
    padding: 0.25rem;
}
    #workaround-panel .title-box {
        background-color: var(--background-color-default);
        border: solid 1px var(--neon-border-default);
        border-radius: 4px;
        padding: .5rem 1rem;
        text-align: center;
    }

.workaround-box {
    padding: .1rem;
}
    .workaround {
        font-size: 1.2rem;
    }

#syslog {
    color: var(--color-default);
    background-color: var(--background-color-default);
    text-shadow: 1px 1px 10px var(--neon-border-default), -1px -1px 10px var(--neon-border-default), -1px 1px 10px var(--neon-border-default), 1px -1px 10px var(--neon-border-default);
}

    #syslog .syslog-title {
        padding: .25rem;
        border: solid 1px var(--neon-border-default);
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        box-shadow: 0 0 2px 1px var(--neon-border-default), inset 0 0 2px 1px var(--neon-border-default);
    }

    #syslog .syslog-box {
        padding: .25rem;
        height: 20vh;
        overflow-y: scroll;
        border: solid 1px var(--neon-border-default);
        border-top-width: 0;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        box-shadow: 0 0 2px 1px var(--neon-border-default), inset 0 0 2px 1px var(--neon-border-default);
    }

#warn-panel {
    color: var(--color-red);
    background-color: var(--background-color-red);
    text-shadow: 1px 1px 10px var(--neon-border-red), -1px -1px 10px var(--neon-border-red), -1px 1px 10px var(--neon-border-red), 1px -1px 10px var(--neon-border-red);
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    transition: all 500ms linear;
    font-size: 1.5vw;
}

    #warn-panel .warn-title {
        padding: .25rem;
        border: solid 1px var(--neon-color-red);
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        box-shadow: 0 0 2px 1px var(--neon-border-red), inset 0 0 2px 1px var(--neon-border-red);
    }

        #warn-panel .warn-title > span {
            padding-left: 15px;
            padding-right: 15px;
        }

    #warn-panel .warn-box {
        padding: .25rem;
        height: 20vh;
        border: solid 1px var(--neon-border-red);
        border-top-width: 0;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
        box-shadow: 0 0 2px 1px var(--neon-border-red), inset 0 0 2px 1px var(--neon-border-red);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    #warn-panel .warn-box > .col-3 {
        display: flex;
        justify-content: space-between;
    }

#alert-detail {
    position:fixed;
    bottom: 0;
    left: 0;
    height: 45vh;
    width: 100%;
    background-color: lightgray;
    opacity:.9;
}

.warning-window {
    width: 200px;
    position: absolute;
    font-size: .5rem;
    perspective: 500px;
}

    .warning-window .info-stripe {
        display: block;
    }

    .warning-window .status-panel {
        transform: rotateX(90deg);
        transition: transform .2s linear;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        filter: blur(1px);
    }

    .warning-window.show .status-panel {
        transform: rotate(0deg);
        animation: alert-ani 1.5s ease-out 2.0s infinite;
    }

    .warning-window .sts-box {
        font-size: inherit;
        border: solid 2px var(--neon-color-red);
        color: var(--color-red);
    }

.filedropzone {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

    .filedropzone .upload-icon {
        margin: 0 auto;
        width: 48px;
    }

        .filedropzone svg.upload-icon {
            fill: currentColor;
        }

/*------------------------------------
- COLOR primary
------------------------------------*/

.bg-primary {
    background-color: #8d63a5 !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--color-default) !important;
}

.border-primary {
    border-color: #8d63a5 !important;
}

.btn-primary {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
    border-width: 2px;
}

    .btn-primary:hover {
        color: white;
        background-color: var(--background-color-default);
        border-color: var(--neon-border-default);
        text-shadow: 1px 1px 10px var(--neon-border-default), -1px -1px 10px var(--neon-border-default), -1px 1px 10px var(--neon-border-default), 1px -1px 10px var(--neon-border-default);
        box-shadow: 0 0 .5rem var(--neon-border-default), inset 0 0 .5rem var(--neon-border-default);
    }

    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem var(--neon-color-default);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #8d63a5;
        border-color: #8d63a5;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #724d87;
        border-color: #6a487d;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(141, 99, 165, 0.5);
        }

/*
    Setting Grid
*/
.dxbs-tabs a, a:link, a:visited, a:hover, a:active {
    color: var(--color-default);
}

.dxbs-tabs .nav-tabs .nav-item.show .nav-link, .dxbs-tabs .nav-tabs .nav-link.active {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default) var(--color-default) var(--color-default);
}

.dxbs-tabs .nav-tabs .nav-link:focus, .dxbs-tabs .nav-tabs .nav-link:hover {
    border-color: var(--color-default) var(--color-default) var(--color-default);
    outline: none;
}

.dxbs-tabs .nav-tabs {
    border: none;
}

.buttonsRow {
    padding-bottom: .5rem;
    display: flex;
    justify-content: flex-end;
}

.settingGrid ::-webkit-scrollbar-track {
    border-radius: .25rem;
    box-shadow: inset 0 0 8px rgba(200, 200, 200, .9);
}

.settingGrid ::-webkit-scrollbar-thumb {
    background-color: var(--color-default);
    border-radius: .25rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

.settingGrid .dxbs-ta-nib .dxbs-ta-ag > .btn:not(:hover):not(:active):not(.active),
.settingGrid .dxbs-toolbar .dxbs-toolbar-btn.btn.dxbs-ta-nib:not(:hover):not(:active):not(.active),
.settingGrid .dxbs-toolbar .dxbs-toolbar-btn > .btn.dxbs-ta-nib:not(:hover):not(:active):not(.active) {
    color: var(--color-default);
}
.settingGrid .dxbs-toolbar .dxbs-toolbar-btn.btn.dxbs-ta-nib:not(:focus),
.settingGrid .dxbs-toolbar .dxbs-toolbar-btn > .btn.dxbs-ta-nib:not(:focus),
.settingGrid .dxbs-toolbar .dropdown-item.btn:not(:focus) {
    color: var(--color-default);
    background-color: var(--background-color-default);
}

.settingGrid .dxbs-toolbar-btn.btn:focus {
    box-shadow: 0 0 0 .1rem var(--neon-border-default);
}
.settingGrid .dxbs-toolbar-btn.btn:hover {
    color: var(--color-default);
    background-color: var(--background-color-default);
}

.settingGrid .dxbs-grid-header-container.dxbs-scrollbar-padding {
    padding-right: 0;
}

.settingGrid .grid-header-template,
.settingGrid .dxbs-grid-header-container,
.settingGrid .dxbs-grid-vsd {
    background-color: transparent !important;
}

.settingGrid .bg-primary {
    background-color: var(--background-color-default) !important;
}

.settingGrid .text-white {
    color: var(--color-default) !important;
}

.settingGrid .table {
    color: var(--color-default);
}

.settingGrid .card {
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
}

.settingGrid th, .settingGrid td {
    border-color: var(--neon-border-default);
}

.settingGrid tr:last-child > td {
    border-bottom: solid 1px var(--neon-border-default) !important;
}

.settingGrid .dxbs-grid-vsd {
    height: 70vh!important;
}

.settingGrid .modal-dialog {
    max-width: 1200px!important;
}

.form-control,
.form-control[readonly] {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
    border-width: 2px;
}

.dropdown-menu {
    color: var(--color-default);
    background-color: #333;
    border-color: var(--neon-border-default);
    border-width: 2px;
}

input:focus,
textarea:focus,
.dropdown-item:active,
.dropdown-item:hover
{
    color: black!important;
    background-color: var(--color-default)!important;
    border-color: var(--neon-border-default)!important;
    border-width: 3px;
}

.dropdown-item.bg-primary
{
    background-color: #aaaaaaa0!important;
}

.form-control .btn, .form-control btn-secondary, .dxbs-calendar, .calendar-view {
    color: var(--color-default);
    background-color: var(--dropdown-color-default);
    border-color: initial;
}

.table {
    color: inherit;
}

.btn-link,
.page-link,
.dxbs-calendar .btn {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
}

    .btn-link:hover,
    .btn-link:focus,
    .page-link:hover,
    .page-link:focus,
    .dxbs-calendar .btn:hover,
    .dxbs-calendar .btn:focus {
        text-decoration-line: unset;
        color: black;
        background-color: var(--neon-color-default);
    }

/* フィルター行設定 */
/*
.settingGrid .dxbs-filter-row a,
.settingGrid .dxbs-filter-row a:link,
.settingGrid .dxbs-filter-row a:visited,
.settingGrid .dxbs-filter-row a:hover,
.settingGrid .dxbs-filter-row a:active,
.settingGrid .dxbs-filter-row .form-control,
.settingGrid .dxbs-filter-row .form-control .btn,
.settingGrid .dxbs-filter-row .form-control[readonly] {
    color: var(--color-purple);
    background-color: var(--background-color-purple);
    border-color: var(--neon-border-purple);
    border-width: 2px;
}

    .settingGrid .dxbs-filter-row input:focus {
        color: black!important;
        background-color: var(--color-purple)!important;
        border-color: var(--neon-border-purple)!important;
        border-width: 3px!important;
    }

.settingGrid .dxbs-filter-row .dropdown-menu {
    background-color: #33001b;
    border-color: var(--neon-border-purple);
}

.settingGrid .dxbs-filter-row .dropdown-item:hover {
    background-color: var(--color-purple) !important;
}
*/

.settingGrid .dx-page-selector .page-link.page-count {
    color: var(--color-default);
}

.settingGrid .btn-link,
.settingGrid .page-link {
    font-size: .875rem !important;
    border: solid 1px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


.settingGrid .page-item.disabled .page-link {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
    opacity: .5;
}
.modal-content {
    color: var(--color-default);
    background-color: black;
    border-color: var(--neon-border-default);
}

.modal-header, .modal-body, .modal-footer {
    color: var(--color-default);
    background-color: var(--background-color-default);
    border-color: var(--neon-border-default);
}

.export-buttons {
    text-align: center;
}


.settingGrid .dxbs-grid-edit-form .row:first-of-type {
    height: 500px;
    flex-direction:column;
}

.custom-checkbox .custom-control-label::before {
    border-color: var(--color-default);
    background-color: transparent;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    border-color: var(--color-default);
    background-color: transparent;
    box-shadow: 0 0 .5rem var(--neon-border-default), inset 0 0 .5rem var(--neon-border-default);
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--color-default);
    background-color: transparent;
}

.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--background-color-default);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--color-default);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem var(--background-color-default);
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--color-default);
    background-color: transparent;
}

@media (min-width: 768px) {
    .dxbs-grid-edit-form .row .col-md-6 {
        flex-basis:auto;
    }
}