.ob-window-main-content {
    align-items: flex-start;
    max-width: 800px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border: var(--ui-border);
    border-radius: 10px;
    height: 100%;
    max-height: 90vh;
}

:is(.ob-window-chat-content) .kx-field-title.ui-label-one-line {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-break: auto !important;
}

.ob-body {
   background-color:  var(--ui-main-content);
}

@media screen and (max-width: 800px) {
    .ob-window-main-content {
        align-items: flex-start;
        width: 100%;
        background-color: white;
        height: 100%;
        border:none;
        border-radius: unset;
    }
    .ob-body {
        background-color: white;
    }
    
    .ob-header-page-view-content > .ob-label-title {
        font-size: 15px;
    }

    .ob-header-page-view-content > .ob-label-subtitle {
        font-size: 11px;
    }
    
}


@media screen and (max-width: 600px) {
    .ui-hstack.screen-600 {
        flex-direction: column;  
    }
}

@media screen and (max-width: 1000px) {
    .ui-hstack.screen-1000 {
        flex-direction: column;
    }
}

@media screen and (max-width: 500px) {
    .ui-hstack.screen-500 {
        flex-direction: column;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
}

.flexible-space {
    flex: 1;
}


html, body {
    font-family: "Montserrat";
    font-variant: tabular-nums;
    font-size: 13px;
    font-weight: 500;
}



.ob-field-title {
    font-size: 12px;
    font-weight: 400;
    color: var(--ui-gray-600);
}

.ob-field-title.required {
    color: var(--ui-red);
}

.ob-label-one-line {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    line-break: auto;
}

.ob-label-two-line {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-break: auto;
}

.ob-label-four-line {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    line-break: auto;
}


.ob-field-content {
    
    border: 1px solid var(--ui-control-background);
    background-color: var(--ui-control-background);
    outline: none;
    box-shadow: unset;
    border-radius: 4px;
}

.ob-field-content.required {
    border: 1px solid var(--ui-red-25);
    background-color: var(--ui-red-10);

}

.ob-field-content.warning:not(.required) > .ob-input-inner:not(:focus) {
    color: var(--ui-red)
}

.ob-input-inner {
    width:100%;
    border:0;
    outline: 0;
    background: none;
    flex: 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    padding-block: 4px;
    padding-inline: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    box-sizing:border-box;
}

.ob-radio-cell-content {
    gap: 10px;
    border-radius: 7px;
    background-color: var(--ui-control-background);
    padding: 10px;
    cursor:pointer;
    outline: unset;
    border: 1px solid var(--ui-control-background);
    font-family: inherit;
}

.ob-radio-cell-content:focus-within {
    border: 1px solid var(--ui-gray-500);
}

.ob-radio-cell-round {
    padding: 3px; 
    border: 1px solid var(--ui-gray-400);
    background-color: white;
    border-radius: 30px;
}


.ob-radio-cell-on {
    width: 12px;
    height: 12px;
    background-color: var(--ui-blue);
    border-radius: 10px;
}

.ob-radio-cell-off {
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 10px;
    
}

.ob-flag-image {
    max-height: 50px;
    padding: 5px;
    border-radius: 100px;
    cursor: pointer;
}

.ob-flag-image:hover {
    background-color: var(--ui-border-line);
}

.ob-flag-image.selected {
    background-color: var(--ui-blue);
}


.ob-label-default {
    font-size: 13px;
    font-weight: 500;
}
.ob-label-title {
    font-size: 21px;
    font-weight: 500;
}

.ob-label-section {
    font-size: 15px;
    font-weight: 700;
    color: rgb(40, 40, 40);
}

.ob-label-subtitle {
    font-size: 13px;
    font-weight: 300;
    color:var(--ui-gray-600);
}

.ob-label-checkbox {
    padding-left: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
}

.ob-none {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action:  none;
    pointer-events: none;
}

.ob-no-selection {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;   
}




/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown:hover, .dropdown:focus, .dropdown:focus-within {
    background-color: var(--ui-hover);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    width: 100%;
    box-shadow: var(--ui-shadow);
    border: var(--ui-border);
    border-radius: 5px;
    z-index: 1;
    padding: 5px;
    right: 0;
}

.dropdown-item {
    background-color: white;
    cursor: pointer;
    outline: unset;
    border: unset;
    box-shadow: unset;
    
}
.dropdown-item:hover, .dropdown-item:focus-within {
    background-color: var(--ui-hover);
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */

.dropdown:focus-within .dropdown-content,
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */

.ui-vstack > input > input {
    color: red;
}

input[type="file"] {
    display: none;
}

.ob-field-content:active, .ob-field-content:has(.ob-input-inner:focus), .ob-field-content:has(.select2-container--focus) {
    border: 1px solid var(--ui-gray-500);
}

.ob-required-content > .ob-radio-cell-content,
.ob-required-content > .ui-drop-zone {
    background-color: var(--ui-red-10) !important;
    border: 1px solid var(--ui-red-25) !important;
}