/* @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,900');*/


/* Colors to define:

    text
    text-selected
    text-background
    text-selected-background

 */
:root {  /* CSS Variables */
    --pwk-font-family: 'Roboto', sans-serif;
    /*--pwk-win-bkgrnd-clr: rgb(35, 58, 48); */
    --pwk-win-bkgrnd-clr: rgb(255, 255, 255);
    --pwk-kbrd-focus-ind-clr: rgba(26, 169, 255, .30);
    --pwk-text-color: rgb(255, 255, 255);
    --pwk-sep-clr: rgba(255, 255, 255, .10);
    --pwk-input-top-border: rgba(255, 255, 255, .04);
    --pwk-input-bkgrnd-color: rgba(255, 255, 255, .10);
    --pwk-hdr-bkgrnd: rgba(96, 96, 96, .40);
    --pwk-header-color: rgb(255, 255, 255);
    --pwk-header-color__hover: rgb(0, 88, 208);

    --pwk-dropdown-menu-color: rgba(96, 96, 96, .40);
    --pwk-dialog-background-color: rgb(38, 43, 52);

    --pwk-cntrl-clr: rgba(255, 255, 255, .25);
    /*--pwk-seg-cntrl-clr: rgb(101, 101, 101);*/
    --pwk-seg-cntrl-clr: rgba(192, 192, 192, .5);
    --pwk-control-text-color: rgba(255, 255, 255, .85);
    --pwk-control-background-color: rgb(30, 30, 30);
    --pwk-disabled-control-text-color: rgba(255, 255, 255, .40);

    --pwk-sel-bkgrnd: rgb(30, 103, 215);
    --pwk-link-color: rgb(65, 156, 255);
    --pwk-a-link-color: rgb(131,192, 147);
    --pwk-a-visited-color: rgb(112, 163, 126);
    /*--pwk-a-visited-color: rgb(255, 255, 128); */
    --pwk-label-color: rgba(0, 0, 0, .85);
    --pwk-spinner-clr: rgba(255, 255, 255, .70);

    /* tbl is primarily defined as shades of the background they sit on
     * by taking an alpha value of white.
     */
    --pwk-tbl-hdr-brdr-clr: rgba(0, 0, 0, 1.0);
    --pwk-tbl-hdr-bkgrnd-clr: rgba(255, 255, 255, .04);
    --pwk-tbl-hdr-txt-clr: rgba(255, 255, 255, 1.0);
    --pwk-tbl-hdr-brdr-l-width: .125rem;  /* 2 pixels in rem at 100% zoom */
    --pwk-tbl-hdr-brdr-r-width: 0rem;

    --pwk-tbl-row-bkgrnd-clr: rgba(64, 64, 64, .10);
    --pwk-tbl-row-bkgrnd-alt-clr: rgba(8, 8, 8, .20);
    --pwk-tbl-txt-clr: rgba(255, 255, 255, .70);
    --pwk-tbl-primary-txt-clr: rgba(255, 255, 255, 1.0);
    --pwk-tbl-row-selected-clr: rgba(30, 103, 215, 1.0);
    --pwk-tbl-font-size: .75rem;
    --pwk-tbl-sep-width: .0625rem;    /* 1 pixel in rem at 100% zoom */
    --pwk-tbl-brdr-l-width: .125rem;  /* 2 pixels in rem at 100% zoom */
    --pwk-tbl-brdr-r-width: 0.0rem;  /* 2 pixels in rem at 100% zoom */
    --pwk-tbl-brdr-b-width: .125rem;

    --pwk-grp-box-bkgrnd-clr: rgba(255, 255, 255, .04);
    --pwk-footer-background: rgba(52,57,57,1.0);
    --pwk-footer-color: rgba(196,223,255,1.0);

    --pwk-err-bkgrnd-clr: rgba(255, 32, 32, .85);
    --pwk-err-clr: rgba(255, 255, 255, 1.0);

    --pwk-dg-outer-brdr-l-thickness: .0625rem;      /* outer grid border thickness */
    --pwk-dg-outer-brdr-t-thickness: .0625rem;
    --pwk-dg-outer-brdr-r-thickness: .0625rem;
    --pwk-dg-outer-brdr-b-thickness: .0625rem;
    --pwk-dg-outer-brdr-color: rgb(0, 0, 0);                  /* Used for L, T, B only */
    --pwk-dg-outer-brdr-r-color: rgba(255, 255, 255, .10);    /* Used for the R border only */

    --pwk-dg-hdr-brdr-l-thickness: 0rem;               /* We have hdr border R & B */
    --pwk-dg-hdr-brdr-t-thickness: 0rem;
    --pwk-dg-hdr-brdr-r-thickness: 0rem;
    --pwk-dg-hdr-brdr-b-thickness: .0625rem;
    --pwk-dg-hdr-sep-width: .0625rem;
    --pwk-dg-hdr-brdr-color: rgba(255, 255, 255, .10);  /* In separator color */
    --pwk-dg-hdr-bkgrnd-clr: rgba(255, 255, 255, .04);
    --pwk-dg-hdr-clr: rgba(255, 255, 255, 1.0);
    --pwk-dg-hdr-brdr-clr: rgba(0, 0, 0, 1.0);

    --pwk-dg-font-size: .75rem;             /* Used for hdr and data */
    --pwk-dg-padding-vert: .25rem;          /* Used for hdr and data */
    --pwk-dg-padding-horz: .5rem;

    --pwk-dg-hdr-col-brdr-r-thickness: .0625rem;
    --pwk-dg-hdr-col-brdr-r-color: rgba(255, 255, 255, .10);   /* separator color */

    --pwk-dg-cnt-font-size: .625rem;
    --pwk-dg-cnt-padding-vert: .25rem;
    --pwk-dg-cnt-padding-horz: 2.0rem;
    --pwk-dg-cnt-brdr-l-thickness: 0;
    --pwk-dg-cnt-brdr-t-thickness: .0625;                      /* border only top and right */
    --pwk-dg-cnt-brdr-r-thickness: .0625;
    --pwk-dg-cnt-brdr-b-thickness: 0;
    --pwk-dg-cnt-brdr-color: rgba(255, 255, 255, .10);         /* border uses separator color */
    --pwk-dg-cnt-clr: rgba(255, 255, 255, .70);

    --pwk-form-font-sz: .75rem;
    --pwk-form-row-height: 1.5rem;
}


* {
    box-sizing: border-box;   /* Always include content, padding, and border when */
                              /* specifying width and height [margin is still outside] */
}

body {
    /* The body is divided into 2 areas laid out as a grid. The first area (header) is empty
       and is simply present so that our content isn't below our header bar which is fixed
       to the top of the display.
    */
    font-family: var(--pwk-font-family);
    display: grid;
    height: 100%;
    margin: 0;
    grid-template-rows: 3.5rem auto fit-content(2rem);
    grid-template-areas: "header"
                         "main";
    padding-top: 0;
    /* background-color: var(--pwk-win-bkgrnd-clr); */
    /*background: linear-gradient(to right, rgb(0,77,129), rgb(3,118,187)); */
    background: linear-gradient(to right, rgb(11,79,104), rgb(82,93,100));
}

main {
    grid-area: main;
    display: grid;
    grid-template-areas: "content";
    grid-template-rows: auto;
}

#welcome, .disclaimer {
    color: var(--pwk-control-text-color);
    grid-area: welcome;
    align-self: center;
    justify-self: center;
}

#links {
    grid-area: links;
    display: grid;
    align-self: start;
    grid-template-rows: 3.0rem 3.0rem 3.0rem 5.0rem 3.0rem 3.0rem;
    grid-template-areas: "megadev" "megauser" "webapi" "disclaimer" "megadevrelease" "megauserrelease";
    justify-items: center;
    align-items: center;
}


.pwk-button {
    /*margin-left: 1rem;*/
    background-color: var(--pwk-cntrl-clr);
    color: var(--pwk-control-text-color);
    cursor: pointer;
    padding: .25rem 1rem;
    border: none;
    border-radius: .25rem;
}

.pwk-buttons .pwk-button {
    margin-bottom: .625rem;    /* control vert spacing between buttons when wrapping */
}

.pwk-button:focus {
    background-color: var(--pwk-sel-bkgrnd);
    outline: 0;
}

.pwk-button:disabled {
    cursor: default;
    color: var(--pwk-disabled-control-text-color);
}

.loader {                             /* spinner for waiting on a query. */
    border: .125rem solid var(--pwk-spinner-clr);
    border-radius: 50%;
    border-top: .125rem solid var(--pwk-sel-bkgrnd);
    width: 1.25rem;
    height: 1.25rem;
    -webkit-animation: spin 1.1s linear infinite; /* Safari */
    animation: spin 1.1s linear infinite;
}


.pwk-sel-opt:hover {
    background-color: var(--pwk-sel-bkgrnd);
}

footer {
    grid-area: footer;
    background: var(--pwk-footer-background);
    color: var(--pwk-footer-color);
}

input {
    color: var(--pwk-text-color);
    background-color: var(--pwk-input-bkgrnd-color);
    border-bottom-color: var(--pwk-sep-clr);
    border-top-color: var(--pwk-input-top-border);
    border-left-color: var(--pwk-input-top-border);
    border-right-color: var(--pwk-input-top-border);
    border-width: .0625rem;
    outline-color: var(--pwk-kbrd-focus-ind-clr);
}

input:disabled {
    color: var(--pwk-disabled-control-text-color);
}

textarea {
    color: var(--pwk-text-color);
    background-color: var(--pwk-input-bkgrnd-color);
    border-bottom-color: var(--pwk-sep-clr);
    border-top-color: var(--pwk-input-top-border);
    border-left-color: var(--pwk-input-top-border);
    border-right-color: var(--pwk-input-top-border);
    border-width: .0625rem;
    outline-color: var(--pwk-kbrd-focus-ind-clr);
}

select {
    color: var(--pwk-text-color);
    background-color: red;
    background-color: var(--pwk-input-bkgrnd-color);
    font-size: var(--pwk-tbl-font-size);
    border-radius: .25rem;     /* Here for firefox, doesn't affect others */
}


label, span {
    color: var(--pwk-label-color);
    font-size: .75rem;
}



a:link {
    color: var(--pwk-a-link-color);
    font-size: .75rem;
}


a:visited {
    color: var(--pwk-a-visited-color);
}


.pwk-header {
    /* This is the bar that spans the top of the window. */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--pwk-hdr-bkgrnd);
    color: var(--pwk-header-color);
    display: -webkit-box;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    padding: 0.5rem 1rem;
    z-index: 60;
    justify-content: space-between;
    align-items: center;
}

.pwk-header i:hover,
.pwk-header i:active {
    color: var(--pwk-link-color);
    cursor: pointer;
}

.pwk-header__left {
    display: inline-block;
}

.pwk-header__right {
    display: inline-block;
    text-align: center;
}

.pwk-header-button {
    height: 1.85rem;
    vertical-align: middle;
    background: transparent;
    border: none;
    color: inherit;
}

.pwk-header-button:focus {
    outline: none;
}

.pwk-header-button[disabled] {
    /* this doesn't seem to be having any effect */
    cursor: not-allowed;
    color: var(--pwk-header-color);
}

.pwk-header__usr,
.pwk-header__pg-title {
    display: inline-block;
    font-size: .875rem;
    cursor: default;
}

.pwk-header__usr:hover {
    cursor: pointer;
    color: var(--pwk-link-color);
}

.pwk-header__pg-title {
    font-variant: small-caps;
}


.pwk-dropdown-menu-area {
    display: none;         /* only visible when changed from code. */
    zIndex: 50;
}

.pwk-dropdown-menu-gap {
    position: fixed;
    top: 2.85rem;
    right: 2.0rem;
}

.pwk-dropdown-menu__triangle {
    position: absolute;
    right: 1rem;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-bottom: .5rem solid var(--pwk-dropdown-menu-color);
}

.pwk-dropdown-menu {
    position: fixed;
    font-size: .75rem;
    top: 3.35rem;
    right: 1.5rem;
    background: var(--pwk-dropdown-menu-color);
    color: var(--pwk-header-color);
}

.pwk-dropdown-menu-item {
    padding: .5rem 1.0rem .5rem 1.0rem;
}

.pwk-dropdown-menu-item:hover,
.pwk-dropdown-menu-item:active {
    background-color: var(--pwk-sel-bkgrnd);
    cursor: pointer;
}


/* For pages that are not yet implemented */

.pwk-tmp-center-div {
    text-align: center;
}

.pwk-tmp-pg-name {
    font-size: 1.5rem;
    color: var(--pwk-text-color);
    margin-top: 2.0rem;
    margin-bottom: 1.25rem;
}

/* plgLogin.css start */


.pwk-login-dlg {
    margin-top: 5rem;
    margin-left: auto;
    margin-right: auto;
    width: 20rem;
    height: auto;
    background-color: var(--pwk-hdr-bkgrnd);
    border: .125rem solid var(--pwk-sep-clr);
    border-radius: .5rem;
    box-shadow: 0 0 2rem black;
}

.pwk-login-dlg__drop_ani {
    animation: pwk-login-dlg__drop 300ms 0ms 1;
}

.pwk-login-dlg__shake_ani {
    animation: pwk-login-dlg__shake 0.62s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

.pwk-login-dlg-top {
    color: var(--pwk-header-color);
    top-margin: .5rem;
}

.pwk-login-dlg-top p {
    margin: 0;
    font-size: 1.0rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    text-align: center;
}

.pwk-login-dlg-bot {
    display: grid;
    margin-top: 1.5rem;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: .5rem;
    grid-template-columns: 6rem 1fr;
    grid-template-rows: 1.5rem 1.5rem 2.0rem;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem;
    align-items: center;
}


.pwk-login-dlg-bot label {
    text-align: right;
}

.pwk-login-dlg-bot input {
    font-family: 'Roboto', sans-serif;
}

.pwk-login-dlg__err-msg {
    color: red;
    text-align: center;
    grid-column: span 2;
}
/* plgLogin.css end */




/* plgSJTop.css start */

.pwk-sj-top-cc__new {   /* div containing the credit card section [in-code now] */
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 22rem;
    height: 10.5rem;
    border: .0625rem solid var(--pwk-sep-clr);
    justify-self: center;
    background-color: var(--pwk-grp-box-bkgrnd-clr);
    border-radius: .25rem;
}

.pwk-sj-top-cc {   /* div containing the credit card section */
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 3rem 8rem 3rem 8rem;
    grid-template-rows: auto auto auto;
    grid-column-gap: .5rem;
    justify-content: center;
}

#pwk-sj-top-seg {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -1.25rem;
    /*border-radius: .25rem;*/
}

.pwk-sj-top-seg-item {
    color: var(--pwk-label-color);
    padding: .25rem .5rem;
    font-size: .75rem;
    cursor: pointer;
}

.pwk-sj-top-seg-item__left {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.pwk-sj-top-seg-item__center {
    border-left: .0625rem solid black;
    border-right: .0625rem solid black;
}

.pwk-sj-top-seg-item__right {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.pwk-sj-top-seg-item__norm {
    /*background-color: var(--pwk-cntrl-clr);*/
    background-color: var(--pwk-seg-cntrl-clr);
}

.pwk-sj-top-seg-item__sel {
    background-color: var(--pwk-sel-bkgrnd);
}

.pwk-sj-top-cc-header__new {
    position: relative;
    left: 1rem;
    top: -.75rem;
    width: 10rem;
    font-size: 1rem;
    text-align: center;
    background-color: var(--pwk-cntrl-clr);
}

.pwk-sj-top-cc-header {
    font-size: 1rem;
    text-align: center;
    grid-row-start: 1;
    grid-column: 1 / 5;
    margin-bottom: 1.5rem;
}

.pwk-sj-top-cc-label__new {
    color: var(--pwk-label-color);
    position: relative;
    left: 1rem;
}

.pwk-sj-top-cc-label {
    color: var(--pwk-label-color);
}

#pwk-sj-top-cc-lbl__start {
    position: absolute;
    top: 2.5rem;
    left: 4rem;
}

#pwk-sj-top-cc-inp__start {
    position: absolute;
    top: 2.375rem;
    left: 8.5rem;
    width: 9rem;
}

#pwk-sj-top-cc-lbl__end {
    position: absolute;
    top: 4.5rem;
    left: 4rem;
}

#pwk-sj-top-cc-inp__end {
    position: absolute;
    top: 4.375rem;
    left: 8.5rem;
    width: 6rem;
}

#pwk-sj-top-ani-lbl {
    position: absolute;
    top: 3.25rem;
    left: 3.875rem;
}

#pwk-sj-top-ani-inp {
    position: absolute;
    top: 3.125rem;
    left: 9.5rem;
    width: 7rem;
}

#pwk-sj-top-plgid-lbl {
    position: absolute;
    top: 3.25rem;
    left: 4.875rem;
}

#pwk-sj-top-plgid-inp {
    position: absolute;
    top: 3.125rem;
    left: 9.5rem;
    width: 7rem;
}

#pwk-sj-top-cc-btn__srch,
#pwk-sj-top-ani-btn__srch,
#pwk-sj-top-plgid-btn__srch {
    position: absolute;
    top: 7.0rem;
    left: 8.4375rem;
}

#pwk-sj-top-spinner {
    position: absolute;
    top: 7.0rem;
    left: 16.0rem;
}

.pwk-sj-top-cc-label__start {
    color: var(--pwk-label-color);
    grid-row-start: 2;
    grid-column-start: 1;
    text-align: right;
    margin: .25rem 0;
}

.pwk-sj-top-cc-input__start {
    grid-row-start: 2;
    grid-column-start: 2;
    margin: .25rem 0;
}

.pwk-sj-top-cc-label__end {
    color: var(--pwk-label-color);
    grid-row-start: 2;
    grid-column-start: 3;
    text-align: right;
    margin: .25rem 0;
}

.pwk-sj-top-cc-input__end {
    grid-row-start: 2;
    grid-column-start: 4;
    margin: .25rem 0;
}

.pwk-sj-top-cc-button__search {
    grid-row-start: 3;
    grid-column: 1 / 5;
    margin-top: 1.5rem;
    justify-self: center;
}

#pwk-sj-top-sr {           /* */
    /*margin-top: 2rem;*/
    /*margin-left: 1rem;*/
    /*margin-right: 1rem;*/
    /*max-height: 12rem;*/
    /*border: var(--pwk-header-background) solid 1px;*/
}
/* plgSJTop.css end */




/* plgDataGrid.css start */
/*  These are the styles to support the plgDataGrid class which will generate
 *  elements using these classes. In this way it should not require much work
 *  to include our data grid from one of the plgDataContent derived classes.
 *
 *  Should you need to override them use a form like:
 *    #my-grid-container pwk-dg-hdr
 *
 *  Also, you can alter css variables defined in plgApp.css to alter the look.
 */

/* The hdr is a separate div that sits immediately on top of the table data
*/
.pwk-dg-hdr {
    /* background-color: var(--pwk-tbl-hdr-bkgrnd-clr); */
    /* border-top: .125rem solid var(--pwk-tbl-hdr-brdr-clr); */
    /* border-left: .125rem solid black; */
    /* cursor: default; */
}

/* The quantity and width of columns is determined by the array of PlgDataGridColumn
 * instances passed to the PlgDataGrid constructor.
 */
.pwk-dg-hdr-col {
    /* padding: .25rem .5rem; */
    /* font-size: var(--pwk-tbl-font-size); */
    /* border-right: var(--pwk-tbl-sep-width) solid var(--pwk-sep-clr); */
    /* border-bottom: .125rem solid var(--pwk-sep-clr); */
    /* color: var(--pwk-tbl-hdr-txt-clr); */
    /* height: auto; */
}

/* The tbl section contains the data within a div that has overflow
 * set to scroll to handle large numbers of rows. The width of the
 * container is set programmatically using the array of PlgDataGridColumn's.
*/
.pwk-dg-tbl-container {
    /*overflow: scroll;*/
    /*max-height: 15rem;     !* Override to customize tbl height on your page *!*/
    /*border-left: var(--pwk-tbl-brdr-l-width) solid black;*/
    /*border-right: var(--pwk-tbl-brdr-l-width) solid var(--pwk-sep-clr);*/
    /*border-bottom: var(--pwk-tbl-brdr-b-width) solid var(--pwk-sep-clr);*/
    /*cursor: default;*/
}

/* The tbl will be a grid created by the
 */
.pwk-dg-tbl {
    font-size: var(--pwk-tbl-font-size);
}

/* tbl cells are individually rendered in grid cells. However, each cell will
 * have a row property class that implements the alternating row background
 * colors and it's selected row background.
 */
 .pwk-dg-tbl-cell {                  /* all cells share this class */
    padding: .25rem .5rem;
    font-size: var(--pwk-tbl-font-size);
    height: 1.25rem;
}

 /* Each cell will have one of the next 3 classes to determine the
  * appropriate background.
  */
.pwk-dg-tbl-row-bkgrnd__even {
    background-color: var(--pwk-tbl-row-bkgrnd-clr);
}

.pwk-dg-tbl-row-bkgrnd__odd {
    background-color: var(--pwk-tbl-row-bkgrnd-alt-clr);
}

.pwk-dg-tbl-row-bkgrnd__sel {
    background-color: var(--pwk-tbl-row-selected-clr);
}

/* Data cells can emphasize a column by setting the isPrimaryCol property of the
 * corresponding PlgDataGridColumn instance. So we have two classes to distinguish
 * which text color to use.
 */
.pwk-dg-tbl-cell-clr {
    color: var(--pwk-tbl-txt-clr);
}

.pwk-dg-tbl-cell-clr__primary {
    color: var(--pwk-tbl-primary-txt-clr);
}

/* We will just have a small label area under the table.
*/
.pwk-dg-tbl-rows-label {
    /*color: var(--pwk-tbl-txt-clr);*/
    color: var(--pwk-tbl-txt-clr);
    text-align: center;
    padding: .5rem 0;
    margin-left: 2rem;
    font-size: .0625rem;
}
/* plgDataGrid.css end */



/* Animations */

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@keyframes pwk-login-dlg__drop {
    0%   { transform: translateY(-12rem); }
    90%  { transform: translateY(1rem);   }
    100% { transform: translateY(0rem);   }
}


@keyframes pwk-login-dlg__shake {
    10%, 90% {      transform: translate3d(-2px, 0, 0); }
    20%, 80% {      transform: translate3d(4px, 0, 0);  }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% {      transform: translate3d(8px, 0, 0);  }
}