﻿
.DateOnlyInput{
    width:35%;
}

dxbl-memo-editor {
    width: 100%;
    height: 100px;
}

.Normal > .dxbl-fl-ctrl > dxbl-input-editor {
    width: 60%;
}

dxbl-date-time-edit{
    width:40%;
}

.LocationSel{
    margin-left:auto;
    margin-right:auto;
}

.dxbl-listbox{
    margin:0 !important;
}

.NewSetting > label{
    display: inline-block !important;
    width:238.5px !important;
    height:0 !important;
}

.dxbl-fl-ctrl{
    width:100%;
}
.NewSetting > dxbl-fl-ctrl > dxlistbox{
    width: 85%;
}
.LabelTemp {
    width: 402px;
    white-space: pre-wrap !important;
}

.dxbl-fl-ctrl{
    display:flex;
}

.NewSetting{
    margin-left:auto;
    margin-bottom:20px;
    margin-top: 2px !important;
    width:100% !important;
}
dxbl-input-editor > input, .TextRange1 > input, .TextRange2 > input {
    text-align: center;
}


@media only screen and (min-width:1601px){
    .Form {
        margin-top: 1%;
    }
    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl, .NewSetting > .dxbl-fl-ctrl {
        display: flex;
        justify-content: center;
        position: relative;
    }

    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 40%;
        text-align: center;
        height: calc(100% - 50px) !important;
        margin: 0 auto;
    }

    .Normal > .dxbl-fl-cpt{
        width: 222px !important;
    }

    .NewSetting > .dxbl-fl-cpt {
        width: 238px !important;
    }
    .Normal > .dxbl-fl-cpt {
        white-space: pre-wrap !important;
    }

    .LabelTemp{
        width:368px;
    }
    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal{
        margin-top: 29px !important;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2 {
        width: 30%;
        text-align: center;
    }

    .DateRange2, .TimeRange2, .TextRange2 {
        margin-left: 10px;
    }

    .dxbl-fl-ctrl > dxbl-spinedit {
        width: 20%;
    }

    .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
        text-align: center;
    }

    dxbl-input-editor{
        width:60%;
    }

    dxbl-memo-editor{
        width:62%;
        height:100px;
    }

    dxbl-date-time-edit, .DateOnlyInput{
        width:30%;
    }
}
@media only screen and (min-width:1400px) and (max-width:1600.9px)
{
    .NewSetting > .dxbl-fl-ctrl > dxbl-input-editor {
        width: 60%;
    }

    .Form {
        margin-top: 1%;
    }


    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl, .NewSetting > .dxbl-fl-ctrl{
        display: flex;
        justify-content: center;
        position: relative;
    }

    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 100%;
        text-align: center;
        height: calc(100% - 50px) !important;
        margin: 0 auto;
    }

    .NewSetting > label{
        display: inline-block !important;
        width: 282.5px !important;
        height: 0 !important;
    }

    .Normal > .dxbl-fl-cpt{
        width: 222px !important;
        white-space: pre-wrap !important;
    }
    .NewSetting > .dxbl-fl-cpt {
        width: 238px !important;
    }

    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal{
        margin-top: 20px;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2{
        width:90%;
        text-align:center;
    }

    .DateRange2, .TimeRange2, .TextRange2{
        margin-left:10px;
    }

    .dxbl-fl-ctrl > dxbl-spinedit{
        width:40%;
    }

    .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
        text-align: center;
    }
}

@media only screen and (max-width:1399.9px) and (min-width:1200px){
    .NewSetting > .dxbl-fl-ctrl > dxbl-input-editor {
        width: 70%;
        margin-left: 32px;
    }

    .NewSetting > .dxbl-fl-ctrl{
        width: calc(100% - 249px);
    }

    .NewSetting > label {
        display: inline-block !important;
        width: 249.5px !important;
        height: 0 !important;
    }
    .Form {
        margin-top: 1%;
    }

    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl, .NewSetting > .dxbl-fl-cpt {
        display: flex;
        justify-content: center;
        position: relative;
    }

    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 100%;
        text-align: center;
        height: calc(100% - 50px) !important;
        margin: 0 auto;
    }

    .Normal > .dxbl-fl-cpt {
        width: 179px !important;
        white-space: pre-wrap !important;
    }

    .NewSetting > .dxbl-fl-cpt {
        width: 218px !important;
    }

    

    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal{
        margin-top: 20px;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2 {
        width: 90%;
        text-align: center;
    }

    .dxbl-fl-ctrl > dxbl-spinedit {
        width: 40%;
    }

    .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
        text-align: center;
    }
}

@media only screen and (max-width:1199.9px) and (min-width:1159.1px){

    .NewSetting > label{
        display: inline-block !important;
        width: 232.5px !important;
        height: 0 !important;
    }
    .NewSetting > .dxbl-fl-ctrl > dxbl-input-editor {
        width: 77%;
    }

    dxbl-date-time-edit, .DateOnlyInput{
        width: 60%;
    }

    .Form {
        margin-top: 1%;
    }

    /*
    .NewSetting > .dxbl-fl-ctrl > .dxbl-checkbox > .dxbl-checkbox-check-element {
        border: 1px solid green;
    }

    .NewSetting > .dxbl-fl-ctrl > .dxbl-checkbox > .dxbl-checkbox-check-element > input {
        border: 1px solid green;
    }

    .NewSetting > .dxbl-fl-ctrl > * > input {
        border: 1px solid green;
    }
        */

    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl{
        display: flex;
        justify-content: center;
        position: relative;
    }



    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 100%;
        text-align: center;
        height: calc(100% - 50px) !important;
        margin: 0 auto;
    }

    .Normal > .dxbl-fl-cpt {
        width: 179px !important;
        white-space: pre-wrap !important;
    }
    .NewSetting > .dxbl-fl-cpt {
        width: 195px !important;
    }
    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal{
        margin-top: 20px;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2 {
        width: 90%;
        text-align: center;
    }

    .dxbl-fl-ctrl > dxbl-spinedit {
        width: 40%;
    }

    .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
        text-align: center;
    }

}

@media only screen and (max-width:1159px) and (min-width:992px) {
    .NewSetting > label {
        display: inline-block !important;
        width: 177.5px !important;
        height: 0 !important;
    }

    .NewSetting > .dxbl-fl-ctrl > dxbl-input-editor {
        width: 78%;
    }

    dxbl-date-time-edit, .DateOnlyInput {
        width: 60%;
    }

    .Form {
        margin-top: 1%;
    }

    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl, .NewSetting > .dxbl-fl-ctrl{
        display: flex;
        justify-content: center;
        position: relative;
    }

    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 100%;
        text-align: center;
        height: calc(100% - 50px) !important;
        margin: 0 auto;
    }

    .Normal > .dxbl-fl-cpt {
        width: 56px !important;
        white-space: pre-wrap !important;
    }

    .NewSetting > .dxbl-fl-cpt {
        width: 72px !important;
    }

    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal{
        margin-top: 20px;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2 {
        width: 90%;
        text-align: center;
    }

    .dxbl-fl-ctrl > dxbl-spinedit {
        width: 40%;
    }

        .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
            text-align: center;
        }
}

@media only screen and (max-width:991.9px){
    .NewSetting{
        margin-top: -4px !important;
        margin-left: 34px;
        margin-bottom:20px;
    }
    .NewSetting > label {
        display: inline-block !important;
        width: 177.5px !important;
        height: 0 !important;
    }

 
    .NewSetting > .dxbl-fl-ctrl > dxbl-input-editor {
        width: 69.9%;
    }

    dxbl-date-time-edit, .DateOnlyInput {
        width: 60%;
    }

    .Form {
        margin-top: 1%;
    }


    dxbl-group-control {
        padding-bottom: 20px;
    }


    .DCheck {
        margin-left: auto;
    }


    .Normal > .dxbl-fl-ctrl{
        display: flex;
        justify-content: center;
        position: relative;
    }

    .NewSetting > .dxbl-fl-ctrl{
        margin-left:-34px;
        justify-content:center;
    }
    .trashicon {
        position: relative;
        top: 7px;
        margin-left: 10px;
    }

    .dxbl-listbox {
        width: 100%;
        text-align: center;
        height: 100% !important;
        margin: 0 auto;
    }

    .dxbl-fl-cpt {
        white-space: pre-wrap !important;
    }

    .dxbl-fl-ctrl {
        display: flex;
    }

    dxbl-check {
        margin: 0 auto;
    }

    .LastSet {
        margin-bottom: -20px;
    }

    dxbl-date-edit > input {
        text-align: center;
    }

    .Normal {
        margin-top: 20px;
    }

    .LocationSel {
        margin-left: auto;
    }

    .NumRange1, .NumRange2 {
        width: 100px;
    }

    .NumRange2 {
        margin-left: 10px;
    }

    .NumRange1 {
        margin-left: 5px;
    }

    .DateRange1, .DateRange2, .TimeRange1, .TimeRange2, .TextRange1, .TextRange2 {
        width: 90%;
        text-align: center;
    }

    .dxbl-fl-ctrl > dxbl-spinedit {
        width: 40%;
    }

    .dxbl-fl-ctrl > dxbl-spinedit > input, dxbl-date-time-edit > input, dxbl-combobox > input {
        text-align: center;
    }
}

@media only screen and (max-width:640px){


    .dxbl-listbox{
        width:50%;
        margin: 0;
    }

    dxbl-memo-editor {
        margin-top:-20px;
        margin-bottom:30px;
    }
}

.MainBar {
    width: 250px;
    display: flex;
    transition: width 0.3s;
}

.SecondNav {
    height: 100%;
    width: 0;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    transition: width 0.3s;
}

.animatesecondnav{
    width:150px;
}

.animatesecondnavreverse {
    width: 0px;
}

.animateMain{
    width:400px;
}

.animateMainRev{
    width:250px;
}
@keyframes OpenSecondNav{
    0%{
        width:0px;
    }
    100% {
        width: 150px;
    }
}

@keyframes CloseSecondNav {
    0% {
        display: block !important;
        width: 150px;
    }

    100% {
        display: None !important;
        width: 0px;
    }
}

@keyframes WidenMainBar{
    0% {
        width: 250px;
    }

    100% {
        width: 400px;
    }
}