/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: STYLING ELEMENTS FOR SHEET CUTTING CALCULATOR */




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


/* OPTION TAB ARRAY ADAPTATIONS AND COLOURING */

@media screen {
    .option_array {
        display:            flex;
        flex-direction:     row;
        margin-bottom:      2px;
    }
    
    .opt_tab {
        width:              493px;
        margin-right:       2px;
    }
    
    .ot_ncur:hover, .ot_curr    {width: 491px;}
    
    #ot_imp {
        border-color:       #e0a080;
        background-color:   #ffe0c0;
    }
    #ot_met {
        border-color:       #4060c0;
        background-color:   #bfcfff;
    }
}


/* MODE-SPECIFIC INTERFACE COLOURING */

.appchrome_conv         {color: #666666;}
.appchrome_imp {
    background-color:   #ffe0c0;
    color:              #301800;
}
.appchrome_met {
    background-color:   #bfcfff;
    color:              #001040;
}


/* PRIMARY OPERATION PANELS */

.corepanel {
    width:              990px;
    padding:            0;
}




/*********************************/
/* CONVERTER & CALCULATOR TABLES */
/*********************************/


/* UNIT CONVERTER AND MODE TABS */

#unitconv_out {
    display:            grid;
    grid-template-columns:  225px auto auto;
}

.scc_conv_tab {
    display:            flex;
    padding:            6px;
    font-size:          24px;
}

.unitconv_label {
    width:              190px;
    padding-top:        4px;
    padding-left:       5px;
}

.unitconv_inner {
    border-collapse:    collapse;
    font-size:          14pt;
}

#corepanel_imp {
    border-top:         10px solid #ffe0c0;
    color:              #301800;
}
#corepanel_met {
    border-top:         10px solid #bfcfff;
    color:              #001040;
}


/* INNER FRAMING AND HEADINGS */

.scc_inner {
    margin:             6px;
    border-collapse:    collapse;
    font-size:          14pt;
}

.scc_hasbutton          {padding: 0;}
.scc_spacer             {height: 5px;}

.scc_head0 {
    padding:            2px;
    font-size:          10pt;
    padding-top:        0;
    text-align:         right;
}
.scc_head1 {
    padding:            2px;
    font-size:          12pt;
    font-weight:        bold;
    border-bottom:      1px solid;
}

.scc_h1_imp             {border-color: #c48c70;}
.scc_h1_met             {border-color: #4070ff;}
.scc_h1_ncr             {border-color: #999999;}

.scc_head2 {
    padding:            2px;
    font-size:          10pt;
    padding-bottom:     10px;
}


/* MATERIAL SELECTOR DROPDOWNS */

.scc_in_super {
    width:              350px;
    text-align:         left;
}

.scc_drop_mat {
    left:               -4px;
    width:		        386px;
    height:             450px;
    overflow-y:         scroll;
}

.scc_drop_mat a, .scc_drop_mat a:visited {
    display:		    block;
    padding:		    1px 6px;
    text-align:		    left;
    font-size:		    12pt;
    font-weight:		normal;
    text-decoration:    none;
    color:			    #000000;
}

#kdrop_materialimp a:hover, #kdrop_materialimp a:active
                        {background-color: #ffefdf;}

#kdrop_materialmet a:hover, #kdrop_materialmet a:active
                        {background-color: #e8e8ff;}

.firstingroup           {border-top: 1px solid #c0c0c0;}


/* DATA INPUT CELLS */

input {
    text-align:         right;
    box-shadow:         none;
}

.scc_cell_in {
    border:             1px solid #000000;
    background-color:   #f8f8f8;
    padding:            3px;
}
.scc_cell_in input      {background-color: #f8f8f8;}

.scc_cell_in:hover      {background-color: #ffffff;}
.scc_cell_in:hover input    {background-color: #ffffff;}

.scc_cosm_imp input     {color: #603000;}
.scc_cosm_met input     {color: #002080;}

.scc_in_imp             {color: #603000;}
.scc_in_met             {color: #002080;}

.scc_in_conv            {width: 161px;}
.scc_in_chalf           {width: 74px;}

.scc_in_full            {width: 99px;}
.scc_in_half            {width: 43px;}
.scc_cell_chk           {padding: 2px 0 0 6px;}

.scc_checkbox
{
    width:              25px;
    height:             25px;
}

.symbolcell             {padding: 6px;}
.atcell                 {font-size: 11pt;}


/* DATA OUTPUT CELLS */

.scc_cell_out {
    width:              99px;
    height:             28px;
    border:             1px solid;
    padding:            3px 6px 3px 3px;
    text-align:         right;
    font-style:         italic;
}

.scc_out_imp {
    border-color:       #c48c70;
    background-color:   #ffefdf;
}
.scc_out_met {
    border-color:       #4070ff;
    background-color:   #e8e8ff;
}
.scc_out_pcs {
    border-color:       #999999;
    color:              #666666;
}
.scc_out_error          {color: #cc0000;}
.bestprice {
    background-color:   #dfffaf;
    color:              #006060;
}


/* MISCELLANEOUS */

.layawaylist            {vertical-align: top;}




/***************************/
/* CUTOUT PREVIEW GRAPHICS */
/***************************/


.cutpreviewsheet {
    position:           relative;
    width:              720px;
    height:             360px;
    border:             1px solid #b0b0b0;
    background-color:   #e8e8e8;
    padding:            0;
    text-align:         right;
    font-size:          20pt;
    color:              #b0b0b0;
}

.cutpreviewpiece {
    z-index:            2;
    position:           absolute;
    margin:             -1px;
    border:             1px solid;
    padding:            0px;
    font-size:          9pt;
}

#cutpreviewsingle {
    margin-right:       10px;
    border-right:       1px solid;
    border-bottom:      1px solid;
}

.cutpreviewimp {
    border-color:       #c48c70;
    background-color:   #ffefdf;
    color:              #c48c70;
}

.cutpreviewmet {
    border-color:       #4070ff;
    background-color:   #e8e8ff;
    color:              #4070ff;
}

#cartoguild             {margin-top: 10px;}
.cutprev_drag_s         {margin-top: 10px;}


/* RED-FLASH ANIMATION FOR NON-ROTATABLE PREVIEW ELEMENTS */

.rotafail_i             {animation: stubborn_i 0.3s forwards linear normal;}
.rotafail_m             {animation: stubborn_m 0.3s forwards linear normal;}

@keyframes stubborn_i {
    from                {background-color: #ff8080;}
    to                  {background-color: #ffefdf;}
}

@keyframes stubborn_m {
    from                {background-color: #ff8080;}
    to                  {background-color: #e8e8ff;}
}