.btnInvisible {
    display:none;
}

.audioHelp {
    display: none;
}

.LabelOfCkeckbox {
    font-size: calc(7px + 0.4vw);
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    font-weight: 600;
}

.LabelFont {
    font-size: calc(9px + 0.4vw);
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    white-space: nowrap;
    font-weight: 600;
}

.labelCol {
    /* Grows more quickly,
     allowing for wider variation on larger screens */
    font-size: calc(9px + 0.4vw);
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    line-height: 3vh;
    background-color: #f9f9f9;
}

.inputCol {
    /* Grows more quickly,
     allowing for wider variation on larger screens */
    font-size: calc(9px + 0.3vw);
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    background-color: white;
}

.treeview {
    font-size: calc(10px + 0.4vw);
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
}

.blankTBheight {
    height: calc(3.5vh);
}

.pageTitle, #TitleLabel {
    font-size: calc(12px + 0.5vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    padding-bottom: 2px;
    /*text-shadow: 1px 1px 2px green, 0 0 25px orange, 0 0 10px yellow;*/
    text-shadow: 1px 1px 2px white, 0 0 25px white, 0 0 10px yellow;
    background-color: white;
}

.rtdBtnCircle {
    background-color: white;
    border-radius: 50px;
    height: 30px;
    width: 38px;
    text-align: center;
    padding-top: 6px;
    display: inline-block;
}

.leftRightPanel {
    width: 100%;
    text-align: left;
    background-color: #e4e1e1;
}

.taskRow {
    width: 100%;
    height: 45px;
    text-align: right;
    padding-right: 5px;
    background-color: #e4e1e1;
}

.rotate90 {
    /*padding: Calc(1px + 0.1vw);*/
    color: white;
    background-color: gray;
    font-size: calc(6px + 0.4vw);
    font-size: 10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.gdvDiv {
    border: 1px solid lightgray;
}

.taskArrow {
    height: 18px;
    display: inline-block;
    text-align: center;
    font-size: Calc(5px + 0.3vw);
    border: 1px solid white;
    background-color: #eee;
    margin-top: 13px;
    background-size: 8%;
}

#btnTitle, #btnBS, #btnPL, #btnEquity, #btnFixed, #btnSOCE, #btnNote2, #btnNote3, #btnNote4, #btnNote5, #btnNote6, #btnNote7, #btnNote8, #btnNote9, #btnNote10, #btnNote11, #btnNote12, #btnNote13, #btnNote14, #btnNote15 {
    position: relative;
    font-size: Calc(6px + 0.5vw);
    text-decoration: none;
    color: black;
    background-color: #e4e1e1;
    border: none;
    width: Calc(23px + 2vw);
    cursor: pointer;
    user-select: none;
    margin-top: 8px;
    height: 33px;
}

    #btnTitle:hover, #btnBS:hover, #btnPL:hover, #btnEquity:hover, #btnFixed:hover, #btnSOCE:hover, #btnNote2:hover, #btnNote3:hover, #btnNote4:hover, #btnNote5:hover, #btnNote6:hover, #btnNote7:hover, #btnNote8:hover, #btnNote9:hover, #btnNote10:hover, #btnNote11:hover, #btnNote12:hover, #btnNote13:hover, #btnNote14:hover, #btnNote15:hover {
        border: thin;
        color: red;
        background-color: white;
        height: 40px;
    }

    #btnTitle:after, #btnBS:after, #btnPL:after, #btnEquity:after, #btnFixed:after, #btnSOCE:after, #btnNote2:after, #btnNote3:after, #btnNote4:after, #btnNote5:after, #btnNote6:after, #btnNote7:after, #btnNote8:after, #btnNote9:after, #btnNote10:after, #btnNote11:after, #btnNote12:after, #btnNote13:after, #btnNote14:after, #btnNote15:after {
        content: '';
        position: absolute;
        border-radius: 30px;
        background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    #btnTitle:disabled, #btnBS:disabled, #btnPL:disabled, #btnEquity:disabled, #btnFixed:disabled, #btnSOCE:disabled, #btnNote2:disabled, #btnNote3:disabled, #btnNote4:disabled, #btnNote5:disabled, #btnNote6:disabled, #btnNote7:disabled, #btnNote8:disabled, #btnNote9:disabled, #btnNote10:disabled, #btnNote11:disabled, #btnNote12:disabled, #btnNote13:disabled, #btnNote14:disabled, #btnNote15:disabled {
        color: black; /* lightgray;*/
        cursor: no-drop;
        background-color: white;
        height: 40px;
    }

.taskButton, #btnNew, #btnEdit, #btnPost, #btnList, #btnVideo, #btnTask1, #btnTask2, #btnTask3, #btnTask4 {
    position: relative;
    font-size: Calc(8px + 0.5vw);
    /*line-height: calc(27px + 1vw);*/
    text-decoration: none;
    color: black;
    background-color: #e4e1e1;
    border: none;
    width: 16%;
    cursor: pointer;
    user-select: none;
    margin-top: 8px;
    height: 33px;
}

    .taskButton:hover, #btnNew:hover, #btnEdit:hover, #btnPost:hover, #btnList:hover, #btnVideo:hover, #btnTask1:hover, #btnTask2:hover, #btnTask3:hover, #btnTask4:hover {
        border: thin;
        color: red;
        background-color: white;
        height: 40px;
    }

    .taskButton:after, #btnNew:after, #btnEdit:after, #btnPost:after, #btnList:after, #btnVideo:after #btnTask1:after, #btnTask2:after, #btnTask3:after, #btnTask4:after {
        content: '';
        position: absolute;
        border-radius: 30px;
        background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    .taskButton:disabled, .taskButton[disabled], .taskButton:disabled:hover, #btnNew:disabled, #btnNew[disabled], #btnNew:disabled:hover, #btnEdit:disabled, #btnEdit[disabled], #btnEdit:disabled:hover, #btnPost:disabled, #btnPost[disabled], #btnPost:disabled:hover, #btnList:disabled, #btnList[disabled], #btnList:disabled:hover, #btnVideo:disabled, #btnVideo[disabled], #btnVideo:disabled:hover, #btnTask1:disabled, #btnTask1[disabled], #btnTask1:disabled:hover, #btnTask2:disabled, #btnTask2[disabled], #btnTask2:disabled:hover, #btnTask3:disabled, #btnTask3[disabled], #btnTask3:disabled:hover, #btnTask4:disabled, #btnTask4[disabled], #btnTask4:disabled:hover {
        color: black; /* lightgray;*/
        cursor: no-drop;
        background-color: white;
        height: 40px;
    }

.plainButton {
    position: relative;
    margin-left: Calc(3px + 0.1vw);
    margin-right: Calc(3px + 0.1vw);
    padding-right: 5px;
    padding-left: 5px;
    font-size: Calc(4px + 0.5vw);
    line-height: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

/************************************ Start of Glowing Button ****************************************/
.glowButton {
    position: relative;
    margin-left: Calc(5px + 0.1vw);
    margin-right: Calc(5px + 0.1vw);
    padding-right: 10px;
    padding-left: 10px;
    font-size: Calc(6px + 0.5vw);
    /*line-height: 2rem;*/
    text-decoration: none;
    color: white;
    border-color: black;
    /*text-transform: uppercase;
    letter-spacing: 2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
    background-image: linear-gradient(160deg, #898787, black);
    background-image: linear-gradient(160deg, black, black);
    /*border-radius: 30px;*/
    cursor: pointer;
    /*user-select: none;*/
    box-shadow: 0 0 0 0 red, 0.5rem 0.5rem 20px #888888;
    transition: box-shadow 0.6s;
}

    .glowButton:hover {
        box-shadow: 0 0 60px 2px white, 0.5rem 0.5rem 20px black;
    }

#btnSave:disabled, #btnApprv:disabled, #btnProcess:disabled, #btnDelete:disabled, #btnReverse:disabled, #btnRep:disabled {
    color: white;
    border-color: white;
    box-shadow: 0 0 60px 2px white, 0.5rem 0.5rem 20px black;
    background-image: linear-gradient(160deg, lightgray, lightgray);
    cursor: no-drop;
}

.glowButton:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: 30px;
    background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.repButton {
    position: relative;
    margin-left: Calc(5px + 0.1vw);
    margin-right: Calc(5px + 0.1vw);
    padding-right: 10px;
    padding-left: 10px;
    font-size: Calc(6px + 0.5vw);
    text-decoration: none;
    color: white;
    border-color: black;
    background-image: linear-gradient(160deg, #898787, black);
    background-image: linear-gradient(160deg, black, black);
    cursor: pointer;
    box-shadow: 0 0 0 0 red, 0.5rem 0.5rem 20px #888888;
    transition: box-shadow 0.6s;
}

    .repButton:hover {
        border-color: red;
        box-shadow: 0 0 60px 2px white, 0.5rem 0.5rem 20px red;
        background-image: linear-gradient(160deg, red, red);
    }

    .repButton:after {
        content: '';
        position: absolute;
        top: 2px;
        right: 2px;
        bottom: 2px;
        left: 2px;
        border-radius: 30px;
        background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

.flyoutDiv {
    padding-right: 5px;
    padding-left: 5px;
    font-size: Calc(4px + 0.4vw);
    height: 30px;
    text-decoration: none;
    cursor: pointer;
    color: white;
    background-color: black;
    border: 1px solid white;
    border-radius: 30px;
}

    .flyoutDiv:hover {
        border: 1px solid deepskyblue;
        width:300px;
        background-color: white;
        color: black;
    }

.smaillPlainBtn {
    padding-right: 5px;
    padding-left: 5px;
    font-size: Calc(4px + 0.4vw);
    height: 20px;
    text-decoration: none;
    cursor: pointer;
    color: white;
    background-color: white;
    border: 1px solid black;
    /*border-radius: 30px;*/
}

.plainButton {
    padding-right: 5px;
    padding-left: 5px;
    font-size: Calc(4px + 0.4vw);
    height: 30px;
    text-decoration: none;
    cursor: pointer;
    color: white;
    background-color: white;
    border: 1px solid black;
    /*border-radius: 30px;*/
}

    .plainButton:hover {
        border: 1px solid red;
        background-color: white;
        color: red;
    }

    .plainButton:disabled {
        color: gray;
        background-color: #e6e5e5;
        border: 1px solid #e6e5e5;
        cursor: no-drop;
    }

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 1px;
    top: 12px;
    font-weight: 600;
    font-size: calc(7px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    transition: 0.2s ease all;
    background-color: white;
    color: black; /* #b2aeae;*/
    margin-left: 1%;
}

.floatUp-label {
    position: absolute;
    pointer-events: none;
    left: 2px;
    /*right: 30px;*/
    top: -10px;
    font-weight: 600;
    font-size: calc(7px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    transition: 0.2s ease all;
    background-color: white;
    color: black; /* #b2aeae;*/
    margin-left: 1%;
}

.floatUp2label {
    position: absolute;
    pointer-events: none;
    left: 0;
    /*right: 30px;*/
    top: -10px;
    font-weight: 600;
    font-size: calc(7px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    transition: 0.2s ease all;
    /*background-color: white;*/
    color: white;
    margin-left: 1%;
}

.relativePos {
    position: relative;
    padding-top: 5px;
    margin-top:5px;
    border:none;
}

select {
    font-size: calc(8px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    border: 1px solid lightgray;
    color: gray;
    height: 35px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 3px;
    background-color: white;
}

input[type=text], textarea {
    font-size: calc(8px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    border: 1px solid lightgray;
    color: gray;
    height: 35px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 3px;
    background-color: white;
}

    input[type=text]:focus, textarea:focus, select:focus {
        font-size: calc(8px + 0.4vw);
        font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
        outline: none;
    }

    input[type=text]:active, textarea:active, select:active {
        font-size: calc(8px + 0.4vw);
        font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
        border: 1px solid lightgray;
        color: gray;
    }

.entryFld {
    /*top: 30px;*/
    font-size: calc(8px + 0.4vw);
    font-family: 'Eras Light ITC', Aristocrat, Times New Roman, Verdana;
    height: 25px;
    padding-top: 10px;
    background-color: white;
    border-bottom: 1px solid lightgray;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 5px;
    /*border-color: white;
        box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;*/
}

.gdfontSmall {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(3px + 0.3vw);
}

.gdNumfontSmall {
    padding-right: 1px;
    font-family: Arial narrow;
    font-size: Calc(3px + 0.3vw);
    text-align: right;
}

.gdSptfontSmall {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(3px + 0.3vw);
    text-align: center;
}

.gdfont {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
}

.gdNumfont {
    padding-right: 1px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
    text-align: right;
}

.gdSptfont {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
    text-align: center;
}

.gdfontBold {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
    font-weight: 700;
}

.gdNumfontBold {
    padding-right: 1px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
    font-weight: 700;
    text-align: right;
}

.gdSptfontBold {
    padding: 0px;
    font-family: Arial narrow;
    font-size: Calc(5px + 0.3vw);
    font-weight: 700;
    text-align: center;
}

.search {
    width: Calc(70px + 3vw);
    background: url('../Images/search.png') no-repeat right;
    background-size: 10%;
    padding-left: 18px;
    border: 1px solid #ccc;
}

.transparentInner {
    margin: 0 auto;
    /*margin-top:90px;*/
    width: 100%;
    color: #000000;
    background-color: white; /*#d3dce0; #FFFFF0;*/
    opacity:0;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    overflow: auto;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
}

.innerRep {
    margin: 0 auto;
    width: 90%;
    color: #000000;
    /*padding-left: 5px;*/
    background-color: white; /*#d3dce0; #FFFFF0;*/
    border-color: lightgray;
    border-top: 1px solid red; /*lightgray;*/
    border-bottom: 1px solid lightgray;
    overflow: auto;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
}

.smallInnerRep {
    margin: 0 auto;
    width: 100%;
    color: #000000;
    padding-left: 5px;
    background-color: white; /*#d3dce0; #FFFFF0;*/
    border-color: lightgray;
    border: 1px solid lightgray;
    overflow: auto;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    /*margin-top: 80px;*/
    width: 60%;
    color: #000000;
    padding-left: 5px;
    background-color: white; /*#d3dce0; #FFFFF0;*/
    border-top: 1px solid red; /*lightgray;*/
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    /*box-shadow: 0 0 100px greenyellow;
    border-left: none;*/
    overflow: auto;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
    /* in order: x offset, y offset, blur size, spread size, color */
    /*box-shadow: 10px 10px 120px 5px #000;*/
    /*box-shadow: 5px 5px 10px 5px #bbb;*/
}

.innerWider {
    margin: 0 auto;
    /*margin-top:90px;*/
    width: calc(80px + 80vw);
    color: #000000;
    padding-left: 5px;
    background-color: white; /*#d3dce0; #FFFFF0;*/
    border-color: lightgray;
    border: 1px solid lightgray;
    overflow: auto;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
    /* in order: x offset, y offset, blur size, spread size, color */
    /*box-shadow: 10px 10px 120px 5px #000;*/
    /*box-shadow: 5px 5px 10px 5px #bbb;*/
}

.innerDB {
    margin: 0 auto;
    color: #000000;
    /*padding-left: 5px;*/
    background-color: lightgray;
    text-align: center;
    overflow: hidden;
    border: 1px solid lightgray;
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
    /* in order: x offset, y offset, blur size, spread size, color */
    box-shadow: 10px 10px 120px 5px #000;
    /*box-shadow: 5px 5px 10px 5px #bbb;*/
}

.checkMark {
    background: url('../Images/checkMark.png') no-repeat left center;
    background-size: 12%;
}

.main {
    padding-top: calc(10px + 5vh);
}

/*-------------------------------------*/
.wrapper1box {
    /*width:87%;
    text-align:left;
    border: none;*/
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 1.5em;
    /*column-gap: 10px;
    margin-left: 13%;
    margin-right: 0;*/
}

.wrapper2boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5em;
    /*column-gap: 10px;
    margin-left: 12%;*/
}

.span1to2boxes {
    /*border: 1px solid #aaa;*/
    grid-column-start: 1;
    grid-column-end: 3;
    margin-left: 0px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}
/*-------------------------------------*/

/*-------------------------------------*/
.wrapper3boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*column-gap: 10px;*/
    row-gap: .3em;
}

.span1to3boxes {
    border: 1px solid #aaa;
    grid-column-start: 1;
    grid-column-end: 4;
    margin-left: 0px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}

.span2to3boxes {
    grid-column-start: 2;
    grid-column-end: 4;
    margin-left: -1px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}
/*-------------------------------------*/

.wrapper4boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*column-gap: 10px;*/
    row-gap: .3em;
}

.span3to4boxes {
    grid-column-start: 3;
    grid-column-end: 5;
    margin-left: -1px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}

.wrapper5boxes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /*column-gap: 10px;*/
    row-gap: .3em;
}

.span4to5boxes {
    grid-column-start: 4;
    grid-column-end: 6;
    margin-left: -1px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}

.wrapper6boxes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /*column-gap: 10px;*/
    row-gap: .3em;
}

.span5to6boxes {
    grid-column-start: 5;
    grid-column-end: 7;
    margin-left: -1px;
    /*grid-row-start: 1; 
  grid-row-end: 3; */
}

.wrapper13boxes {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    /*column-gap: 10px;
    row-gap: .3em;*/
}

#myloginDivK, #signUpTable {
    vertical-align: middle;
    width: 40%;
    height: Calc(100vh);
    border: none;
    background: url('../Images/WorldMapLightGray.gif') no-repeat center;
    background-size: 100%;
}

.Kcontainer {
    vertical-align: middle;
    width: 60%;
    height: Calc(100vh);
    border: none;
}

.complaintDiv {
    position: fixed;
    bottom: 35px;
    right: 2px;
    color: white;
    /*height: 30px;
    width: 100px;*/
    font-family: Helvetica, 'Calibri','Trebuchet MS', Arial, sans-serif;
    text-align: right;
    padding-top: 6px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    border: 1px solid red;
    background: red;
    box-shadow: 5px 5px 10px 5px #bbb;
}

    .complaintDiv:hover {
        color: black;
        box-shadow: 0 0 60px 2px white, 0.5rem 0.5rem 20px red;
        /*background-image: linear-gradient(160deg, red, red);*/
    }

    .complaintDiv::after {
        color: white;
    }

.complaintWrapper {
    position: fixed;
    bottom: 5px;
    left: 2px;
    background: url('../Images/SupportPortal.png') no-repeat center;
    background-size: 80%;
}

.roundDiv {
    margin:auto;
    width:70px;
    text-align: center;
    color:red;
    padding:20px;
    font-size:x-large;
    border: 1px solid lightgray;
    border-radius: 50%;
}

.bounce {
    position: fixed;
    bottom: 0;
    right: 20%;
    /*
    right: 0;
    margin-top: -25px;
    margin-right: -25px;
        */
    height: 40px;
    width: 30px;
    background: red;
    background: url('../Images/arrowDown2.png') no-repeat center;
    background-size: 80%;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
    animation: bounce 1s infinite;
}

.hideBounce {
    display:none;
}

@-webkit-keyframes bounce {
    0% {
        bottom: 0px;
    }

    50% {
        bottom: 15px;
    }

    100% {
        bottom: 30;
    }
}

@-moz-keyframes bounce {
    0% {
        bottom: 0px;
    }

    50% {
        bottom: 15px;
    }

    100% {
        bottom: 30;
    }
}

@-o-keyframes bounce {
    0% {
        bottom: 0px;
    }

    50% {
        bottom: 15px;
    }

    100% {
        bottom: 30;
    }
}

@keyframes bounce {
    0% {
        bottom: 0px;
    }

    50% {
        bottom: 15px;
    }

    100% {
        bottom: 30;
    }
}

.slantedRightEdgeDiv {
    /*background: blue;*/
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    margin-left: -5px;
    height: 50px;
    vertical-align: middle;
    color: #ffffff;
    font-weight: bold; /* lighter;*/
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    font-size: 20px;
    width: 80%;
    pointer-events: none;
    background: url('../Images/slantedEdgeRed.png') no-repeat center;
    background-size: 100%;
}

.slantedLeftEdgeDiv {
    padding-top: 20px;
    padding-left: 10px;
    height: 40px;
    color: #ffffff;
    font-weight: lighter;
    font-family: 'Calibri','Trebuchet MS', Arial, sans-serif;
    font-size: 20px;
    margin: 0px;
    /*text-shadow: 1px 1px 2px green, 0 0 25px orange, 0 0 10px yellow;
    background-color: red;
    transform: skew(-20deg);*/
    /*margin-left: 20px;
    width: 100%;*/
    pointer-events: none;
    /*background: url('../Images/slantedEdge.png') no-repeat center;*/
    background: url('../Images/slanted2EdgeRed.png') no-repeat center;
    background-size: 100%;
    /*background: url(background);*/
}

/*-------------------------------------*/
/******************************************************************************************************/

/******************************************************************************************************/
html {
    background-color: white; /*#ffffc0;  #e2e2e2; ------This is colour of the main background--------*/
    /*background-image: url('../Images/paraBar.png');*/
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

.h1 {
    color: #ffffff;
    font-weight: lighter;
    font-family: Aristocrat, Times New Roman, Verdana;
    font-size: 14px;
    margin: 0px;
    padding-bottom: 2px;
    text-shadow: 1px 1px 2px green, 0 0 25px orange, 0 0 10px yellow;
    background-color: yellow;
    width: 100%;
}

.strong {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

@media only screen and (max-width: 2000px) {

    .inner {
        width:60%;
    }

    .innerRep {
        width: 95%;
    }

    .bounce {
        right: 20%;
    }

    #body {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 21px;
        text-align: left;
        padding-top: 80px;
    }

    #myloginDiv {
        width: 30%;
        left: 33%;
        top: 57%;
    }

    #topBar {
        list-style: none;
        width: 99.9%; /*940px;*/ /*Width of the main menu bar*/
        margin: 0px auto 0px auto; /*Space above the main menu*/
        height: 30px;
        padding: 5px 1px 0px 1px;
        /* Background color and gradients */
        background: -moz-linear-gradient(top, #83cbed, white);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#83cbed), to(white));
        background: -moz-linear-gradient(top, #83cbed, white);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#83cbed), to(white));
        border-bottom: 1px solid #002232;
        /* Borders */
        /*border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff; */
    }

    #scrollDiv {
        display: block;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: none;
    }

    .hideDiv, #menu {
        display: block;
    }

    #helpDialog {
        width: 400px;
    }

}
/****************************************** End of media 2000px ***************************************************/

@media only screen and (max-width: 1500px) {

    .inner {
        width: 70%;
    }

    .innerRep {
        width: 95%;
    }

    .bounce {
        right: 16%;
    }

    #body {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 21px;
        text-align: left;
        padding-top: 80px;
    }

    #myloginDiv {
        width: 30%;
        left: 33%;
        top: 55%;
    }

    #topBar {
        list-style: none;
        width: 99.9%; /*940px;*/ /*Width of the main menu bar*/
        margin: 0px auto 0px auto; /*Space above the main menu*/
        height: 30px;
        padding: 5px 1px 0px 1px;
        /* Background color and gradients */
        background: -moz-linear-gradient(top, #83cbed, white);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#83cbed), to(white));
        background: -moz-linear-gradient(top, #83cbed, white);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#83cbed), to(white));
        border-bottom: 1px solid #002232;
        /* Borders */
        /*border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff; */
    }

    #scrollDiv {
        display: block;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: none;
    }

    .hideDiv, #menu {
        display: block;
    }

    #helpDialog {
        width: 400px;
    }

}
/****************************************** End of media 1500px ***************************************************/

@media only screen and (max-width: 1200px) {

    .inner {
        width: 80%;
    }

    .innerRep {
        width: 100%;
    }

    .bounce {
        right: 11%;
    }

    #body {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        padding-top: 60px;
    }

    #scrollDiv {
        display: block;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: none;
    }

    .hideDiv, #menu {
        display: block;
        width: 99.9%;
    }

    .tableFont {
        font-size: 12px;
    }

    #myloginDiv {
        width: 35%;
        left: 33%;
        top: 58%;
    }

    .myLabelFont {
        font-family: 'Buxton Sketch';
        font-size: 12px;
        /*text-shadow: 4px 4px 4px #aaa;*/
    }

    #helpDialog {
        width: 400px;
    }

}
/****************************************** End of media 1200px ***************************************************/

@media only screen and (max-width: 1000px) {

        .inner {
            width: 90%;
        }

        .innerRep {
            width: 120%;
        }

        .bounce {
            right: 9%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        #scrollDiv {
            display: block;
        }

        #background {
            background: url('../Images/trago.png') no-repeat center;
            background-size: 100%;
        }

        #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
            display: none;
        }

        .hideDiv, #menu {
            display: block;
            width: 99.9%;
        }

        .tableFont {
            font-size: 12px;
        }

        #myloginDiv {
            width: 40%;
            left: 27%;
            top: 54%;
        }

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 12px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }

    }
    /****************************************** End of media 1000px ***************************************************/

    @media only screen and (max-width: 950px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 130%;
        }

        .bounce {
            right: 7%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        .hideDiv, #menu {
            display: block;
            width: 99.9%;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #background {
        background: url('../Images/WorldMapLightGray.gif') no-repeat center;
        background-size: 100%;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }

    .Kcontainer {
        display:none;
    }
        */

        .tableFont {
            font-size: 10px;
        }

        #myloginDiv {
            width: 45%;
            left: 25%;
            top: 40%;
        }

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }

        #myloginDivK, #signUpTable {
            width: 100%;
        }

    }
    /****************************************** End of media 950px ***************************************************/

    @media only screen and (max-width: 900px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 140%;
        }

        .bounce {
            right: 5%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #background {
        background: url('../Images/WorldMapLightGray.gif') no-repeat center;
        background-size: 120%;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }
        */

        .tableFont {
            font-size: 10px;
        }

        #myloginDiv {
            width: 45%;
            left: 25%;
            top: 40%;
        }

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }

    }
    /****************************************** End of media 900px ***************************************************/

    @media only screen and (max-width: 850px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 150%;
        }

        .bounce {
            right: 3%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #background {
        background: url('../Images/WorldMapLightGray.gif') no-repeat center;
        background-size: 140%;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }
        */

        .tableFont {
            font-size: 10px;
        }

        #myloginDiv {
            width: 45%;
            left: 25%;
            top: 40%;
        }

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }
    }
    /****************************************** End of media 850px ***************************************************/

    @media only screen and (max-width: 800px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 160%;
        }

        .bounce {
            right: 1%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #background {
        background: url('../Images/WorldMapLightGray.gif') no-repeat center;
        background-size: 160%;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }

    .tableFont {
        font-size: 10px;
    }

    #myloginDiv {
        width: 50%;
        left: 23%;
        top: 40%;
    }
        */

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }
    }
    /****************************************** End of media 800px ***************************************************/

    @media only screen and (max-width: 750px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 170%;
        }

        .bounce {
            right: 1%;
        }

        #body {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 40px;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #background {
        background: url('../Images/WorldMapLightGray.gif') no-repeat center;
        background-size: 180%;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }

    .tableFont {
        font-size: 10px;
    }

    #myloginDiv {
        width: 50%;
        left: 23%;
        top: 40%;
    }
        */

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }
    }
    /****************************************** End of media 750px ***************************************************/

    @media only screen and (max-width: 700px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 180%;
        }

        .bounce {
            right: 0%;
        }

        #body {
            font-size: 8px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 20px;
        }

        /*
    #scrollDiv {
        display: none;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }

    .tableFont {
        font-size: 10px;
    }

    #myloginDiv {
        width: 75%;
        left: 11%;
        top: 40%;
    }
        */

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 10px;
            /*text-shadow: 4px 4px 4px #aaa;*/
        }

        #helpDialog {
            width: 400px;
        }
    }
    /****************************************** End of media 700px ***************************************************/

    @media only screen and (max-width: 400px) {

        .inner {
            width: 100%;
        }

        .innerRep {
            width: 190%;
        }

        .bounce {
            right: 0%;
        }

        #body {
            font-size: 8px;
            font-family: Arial, Helvetica, sans-serif;
            padding-top: 5px;
        }
        /*
    #scrollDiv {
        display: none;
    }

    #mobileDiv, #mobileMenu, #mobileHome, #mobileLogout {
        display: block;
    }

    .hideDiv, #menu {
        display: none;
        width: 99.9%;
    }

    .tableFont {
        font-size: 10px;
    }

    #myloginDiv {
        width: 90%;
        left: 5%;
        top: 27%;
    }
    */

        .myLabelFont {
            font-family: 'Buxton Sketch';
            font-size: 8px;
        }

        #helpDialog {
            width: 90%;
        }
    }
    /****************************************** End of media 400px ***************************************************/

    /*
#body {
    clear: both;
    background-image: url('../../Images/bkgTak.png');
    background-size: 100%;
    background-repeat:no-repeat;
}
*/

    .gdvDivBkg {
        /* in order: x offset, y offset, blur size, spread size, color
    box-shadow: inset 10px 10px 80px 40px #cbcfcf; */
    }

    .kTitleLabel {
        word-break: break-all;
        font-size: 16px;
        font-weight: bolder;
        text-shadow: 4px 4px 4px #aaa;
    }

    .selectionBar {
        word-break: break-all;
        list-style: none;
        width: 99.9%; /*940px;*/ /*Width of the main menu bar*/
        height: 30px;
        padding: 5px 1px 0px 1px;
        /* Background color and gradients */
        background: yellowgreen;
        background: -moz-linear-gradient(top, White, #83cbed);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(#83cbed));
        border-bottom: 1px solid #002232;
    }

    .subMenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8px; /*Font of main menu items*/
        color: #EEEEEE;
        display: block;
        outline: 0;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000;
    }

    .search {
        background: url('../Images/search.png') no-repeat right;
        background-size: 10%;
        padding-left: 18px;
        border: 1px solid #ccc;
    }

    .btnHome {
        background: url('../Images/home2.png') no-repeat center;
        background-size: 100%;
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;
        border: 0px solid #ccc;
    }

    .btnQuit {
        background: url('../Images/logout.png') no-repeat center;
        background-size: 100%;
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;
        border: 0px solid #ccc;
    }

    .btnRefresh {
        padding-left: 20px;
        padding-right: 10px;
        font-size: medium;
        text-align: center;
        color: white;
        background: url('../Images/refresh.png') no-repeat top left;
        background-color: yellowgreen; /*#888888; red; burlywood; /* c7d1d6; /* :Silver; */
        background-size: 25%;
        /*-moz-border-radius: 20px;
    -webkit-border-radius: 20px;*/
        border-radius: 20px;
        /*box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;*/
    }

        .btnRefresh:hover {
            background-color: greenyellow;
            color: black; /* #465c71;*/
            text-decoration: none;
        }

    .btnSave {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: yellow;
        background: url('../Images/save.png') no-repeat left center;
        background-size: 25%;
        background-color: forestgreen; /* darkorange;*/
        border: none;
        height: 20px;
    }

        .btnSave:hover {
            background-color: black; /* red;*/
            /*border-color: red;
        color: white;*/ /* #465c71;*/
            text-decoration: none;
        }

    .btnSave2 {
        padding-left: 25px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: yellow;
        background: url('../Images/save.png') no-repeat left center;
        background-size: 15%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnSave2:hover {
            background-color: cornflowerblue;
            /*border-color: red;
        color: white;*/ /* #465c71;*/
            text-decoration: none;
        }

    .btnDelete {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/Del.png') no-repeat left center;
        background-size: 25%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnDelete:hover {
            background-color: red;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnLoad {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/refresh.png') no-repeat left center;
        background-size: 20%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnLoad:hover {
            background-color: cornflowerblue;
            /*border-color: red;
        color: red;*/ /* #465c71;*/
            text-decoration: none;
        }

    .btnPreview {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/preview.bmp') no-repeat left center;
        background-size: 20%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnPreview:hover {
            background-color: cornflowerblue;
            /*border-color: red;
        color: red;*/ /* #465c71;*/
            text-decoration: none;
        }

    .btnExcel {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/bulb.png') no-repeat left center;
        background-size: 25%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnExcel:hover {
            background-color: cornflowerblue;
            /*border-color: red;
        color: red;*/ /* #465c71;*/
            text-decoration: none;
        }

    .btnProcess {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/settings.png') no-repeat left center;
        background-size: 25%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnProcess:hover {
            background-color: red;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnProcess2 {
        padding-left: 25px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/settings.png') no-repeat left center;
        background-size: 15%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnProcess2:hover {
            background-color: red;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnReverse {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/undo.bmp') no-repeat left center;
        background-size: 35%;
        background-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnReverse:hover {
            background-color: red;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnAlert {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/alert.png') no-repeat left center;
        background-size: 25%;
        border-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnAlert:hover {
            background-color: cornflowerblue;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnSend {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/send.png') no-repeat left center;
        background-size: 15%;
        background-color: forestgreen;
        border-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnSend:hover {
            background-color: cornflowerblue;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnSend2 {
        padding-left: 30px;
        padding-right: 10px;
        font-size: 10px;
        text-align: center;
        color: white;
        font-weight: 900;
        background: url('../Images/send.png') no-repeat left center;
        background-size: 15%;
        border-color: forestgreen;
        border: none;
        height: 20px;
    }

        .btnSend2:hover {
            background-color: cornflowerblue;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnApproval {
        padding-left: 20px;
        padding-right: 10px;
        font-size: small;
        text-align: center;
        color: white;
        background: url('../Images/stamp.png') no-repeat left center;
        background-size: 20%;
        background-color: forestgreen;
        border-color: forestgreen;
        height: 20px;
    }

        .btnApproval:hover {
            background-color: red;
            border-color: red;
            color: white; /* #465c71;*/
            text-decoration: none;
        }

    .btnHelp {
        padding-left: 20px;
        padding-right: 10px;
        text-align: center;
        background: url('../Images/query.png') no-repeat left center;
        background-color: #ccc;
        background-size: 35%;
        border: none;
        height: 25px;
    }

    .btnHelp2 {
        padding-left: 30px;
        padding-right: 10px;
        text-align: center;
        background: url('../Images/query.png') no-repeat left center;
        background-color: #ccc;
        background-size: 22%;
        border: none;
        height: 25px;
    }

    .menuDonut {
        background: url('../Images/Donut.png') no-repeat left center;
        background-size: 7%;
    }

    .xmenuHelp {
        background: url('../Images/query.png') no-repeat left center;
        background-size: 6%;
        padding-left: 12px;
    }

    .xmenuDonut {
        background: url('../Images/Donut.png') no-repeat left center;
        background-size: 6%;
        padding-left: 12px;
    }

    .menuMoney {
        background: url('../Images/money.png') no-repeat left center;
        background-size: 7%;
    }

    .menufaAsset {
        background: url('../Images/faAsset.png') no-repeat left center;
        background-size: 7%;
    }

    .giftPng {
        background: url('../Images/gift.png') no-repeat left center;
        background-size: 7%;
    }

    .menuClient {
        background: url('../Images/client.png') no-repeat left center;
        background-size: 7%;
    }

    .menuReport {
        background: url('../Images/report.png') no-repeat left center;
        background-size: 7%;
    }

    .xmenuReport {
        background: url('../Images/report.png') no-repeat left center;
        background-size: 6%;
        padding-left: 12px;
    }

    .menuComputer {
        background: url('../Images/computer.png') no-repeat left center;
        background-size: 7%;
    }

    .menuBulk {
        background: url('../Images/bulk.png') no-repeat left center;
        background-size: 7%;
    }

    .menuSetting {
        background: url('../Images/settings.png') no-repeat left center;
        background-size: 7%;
    }

    .xmenuSetting {
        background: url('../Images/settings.png') no-repeat left center;
        background-size: 6%;
        padding-left: 12px;
    }

    .menuWaybill {
        background: url('../Images/waybill.png') no-repeat left center;
        background-size: 7%;
    }

    .menuTongueOut {
        background: url('../Images/TongueOut.png') no-repeat left center;
        background-size: 7%;
    }

    .menuBasket {
        background: url('../Images/basket.png') no-repeat left center;
        background-size: 7%;
    }

    .menuRepair {
        background: url('../Images/repair.png') no-repeat left center;
        background-size: 7%;
    }

    .menuRegisteration {
        background: url('../Images/registration.png') no-repeat left center;
        background-size: 7%;
    }

    .menuGraph {
        background: url('../Images/barChart.png') no-repeat left center;
        background-size: 7%;
    }

    .moneyPng {
        background: url('../Images/repair.png') no-repeat left center;
        background-size: 7%;
    }

    .rotate {
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        float: left;
    }
    /***********************************************************/
    .float-left {
        float: left;
    }

    .float-right {
        float: right;
        /*padding-bottom: 2px;*/
        color: cyan;
        font-size: smaller;
    }

    .float-right-with-opacity {
        float: right;
        font-size: smaller;
        opacity: 0.8;
        background-image: url('../Images/redbkgrd.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .float-none {
        float: none;
    }

    .divLogin {
        width: 80px;
        height: 25px;
        padding: 5px;
        font-size: small;
        text-align: center;
        background-color: chocolate;
        color: white;
        text-decoration: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 20px;
        box-shadow: 3px 3px 1px #888888;
    }

    .btnLogin {
        /*width:80px;
    height: 30px;*/
        padding: 5px;
        font-size: larger;
        text-align: center;
        background-color: red;
        color: white;
        text-decoration: none;
        /*
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    */
        border-color: red;
        /*box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;*/
    }

        .btnLogin:hover {
            color: black;
            text-decoration: none;
        }

        .btnLogin:disabled {
            color: black;
            background-color: white;
            border-color: lightgray;
            cursor: no-drop;
            text-decoration: none;
        }

    .btnSignUp {
        /*width:80px;
    height: 30px;*/
        padding: 5px;
        font-size: small;
        text-align: center;
        background-color: lightgray;
        color: black;
        text-decoration: none;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    }

        .btnSignUp:hover {
            background-color: antiquewhite;
            color: black;
            text-decoration: none;
        }

    .login-btn {
        float: right;
        width: 80px;
        height: 25px;
        padding: 0px;
        font-size: medium;
        text-align: center;
        background-color: green;
        color: white;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
        position: absolute;
    }

    .float-center {
        /*box-shadow: 10px 10px 5px #888888;*/
        position: absolute;
        border-radius: 20px;
        /*top: 50%;*/
        left: 25%;
        /*background-color:#f5efe3;*/ /*#c1bcbc;*/
        background-repeat: no-repeat;
        background-size: 100%;
        opacity: 0.5;
    }

    .float-center-top {
        box-shadow: 10px 10px 5px #888888;
        /*position: absolute;*/
        border-radius: 20px;
        top: 10%;
        left: 23%;
        width: 60%;
        background-color: #f5efe3; /*#c1bcbc;*/
        background-repeat: no-repeat;
        background-size: 100%;
        opacity: 0.9;
    }

    .float-bottom-center {
        position: absolute;
        top: 94%;
        left: 43%;
        width: 100%;
    }

    .clear-fix:after {
        content: ".";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }

    .content-wrapper {
        margin: 0 auto;
        /*z-index: 9999;*/
        /*background-image: url("../Images/xhedge2.jpg");
    max-width: 100%; /*960px; ------Ade-----*/
    }

    .trunLinkToBtn {
        width: 120px;
        height: 50px;
        font-size: medium;
        text-align: center;
        background-color: blue;
        color: white;
        padding: 10px;
        text-decoration: none;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    }

        .trunLinkToBtn:hover {
            color: yellow;
        }

    #background {
        width: 100%;
        height: 100%;
        font-size: 12px;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
    }

    .stretch {
        width: 100%;
        height: 100%;
        font-size: 12px;
    }

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 2px;
        /*padding-top: 2px;*/
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

    header .content-wrapper {
        /*padding-top: 5px;*/
        background-color: #f00;
        /*z-index: 9999;*/
    }

    .main {
        padding: 0px 0px;
        z-index: 9999;
        font-size: 12px;
        /*    height: 550px; */
        margin: 15px 0px 1000px 0px; /* Top Right Bottom Left */
        min-height: 600px;
        /*background: url('../Images/dclmLogo2.png') no-repeat center;*/
        /*background-repeat:no-repeat; for vertical repeat */
        background-repeat: no-repeat;
        background-size: 99%;
        background-position-x: center;
    }

    .mmain {
        padding: 10px 0px;
        z-index: 9999;
        /*    height: 550px; */
        margin: 10px 0px 1000px 0px; /* Top Right Bottom Left */
        min-height: 600px;
    }

    .textCenter {
        border: 1px dotted #ccc;
        border-color: yellowgreen; /* #1be6e6;*/
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        height: 18px;
        font-size: 12px;
        background-color: white;
        text-align: center;
    }

    .textDate {
        border: 1px dotted #ccc;
        border-color: yellowgreen; /* #1be6e6;*/
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        height: 18px;
        font-size: 12px;
        background-color: white;
        background: url('../Images/date.png') no-repeat right center;
        background-size: 13px;
    }

    .failureNotification {
        font-size: 1em;
        color: Red;
        font-weight: bold;
    }

    .failureNotification2 {
        font-size: 1em;
        color: yellow;
        font-weight: bold;
    }

    .msgSuccess, .msgWarning, .msgNotice {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 270px;
        text-align: center;
        margin-left: -190px;
        margin-top: -100px;
        border-radius: 10px;
        padding: 20px 10px 10px 50px; /* top right bottom left */
        vertical-align: middle;
        z-index: 102;
        font-family: Verdana;
        font-size: 12pt;
        background-repeat: no-repeat;
        background-position: 10px center;
        box-shadow: 10px 10px 5px #888888;
    }

    .msgSuccess {
        background-color: #DFF2BF;
        border: 1px solid #DFF2BF;
        background-image: url('../Images/success.png');
    }

    .msgWarning {
        background-color: #f8b428;
        border: 1px solid #f8b428;
        color: white;
        background-image: url('../Images/warning.png');
    }

    .msgNotice {
        background-color: yellow;
        border: 1px solid yellow;
        color: black;
        padding: 10px 10px 10px 70px;
        top: 35%;
        background-image: url('../Images/Info.png');
    }

    /* ----------------------------------------Beginning of help ------------------------------------*/
    .help_dialog_overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #000000;
        opacity: .15;
        filter: alpha(opacity=15);
        -moz-opacity: .15;
        z-index: 101;
        display: none;
    }

    .help_dialog {
        display: none;
        position: fixed;
        margin-left: 10px;
        margin-top: -50px;
        background-color: #ffffff;
        border: 2px solid #fba987; /*#336699;*/
        /*border-radius:10px;*/
        padding: 0px;
        z-index: 102;
        font-family: Helvetica, Arial, sans-serif, Verdana;
        font-size: 10pt;
        float: right;
        box-shadow: 10px 10px 120px 5px #fba987;
    }

    .help_dialog_title {
        border-bottom: solid 2px #ff0000; /*#336699;*/
        background-color: #ff0000; /*#336699;*/
        border-bottom: solid 2px #fba987;
        background-color: #fba987;
        padding: 4px;
        color: black;
        font-weight: bold;
        font-size: 16px;
    }

        .help_dialog_title a {
            color: black;
            text-decoration: none;
            font-size: 16px;
        }

    .align_right {
        text-align: right;
    }
    /* -----------------------------------End of Help---------------------------------------*/

    /* ------------------------------ These 3 center a Div on a page -------------------------------*/
    .outer {
        display: table;
        /*position: absolute;*/
        height: 80%;
        width: 100%;
    }

    .middle {
        display: table-cell;
        vertical-align: middle;
    }

    .inner2 {
        padding-bottom: 10px;
        padding-left: 5px;
        margin: 0 auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: white; /*#d3dce0; #FFFFF0;*/
        background-size: 100%;
        color: #000000;
        border: 2px solid lightgray; /*yellowgreen;*/ /* #1be6e6;*/
        border-color: lightgray;
        border: solid;
        border-radius: 10px;
        overflow: auto;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        /*box-shadow: 10px 10px 120px 5px #000;*/
        box-shadow: 5px 5px 10px 5px #bbb;
    }
    /* --------------------------------------------------------------------------------------------*/

    .tableFont {
        word-break: break-all;
        font-size: 12px;
    }

    td, label, input, textarea, .inputFont, .errorLabel {
        word-break: break-all;
    }

    .myLabelFont {
        word-break: break-all;
        font-family: 'Buxton Sketch';
        font-size: 14px;
        /*text-shadow: 4px 4px 4px #aaa;*/
    }

    .myLabelFont2 {
        word-break: break-all;
        font-family: 'Tangerine', serif;
        color: black;
        font-size: 25px;
        font-weight: bold;
        /*text-shadow: 4px 4px 4px #aaa;*/
    }

    .myHeadingFont {
        word-break: break-all;
        font-family: 'Tangerine', serif;
        color: black;
        background-color: #26b4e2;
        font-size: 20px;
        font-weight: bold;
        text-shadow: 4px 4px 4px #aaa;
    }

    .errorLabel {
        color: yellow;
    }

    .titleBar2 {
        word-break: break-all;
        padding-top: 3px;
        padding-left: 10px;
        font-size: large;
        color: white;
        font-family: 'Parisienne', serif;
        text-shadow: 1px 1px 2px green, 0 0 25px orange, 0 0 10px yellow;
        background: -moz-linear-gradient(top, gray, white);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(gray), to(white));
        border-bottom: 1px solid #002232;
    }

    .footBar {
        word-break: break-all;
        height: 30px;
        color: white;
        background-color: #014464; /* red; /* burlywood; /* c7d1d6; /* :Silver; */
        border-color: #ccc; /* chocolate;*/
    }

    .myTitleFont {
        word-break: break-all;
        font-family: 'Tangerine', Arial;
        color: gray;
        font-size: 25px;
        text-shadow: 4px 4px 4px #aaa;
    }

    .myID1 {
        word-break: break-all;
        font-family: 'Parisienne', serif;
        font-family: serif;
        font-size: 30px;
        font-weight: bolder;
        text-shadow: 10px 10px 10px #eee;
    }

    .myID2 {
        word-break: break-all;
        font-family: 'Tangerine', serif;
        font-family: serif;
        font-size: 30px;
        font-weight: bolder;
        text-shadow: 4px 4px 4px #eee;
    }

    .myID3 {
        word-break: break-all;
        font-family: 'Bad+Script', serif;
        font-size: 30px;
        text-shadow: 4px 4px 4px #aaa;
    }

    .invisibleColumn {
        display: none;
        width: 0px;
    }

    .gridHeader {
        word-break: break-all;
        color: white;
        font-size: 1em;
        font-weight: 700; /* ie bold */
        border: 1px solid #aaa;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #aaa;
    }

    .colorAsBkgrd {
        color: #f4faa9;
    }

    .gdSptsmall {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 10px;
        text-align: center;
    }

    .gdSptlineRight {
        padding: 0px;
        padding-left: -5px;
        font-family: Arial narrow;
        font-size: 12px;
        text-align: left;
        border-bottom: 0px solid lightgray;
        border-right: 2px solid black;
        border-left: 0px solid lightgray;
    }

    .gdSptlineLeft {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 10px;
        text-align: center;
        border-bottom: 0px solid lightgray;
        border-left: solid thin red;
        border-right: 0px solid lightgray;
    }

    .xgdfont {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 12px;
    }

    .xgdNumfont {
        padding-right: 1px;
        font-family: Arial narrow;
        font-size: 12px;
        text-align: right;
    }

    .xgdSptfont {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 12px;
        text-align: center;
    }

    .gdfont16 {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 17px;
    }

    .gdNumfont16 {
        padding-right: 1px;
        font-family: Arial narrow;
        font-size: 17px;
        text-align: right;
    }

    .gdSptfont16 {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 17px;
        text-align: center;
    }

    .headerSmall {
        word-break: break-all;
        color: white;
        font-size: 8px;
        font-weight: 700; /* ie bold */
        font-family: Arial;
        /*font-style:italic;*/
        border: 1px solid yellowgreen; /* #1be6e6;*/
        background-color: yellowgreen; /* #1be6e6;*/
    }

    .titleBar {
        margin-top: 10px;
        color: #000000;
        text-align: center;
        padding-left: 5px;
        background-color: white; /*#d3dce0; #FFFFF0;*/
        border-color: lightgray;
        border: 1px solid lightgray;
        overflow: auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 5px 5px 10px 5px #bbb;
    }

    .footerBar {
        word-break: break-all;
        color: white;
        font-size: large;
        font-weight: 500; /* ie bold */
        height: 40px;
        padding-top: 10px;
        padding-left: 10px;
        font-family: Arial narrow;
        border: 1px thin solid yellowgreen; /* #1be6e6;*/
        background: -moz-linear-gradient(top, black, #83cbed);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(#83cbed));
    }

    .headerTable {
        word-break: break-all;
        color: black;
        /*font-size: .8em;
    font-weight: 500;  ie bold */
        font-family: Arial narrow;
        border: 1px thin solid yellowgreen; /* #1be6e6;*/
        background-color: gray; /*#f5f5f5;*/ /* #1be6e6;*/
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Lightgray), to(gray));
    }

    .headerTable2 {
        word-break: break-all;
        color: black;
        /*font-weight: 700;  ie bold */
        font-family: Arial narrow;
        border: 1px solid gray; /* #1be6e6;*/
        background-color: gray; /* #1be6e6;*/
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Lightgray), to(gray));
    }

    .headerTableLower {
        word-break: break-all;
        color: black;
        font-size: 10px;
        font-weight: 700; /* ie bold */
        font-family: Arial narrow;
        text-align: center;
        border: 1px solid #000;
        background-color: #f0f3f3; /* #1be6e6;*/
    }

    .selectionBox {
        word-break: break-all;
        color: black;
        font-size: 10px;
        font-family: Arial narrow;
        border-top: 1px solid yellowgreen; /* #1be6e6;*/
        border-bottom: 1px solid yellowgreen; /* #1be6e6;*/
        border-left: none;
        border-right: none;
        /*background-color: #f0ffff;*/
        background-color: #ccc; /* #f6eec8; #e0f9f9;*/
        text-align: right;
        padding: 0;
    }

    .selectionBox2 {
        word-break: break-all;
        color: black;
        /*font-size: 10px;*/
        font-family: Arial narrow;
        border-top: 1px solid yellowgreen; /* #1be6e6;*/
        border-bottom: 1px solid yellowgreen; /* #1be6e6;*/
        border-left: none;
        border-right: none;
        /*background-color: #f0ffff;*/
        background-color: #faf4d5; /*#e0f9f9;*/
        text-align: right;
        padding: 0;
    }

    .gridHeader {
        word-break: break-all;
        color: white;
        font-size: 1em;
        font-weight: 700; /* ie bold */
        border: 1px solid #aaa;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #aaa;
    }
    /* ***************************************** for the loading Animation ********************************** */
    .modal {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 95%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=40);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .modal2 {
        display: none;
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 95%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=40);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    /************************************************************************************/

    /* ***************************************** for tragoK12 Name Animation ********************************** */
    .mdiv {
        /*width: 100px;
    height: 40px;*/
        /*background: red;*/
        float: right;
        color: black;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: myfirst;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
        /* Standard syntax */
        animation-name: myfirst;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes myfirst {
        /*
    0%   {background:red; left:0px; top:5px;}
    25%  {background:yellow; left:10px; top:5px;}
    50%  {background:blue; left:20px; top:5px;}
    75%  {background:green; left:10px; top:5px;}
    100% {background:red; left:0px; top:5px;}
    */
        0% {
            color: black;
            left: 20px;
            top: 2px;
        }

        10% {
            color: magenta;
            left: 35px;
            top: 2px;
        }

        20% {
            color: gold;
            left: 50px;
            top: 2px;
        }

        30% {
            color: black;
            left: 65px;
            top: 2px;
        }

        40% {
            color: yellow;
            left: 80px;
            top: 2px;
        }

        50% {
            color: tan;
            left: 95px;
            top: 2px;
        }

        60% {
            color: green;
            left: 80px;
            top: 2px;
        }

        70% {
            color: deeppink;
            left: 65px;
            top: 2px;
        }

        80% {
            color: black;
            left: 50px;
            top: 2px;
        }

        90% {
            color: red;
            left: 35px;
            top: 2px;
        }

        100% {
            color: yellow;
            left: 20px;
            top: 2px;
        }
    }

    /* Standard syntax */
    @keyframes myfirst {
        /*
    0%   {background:red; left:0px; top:5px;}
    25%  {background:yellow; left:10px; top:5px;}
    50%  {background:blue; left:20px; top:5px;}
    75%  {background:green; left:10px; top:5px;}
    100% {background:red; left:0px; top:5px;}
    */
        0% {
            color: black;
            left: 20px;
            top: 2px;
        }

        10% {
            color: magenta;
            left: 35px;
            top: 2px;
        }

        20% {
            color: gold;
            left: 50px;
            top: 2px;
        }

        30% {
            color: black;
            left: 65px;
            top: 2px;
        }

        40% {
            color: yellow;
            left: 80px;
            top: 2px;
        }

        50% {
            color: tan;
            left: 95px;
            top: 2px;
        }

        60% {
            color: green;
            left: 80px;
            top: 2px;
        }

        70% {
            color: deeppink;
            left: 65px;
            top: 2px;
        }

        80% {
            color: black;
            left: 50px;
            top: 2px;
        }

        90% {
            color: red;
            left: 35px;
            top: 2px;
        }

        100% {
            color: yellow;
            left: 20px;
            top: 2px;
        }
    }

    .chgColor {
        /*width: 100px;
    height: 40px;*/
        /*background: red;*/
        float: right;
        color: black;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: myColor;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
        /* Standard syntax */
        animation-name: myColor;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes myColor {
        /*
    0%   {background:red; left:0px; top:5px;}
    25%  {background:yellow; left:10px; top:5px;}
    50%  {background:blue; left:20px; top:5px;}
    75%  {background:green; left:10px; top:5px;}
    100% {background:red; left:0px; top:5px;}
    */
        0% {
            color: black;
        }

        0% {
            color: firebrick;
        }

        0% {
            color: gold;
        }

        0% {
            color: black;
        }

        0% {
            color: yellow;
        }

        0% {
            color: blue;
        }

        0% {
            color: green;
        }

        0% {
            color: deeppink;
        }

        0% {
            color: black;
        }

        0% {
            color: red;
        }

        0% {
            color: skyblue;
        }
    }

    /* Standard syntax */
    @keyframes myColor {
        /*
    0%   {background:red; left:0px; top:5px;}
    25%  {background:yellow; left:10px; top:5px;}
    50%  {background:blue; left:20px; top:5px;}
    75%  {background:green; left:10px; top:5px;}
    100% {background:red; left:0px; top:5px;}
    */
        0% {
            color: black;
        }

        0% {
            color: firebrick;
        }

        0% {
            color: gold;
        }

        0% {
            color: black;
        }

        0% {
            color: yellow;
        }

        0% {
            color: blue;
        }

        0% {
            color: green;
        }

        0% {
            color: deeppink;
        }

        0% {
            color: black;
        }

        0% {
            color: red;
        }

        0% {
            color: skyblue;
        }
    }

    .chgBkgrdColor {
        /*width: 100px;
    height: 40px;*/
        /*background: red;*/
        float: right;
        color: black;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: myBkgrdColor;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
        /* Standard syntax */
        animation-name: myBkgrdColor;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes myBkgrdColor {
        0% {
            background: red;
        }

        0% {
            background: yellow;
        }

        0% {
            background: blue;
        }

        0% {
            background: green;
        }

        0% {
            background: red;
        }
    }

    /* Standard syntax */
    @keyframes myBkgrdColor {
        0% {
            background: red;
        }

        0% {
            background: yellow;
        }

        0% {
            background: blue;
        }

        0% {
            background: green;
        }

        0% {
            background: red;
        }
    }

    /* tables
----------------------------------------------------------*/
    table {
        padding-left: 0;
        border-collapse: collapse;
        border: none;
    }


    th, td {
        border: none;
    }


        th a {
            display: block;
            position: relative;
        }

            th a:link, th a:visited, th a:active, th a:hover {
                /*color: #000;*/
                font-weight: 600;
                text-decoration: none;
                padding: 0;
            }

            th a:hover {
                color: #000;
            }

        th.asc a, th.desc a {
            margin-right: .0em; /*.2em*/
        }

            th.asc a:after, th.desc a:after {
                display: block;
                position: absolute;
                right: 0em;
                top: 0;
                font-size: 0.75em;
            }

            th.asc a:after {
                content: '▲';
            }

            th.desc a:after {
                content: '▼';
            }

    tr.pager td {
        padding: 0 0.05em 0 0;
    }

    .gridLines td {
        border-bottom: 0px solid lightgray;
        border-right: solid thin lightgray;
        border-left: solid thin lightgray;
        /*white-space: nowrap;*/
    }

    .gridLines2 td {
        /*
    border-bottom: 0px solid lightgray;
    border-right: solid thin lightgray;
    border-left: solid thin lightgray;
    */
        white-space: nowrap;
        font-size: 10px;
    }

    .vsmall {
        padding: 0px;
        font-family: Arial narrow;
        font-size: 1pt;
    }

    #mobileDiv {
        display: none;
        margin-top: 10px auto;
        background: url('../Images/dclmLogo.png') no-repeat top center;
        background-size: 80%;
        height: 100%;
    }


    /**********************************/




    /*******************************************************************************/
    /*******************************************************************************/
    ul#css3menu1, ul#css3menu1 ul {
        margin: 0;
        list-style: none;
        padding: 0;
        background: -moz-linear-gradient(top, White, #83cbad);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(#83cbad));
        border-width: 1px;
        border-style: solid;
        border-color: #83cbad;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

        ul#css3menu1 ul {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            -moz-box-shadow: 3.5px 3.5px 5px #000000;
            -webkit-box-shadow: 3.5px 3.5px 5px #c1c1c1;
            box-shadow: 3.5px 3.5px 5px #c1c1c1;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-color: #d4d4d4;
            padding: 0 5px 10px;
        }

        ul#css3menu1 li:hover > * {
            display: block;
        }

        ul#css3menu1 li {
            position: relative;
            display: block;
            white-space: nowrap;
            font-size: 0;
            float: left;
        }

            ul#css3menu1 li:hover {
                z-index: 999999;
            }

        ul#css3menu1 ul ul {
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999999;
        }

    ul#css3menu1 {
        font-size: 0;
        z-index: 999;
        position: relative;
        display: inline-block;
        zoom: 1;
        padding: 0;
        *display: inline;
    }

        * html ul#css3menu1 li a {
            display: inline-block;
        }

        ul#css3menu1 > li {
            margin: 0;
        }

        ul#css3menu1 a:active, ul#css3menu1 a:focus {
            outline-style: none;
        }

        ul#css3menu1 a {
            display: block;
            vertical-align: middle;
            text-align: left;
            text-decoration: none;
            font: bold 14px Trebuchet MS;
            color: #000000;
            text-shadow: #FFF 0 0 1px;
            cursor: pointer;
            padding: 10px;
            background-image: url("mainbk.png");
            background-repeat: repeat;
            background-position: 0 0;
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: #C0C0C0;
        }

        ul#css3menu1 ul li {
            float: none;
            margin: 10px 0 0;
        }

        ul#css3menu1 ul a {
            text-align: left;
            padding: 4px;
            background-image: none;
            border-width: 0;
            border-radius: 0px;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            font: 14px Tahoma;
            color: #000;
            text-decoration: none;
        }

        ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed {
            border-color: #C0C0C0;
            border-style: solid;
            color: #000000;
            text-shadow: #FFF 0 0 1px;
            background-image: url("mainbk.png");
            background-position: 0 100px;
        }

        ul#css3menu1 span {
            display: block;
            overflow: visible;
            background-position: right center;
            background-repeat: no-repeat;
            padding-right: 0px;
        }

        ul#css3menu1 ul span {
            background-image: url("arrowsub.png");
            padding-right: 12px;
        }

        ul#css3menu1 > li.switch {
            display: none;
            cursor: pointer;
            width: 25px;
            height: 20px;
            padding: 10px;
        }

            ul#css3menu1 > li.switch:before {
                content: "";
                position: absolute;
                display: block;
                height: 4px;
                width: 25px;
                border-radius: 4px;
                background: #000000;
                -moz-box-shadow: 0 8px #000000, 0 16px #000000;
                -webkit-box-shadow: 0 8px #000000, 0 16px #000000;
                box-shadow: 0 8px #000000, 0 16px #000000;
            }

            ul#css3menu1 > li.switch:hover:before {
                background: #000000;
                -moz-box-shadow: 0 8px #000000, 0 16px #000000;
                -webkit-box-shadow: 0 8px #000000, 0 16px #000000;
                box-shadow: 0 8px #000000, 0 16px #000000;
            }

    .c3m-switch-input {
        display: none;
    }

    ul#css3menu1 li:hover > a, ul#css3menu1 li > a.pressed {
        background-color: #f8ac00;
        background-image: url("mainbk.png");
        background-position: 0 100px;
        border-style: solid;
        border-color: #C0C0C0;
        color: #000000;
        text-decoration: none;
        text-shadow: #FFF 0 0 1px;
    }

    ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li > a.pressed {
        background-color: #FFFFFF;
        background-image: none;
        color: #868686;
        text-decoration: none;
    }

    ul#css3menu1 li.topfirst > a {
        border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 0;
        -webkit-border-bottom-right-radius: 0;
    }

    ul#css3menu1 li.toplast > a {
        border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
    }

    @media screen and (max-width: 2000px) {
        #infoPanelDiv {
            width: 90%;
        }

        #appLogo {
            width: 17%;
        }

        ul#css3menu1 > li {
            position: initial;
        }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }

    @media screen and (max-width: 1500px) {
        ul#css3menu1 > li {
            position: initial;
        }

        #infoPanelDiv {
            width: 80%;
        }

        #appLogo {
            width: 20%;
        }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }

    @media screen and (max-width: 1000px) {
        ul#css3menu1 > li {
            position: initial;
        }

        #cnameDiv, #userIdDiv {
            display: none;
        }

        #infoPanelDiv {
            width: 60%;
        }

        #appLogo {
            width: 35%;
        }

        #body {
            background-size: 120%;
        }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }

    @media screen and (max-width: 768px) {
        #cnameDiv, #userIdDiv, #devDiv, #btnHomeDiv {
            display: none;
        }

        #infoPanelDiv {
            width: 50%;
        }

        #appLogo {
            width: 45%;
        }

        #body {
            background-size: 130%;
        }

        ul#css3menu1 > li {
            position: initial;
        }

        ul#css3menu1 ul {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
        }

            ul#css3menu1 ul ul {
                position: absolute;
                left: 80%;
                top: 100%;
            }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }

    @media screen and (max-width: 500px) {
        #cnameDiv, #userIdDiv, #devDiv, #btnHomeDiv, #infoPanelDiv {
            display: none;
        }

        #body {
            background-size: 130%;
        }

        ul#css3menu1 > li {
            position: initial;
        }

        ul#css3menu1 ul {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
        }

            ul#css3menu1 ul ul {
                position: absolute;
                left: 10%;
                top: 100%;
            }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }

    @media screen and (max-width: 256px) {
        #cnameDiv, #userIdDiv, #devDiv, #btnHomeDiv, #infoPanelDiv {
            display: none;
        }

        #body {
            background-size: 120%;
        }

        ul#css3menu1 > li {
            position: initial;
        }

        ul#css3menu1 ul {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
        }

            ul#css3menu1 ul ul {
                position: absolute;
                left: 10%;
                top: 100%;
            }

        ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 0;
            width: 200px !important;
        }
    }