/*
 * BLAISE CREATOR TEMPLATE FRAME V1.3
 *
 * Critical rule:
 * This stylesheet MUST NOT change the default Project Definition layout.
 */

.blaise-template-entry{
    display:inline-flex;
    align-items:center;
    gap:7px;

    min-height:38px;

    padding:0 13px;

    border:1px solid #2479a7;
    border-radius:8px;

    background:transparent;

    color:#dcecf8;

    cursor:pointer;

    font:inherit;
    font-size:12px;
    font-weight:650;

    white-space:nowrap;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.blaise-template-entry:hover{
    border-color:#25adf7;
    background:rgba(32,164,255,.08);
}

.blaise-template-entry-icon{
    color:#31baff;
}


/* ==========================================================================
   TEMPLATE WORKSPACE
   Hidden by default.
   Therefore the normal Project Definition screen remains untouched.
   ========================================================================== */

#blaiseCreatorTemplateWorkspace{
    display:none;
}

#blaiseCreatorTemplateWorkspace.active{
    display:block;
}


/* ==========================================================================
   TEMPLATE WORKSPACE PRESENTATION
   ========================================================================== */

.bct-shell{
    width:100%;
}

.bct-head{
    display:flex;
    align-items:flex-start;
    gap:16px;

    margin-bottom:16px;
}

.bct-head-main{
    flex:1;
}

.bct-head h2{
    margin:0;

    color:#fff;

    font-size:24px;
    line-height:1.2;
}

.bct-head p{
    margin:6px 0 0;

    color:#9eb7cb;

    font-size:12px;
}

.bct-back{
    min-height:38px;

    padding:0 13px;

    border:1px solid #2479a7;
    border-radius:8px;

    background:#082b49;

    color:#dcecf8;

    cursor:pointer;

    font-size:11px;
    font-weight:650;
}

.bct-toolbar{
    display:grid;

    grid-template-columns:
        minmax(260px,1fr)
        180px
        180px
        170px;

    gap:9px;

    margin-bottom:13px;
}

.bct-search{
    position:relative;
}

.bct-search:before{
    content:"⌕";

    position:absolute;

    left:13px;
    top:50%;

    transform:translateY(-50%);

    color:#7394ae;
}

.bct-search input,
.bct-toolbar select{
    width:100%;
    height:41px;

    border:1px solid #18547a;
    border-radius:8px;

    background:#092a47;

    color:#fff;

    outline:none;
}

.bct-search input{
    padding:
        0
        12px
        0
        37px;
}

.bct-toolbar select{
    padding:
        0
        10px;
}

.bct-search input::placeholder{
    color:#7394ae;
}

.bct-search input:focus,
.bct-toolbar select:focus{
    border-color:#20a4ff;

    box-shadow:
        0 0 0 2px
        rgba(32,164,255,.12);
}

.bct-categories{
    display:flex;

    gap:7px;

    overflow-x:auto;

    padding:
        1px
        0
        13px;

    scrollbar-width:none;
}

.bct-categories::-webkit-scrollbar{
    display:none;
}

.bct-category{
    flex:0 0 auto;

    min-height:32px;

    padding:
        0
        11px;

    border:1px solid #18547a;
    border-radius:999px;

    background:#082742;

    color:#9eb7cb;

    cursor:pointer;

    font-size:11px;
}

.bct-category.active,
.bct-category:hover{
    color:#fff;

    border-color:#20a4ff;

    background:
        rgba(32,164,255,.13);
}

.bct-summary{
    margin-bottom:12px;

    color:#8eabc1;

    font-size:11px;
}

.bct-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:13px;
}

.bct-card{
    overflow:hidden;

    border:1px solid #18547a;
    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #0b3151,
            #082943
        );

    cursor:pointer;

    transition:
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.bct-card:hover{
    border-color:#2ca9e8;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.17);
}

.bct-preview{
    position:relative;

    height:105px;

    padding:12px;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(78,196,255,.35),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #124667,
            #07314f
        );

    border-bottom:
        1px solid #18547a;
}

.bct-preview:before{
    content:"";

    position:absolute;

    top:18px;
    right:18px;

    width:92px;
    height:54px;

    border:
        1px solid
        rgba(95,196,255,.22);

    border-radius:8px;

    background:
        rgba(8,39,66,.72);

    transform:
        rotate(-4deg);
}

.bct-product-class{
    position:relative;
    z-index:2;

    display:inline-flex;

    min-height:23px;

    align-items:center;

    padding:0 7px;

    border-radius:999px;

    background:
        rgba(4,26,44,.82);

    border:
        1px solid
        rgba(64,184,243,.30);

    color:#9fe0ff;

    font-size:9px;
    font-weight:750;

    text-transform:uppercase;
}

.bct-body{
    padding:13px;
}

.bct-profile{
    display:inline-flex;

    min-height:21px;

    align-items:center;

    margin-bottom:7px;

    padding:0 6px;

    border-radius:5px;

    background:
        rgba(255,255,255,.06);

    color:#bcd0df;

    font-size:9px;
    font-weight:700;
}

.bct-card h3{
    min-height:38px;

    margin:0;

    color:#fff;

    font-size:13px;
    line-height:1.35;

    font-weight:700;
}

.bct-meta{
    min-height:30px;

    margin-top:6px;

    color:#9eb7cb;

    font-size:10px;
    line-height:1.45;
}

.bct-footer{
    display:flex;
    align-items:center;

    gap:8px;

    margin-top:10px;

    padding-top:10px;

    border-top:
        1px solid
        rgba(61,113,150,.32);
}

.bct-rating{
    color:#f5bb48;

    font-size:10px;
}

.bct-price{
    margin-left:auto;

    color:#fff;

    font-size:14px;
    font-weight:750;
}

.bct-empty{
    grid-column:1/-1;

    padding:
        50px
        20px;

    border:
        1px dashed #18547a;

    border-radius:10px;

    color:#9eb7cb;

    text-align:center;
}


/* ==========================================================================
   DETAIL DIALOG
   ========================================================================== */

.bct-overlay{
    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    background:
        rgba(0,11,21,.66);

    backdrop-filter:
        blur(3px);
}

.bct-overlay.open{
    display:block;
}

.bct-dialog{
    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    width:
        min(800px,calc(100vw - 30px));

    max-height:88vh;

    overflow:auto;

    border:1px solid #235e85;

    border-radius:15px;

    background:#082944;

    color:#fff;

    box-shadow:
        0 26px 70px
        rgba(0,0,0,.35);
}

.bct-dialog-head{
    display:flex;

    gap:12px;

    padding:18px 20px;

    border-bottom:
        1px solid #18547a;
}

.bct-dialog-main{
    flex:1;
}

.bct-dialog h2{
    margin:0;

    font-size:21px;
}

.bct-dialog p{
    margin:5px 0 0;

    color:#9eb7cb;

    font-size:11px;
}

.bct-close{
    width:34px;
    height:34px;

    border:1px solid #18547a;
    border-radius:7px;

    background:#0a3455;

    color:#fff;

    cursor:pointer;
}

.bct-detail{
    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(220px,.6fr);

    gap:22px;

    padding:20px;
}

.bct-description{
    color:#c4d6e4;

    font-size:12px;
    line-height:1.65;
}

.bct-property{
    padding:9px 0;

    border-bottom:
        1px solid
        rgba(55,107,145,.35);
}

.bct-property label{
    display:block;

    margin-bottom:2px;

    color:#7295af;

    font-size:8px;
    font-weight:700;

    text-transform:uppercase;
}

.bct-property strong{
    color:#fff;

    font-size:11px;
}

.bct-actions{
    display:flex;
    align-items:center;

    gap:9px;

    padding:
        15px
        20px;

    border-top:
        1px solid #18547a;

    background:#06253e;
}

.bct-actions-spacer{
    flex:1;
}

.bct-button{
    min-height:39px;

    padding:0 13px;

    border-radius:7px;

    cursor:pointer;

    font-size:11px;
    font-weight:700;
}

.bct-secondary{
    border:1px solid #2479a7;

    background:transparent;

    color:#dcebf6;
}

.bct-primary{
    border:1px solid #24aaff;

    background:#179ff2;

    color:#fff;
}


@media(max-width:1200px){

    .bct-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media(max-width:900px){

    .bct-toolbar{
        grid-template-columns:
            1fr 1fr;
    }

    .bct-search{
        grid-column:1/-1;
    }

    .bct-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:620px){

    .bct-toolbar{
        grid-template-columns:1fr;
    }

    .bct-search{
        grid-column:auto;
    }

    .bct-grid{
        grid-template-columns:1fr;
    }

    .bct-detail{
        grid-template-columns:1fr;
    }
}

/* ==========================================================================
   BLAISE TEMPLATE CONTENT SWITCH FIX V1.3.2
   ========================================================================== */

/*
 * Template workspace belongs INSIDE Project Definition.
 * It never replaces the outer card or header.
 */

#blaiseCreatorTemplateWorkspace{
    display:none !important;

    width:100%;

    margin:0;

    padding:
        16px
        14px
        18px;

    border-top:
        1px solid
        rgba(31,92,132,.55);

    background:
        transparent;
}

#blaiseCreatorTemplateWorkspace.active{
    display:block !important;
}


/*
 * We no longer need a second giant Templates header.
 * Keep it subordinate to Project Definition.
 */

.bct-inline-heading{
    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:
        0
        0
        14px;
}

.bct-inline-heading h3{
    margin:0;

    color:#fff;

    font-size:18px;

    line-height:1.2;

    font-weight:700;
}

.bct-inline-heading p{
    margin:
        4px
        0
        0;

    color:#9eb7cb;

    font-size:11px;
}


/*
 * The Project Definition header remains the dominant title.
 */
.blaise-template-entry{
    flex-shrink:0;
}


/*
 * When Templates mode is active the same control becomes
 * "← Project Definition", maintaining the switch inside the same header.
 */
.blaise-template-entry[data-mode="definition"]{
    border-color:#20a4ff !important;

    background:
        rgba(32,164,255,.10) !important;
}


/*
 * Prevent catalog controls from escaping beneath the right status column.
 */
.bct-shell{
    width:100%;

    min-width:0;

    overflow:hidden;
}

.bct-toolbar{
    width:100%;
}


/*
 * Allow four cards only where the available central width permits it.
 */
@media(max-width:1350px){

    .bct-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media(max-width:1050px){

    .bct-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){

    .bct-grid{
        grid-template-columns:1fr;
    }
}



/* ==========================================================================
   BLAISE DEFINE MODE BALANCE V1.3.3
   ========================================================================== */

/*
 * Project Definition and Templates are equal alternative modes.
 *
 * Their hierarchy must therefore be represented by the SAME:
 *   - font size
 *   - font weight
 *   - line height
 *
 * Active state is communicated through color / underline,
 * never by making one title materially larger than the other.
 */


/* --------------------------------------------------------------------------
   Project Definition title
   -------------------------------------------------------------------------- */

.blaise-definition-mode-title{
    display:inline-block;

    margin:0 !important;

    color:#ffffff;

    font-size:
        22px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em !important;

    cursor:pointer;

    border-bottom:
        2px solid transparent;

    padding-bottom:
        4px;

    transition:
        color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.blaise-definition-mode-title:hover{
    color:#52c5ff;
}


/* --------------------------------------------------------------------------
   Templates title
   -------------------------------------------------------------------------- */

.bct-inline-heading h3{
    display:inline-block;

    margin:0 !important;

    color:#ffffff;

    font-size:
        22px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em !important;

    cursor:pointer;

    border-bottom:
        2px solid transparent;

    padding-bottom:
        4px;

    transition:
        color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.bct-inline-heading h3:hover{
    color:#52c5ff;
}


/* --------------------------------------------------------------------------
   Active / inactive modes
   -------------------------------------------------------------------------- */

.blaise-mode-active{
    color:#ffffff !important;

    border-bottom-color:
        #23b5ff !important;

    opacity:1 !important;
}

.blaise-mode-inactive{
    color:#b2c7d8 !important;

    border-bottom-color:
        transparent !important;

    opacity:.90 !important;
}

.blaise-mode-inactive:hover{
    color:#ffffff !important;

    opacity:1 !important;
}


/* --------------------------------------------------------------------------
   Template header helper copy remains secondary.
   -------------------------------------------------------------------------- */

.bct-inline-heading p{
    margin:
        5px
        0
        0 !important;

    color:#90abc0 !important;

    font-size:
        11px !important;

    line-height:
        1.45 !important;

    font-weight:
        400 !important;
}


/* --------------------------------------------------------------------------
   Existing Templates / Project Definition switch button must remain secondary.

   It is a convenience action, NOT the principal mode title.
   -------------------------------------------------------------------------- */

.blaise-template-entry{
    min-height:
        40px !important;

    padding:
        0
        14px !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        650 !important;

    letter-spacing:
        0 !important;
}

.blaise-template-entry-icon{
    width:
        16px !important;

    font-size:
        13px !important;
}


/* --------------------------------------------------------------------------
   Keyboard accessibility
   -------------------------------------------------------------------------- */

.blaise-definition-mode-title:focus-visible,
.bct-inline-heading h3:focus-visible{
    outline:
        2px solid
        #25b8ff;

    outline-offset:
        4px;

    border-radius:
        3px;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media(max-width:900px){

    .blaise-definition-mode-title,
    .bct-inline-heading h3{
        font-size:
            19px !important;
    }
}



/* ==========================================================================
   BLAISE DEFINE MODE BALANCE V1.3.3
   ========================================================================== */

/*
 * Project Definition and Templates are equal alternative modes.
 *
 * Their hierarchy must therefore be represented by the SAME:
 *   - font size
 *   - font weight
 *   - line height
 *
 * Active state is communicated through color / underline,
 * never by making one title materially larger than the other.
 */


/* --------------------------------------------------------------------------
   Project Definition title
   -------------------------------------------------------------------------- */

.blaise-definition-mode-title{
    display:inline-block;

    margin:0 !important;

    color:#ffffff;

    font-size:
        22px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em !important;

    cursor:pointer;

    border-bottom:
        2px solid transparent;

    padding-bottom:
        4px;

    transition:
        color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.blaise-definition-mode-title:hover{
    color:#52c5ff;
}


/* --------------------------------------------------------------------------
   Templates title
   -------------------------------------------------------------------------- */

.bct-inline-heading h3{
    display:inline-block;

    margin:0 !important;

    color:#ffffff;

    font-size:
        22px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em !important;

    cursor:pointer;

    border-bottom:
        2px solid transparent;

    padding-bottom:
        4px;

    transition:
        color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.bct-inline-heading h3:hover{
    color:#52c5ff;
}


/* --------------------------------------------------------------------------
   Active / inactive modes
   -------------------------------------------------------------------------- */

.blaise-mode-active{
    color:#ffffff !important;

    border-bottom-color:
        #23b5ff !important;

    opacity:1 !important;
}

.blaise-mode-inactive{
    color:#b2c7d8 !important;

    border-bottom-color:
        transparent !important;

    opacity:.90 !important;
}

.blaise-mode-inactive:hover{
    color:#ffffff !important;

    opacity:1 !important;
}


/* --------------------------------------------------------------------------
   Template header helper copy remains secondary.
   -------------------------------------------------------------------------- */

.bct-inline-heading p{
    margin:
        5px
        0
        0 !important;

    color:#90abc0 !important;

    font-size:
        11px !important;

    line-height:
        1.45 !important;

    font-weight:
        400 !important;
}


/* --------------------------------------------------------------------------
   Existing Templates / Project Definition switch button must remain secondary.

   It is a convenience action, NOT the principal mode title.
   -------------------------------------------------------------------------- */

.blaise-template-entry{
    min-height:
        40px !important;

    padding:
        0
        14px !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        650 !important;

    letter-spacing:
        0 !important;
}

.blaise-template-entry-icon{
    width:
        16px !important;

    font-size:
        13px !important;
}


/* --------------------------------------------------------------------------
   Keyboard accessibility
   -------------------------------------------------------------------------- */

.blaise-definition-mode-title:focus-visible,
.bct-inline-heading h3:focus-visible{
    outline:
        2px solid
        #25b8ff;

    outline-offset:
        4px;

    border-radius:
        3px;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media(max-width:900px){

    .blaise-definition-mode-title,
    .bct-inline-heading h3{
        font-size:
            19px !important;
    }
}



/* ==========================================================================
   BLAISE DEFINE EQUAL FRAMES V1.3.4
   ========================================================================== */

/*
 * Project Definition and Templates are peer choices.
 *
 * EXACT SAME:
 * - font size
 * - font weight
 * - height
 * - vertical alignment
 * - padding
 * - border radius
 * - border treatment
 */


/* --------------------------------------------------------------------------
   PROJECT DEFINITION SELECTOR
   -------------------------------------------------------------------------- */

.blaise-definition-mode-title{
    display:inline-flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    min-width:
        228px !important;

    height:
        48px !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    padding:
        0
        16px !important;

    border:
        1px solid
        #2479a7 !important;

    border-radius:
        9px !important;

    background:
        rgba(8,43,73,.72) !important;

    color:
        #ffffff !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.01em !important;

    text-decoration:
        none !important;

    cursor:pointer !important;

    box-sizing:
        border-box !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        color .15s ease !important;
}


/* Remove the old underline presentation completely. */

.blaise-definition-mode-title::after,
.blaise-definition-mode-title::before{
    display:none !important;
}

.blaise-definition-mode-title:hover{
    border-color:
        #26b9ff !important;

    background:
        rgba(18,70,108,.92) !important;
}


/* --------------------------------------------------------------------------
   TEMPLATES SELECTOR
   Exact peer of Project Definition
   -------------------------------------------------------------------------- */

.blaise-template-entry{
    display:inline-flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:
        8px !important;

    min-width:
        228px !important;

    width:
        228px !important;

    height:
        48px !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    padding:
        0
        16px !important;

    border:
        1px solid
        #2479a7 !important;

    border-radius:
        9px !important;

    background:
        rgba(8,43,73,.72) !important;

    color:
        #ffffff !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.01em !important;

    text-decoration:
        none !important;

    cursor:pointer !important;

    box-sizing:
        border-box !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        color .15s ease !important;
}

.blaise-template-entry-icon{
    flex:
        0
        0
        18px !important;

    width:
        18px !important;

    font-size:
        16px !important;

    line-height:
        1 !important;

    color:
        #38c1ff !important;
}

.blaise-template-entry:hover{
    border-color:
        #26b9ff !important;

    background:
        rgba(18,70,108,.92) !important;
}


/* ==========================================================================
   ACTIVE STATE
   SAME GEOMETRY — ONLY COLOR/SHADOW CHANGES
   ========================================================================== */

.blaise-definition-mode-title.blaise-mode-active,
.blaise-template-entry.blaise-mode-active{
    border-color:
        #24b8ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,83,128,.94),
            rgba(8,48,80,.96)
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 0 -3px 0
        #22b8ff !important;

    opacity:
        1 !important;
}


.blaise-definition-mode-title.blaise-mode-inactive,
.blaise-template-entry.blaise-mode-inactive{
    border-color:
        #2479a7 !important;

    background:
        rgba(8,43,73,.72) !important;

    color:
        #d5e4ef !important;

    box-shadow:
        none !important;

    opacity:
        1 !important;
}


/* ==========================================================================
   REMOVE THE SECOND DUPLICATE "Templates" HEADING FROM TEMPLATE CONTENT
   The selector above already identifies Templates.
   ========================================================================== */

.bct-inline-heading h3{
    display:none !important;
}

.bct-inline-heading{
    margin:
        0
        0
        13px !important;
}

.bct-inline-heading p{
    margin:
        0 !important;

    color:
        #9eb7cb !important;

    font-size:
        12px !important;

    line-height:
        1.45 !important;
}


/* ==========================================================================
   HEADER BALANCE
   ========================================================================== */

/*
 * Preserve the existing Project Definition descriptive subtitle.
 * Only the mode title itself becomes framed.
 */

.blaise-definition-mode-title + *{
    margin-top:
        5px;
}


/* Keyboard states */

.blaise-definition-mode-title:focus-visible,
.blaise-template-entry:focus-visible{
    outline:
        2px solid
        #38c1ff !important;

    outline-offset:
        3px !important;
}


/* Responsive */

@media(max-width:900px){

    .blaise-definition-mode-title,
    .blaise-template-entry{

        min-width:
            190px !important;

        width:
            auto !important;

        height:
            44px !important;

        min-height:
            44px !important;

        padding:
            0
            13px !important;

        font-size:
            16px !important;
    }
}



/* ==========================================================================
   BLAISE DEFINE EXACT SELECTOR ALIGNMENT V1.3.5
   ========================================================================== */

/*
 * CANONICAL PEER SELECTOR
 *
 * Both:
 *   Project Definition
 *   Templates
 *
 * receive EXACTLY the same:
 * - font family
 * - font size
 * - font weight
 * - line height
 * - height
 * - width
 * - padding
 * - border
 * - radius
 * - vertical alignment
 */

.blaise-define-peer-selector{
    box-sizing:
        border-box !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    vertical-align:
        middle !important;

    width:
        276px !important;

    min-width:
        276px !important;

    max-width:
        276px !important;

    height:
        60px !important;

    min-height:
        60px !important;

    max-height:
        60px !important;

    margin:
        0 !important;

    padding:
        0
        20px !important;

    border:
        1px solid
        #2479a7 !important;

    border-radius:
        10px !important;

    background:
        rgba(8,43,73,.72) !important;

    color:
        #ffffff !important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        22px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        22px !important;

    letter-spacing:
        -.015em !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    cursor:
        pointer !important;

    overflow:
        hidden !important;

    transform:
        none !important;
}


/*
 * Project Definition had inherited heading styles.
 * Neutralize them completely.
 */

.blaise-definition-mode-title{
    font:
        inherit !important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    line-height:
        22px !important;

    width:
        276px !important;

    min-width:
        276px !important;

    max-width:
        276px !important;

    height:
        60px !important;

    min-height:
        60px !important;

    max-height:
        60px !important;

    padding:
        0
        20px !important;
}


/*
 * Templates must match the exact same metrics.
 */

.blaise-template-entry{
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    line-height:
        22px !important;

    width:
        276px !important;

    min-width:
        276px !important;

    max-width:
        276px !important;

    height:
        60px !important;

    min-height:
        60px !important;

    max-height:
        60px !important;

    padding:
        0
        20px !important;
}


/*
 * Templates icon must not change text alignment.
 */

.blaise-template-entry-icon{
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0
        0
        20px !important;

    width:
        20px !important;

    height:
        20px !important;

    margin-right:
        8px !important;

    font-size:
        17px !important;

    line-height:
        20px !important;
}


/* ==========================================================================
   ALIGN BOTH ON SAME HORIZONTAL BASELINE
   ========================================================================== */

/*
 * The Project Definition title and Templates button currently sit
 * in different DOM wrappers. Force their immediate header containers
 * to center-align vertically.
 */

.blaise-definition-mode-title,
.blaise-template-entry{
    position:
        relative !important;

    top:
        0 !important;

    bottom:
        auto !important;
}


/*
 * Active / inactive states NEVER change size.
 */

.blaise-define-peer-selector.blaise-mode-active{
    border-color:
        #24b8ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,83,128,.94),
            rgba(8,48,80,.96)
        ) !important;

    box-shadow:
        inset 0 -3px 0
        #22b8ff !important;

    color:
        #ffffff !important;
}


.blaise-define-peer-selector.blaise-mode-inactive{
    border-color:
        #2479a7 !important;

    background:
        rgba(8,43,73,.72) !important;

    box-shadow:
        none !important;

    color:
        #d9e7f1 !important;

    opacity:
        1 !important;
}


/*
 * Remove any old underline inherited from V1.3.3.
 */

.blaise-definition-mode-title{
    border-bottom:
        1px solid
        #2479a7 !important;
}


/* ==========================================================================
   HEADER ROW ALIGNMENT
   ========================================================================== */

/*
 * Force the parent rows around the two selectors to share the same
 * vertical centering behavior without changing page structure.
 */

.blaise-definition-mode-title{
    align-self:
        center !important;
}

.blaise-template-entry{
    align-self:
        center !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1000px){

    .blaise-define-peer-selector,
    .blaise-definition-mode-title,
    .blaise-template-entry{

        width:
            230px !important;

        min-width:
            230px !important;

        max-width:
            230px !important;

        height:
            54px !important;

        min-height:
            54px !important;

        max-height:
            54px !important;

        padding:
            0
            16px !important;

        font-size:
            19px !important;

        line-height:
            19px !important;
    }
}



/* ==========================================================================
   BLAISE CREATOR / PROFESSIONAL SELECTOR PARITY LOCK V1.4.0
   ========================================================================== */

/*
 * Both Project Definition and Templates are exact peer selectors.
 * Applies equally on Creator and Professional pages.
 */

.blaise-define-peer-selector,
.blaise-definition-mode-title,
.blaise-template-entry{

    box-sizing:
        border-box !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    vertical-align:
        middle !important;

    width:
        276px !important;

    min-width:
        276px !important;

    max-width:
        276px !important;

    height:
        60px !important;

    min-height:
        60px !important;

    max-height:
        60px !important;

    margin:
        0 !important;

    padding:
        0
        20px !important;

    border:
        1px solid
        #2479a7 !important;

    border-radius:
        10px !important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    line-height:
        22px !important;

    letter-spacing:
        -.015em !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    cursor:
        pointer !important;
}


/* Project Definition active */

.blaise-definition-mode-title.blaise-mode-active{

    background:
        linear-gradient(
            180deg,
            rgba(17,83,128,.94),
            rgba(8,48,80,.96)
        ) !important;

    border-color:
        #24b8ff !important;

    box-shadow:
        inset 0 -3px 0
        #22b8ff !important;

    color:
        #fff !important;
}


/* Templates active */

.blaise-template-entry.blaise-mode-active{

    background:
        linear-gradient(
            180deg,
            rgba(17,83,128,.94),
            rgba(8,48,80,.96)
        ) !important;

    border-color:
        #24b8ff !important;

    box-shadow:
        inset 0 -3px 0
        #22b8ff !important;

    color:
        #fff !important;
}


/* Inactive peer */

.blaise-definition-mode-title.blaise-mode-inactive,
.blaise-template-entry.blaise-mode-inactive{

    background:
        rgba(8,43,73,.72) !important;

    border-color:
        #2479a7 !important;

    box-shadow:
        none !important;

    color:
        #d9e7f1 !important;

    opacity:
        1 !important;
}


/*
 * Icon has fixed width so Templates text alignment remains stable.
 */

.blaise-template-entry-icon{

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0
        0
        20px !important;

    width:
        20px !important;

    height:
        20px !important;

    margin-right:
        8px !important;

    font-size:
        17px !important;

    line-height:
        20px !important;
}


/*
 * Template catalog heading is not a third mode selector.
 */

.bct-inline-heading h3{
    display:
        none !important;
}


/*
 * Preserve same horizontal line.
 */

.blaise-definition-mode-title,
.blaise-template-entry{

    position:
        relative !important;

    top:
        0 !important;

    align-self:
        center !important;
}



/* ==========================================================================
   BLAISE DEVELOPER PARITY LOCK V1.4.1
   Creator / Professional / Developer share this exact selector geometry.
   ========================================================================== */

.blaise-definition-mode-title,
.blaise-template-entry,
.blaise-define-peer-selector{

    box-sizing:
        border-box !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    vertical-align:
        middle !important;

    width:
        276px !important;

    min-width:
        276px !important;

    max-width:
        276px !important;

    height:
        60px !important;

    min-height:
        60px !important;

    max-height:
        60px !important;

    margin:
        0 !important;

    padding:
        0
        20px !important;

    border:
        1px solid
        #2479a7 !important;

    border-radius:
        10px !important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        22px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        22px !important;

    letter-spacing:
        -.015em !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    cursor:
        pointer !important;

    align-self:
        center !important;

    top:
        0 !important;

    transform:
        none !important;
}


/* Active Project Definition / Templates */

.blaise-definition-mode-title.blaise-mode-active,
.blaise-template-entry.blaise-mode-active{

    background:
        linear-gradient(
            180deg,
            rgba(17,83,128,.94),
            rgba(8,48,80,.96)
        ) !important;

    border-color:
        #24b8ff !important;

    box-shadow:
        inset 0 -3px 0
        #22b8ff !important;

    color:
        #ffffff !important;
}


/* Inactive peer */

.blaise-definition-mode-title.blaise-mode-inactive,
.blaise-template-entry.blaise-mode-inactive{

    background:
        rgba(8,43,73,.72) !important;

    border-color:
        #2479a7 !important;

    box-shadow:
        none !important;

    color:
        #d9e7f1 !important;

    opacity:
        1 !important;
}


/* Templates icon maintains stable text positioning */

.blaise-template-entry-icon{

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0
        0
        20px !important;

    width:
        20px !important;

    height:
        20px !important;

    margin-right:
        8px !important;

    font-size:
        17px !important;

    line-height:
        20px !important;

    color:
        #38c1ff !important;
}


/*
 * No duplicate Templates heading inside catalog.
 */

.bct-inline-heading h3{
    display:none !important;
}


/*
 * Template catalog is inside the existing Project Definition frame.
 */

#blaiseCreatorTemplateWorkspace{
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;
}


/* Responsive */

@media(max-width:1000px){

    .blaise-definition-mode-title,
    .blaise-template-entry,
    .blaise-define-peer-selector{

        width:
            230px !important;

        min-width:
            230px !important;

        max-width:
            230px !important;

        height:
            54px !important;

        min-height:
            54px !important;

        max-height:
            54px !important;

        padding:
            0
            16px !important;

        font-size:
            19px !important;

        line-height:
            19px !important;
    }
}