/* ============================================================================
   vision-controls.css - plain-markup copies of the old containers for converted pages,
   measured from the old Material theme so the pages keep their look.

   .vrp  RoundPanel: a collapsible panel with a blue header.
         <div class="vrp vrp-collapsed">
           <div class="vrp-header vrp-header-clickable" onclick="..."><span class="vrp-collapse-btn"></span>...</div>
           <div class="vrp-content">...</div>
         </div>
         (the page toggles .vrp-collapsed and shows/hides .vrp-content)

   .vpanel  RoundPanel without a header (a white rounded box).

   .vtc  PageControl: tabs over a content area (.vtc-bordered: with the control border).
         <div class="vtc"><ul class="vtc-strip"><li class="vtc-tab vtc-active"><span>Tab</span></li>...</ul>
           <div class="vtc-content">...</div></div>
   ============================================================================ */

/* ---- RoundPanel */
.vrp {
    width: 99%;
    margin: 10px 0;
    border: 1px solid #dbe4ed;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    color: #484848;
    font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.vrp-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 56px;
    padding: 15px;
    background: #0164f2;
    color: #fff;
    font: bold 14.3px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    text-align: center;
}

.vrp-header-clickable {
    cursor: pointer;
}

/* the collapse arrow on the left of the header (a down arrow while collapsed) */
.vrp-collapse-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin: 0 5px 0 4px;
    border-radius: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1,8.5 6,3.5 11,8.5' fill='none' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E") no-repeat 7px 7px;
    /* the old theme turned the grey arrow almost white on the blue header */
    filter: invert(96%) sepia(96%) saturate(16%) hue-rotate(234deg) brightness(104%) contrast(103%);
}

.vrp-collapsed .vrp-collapse-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1,3.5 6,8.5 11,3.5' fill='none' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E");
}

.vrp-header-table {
    width: 90%;
    border-collapse: collapse;
}

    .vrp-header-table td {
        padding: 0;
        text-align: center;
        vertical-align: middle;
    }

.vrp-header-text {
    color: #fff;
    font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    text-transform: capitalize;
}

.vrp-content {
    padding: 0 20px 20px;
}

/* ---- PageControl */
.vtc {
    color: #757575;
    font: 14px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

/* a PageControl with ControlStyle.Border set */
.vtc-bordered {
    border: 1px solid #757575;
}

.vtc-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vtc-tab {
    margin: 0 1px 0 0;
    padding: 10px 24px 9px;
    background: rgba(203, 224, 255, 0.32);
    border: 1px solid #e3e3e3;
    border-bottom-color: #dfdfdf;
    border-radius: 5px 5px 0 0;
    color: #1e3768;
    cursor: pointer;
    user-select: none;
}

    .vtc-tab:hover {
        background: #d4e8fd;
    }

    .vtc-tab > span {
        display: inline-block;
        padding: 2px 0;
        font: 13px 'Roboto Medium', Roboto, sans-serif;
        text-transform: capitalize;
    }

    .vtc-tab.vtc-active {
        background: transparent;
        border-color: #d4dde5;
        border-bottom: 2px solid #fff;
        color: #484848;
        cursor: default;
    }

.vtc-content {
    padding: 16px;
    border: 1px solid #ececec;
    border-top: none;
}

/* ---- RoundPanel without a header */
.vpanel {
    box-sizing: border-box;
    padding: 24px 44px 44px;
    border: 1px solid #dbe4ed;
    border-radius: 10px;
    background: #fff;
    color: #484848;
    font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

/* ---- FormLayout
   <div class="vfl-group"><div class="vfl-group-caption">Details</div>
     <div class="vfl-rows"><div class="vfl-cap">First Name:</div><div class="vfl-val">...</div>...</div></div>
   .vfl-table: caption / editor rows of an edit form (captions aligned over all rows);
   .vfl-boxed: each row in its own light grey box (GroupBoxDecoration.None items). */
.vfl-group {
    padding-bottom: 12px;
}

.vfl-group-caption {
    margin: 1rem 3px 0 13px;
    padding: 10px 0;
    border-bottom: 1px solid #bbb;
    background: #fff;
    color: #000;
    font: 18px 'Roboto Medium', Roboto, sans-serif;
}

    .vfl-group-caption::before {
        content: "\f316";
        margin-right: 7px;
        color: #5e8eff;
        font: 900 18px "Font Awesome 6 Pro";
    }

.vfl-rows {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: 12px;
    margin: 32px 0 0 28px;
}

.vfl-cap {
    padding: 5px 16px 5px 10px;
    color: #09264a;
    font: bold 13px Roboto, sans-serif;
    line-height: 16px;
    white-space: nowrap;
}

.vfl-val {
    padding: 5px 16px 5px 0;
    color: #000;
    font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    line-height: 16px;
    overflow-wrap: anywhere;
}

.vfl-required::after {
    content: "*";
    color: #ff0000;
}

.vfl-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .vfl-table > tbody > tr > td {
        padding: 5px 16px 5px 10px;
        vertical-align: middle;
    }

    .vfl-table td.vfl-cap {
        vertical-align: top;
        padding-top: 12px;
    }

.vfl-boxed > tbody > tr > td {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f9f9f9;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

    .vfl-boxed > tbody > tr > td:first-child {
        padding-left: 20px;
        border-left: 1px solid #e1e1e1;
    }

    .vfl-boxed > tbody > tr > td:last-child {
        border-right: 1px solid #e1e1e1;
    }

/* the small editors of the old forms (170 x 30) */
.vfl-editor.dx-texteditor {
    width: 170px;
}

    .vfl-editor.dx-texteditor .dx-texteditor-input {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 13px;
    }

/* the light grey band of buttons (a Menu) above a form */
.vfl-menu {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    min-height: 58px;
    margin: 28px 21px 0;
    padding: 10px 10px 5px;
    background: rgba(215, 215, 215, 0.27);
}

/* ---- Button: the old orange button (add class "vbtn" to a DevExtreme button) */
.dx-button.vbtn {
    min-width: 96px;
    height: 37px;
    border: none;
    border-radius: 2px;
    background: #e9770c;
    box-shadow: none;
}

    .dx-button.vbtn .dx-button-content {
        padding: 9px 16px;
    }

    .dx-button.vbtn .dx-button-text {
        color: #fff;
        font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        text-transform: capitalize;
    }

    .dx-button.vbtn.dx-state-hover,
    .dx-button.vbtn.dx-state-focused {
        background: #d06a0b;
    }

    .dx-button.vbtn.dx-state-disabled {
        background: #ddd;
        opacity: 1;
    }

        .dx-button.vbtn.dx-state-disabled .dx-button-text {
            color: #a2a2a2;
        }

    /* the outline render mode: a lighter orange inside a white ring */
    .dx-button.vbtn.vbtn-outline {
        height: 43px;
        border: 3px solid #fff;
        background: #f87d1e;
    }

        .dx-button.vbtn.vbtn-outline.dx-state-hover,
        .dx-button.vbtn.vbtn-outline.dx-state-focused {
            background: #e9770c;
        }

        .dx-button.vbtn.vbtn-outline.dx-state-disabled {
            background: #ddd;
        }

/* ---- CheckBox: the old orange check box (add class "vcheck" to a DevExtreme check box) */
.dx-checkbox.vcheck .dx-checkbox-icon {
    width: 18px;
    height: 18px;
    border: 2px solid #484848;
    border-radius: 2px;
}

.dx-checkbox.vcheck.dx-state-focused:not(.dx-checkbox-checked) .dx-checkbox-icon,
.dx-checkbox.vcheck.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
    border-color: #484848;
}

.dx-checkbox.vcheck.dx-checkbox-checked .dx-checkbox-icon {
    border-color: #e9770c;
    background-color: #e9770c;
    color: #fff;
}

.dx-checkbox.vcheck .dx-checkbox-text {
    color: #484848;
    font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

/* ---- Button: the old white "secondary" button (add class "vbtn-secondary" to a DevExtreme button) */
.dx-button.vbtn-secondary {
    min-width: 96px;
    height: 37px;
    border: none;
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
}

    .dx-button.vbtn-secondary .dx-button-content {
        padding: 9px 14px;
    }

    .dx-button.vbtn-secondary .dx-button-text {
        color: #666;
        font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        text-transform: capitalize;
    }

    .dx-button.vbtn-secondary.dx-state-hover,
    .dx-button.vbtn-secondary.dx-state-focused {
        background: #e6e6e6;
    }

/* ---- RatingControl (read only): five 36 x 34 stars, filled up to the value */
.vrating {
    display: flex;
    height: 34px;
}

    .vrating > span {
        width: 36px;
        height: 34px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='0 0 36 34'%3E%3Cpolygon points='18,2 22.5,12.5 34,13 25,20.5 28,32 18,25.5 8,32 11,20.5 2,13 13.5,12.5' fill='%23c2c2c1'/%3E%3C/svg%3E") no-repeat;
    }

        .vrating > span.vrating-on {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='0 0 36 34'%3E%3Cpolygon points='18,2 22.5,12.5 34,13 25,20.5 28,32 18,25.5 8,32 11,20.5 2,13 13.5,12.5' fill='%23e9770c'/%3E%3C/svg%3E");
        }

/* ---- PopupControl: the blue gradient header of the old popups (WrapperAttr class "vpopup") */
.vpopup .dx-popup-title.dx-toolbar {
    box-sizing: border-box;
    min-height: 61px;
    padding: 18px 10px 16px 12px;
    border-bottom: none;
    background: linear-gradient(41deg, #0069ff 10%, #012891 42%, #1f0191 62%);
}

    .vpopup .dx-popup-title.dx-toolbar .dx-toolbar-label .dx-toolbar-item-content > div {
        color: #fff;
        font: 13px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    }

    .vpopup .dx-popup-title.dx-toolbar .dx-closebutton .dx-icon {
        color: #fff;
    }

/* with vpopup-pad: the old popups' content padding */
.vpopup.vpopup-pad .dx-popup-content {
    padding: 9px 12px;
}

/* a DevExtreme form group as a FormLayout group with a heading line (CssClass "vfl-dx-group"); its captions
   right aligned and bold, as the old edit forms */
.vfl-dx-group > .dx-form-group-caption {
    display: block;
    margin: 0 0 12px;
    padding: 10px 0;
    border-bottom: 1px solid #bbb;
    color: #000;
    font: 18px 'Roboto Medium', Roboto, sans-serif;
}

    .vfl-dx-group > .dx-form-group-caption::before {
        content: "\f316";
        margin-right: 7px;
        color: #5e8eff;
        font: 900 18px "Font Awesome 6 Pro";
    }

.vfl-dx-group > .dx-form-group-content {
    padding-top: 0;
    border-top: none;
}

.vfl-dx-group .dx-field-item-label-location-left {
    text-align: right;
}

.vfl-dx-group .dx-field-item-label-text {
    color: #09264a;
    font: bold 13px Roboto, sans-serif;
}

/* Recurrence pattern editor (Views\Shared\_RecurrenceEditor.cshtml, VisionUI\js\vision-recurrence.js) */
.vision-recurrence-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.vision-recurrence-label {
    min-width: 50px;
    color: #09264a;
    font-weight: bold;
}

.vision-recurrence-custom {
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid #f0d58c;
    border-radius: 4px;
    background: #fff8e1;
    font-size: 12px;
}