/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: COMMON STYLING ELEMENTS */




/***********************/
/* GENERAL PAGE LAYOUT */
/***********************/


body, .no_ffon body {
    width:              initial;
    background-color:	#d0d0e8;
    background-image:   none;
    margin:			    0;
    padding:		    0;
    font-family:		'tahoma', 'arial', 'sans';
    font-size:		    11pt;
    color:			    #000000;
    overflow-y:         scroll;
}

a:link {
    color:			    #606080;
    text-decoration:	none;
}
a:visited	            {color: #383880;}
a:hover {
    color:              #1010df;
    text-decoration:	underline;
}
a:active	            {color: #0000ff;}

h3                      {color: #202040;}

.db_failed              {color: #601010;}

img		                {border: 0;}

.ihbody {
    margin:             0;
    background-color:	#efefef;
    padding:		    10px;
}
.no_ffon .ihbody        {margin: 0;}

.nocon_auth .nocon_hide {display: none;}

.emph                   {font-weight: bold;}


/* MAIN HEADER BAR */

.kheadbar {
    margin:             0;
    background-color:	#f4f4ff;
    display:            flex;
    padding:            0;
    border-bottom:      1px solid #7878b0;
}

.khdomain {
    background-color:   #d0d0e8;
}

.khicon                 {padding: 4px 2px 0 4px;}
.khicon img             {width: 48px;}

.khtext {
    padding:            14px 14px 13px 11px;
    font-size:          18pt;
    font-weight:        bold;
}


/* INDEX PAGE SELECTION BOXES */

.thingpick_outer {
    border:             2px solid #606060;/*000080;*/
    border-radius:      10px;
    background-color:   #f0f0ff;
    padding:            10px;
    margin-right:       10px;
}

.thingpick_inner {
    width:              180px;
    text-align:         center;
    font-weight:        bold;
}


/* FOOTER WITH COPYRIGHT LINK */

.kfootbar {
    margin:             10px;
    color:		    	#000080;
}

p.legal {
    text-align:		    right;
    font-size:          9pt;
}
p.legal a	            {color: #000080;}


/* STUFF THAT WANTS RECOLOURING OR HIDING WHEN PRINTED */

@media print {    
    body, .no_ffon body     {background-color: #ffffff;}
    .ihbody                 {background-color: #ffffff;}
    .phide, .legal          {display: none;}
}




/***********************************/
/* LOGIN AND DEVELOPER INFO PANELS */
/***********************************/


/* Special class to prevent other components being obscured by the panel */

.unobscure              {margin-right: 250px;}


/* The panel itself */

#user_panel {
    position:           absolute;
    z-index:            2;
    top:                0;
    right:              0;
    width:              250px;
    padding:            0;
}

@media print {    
    #user_panel             {display: none;}
}

.user_segments {
    width:              230px;
    padding:            10px;
}

#user_head {
    background-color:   #7878b0;
    color:              #ffffff;
}

#con_toggler {
    float:              right;
    margin-top:         2px;
}

#user_dispname {
    font-size:          12pt;
    font-weight:        bold;
}

#user_details {
    background-color:   #ffffff;
    color:              #454560;
}


/* DEVELOPMENT OUTPUT CONSOLE */

#user_devbits {
    opacity:            0.3;
    background-color:   #7878b0;
    color:              #ffffff;
}
#user_devbits:hover     {opacity: 1;}

.consolebox {
    margin-top:         10px;
    width:              224px;
    height:             360px;
    background-color:   #f8f8f8;
    padding:            0 3px;
    overflow-y:         scroll;
    color:              #000000;
}


/* STUFF THAT WANTS RECOLOURING OR HIDING WHEN PRINTED */

@media print {    
    #user_details, #user_devbits    {display: none;}
}




/*************************/
/* GENERIC FLEX CONTROLS */
/*************************/


.flex_h {
    display:            flex;
    flex-direction:     row;
}
.flex_v {
    display:            flex;
    flex-direction:     column;
}

.siblingpanels          {gap: 10px;}




/************************************/
/* UNIFIED OPTION TABS SYSTEM, 22Q4 */
/************************************/


@media screen
{
    .option_array           {padding: 0;}
    
    .opt_tab {
        position:           relative;
        border-radius:      0 10px 10px 10px;
        border-width:       1px;
        border-style:       solid;
        min-height:         24px;
        padding:            0;
        text-align:         left;
        font-size:          14pt;
        font-weight:        normal;
    }
    .ot_inner {
        border-radius:      0 9px 9px 9px;
        padding:            5px;
    }
    .ot_ncur .ot_inner {
        background-color:   #ffffff;
        color:              #404040;
    }
    .ot_ncur:hover {
        border-width:       2px;
    }
    .ot_ncur:hover .ot_inner {
        background-color:   rgba(255, 255, 255, 0.5);
        padding:            4px;
        color:              #202020;
    }
    
    .ot_curr                {border-width: 2px;}
    .ot_curr .ot_inner {
        padding:            4px;
        color:              #000000;
    }
    
    .ot_dead                {opacity: 0.5;}
}

@media print {
    .option_array           {display: none;}
}




/******************************/
/* GENERIC INFORMATION PANELS */
/******************************/


/*.corepanel*/
.corecaption {
    background-color:   #f0f8ff;
    padding:            5px 10px;
    font-size:          13pt;
    font-weight:        bold;
}

.panel_body {
    height:             600px;
    overflow-y:         scroll;
}

.panel_mini {
    height:             200px;
    padding:            5px;
    font-weight:        bold;
}

.panel_outbox td, .panel_frame td, .panel_body td
                        {vertical-align: middle;}

.kvncurr_staffroster    {background-color: #e4ffb0;}




/*************************/
/* PRIMARY BOX COSMETICS */
/*************************/


/* Layer 1: purple outer border */
.cosm_box1 {
    border:			    2px solid #a0a0d0;
    background-color:   #d8d8ec;
    padding:		    5px;
}

/* Layer 2: mid-grey border surrounding body and response area */
.cosm_box2 {
    border:			    1px solid #a0a0c0;
    background-color:   #ffffff;
    padding:		    0;
}

/* Layer 3B: pale-blue footer bar containing response buttons */
.cosm_resp {
    border-top:         1px dotted #8080a8;
    background-color:   #f0f8ff;
    padding:            5px;
}




/********************/
/* DATA ENTRY FORMS */
/********************/


/* OVERALL FORM STYLING AND STRUCTURE */

.stdform {
    width:              600px;
    border:             3px double #000080;
    background-color:   #f0f0ff;
    padding:            9px;
    margin-bottom:      5px;
}

.actpanel2 {
    width:              600px;
    border:			    1px solid #a0a0c0;
    background-color:   #ffffff;
    padding:		    0;
}

.actpanel3 {
    padding:            9px;
    display:            grid;
    grid-gap:           5px;
}

.ap2_w400               {width: 400px;}
.ap3_w400 {
    width:              390px;
    grid-template-columns:  250px 135px;
}

.md_w630                {width: 632px;}
.ap2_w630               {width: 630px;}
.ap3_w630 {
    width:              612px;
    grid-template-columns:  200px 408px;
}
.modal_box2 .ap3_w630 {
    width:              610px;
    grid-template-columns:  197px 408px;
}

.md_w650                {width: 652px;}
.ap2_w650               {width: 650px;}
.ap3_w650 {
    width:              632px;
    grid-template-columns:  220px 408px;
}

.md_w860                {width: 862px;}
.ap2_w860               {width: 860px;}
.ap3_w860 {
    width:              842px;
    grid-template-columns:  230px 308px 25px 225px;
}

.md_w950                {width: 952px;}
.ap2_w950               {width: 950px;}
.ap3_w950 {
    width:              932px;
    grid-template-columns:  460px 460px;
}

.md_w_sthr              {width: 922px;}
.ap2_w_sthr             {width: 920px;}
.ap3_w_sthr {
    width:              902px;
}

.in_capt {
    margin:             auto auto auto 0;
    font-weight:        bold;
    color:              #000080;
}

.in_multiparam {
    display:            flex;
    flex-direction:     row;
    grid-gap:           5px;
}

.stdform label, .actpanel3 label, .in_capt label {
    vertical-align:     middle;
    width:              200px;
    height:             50px;
}

.ap_xcol                {grid-column: 3 / span 2;}

.newdatagroup {
    border-top:         2px solid #8080a0;
    padding-top:        3px;
}

.ap_subsect {
    grid-column-start:  1;
    grid-column-end:    3;
    border-top:         1px solid #a0a0c0;
}

.symbolcell {
    margin:             auto;
    font-size:          16pt;
    color:              #505068;
}


/* NON-DISPLAY CELLS FOR BACKGROUND DATA */

.hideydata              {display: none;}


/* DISPLAY CELLS FOR NON-NEGOTIABLE DATA */

.nonneg {
    height:             24px;
    border:             1px dashed #9090f8;
    padding:            6px 3px;
    font-size:          14pt;
    color:              #404080;
}

.nnfixed                {width: 400px;}


/* GENERAL INPUT STYLING */

input {
    margin:             0;
    border:             0;
    padding:            3px;
    font-size:          14pt;
}

input, textarea, .stdinput, .nonneg, .popout_host, .rollboxframe
                        {box-shadow: 0 0 5px #d0d0e8;}

input[type="radio"] {
    width:              50px;
    padding-left:       0;
    padding-right:      0;
}

.stdinput {
    height:             30px;
    border:             1px dashed #0000a0;
    text-align:         left;
}

.in_w250                {width: 250px;}
.in_w400                {width: 400px;}

.longinput      /* used for textarea inputs */ {
    min-width:          395px;
    max-width:          395px;
    padding:            5px;
    min-height:         75px;
    font-size:          12pt;
}

.reducinput {
    min-width:          285px;
    max-width:          285px;
    min-height:         75px;
}

.reducinpv2 {
    min-width:          289px;
    max-width:          289px;
}


/* DROPDOWN MENUS (now only used for the Sheet Cut material selector afaik) */

.dropdownhost
{
    position:           relative;
}

.dropdownindic
{
    margin-top:         5px;
    margin-right:       5px;
    float:              right;
    z-index:            4;
    color:              #404040;
}

.dropdownouter
{
    display:		    none;
    position:		    absolute;
    z-index:            4;
    padding:		    0;
    border-left:        1px solid #404040;
    border-right:       1px solid #404040;
    border-bottom:      1px solid #404040;
    background-color:	#ffffff;
}

.dropdownshowing
{
    display:            block;
}

.drop_detailinfo
{
    margin-top:         5px;
    font-size:          10px;
    color:              #333333;
}


/* POP-OUT SELECTORS */

#popout_haven           {display: none;}

.popout_host {
    position:           relative;
    height:             24px;
    border:             1px dashed #0000a0;
    padding:            6px 3px;
    font-size:          14pt;
    color:              #282850;/*#404080;*/
}

.ps_indic {
    margin-top:         1px;
    margin-right:       3px;
    float:              right;
    z-index:            4;
    font-size:          12pt;
    color:              #505068;
}

.ps_box0 {
    position:           absolute;
    top:                3px;
    left:               60px;
    display:            flex;
    z-index:            3;
}

.ps_upwards {
    position:           absolute;
    bottom:             2px;
    left:               60px;
    display:            flex;
    z-index:            3;
}

.ps_pointer {
    width:              16px;
    background:         url('ps_arrow.svg') no-repeat top left;
}
.ps_upwards .ps_pointer {background: url('ps_arrow.svg') no-repeat bottom left;}

.ps_box2 {
    box-shadow:         0 0 15px #a0a0c0;
    width:              200px;
    max-height:         320px;
    overflow-y:         auto;
}

.ps_bar, .ps_ban {
    height:             20px;
    padding:            5px;
    font-size:          11pt;
    font-weight:        bold;
    color:              #000000;
    border-bottom:      1px solid #a0a0ff;
}
.ps_bar:hover           {background-color: #fff8e8;}
.ps_ban {
    background-color:   #ffe0dc;
    font-style:         italic;
    color:              #600000;
}

.ps_pick                {background-color: #fff0d0;}
.ps_last                {border-bottom: 0;}

.ps_image {
    float:              left;
    height:             20px;
    margin-right:       4px;
}


/* BUTTONS */

button {
    margin:             0;
    font-weight:        bold;
}

.actionbutton, .cancelleriser, .commenceriser, .confirmeriser, .btn_basic, .timebtn_basic {
    border-radius:      8px;
    height:             34px;
    padding:            5px;
    text-align:         center;
    font-size:          11pt;
}

.actionbutton {
    border:             2px solid #606060;
    background-color:   #e0e0f0;
    color:              #202040;
}

.cancelleriser {
    border:             2px solid #c03000;
    background-color:   #ffd0d0;
    color:              #401000;
}

.commenceriser {
    border:             2px solid #007080;
    background-color:   #d0ffe0;
    color:              #002828;
}

.confirmeriser {
    border:             2px solid #009060;
    background-color:   #e0ffc0;
    color:              #003020;
}

.disablerised           {opacity: 0.5;}




/***********************/
/* DATA DISPLAY BLOCKS */
/***********************/


.dblockouter {
    width:              960px;
    margin-bottom:      8px;
}

.dblocknum {
    width:              80px;
    vertical-align:     top;
    padding:            5px;
    text-align:         right;
    font-size:          20pt;
}

.dblockspacer           {width: 2px;}

.dblockright {
    width:              100px;
    vertical-align:     top;
    text-align:         right;
}




/**********************/
/* DATA SUMMARY TILES */
/**********************/


.dtile_outer {
    padding:            0;
    display:            grid;
    grid-template-areas:    'dt_number dt_info dt_control'
                            'dt_number dt_fhost dt_fhost'
                            'dt_number dt_spawn dt_spawn';
    grid-template-columns:  95px auto 116px;
    grid-gap:           0;
}

.dtile_parent {
    margin-bottom:      8px;
    border:             1px solid #a0a0c0;
    width:              918px;
}

.dtile_child {
    margin:             0 8px 8px;
    border:             1px solid #a0a0c0;/*1px dotted #a0a0c0;*/
}

.dt_out_level0          {background-color: #ffffff;}
.dt_out_level1          {background-color: #f4f4f4;}

.dtile_number {
    grid-area:          dt_number;
    width:              80px;
    padding:            5px 7px;
    text-align:         right;
    font-size:          20pt;
}

.dt_num_level0 {
    border-right:       1px solid #c00000;
    background-color:   #ff8080;
    color:              #400000;
}

.dt_num_level1 {
    border-right:       1px solid #c06000;
    background-color:   #ffc080;
    color:              #402000;
}

.dtile_info {
    grid-area:          dt_info;
    padding-top:        5px;
    padding-left:       8px;
    padding-bottom:     10px;
    text-align:         left;
}

.dtile_control {
    grid-area:          dt_control;
    padding:            8px;
    width:              100px;
    vertical-align:     top;
    text-align:         right;
}

.dtile_fhost            {grid-area: dt_fhost;}
.dtile_spawn            {grid-area: dt_spawn;}


/* QUICK UPDATE BAR: STRUCTURAL */

.ord_tile_substruct {
    padding:            8px;
    display:            grid;
    grid-template-areas:    'ord_qnote ord_qnote'
                            'ord_status ord_updbtn';
    grid-template-columns:  380px auto;
}

.ord_tile_qnote {
    grid-area:          ord_qnote;
    height:             25px;
    margin-bottom:      8px;
    text-align:         left;
    font-size:          11pt;
}
.ord_tile_status {
    grid-area:          ord_status;
    background-color:   #ffffff;
}
.ord_tile_updbtn {
    grid-area:          ord_updbtn;
    text-align:         right;
}




/*******************/
/* MODAL DIALOGUES */
/***************************/


.md_obsc            /* Obscures the rest of the page */ {   
    display:		    none;
    position:		    fixed;		/* get modal to stay in place */
    z-index:		    5;		    /* get modal to sit on top of everything else*/
    left:			    0;
    top:			    0;
    width:			    100%;
    height:			    100%;
    background-color:	#efefef;/*d0d0e8;    /* Fallback color */
    background-color:	rgba(239,239,239,0.75);
    overflow:		    auto;		/* enable scroll if needed */
}

.md_box1            /* Main box layer 1: controls top-level layout of caption, close button and main content */ {
    margin:			    100px auto 5px;
    display:            grid;
    grid-template-areas:    'md_capt md_shut'
                            'md_cont md_cont';
    min-height:         1px;        /* We need this to override a value inherited from kings.css */
    grid-template-columns:  auto 70px;
    grid-column-gap:    5px;
    grid-row-gap:       0;
}

.md_stdw                {width: 630px;}

.md_capt            /* Dialogue caption */ {
    grid-area:          md_capt;
    margin-top:         0;
    margin-bottom:      5px;
    padding:            0;
    font-size:          13pt;
    font-weight:        bold;
    color:              #383880;
}

.md_shut {
    grid-area:          md_shut;
    margin-top:         -5px;
    background-color:   rgba(0,0,0,0.05);;
    text-align:         center;
    font-size:		    24px;
    font-weight:		bold;
    color:			    #999999;
}

.md_shut:hover, .md_shut:focus {
    background-color:   rgba(255,0,0,0.2);
    color:			    #802000;
    text-decoration:	none;
    cursor:			    pointer;
}

.md_box2                {grid-area: md_cont;}
.md_cosmbar             {min-height: 20px;}

.md_box3            /* Main box layer 3: dialogue message or form */ {
    padding:		    5px;
}

.hinticator {
    border:             1px solid #a0a0c0;
    width:              220px;
    background-color:   #ffffff;
    vertical-align:     top;
    padding:            5px;
    color:              #404040;
}