/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: STYLING ELEMENTS FOR SHED ILLUSTRATOR */




@media print {    
    /* Suppress printing the app header bar for this app only, because the printouts might end up being customer-facing */
    .kheadbar           {display: none;}
}




/*******************************/
/* PRIMARY CONTROLS AND PANELS */
/*******************************/


/* OPTION TAB ARRAY ADAPTATIONS AND COLOURING */

@media screen {
    .option_array {
        width:              402px;
        display:            flex;
        flex-direction:     row;
        flex-wrap:          wrap;
        grid-gap:           2px;
        margin-bottom:      2px;
    }
    
    .opt_tab {
        width:              198px;
        min-height:         30px;
        margin-right:       0;
        margin-bottom:      0;
    }
    
    .ot_ncur:hover, .ot_curr    {width: 196px;}
    
    #ot_basics {
        border-color:       #e0a080;
        background-color:   #ffe0c0;
    }
    #ot_models {
        border-color:       #909090;
        background-color:   #d0d0d0;
    }
    #ot_dwelem {
        border-color:       #90e0f0;
        background-color:   #c0ecf4;
    }
    #ot_struct {
        border-color:       #c8e080;
        background-color:   #e4ffb0;
    }
    #ot_option {
        border-color:       #78c060;
        background-color:   #e0ffc0;
    }
    #ot_transc {
        border-color:       #60c090;
        background-color:   #c0ffe0;
    }
}


/* MODE-SPECIFIC INTERFACE COLOURING */

.appchrome_basics       {background-color: #ffe0c0;}
.appchrome_models       {background-color: #d0d0d0;}
.appchrome_dwelem       {background-color: #c0ecf4;}
.appchrome_struct       {background-color: #e4ffb0;}
.appchrome_option       {background-color: #e0ffc0;}
.appchrome_transc       {background-color: #c0ffe0;}


/* PRIMARY OPERATION PANELS */

.corepanel {
    display:            none;
    margin-top:         0;
}




/***********************/
/* SHED PARAMETER FORM */
/***********************/


/* OPERATIONS PANEL SUBSTRUCTURES */

.ap3_compact            {padding: 6px;}

.ap3_w400_m {
    width:              388px;
    grid-template-columns:  180px auto 180px;
}
.ap3_w400_t {
    width:              388px;
    grid-template-columns:  150px 233px;
}
.ap3_w400_a {
    width:              388px;
    grid-template-columns:  273px 110px;
}
.ap3_w400_c {
    width:              388px;
    grid-template-columns:  91px auto;
}


/* MODEL PICKER DROPDOWN */

/*#kdrop_models {
    left:               -1px;
    width:              386px;
    height:             450px;
    overflow-y:         scroll;
}

#model_pick_grid {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          wrap;
}

.modelselector {
    display:            block;
    width:              164px;
    font-size:          14pt;
    padding:            5px 10px;
    color:              #505050;
}

.modelselector:hover {
    background-color:   #eff8ff;
    color:              #000080;
}

.modelselector:active {
    background-color:   #ffefdf;
    color:              #502800;
}

.drop_models a, .drop_models a:visited {
    text-align:		    left;
    font-weight:		normal;
    text-decoration:    none;
}*/


/* OPTION PICKERS */

.ap_subsect             {width: 388px;}

.shedopt_label {
    font-weight:        bold;
    color:              #000080;
}

.shed_radio {
    font-weight:        normal;
    color:              #000000;
}

.shedopt_price {
    color:              #a81212;
    font-weight:        bold;
}

.shedopt_fullw {
    width:              388px;
}

.nonneg {
    height:             auto;
    padding:            auto auto auto 5px;
}

.canexp                 {height: 45px;}


/* DOOR & WINDOW LISTINGS */

.dw_preset_allow        {grid-column: span 2;}

.presetThumb {
    min-width:          32px;
    margin-right:       2px;
}

#twigbundle {
    display:            flex;
    flex-direction:     column;
    grid-gap:           5px;
}

.wall_readout {
    width:              375px;
    border:             2px solid #808080;
    background-color:   #f4f4ff;
    border-radius:      5px;
    min-height:         25px;
    display:            flex;
    flex-flow:          row wrap;
    padding:            5px 5px 0;
}

.dwListThumb {
    min-width:          106px;
    max-width:          106px;
    margin-right:       5px;
    margin-bottom:      5px;
    border:             1px solid #a0a0a0;
    background-color:   #ffffff;
    border-radius:      5px;
    display:            flex;
    flex-direction:     column;
    padding:            5px;
}

.dwListEdBtn            {margin-top: 5px;}

@media screen {
    #printable_specs {
        display:            none;
    }
}


/* MISCELLANEOUS */

.param_readout {
    border:             1px solid #000000;
    background-color:   #ffffff;
    padding:            6px;
    font-size:          14pt;
}

.price {
    font-weight:		bold;
    color:	    		#e01818;
}

#disp_allin             {background-color: #ffffff;}
#disp_allin.pr_invalid  {background-color: #ffe0b0;}

.elemtype_readout {
    width:              300px;
    padding:            5px;
    font-weight:        bold;
    color:              #404040;
}

.printbigger            {font-size: 13pt;}




/**********************/
/* ON-CANVAS ELEMENTS */
/**********************/


#shedvue                {position: relative;}

.dimTags {
    position:           absolute;
    width:              40px;
    height:             24px;
    font-size:          14pt;
    text-align:         center;
}




/*************************/
/* BELOW-CANVAS ELEMENTS */
/*************************/


@media screen {
    #badDWsAlert {
        background-color:   #ffdfbf;
        padding:            5px;
        font-weight:        bold;
    }
    #shedStatBar {
        background-color:   #f0f8ff;
        padding:            5px;
        padding-left:       135px;
        display:            grid;
        grid-template-columns:  210px 130px 130px 130px;
        grid-column-gap:    20px;
        grid-row-gap:       5px;
    }
}

@media print {
    #badDWsAlert, #shedStatBar {
        display:        none;
    }
}