/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: STYLING ELEMENTS FOR WEBSITE MANAGEMENT SYSTEM */




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


/* OPTION TAB ARRAY ADAPTATIONS AND COLOURING */

@media screen {
    .option_array {
        max-width:          920px;
        display:            flex;
        flex-direction:     row;
        flex-wrap:          wrap;
        grid-column-gap:    4px;
        grid-row-gap:       2px;
        margin-bottom:      15px;
    }
    
    .opt_tab {
        width:              227px;
        min-height:         35px;
    }
    
    #ot_pages, #ot_search, #ot_request {
        border-color:       #90b8ff;
        background-color:   #c0e0ff;
    }
    #ot_redir {
        border-color:       #90e0f0;
        background-color:   #c0ecf4;
    }
    #ot_dcat {
        border-color:       #90f0e0;
        background-color:   #c0ffe0;
    }
    #ot_sthumb {
        border-color:       #78c060;
        background-color:   #e0ffc0;
    }
    #ot_fgp {
        border-color:       #60c090;
        background-color:   #c8ffd8;
    }
    #ot_alert {
        border-color:       #c0c060;
        background-color:   #ffffb0;
    }
    #ot_brand {
        border-color:       #a890ff;
        background-color:   #e0c0ff;
    }
    #ot_ecat, #ot_outstk {
        border-color:       #c8e080;
        background-color:   #e4ffb0;
    }
    #ot_offer {
        border-color:       #e0a080;
        background-color:   #ffe0c0;
    }
    #ot_report {
        border-color:       #909090;
        background-color:   #d0d0d0;
    }
    #ot_cncord, #ot_cncgrp {
        border-color:       #d0b070;
        background-color:   #fff0b8;
    }
}


/* MODE-SPECIFIC INTERFACE COLOURING */

.appchrome_pages, .appchrome_search, .appchrome_request
                        {background-color: #c0e0ff;}
.appchrome_redir        {background-color: #c0ecf4;}
.appchrome_dcat         {background-color: #c0ffe0;}
.appchrome_sthumb       {background-color: #e0ffc0;}
.appchrome_fgp          {background-color: #c8ffd8;}
.appchrome_alert        {background-color: #ffffb0;}
.appchrome_brand        {background-color: #e0c0ff;}
.appchrome_ecat         {background-color: #e4ffb0;}
.appchrome_offer        {background-color: #ffe0c0;}
.appchrome_report       {background-color: #d0d0d0;}
.appchrome_outstk       {background-color: #e4ffb0;}
.appchrome_cncord       {background-color: #fff0b8;}
.appchrome_cncgrp       {background-color: #fff0b8;}


/* PRIMARY OPERATION PANELS */

.corepanel              {margin-top: 15px;}


/* MODULE HEADER PANELS */

.modheadbox {
    margin:             15px 0;
    width:              918px;
}

.modheadtxt {
    padding:            15px 9px;
    font-size:          12pt;
    font-weight:        bold;
    color:              #202040;
}

.modinstruc             {font-style: italic;}




/***********************/
/* PAGE PICKER BUTTONS */
/***********************/


.pagepicktexts          {margin: 7px 0 0 5px;}
.unsearchable {
    margin:             0 0 0 5px;
    color:              #0000a0;
}
.hidepagebtn1 {
    margin:             0 0 0 5px;
    color:              #a00000;
}
.hidepagebtn2 {
    margin-bottom:      1px;
    font-size:          8pt;
    font-weight:        normal;
}




/************************/
/* PAGE MODULE DISPLAYS */
/************************/


.no_ffon .struct_contnt
{
    margin:             15px 0 0;
    max-width:          920px;
}

.ksection               {background-color: #ffffff;}

.minor_instruc          {opacity: 50%;}

.imagicator {
    padding:            0;
    text-align:         center;
}

.thing_explainer {
    font-style:         italic;
    color:              #989898;
}

.subthing_explainer {
    font-size:          9pt;
    font-weight:        normal;
    color:              #808080;
}

.thing_missing {
    font-weight:        bold;
    color:              #a00000;
}

.other_files            {color:#0000a0;}

.other_box {
    border:             1px solid #808080;
    background-color:   #fcfcfc;
}

.ksect_editlink {
    background-color:   #f0f8ff;
    padding:            5px;
}

.editlink_ante          {border-bottom: 1px dotted #8080a8;}/*a0a0c0;}*/
.editlink_left          {border-right: 1px dotted #8080a8;}
.editlink_post          {border-top: 1px dotted #8080a8;}

.ksect_rawcode, .ksmulti td.ksect_rawcode {
    border-top:         1px dotted #8080a8;
    background-color:   #f8fcff;
    padding:            0 10px;
    
}




/**************************/
/* ITEM PICKER COMPONENTS */
/**************************/


.thingtile_grid {
    position:           relative;
    flex-wrap:          wrap;
    grid-gap:           14px;
    text-align:         left;
}

.thingtile_bars {
    margin-top:         15px;
    flex-wrap:          wrap;
    grid-gap:           10px;
}

.thingtile_cell {
    border:             1px solid #a0a0c0;
    display:            flex;
    background-color:   #ffffff;
    padding:            0;
}

.thingtile_limitx       {max-width: 918px;}

.thingtile_cont         {padding: 10px;}
.thingtile_fgp {
    width:              308px;
    text-align:         center;
}


/* Offer picker bar */

.discount_bar {
    border:             1px solid #a0a0c0;
    text-align:         left;
    font-size:          11pt;
}


/* Inter-module transfer links */

.alt_actn {
    position:           absolute;
    top:                390px;
    left:               550px;
}

.intermodule {
    margin:             0;
    border-radius:      0 8px 8px 8px;
    border:             1px solid #909090;
    padding:            3px 5px 4px;
    text-align:         left;
    color:              #000000;
}
.iml_2r                 {margin-bottom: 3px;}
.iml_gr                 {color: #484848;}




/****************/
/* OFFER EDITOR */
/****************/


.offer_param_submenu {
    margin-top:         5px;
    position:           relative;
    width:              100%;
    display:            grid;
    grid-template-columns:  151px 151px;
    padding:            0;
    gap:                6px;
}

.offer_param_capt {
    font-size:          9pt;
    font-weight:        bold;
    color:              #000080;
}

.offer_granule {
    position:           relative;
    min-width:          1%;
}




/*****************************/
/* EPOS ITEMS BROSWER MODULE */
/*****************************/


.epos_grid_cont1 {
    max-width:          218px;
    flex-direction:     column;
}
.epos_grid_cont1:hover  {background-image: linear-gradient(#ffffff, #ffffff);}  /* suppresses highlighting behaviour from customer-facing stylesheet */

.epos_mgr_tech {
    border-top:         1px solid #a0a0a0;
    border-bottom:      1px solid #a0a0a0;
    display:            flex;
    flex-direction:     row;
    font-size:          10pt;
    font-weight:        bold;
}

.epos_mgr_id {
    width:              60px;
    padding:            4px 8px;
    background-color:   #f4f4f4;
    color:              #444444;
}

.epos_mgr_st {
    width:              134px;
    padding:            4px 8px;
}

.epos_stat_bar {
    border-top:         1px solid #a0a0a0;
    border-bottom:      1px solid #a0a0a0;
    font-size:          10pt;
    font-weight:        bold;
    padding:            4px 8px;
}

.epos_grid_desc         {padding: 6px 10px;}

.epos_mgr_data {
    font-style:         italic;
    color:              #808080;
}

.epos_mgr_barc {
    margin:             4px 0;
    font-size:          8pt;
    color:              #303050;
}

.epos_grid_shop {
    margin-left:        10px;
    margin-right:       10px;
}

label                   {font-weight: bold;}

.prodeditinput          {width: 300px;}
.prodeditlong {
    min-width:          296px;
    max-width:          296px;
    padding:            5px;
    min-height:         77px;
    font-size:          11pt;
}

@media print {
    .thingtile_grid         {grid-gap: 0;}
    .epos_grid_cont1, .epos_grid_cont2
                            {grid-gap: 0;}
    .epos_mini_img {
        max-width:          50px;
        min-height:         50px;
        max-height:         50px;
        padding:            0 auto;
    }
    .epos_mini_img img {
        max-width:          50px;
        max-height:         50px;
    }
    .no_ffon .epos_grid_desc {
        font-size:          9pt;
        font-weight:        normal;
    }
    .epos_mgr_barc          {margin: 0;}
    .epos_mgr_data, .epos_grid_bull, .epos_grid_shop
                            {display: none;}
    .unobscure              {margin-right: 0;}
}




/**********************************/
/* STATUS AND SUBCATEGORY PICKERS */
/**********************************/


.datahider              {display: none;}


/* DROPDOWN FINE-TUNING */

.dropdownhost {
    width:              306px;
    height:             36px;
}

.dropdowncurrent {
    height:             26px;
    padding:            5px;
    font-weight:        bold;
}

.dropdownouter {
    margin-top:         -5px;
    margin-left:        -1px;
}

.pickstatus, .picksubcosm {
    width:              296px;
    padding:            5px;
    font-weight:        bold;
}

.cosmtext               {margin: auto auto auto 5px;}


/* STATUS */

.itemst0    /* Pending */ {
    background-color:   #80ffe0;
    color:              #004030;
}

.itemst2    /* Current */ {
    background-color:   #c0ff80;
    color:              #204000;
}

.itemst1    /* On Offer */ {
    background-color:   #ffff80;
    color:              #404000;
}

.itemst3    /* Clearance */ {
    background-color:   #ffe080;
    color:              #403000;
}

.itemst4    /* Sold Out */ {
    background-color:   #ffc080;
    color:              #402000;
}

.itemst5    /* Obsolete */ {
    background-color:   #ff8080;
    color:              #400000;
}

.itemst_hover0          {color: #004030}
.itemst_hover2          {color: #204000}
.itemst_hover1          {color: #404000}
.itemst_hover3          {color: #403000}
.itemst_hover4          {color: #402000}
.itemst_hover5          {color: #400000}

.itemst_hover0:hover    {background-color: #80ffe0}
.itemst_hover2:hover    {background-color: #c0ff80}
.itemst_hover1:hover    {background-color: #ffff80}
.itemst_hover3:hover    {background-color: #ffe080}
.itemst_hover4:hover    {background-color: #ffc080}
.itemst_hover5:hover    {background-color: #ff8080}


/* SUB-CATEGORY */

#disp_item_subcosm      {background-color: #ffffff}

.picksubcosm:hover      {background-color: #f0f0f0}




/***************************/
/* EPOS / C&C USAGE REPORT */
/***************************/


.reportblocks {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          wrap;
    padding:            0 10px;
    grid-gap:           10px;
}

.rptblk_single {
    border-radius:      15px;
    border:             1px solid #a0f000;
    background-color:   #f8ffe4;
    padding:            10px 15px;
    text-align:         center;
    color:              #609000;
}

.rptblk_number {
    font-size:          32pt;
    color:              #406000;
    margin-bottom:      3px;
}

.rptblk_descr {
    font-size:          14pt;
}

.rptblk_expln {
    font-size:          10pt;
    margin-top:         3px;
}




/*****************/
/* C&C ORDER LOG */
/*****************/


.dtile_outer            {grid-template-columns: 95px auto 136px;}

.dt_num_needeml {
    border-right:       1px solid #c09000;
    background-color:   #ffe080;
    color:              #403000;
}

.dt_num_senteml {
    border-right:       1px solid #60c000;
    background-color:   #c0ff80;
    color:              #204000;
}

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

.dt_num_collect {
    border-right:       1px solid #00c090;
    background-color:   #80ffe0;
    color:              #004030;
}

.dt_num_cancel {
    border-right:       1px solid #606060;
    background-color:   #c0c0c0;
    color:              #303030;
}

.spoiler {
    background-color:   #fff0b8;
    color:              #fff0b8;
}
.spoiler:hover {
    background-color:   rgba(0,0,0,0);
    color:              #000000;
}

.dtile_control          {width: 120px;}
.dtile_control button   {margin-top: 5px;}

.btn_cnceml {
    border:             2px solid #c07800;
    background-color:   #ffe8c0;
}

.otqu_needeml           {background-color: #fff0c0;}
.otqu_senteml           {background-color: #e0ffc0;}
.otqu_abandon           {background-color: #ffc0c0;}
.otqu_collect           {background-color: #c0fff0;}
.otqu_cancel            {background-color: #e0e0e0;}


/* C&C HISTORY GRAPH v1 */
/*
.cncgraph {
    margin:             0 20px 20px;
    height:             420px;
    display:            flex;
    flex-direction:     row;
    grid-gap:           4px;
    direction:          rtl;
    overflow-x:         scroll;
}

.cncdaybar {
    position:           relative;
    min-width:          24px;
    height:             400px;
    border-bottom:      1px solid #a0a0c0;
    direction:          ltr;
}

.cncbarwkend {
    background-color:   #efefef;
}

.cncbarmoney {
    position:           absolute;
    bottom:             0;
    left:               8px;
    width:              16px;
    background-color:   #ffca00;
}

.cncbartally {
    position:           absolute;
    bottom:             0;
    width:              16px;
    background-color:   #4040ff;
}

.cnccapmoney {
    position:           absolute;
    
}

.cnccaptally {
    position:           absolute;
    top:                200px;
}*/


/* C&C HISTORY GRAPH v2 */

.cncgraph {
    margin:             0 20px 20px;
    display:            flex;
    flex-direction:     column;
    grid-gap:           4px;
}

.cncdaybar {
    border-left:        1px solid #a0a0c0;
    position:           relative;
    width:              877px;
    min-height:         24px;
    background-color:   #f8f8ff;
}

.cncbarwkend {
    background-color:   #e8e8e8;
}

.cncbarmoney {
    position:           absolute;
    top:                8px;
    left:               0;
    height:             16px;
    background-color:   #ffca00;
}

.cncbartally {
    position:           absolute;
    left:               0;
    height:             16px;
    background-color:   #4040ff;
}

.cncbarcaptn {
    position:           absolute;
    right:              5px;
    bottom:             4px;
    font-size:          10.5pt;
    color:              #505060;
}




/********************************/
/* OTHER MISCELLANEOUS ELEMENTS */
/********************************/


.fullwidthbuttons {
    width:              920px;
    display:            flex;
    flex-direction:     column;
}

.webpagebutton {
    border-color:       #a0a0c0;
    height:             70px;
    margin-bottom:      6px;
    background-color:   #ffffff;
}

.dc_ico_prev            {margin-right: 10px;}
.sthumbmicro            {width: 224px;}
.fgpanelmicro {
    max-width:          306px;
    max-height:         160px;
}

.brand_cont {
    width:              250px;
    text-align:         center;
}
.brandmicro {
    max-width:          250px;
    max-height:         110px;
}

.webmgr_modal_border {
    width:              885px;
    border:             none;
    background-color:   #f0f8ff;
}

.webmgr_md_box1         {width: 862px;}