﻿
.w-site .control-type-button.fullscreen-expand-command > .w-button {
    background-color: rgb(21, 101, 192);
    color: orangered;
    width: fit-content;
    min-width: fit-content;
}

@media (min-width: 900px) {
    .w-site .control-type-button.fullscreen-expand-command {
        display: none;
    }
}
@media (min-width: 700px) {
    .w-site .w-actions-panel-card {
        width: 100%;
    }
}


.w-panel {
    gap: 8px;
}

.w-site .w-mini-panel {
    width: 750px;
}

.w-site .w-wide-panel {
    width: 90vw;
}

    @media (max-width: 600px) {

        .w-site .w-mini-panel {
            width: 380px;
        }


        .search-url {
            width: 250px;
        }

        .w-tab .w-tabpage-header {
            border-radius: 0px 0px 0px 0px;
        }

        /*    .w-html-dropdown-panel.w-compact .w-header .w-icon-text {
        font-size: x-small;
    }*/

        .w-tab-header {
            flex-wrap: wrap;
            justify-content: center;
        }

        .w-item-header .w-icon-text {
            overflow-x: auto;
            font-size: small;
            word-break: keep-all;
        }


        .w-site .w-panel > .w-content .w-field-title-type .w-title-field {
            width: calc(40vw - 0px) !important;
            overflow-x: auto;
        }

        .w-site .w-panel > .w-content .w-field-title-type .w-value-field {
            /*  width: calc(100vw - 10px) !important;
        margin-top: 20px;
        left: 5px;*/
        }

        .expand-as-full-screener > .w-content > .w-html-dropdown-list > .w-list-item.open {
            padding: 2px !important;
            padding-bottom: 300px !important;
        }

        .w-site .w-panel > .w-content .w-field-title-type .w-title-field,
        .w-site .w-panel > .w-content .w-field-title-type .w-value-field {
            top: 22px;
        }
    }
.w-height-xxx{
    min-height:300px;
}
.control-type-panel,
.w-panel {
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 5px;
}

.w-width-m12,
.w-site .control-type-panel.w-width-12,
.w-width-1500,
.w-panel-1500 {
    flex: 1;
    min-width: 400px;
    width: calc((100% - 7px));
    flex: 0 0 calc((100% - 7px));
}
 
.w-width-1000,
.w-panel-1000 {
    flex: 1;
    min-width: 500px;
    width: calc((100% - 36px) / 2);
    flex: 0 0 calc((100% - 36px) / 2);
}


.w-width-500,
.w-panel-500 {
    flex: 1;
    min-width: 500px;
    width: calc((100% - 40px) / 3);
    flex: 0 0 calc((100% - 40px) / 3);
}


.w-site .control-type-panel.w-width-m4, .w-width-m4 {
    flex: 1;
    min-width: 245px;
    width: calc((100% - 40px) / 3);
    flex: 0 0 calc((100% - 40px) / 3);
}
.w-site .control-type-panel .control-type-panel.w-width-m4, .w-width-m4 {
    min-width: 225px;
}
    .w-site .control-type-panel.w-width-m6,
    .w-width-m6 {
        flex: 1;
        min-width: 240px;
        width: calc((100% - 26px) / 2);
        flex: 0 0 calc((100% - 26px) / 2);
    }


.w-width-m3,
.w-site .control-type-panel.w-width-m3,
.w-panel-card-300,
.w-width-300,
.w-panel-300 {
    flex: 1;
    min-width: 300px;
    width: calc((100% - 60px) / 4);
    flex: 0 0 calc((100% - 60px) / 4);
}


.w-width-400,
.w-panel-400 {
    flex: 1;
    min-width: 400px;
    width: calc((100% - 40px) / 3);
    flex: 0 0 calc((100% - 40px) / 3);
}
 
.w-width-m8,
.w-site .control-type-panel.w-width-m8 {
    width: 66%;
}
.w-width-m9,
.w-site .control-type-panel.w-width-m9 {
    width: 75%;
}
.w-width-m12,
.w-site .control-type-panel.w-width-m12 {
/*    width: 100%;
*/}
.control-type-datalist-select-box,
.control-type-data-select-box,
.control-type-textbox,
.control-type-select-box {
    min-width: 300px;
    max-width: calc((100vw - 36px) / 2);
    width: calc((100%; - 12px) );
    /*    width: calc((100% - 36px) / 2);
    flex: 0 0 calc((100% - 36px) / 2);*/
}
@media (max-width: 600px) {
    .w-width-m12,
    .w-site .control-type-panel.w-width-m12,
    .w-width-1500,
    .w-panel-1500 {
        flex: 1;
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }


    .w-width-m6,
    .w-site .control-type-panel.w-width-m6,
    .w-width-1000,
    .w-panel-1000 {
        flex: 1;
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

 
    .w-width-m4,
    .w-site .control-type-panel.w-width-m4,
    .w-width-500,
    .w-panel-500 {
        flex: 1;
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

    .w-width-m3,
    .w-site .control-type-panel.w-width-m3,
    .w-panel-card-300,
    .w-width-300,
    .w-panel-300 {
        flex: 1;
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

    .control-type-datalist-select-box,
    .control-type-data-select-box,
    .control-type-textbox,
    .control-type-select-box {
        min-width: 300px;
        max-width: calc((100vw - 18px) / 1);
        /*    width: calc((100% - 36px) / 2);
    flex: 0 0 calc((100% - 36px) / 2);*/
    }
}