:root {
    --hyperlink: mediumblue;
    --white: whitesmoke;
    --black: black;
    --accentcolor1: #4CAF50; /*green*/
    --accentcolor2: purple;
    --accentcolor3: orange;
    --tablecolor1: ghostwhite;
    --tablecolor2: #e3e3e3;
    --tablehightlight: pink;
    --warningcolor1: red;
    --warningcolor2: black;
    --font: Arial, Helvetica, sans-serif;
    --normalfontsize: 16px;
}

* {
    margin: 0;
}

html, BODY {
    font-weight: normal;
    font-size: 1em;
    word-spacing: normal;
    text-transform: none;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    letter-spacing: normal;
    background-color: LightGray;
    height: 100%;
}

div.nav a {
    color: White !important;
}

    div.nav a:hover {
        color: White !important;
    }

    div.nav a:visited {
        color: White !important;
    }

    div.nav a:active {
        color: White !important;
    }


.wrapper {
    min-height: 100%;
    height: auto !important; /* For IE6 */
    height: 100%; /* For IE6 */
    width: 1200px;
    border-left: 5px solid white;
    border-right: 5px solid white;
    background-color: white;
    margin: 0px auto -30px auto; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
    height: 30px; /* .push must be the same height as .footer */
    font-weight: normal;
    font-size: 0.8em;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    width: 1200px;
    margin: 0px auto 0px auto;
}


.indent {
    margin-left: 20px;
}

.SideMenu {
    background-color: #eaeaea;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: large;
    margin-left: 10px;
}

.SideSubMenu {
    background-color: #f9f9f9 !important;
    font-size: large !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
    line-height: 25px !important;
    border: 1px solid black !important;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT {
    COLOR: #003366;
}

H1 {
    font-weight: bold;
    font-size: 1.7em;
    word-spacing: normal;
    text-transform: none;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    text-decoration: none;
}

H2 {
    font-weight: bold;
    font-size: 1.5em;
    word-spacing: normal;
    text-transform: none;
    font-style: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    letter-spacing: normal;
    text-decoration: none;
}

H3 {
    font-size: 1.33em;
    word-spacing: normal;
    text-transform: none;
    font-style: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    letter-spacing: normal;
    text-decoration: none;
}

H4 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H5, DT {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

H6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
}

TFOOT, THEAD {
    font-size: 0.9em;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
}

TH {
    vertical-align: baseline;
    font-size: 0.9em;
    font-weight: bold;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}


A:link {
    text-decoration: none;
    color: #3333cc;
}

A:visited {
    text-decoration: none;
    color: #3333cc;
}

A:active {
    text-decoration: none;
    color: #3333cc;
}

A:hover {
    text-decoration: underline;
    color: #3333cc;
}

.FormView {
    font-size: 1.2em;
    padding: 3px;
}

SMALL {
    font-size: .7em;
}

BIG {
    font-size: 1.17em;
}

BLOCKQUOTE, PRE {
    font-family: Courier New, monospace;
}


UL LI {
    list-style-type: square;
}

    UL LI LI {
        list-style-type: disc;
    }

        UL LI LI LI {
            list-style-type: circle;
        }

OL LI {
    list-style-type: decimal;
}

OL OL LI {
    list-style-type: lower-alpha;
}

OL OL OL LI {
    list-style-type: lower-roman;
}


TV {
    font-size: medium;
    color: blue;
    font-family: Arial;
}

.pager {
    font-size: 18px;
    color: red;
    font-family: Arial;
    background-color: Gray
}

.comboBoxInsideModalPopup {
    position: relative;
}

    .comboBoxInsideModalPopup ul {
        position: absolute !important;
        left: 2px !important;
        top: 22px !important;
    }



.ToolTip {
    border: solid 1px;
    font-family: Tahoma;
    font-size: 10pt;
    background-color: lemonchiffon;
    padding-left: 5px;
    padding-right: 5px;
}

tr {
    font-size: 0.9em;
}

/* Content Page Layout */
.demoarea {
    padding: 20px;
    background: #FFF url(images/demotop.png) no-repeat left top;
}

    .demoarea p {
        padding: 5px;
    }

.demoheading {
    padding-bottom: 20px;
    color: #5377A9;
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    font-size: 1.5em;
}

.demobottom {
    height: 8px;
    background: #FFF url(images/demobottom.png) no-repeat left bottom;
}

.hideGridColumn {
    display: none;
}

.heading {
    padding: 1em 0 1em 0;
    color: #5377A9;
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    font-size: 1.2em;
}

.subheading {
    padding: .8em 0 0.5em 0;
    color: #0F2543;
    font-weight: bold;
    font-family: Arial, Sans-Serif;
    font-size: 1.1em;
}

p {
}

em {
    font-style: italic
}

i {
    font-style: italic;
}

strong {
    font-weight: bold;
}

.codeReference {
    font-family: 'Courier New', Monospace;
    font-style: normal;
    font-weight: bold;
}

pre, code {
    display: block;
    margin: 15px 15px 15px 0;
    padding: 10px;
    border: 1px dashed #CCC;
    background-color: #FFF;
    color: #000;
    font-family: 'Courier New', Monospace;
    font-size: 0.9em;
    font-style: normal;
}

.releaseList {
    list-style-type: disc;
}


/* Styles for the Animation Reference */
.animationReferenceTable {
}

.animationReferenceRow {
}

.animationReferenceField {
    text-align: right;
    vertical-align: top;
    padding-top: 5px;
}

.animationReferenceCode {
    margin-top: 5px;
    vertical-align: top;
    font-family: 'Courier New', Monospace;
    font-style: normal;
    font-weight: bold;
    display: block;
    background-color: #FFF;
    color: #000;
    font-family: 'Courier New', Monospace;
    font-size: 0.9em;
    font-style: normal;
    font-weight: bold;
    margin-bottom: 5px;
}

.animationReferenceItems {
    vertical-align: top;
}

.animationReferenceItemTable {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.animationReferenceItemRow {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.animationReferenceItem {
    width: 100%;
    padding: 0px;
    margin: 0px;
    padding-bottom: 10px;
}

.animationReferenceItemCode {
    display: block;
    background-color: #FFF;
    color: #000;
    font-family: 'Courier New', Monospace;
    font-size: 0.9em;
    font-style: normal;
    font-weight: bold;
}

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeader a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionHeaderSelected {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeaderSelected a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionContent {
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

/*AutoComplete flyout */

.autocomplete_completionListElement {
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem {
    background-color: white;
    color: windowtext;
    padding: 1px;
}

/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {
    background-color: white;
    overflow: hidden;
}

.collapsePanelHeader {
    width: 100%;
    height: 30px;
    background-image: url(images/bg-menu-main.png);
    background-repeat: repeat-x;
    color: #FFF;
    font-weight: bold;
}

#master_content .collapsePanelHeader a {
    color: #FFF;
}

    #master_content .collapsePanelHeader a:hover {
        text-decoration: none;
        background: none;
    }

/*Confirm Button*/

/* DropShadow */

#master_content .dropShadowPanel span {
    color: white;
    text-decoration: underline;
}

    #master_content .dropShadowPanel span:hover {
        text-decoration: none;
    }


.dropShadowPanel {
    width: 300px;
    background-color: #5377A9;
    color: white;
    font-weight: bold;
}

/*Drag Panel*/
.dragMe {
    width: 100%;
    height: 21px;
    background-color: #FFF;
    background-image: url(images/header-opened.png);
    text-align: center;
    cursor: move;
    font-weight: bold;
}

.overflowHidden {
    overflow: hidden;
}

.overflowScroll {
    overflow: hidden;
}

/*Hover Menu*/
.popupMenu {
    position: absolute;
    visibility: hidden;
    background-color: #F5F7F8;
    opacity: .9;
    filter: alpha(opacity=90);
}

.popupHover {
    background-image: url(images/header-opened.png);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #F5F7F8;
}

/* PagingBulletedList */
.selectIndex {
    font-weight: bold;
    text-decoration: none;
}

.unselectIndex {
    font-weight: normal;
    text-decoration: underline;
}

/*AutoComplete flyout */
.autocomplete_completionListElement {
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    font-family: Tahoma;
    font-size: small;
    text-align: left;
    list-style-type: none;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */
.autocomplete_listItem {
    background-color: window;
    color: windowtext;
    padding: 1px;
}

/*Modal Popup*/
.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    background-color: cornflowerblue;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}



.modalPopupWide {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 650px;
}

.modalPopup p {
    padding: 5px;
}

.sampleStyleA {
    background-color: #FFF;
}

.sampleStyleB {
    background-color: #FFF;
    font-family: monospace;
    font-size: 10pt;
    font-weight: bold;
}

.sampleStyleC {
    background-color: #ddffdd;
    font-family: sans-serif;
    font-size: 10pt;
    font-style: italic;
}

.sampleStyleD {
    background-color: Blue;
    color: White;
    font-family: Arial;
    font-size: 10pt;
}

/*Popup Control*/
.popupControl {
    background-color: White;
    position: absolute;
    visibility: hidden;
}

/*Reorder List*/
.dragHandle {
    width: 10px;
    height: 15px;
    background-color: Blue;
    background-image: url(images/bg-menu-main.png);
    cursor: move;
    border: outset thin white;
}

.callbackStyle {
    border: thin blue inset;
}

    .callbackStyle table {
        background-color: #5377A9;
        color: Black;
    }


.reorderListDemo li {
    list-style: none;
    margin: 2px;
    background-image: url(images/bg_nav.gif);
    background-repeat: repeat-x;
    color: #FFF;
}

.dragVisualContainer li {
    list-style: none;
    background-image: url(images/bg_nav.gif);
    background-repeat: repeat-x;
    color: #FFF;
}

.reorderListDemo li a {
    color: #FFF !important;
    font-weight: bold;
}

.reorderCue {
    border: dashed thin black;
    width: 100%;
    height: 25px;
}

.itemArea {
    margin-left: 15px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 1em;
    text-align: left;
}


/* Rounded Corners*/

.roundedPanel {
    width: 300px;
    background-color: #5377A9;
    color: white;
    font-weight: bold;
}

/* ResizableControl */

.frameImage {
    width: 130px;
    height: 65px;
    overflow: hidden;
    float: left;
    padding: 3px;
}

.frameText {
    width: 100px;
    height: 100px;
    overflow: auto;
    float: left;
    background-color: #ffffff;
    border-style: solid;
    border-width: 2px;
    border-color: Gray;
    font-family: Helvetica;
    line-height: normal;
}

.handleImage {
    width: 15px;
    height: 16px;
    background-image: url(images/HandleHand.png);
    overflow: hidden;
    cursor: se-resize;
}

.handleText {
    width: 16px;
    height: 16px;
    background-image: url(images/HandleGrip.png);
    overflow: hidden;
    cursor: se-resize;
}

.resizingImage {
    padding: 0px;
    border-style: solid;
    border-width: 3px;
    border-color: #B4D35D;
}

.resizingText {
    padding: 0px;
    border-style: solid;
    border-width: 2px;
    border-color: #7391BA;
}

/*Textbox Watermark*/

.unwatermarked {
    height: 18px;
    width: 148px;
}

.watermarked {
    height: 20px;
    width: 150px;
    padding: 2px 0 0 2px;
    border: 1px solid #BEBEBE;
    background-color: #F0F8FF;
    color: gray;
}

/* Rating */
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url(Images/FilledStar.png);
}

.emptyRatingStar {
    background-image: url(Images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(Images/SavedStar.png);
}


/*Toggle Button*/

/*Setup*/
.walkthrough li {
    padding-bottom: 5px;
}

/*Using a sample extender*/

/*Creating a new extender*/
.walkthroughNote {
    padding-left: 25px;
    font-style: italic;
}

/*Other neat stuff*/





/************ PasswordStrength Related Styles ***********************/
.TextIndicator_TextBox1 {
    background-color: Gray;
    color: White;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
}

.BarIndicator_TextBox2_weak {
    color: Red;
    background-color: Red;
}

.BarIndicator_TextBox2_average {
    color: Blue;
    background-color: Blue;
}

.BarIndicator_TextBox2_good {
    color: Green;
    background-color: Green;
}

.BarBorder_TextBox2 {
    border-style: solid;
    border-width: 1px;
    padding: 2px 2px 2px 2px;
    width: 200px;
    vertical-align: middle;
}

.TextIndicator_TextBox3 {
    background-color: Blue;
    color: Yellow;
    font-size: small;
    font-variant: small-caps;
    padding: 2px 3px 2px 3px;
}

.TextIndicator_TextBox3_Handle {
    width: 16px;
    height: 14px;
    background-image: url(images/Question.png);
    overflow: hidden;
    cursor: help;
}

.TextIndicator_TextBox1_Strength1 {
    background-color: Gray;
    color: White;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
    font-weight: bold;
}

.TextIndicator_TextBox1_Strength2 {
    background-color: Gray;
    color: Yellow;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
    font-weight: bold;
}

.TextIndicator_TextBox1_Strength3 {
    background-color: Gray;
    color: #FFCAAF;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
    font-weight: bold;
}

.TextIndicator_TextBox1_Strength4 {
    background-color: Gray;
    color: Aqua;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
    font-weight: bold;
}

.TextIndicator_TextBox1_Strength5 {
    background-color: Gray;
    color: #93FF9E;
    font-family: Arial;
    font-size: x-small;
    font-style: italic;
    padding: 2px 3px 2px 3px;
    font-weight: bold;
}



.dynamicPopulate_Normal {
    border: silver 1px inset;
    padding: 2px;
    text-align: center;
    height: 2em;
    margin: 5px;
    width: 200px;
}

.dynamicPopulate_Updating {
    background-image: url(images/loading.gif);
    background-repeat: no-repeat;
    border: silver 1px inset;
    text-align: center;
    padding: 2px;
    height: 2em;
    margin: 5px;
    width: 200px;
}
/************ MaskedEdit Related Styles ***********************/
.MaskedEditFocus {
    background-color: #ffffcc;
    color: #000000;
}

.MaskedEditMessage {
    color: #ff0000;
    font-weight: bold;
}

.MaskedEditError {
    background-color: #ffcccc;
}

.MaskedEditFocusNegative {
    background-color: #ffffcc;
    color: #ff0000;
}

.MaskedEditBlurNegative {
    color: #ff0000;
}

.MyCalendar .ajax__calendar_container {
    border: 1px solid #646464;
    background-color: lemonchiffon;
    color: red;
}

.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}

.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}

.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight: bold;
}

/* SlideShow styles */

.slideTitle {
    font-weight: bold;
    font-size: small;
    font-style: italic;
}

.slideDescription {
    font-size: small;
    font-weight: bold;
}

.validatorCalloutHighlight {
    background-color: lemonchiffon;
}

.ListSearchExtenderPrompt {
    font-style: italic;
    color: Gray;
    background-color: white;
}

.ajax__multi_slider_custom .outer_rail_horizontal {
    position: absolute;
    background: url('Images/rail_dark.gif') no-repeat;
    width: 321px;
    height: 25px;
    z-index: 100;
}

.ajax__multi_slider_custom .inner_rail_horizontal {
    position: absolute;
    background: url('Images/rail_light.gif') no-repeat;
    width: 321px;
    height: 25px;
    z-index: 100;
}

.ajax__multi_slider_custom .handle_horizontal_left {
    position: absolute;
    background: url('Images/handle_left.gif') no-repeat;
    width: 13px;
    height: 25px;
    z-index: 200;
    cursor: w-resize;
}

.ajax__multi_slider_custom .handle_horizontal_right {
    position: absolute;
    background: url('Images/handle_right.gif') no-repeat;
    width: 13px;
    height: 25px;
    z-index: 200;
    cursor: w-resize;
}

/* ComboBox styles */

#master_content .ajax__combobox_itemlist {
    margin: 0px;
}

.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    background-image: url(ComboBox/images/toolkit-bg.gif);
    background-position: top left;
    border: 0px none;
    color: #FFFFFF;
    padding: 4px 0px 3px 5px;
    font-size: 13px;
    height: 16px;
    width: 240px;
}

.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    background-image: url(ComboBox/images/toolkit-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 23px;
    width: 23px;
}

.AjaxToolkitStyle .ajax__combobox_itemlist {
    border-color: #0F2543;
    background-color: #EFEFEF;
}

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    background-image: url(ComboBox/images/aqua-bg.gif);
    background-position: top left;
    border: 0px none;
    padding: 2px 0px 0px 8px;
    font-size: 11px;
    height: 17px;
    width: 150px;
}

.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    background-image: url(ComboBox/images/aqua-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 19px;
    width: 19px;
}

.AquaStyle .ajax__combobox_itemlist {
    border-color: #000000;
    background-color: #FFFFFF;
}

.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    height: 18px;
}

.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    margin: 0;
    padding: 0;
    background-image: url(ComboBox/images/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}

.WindowsStyle .ajax__combobox_itemlist {
    border-color: #7F9DB9;
}

.rowEditTable {
    background-color: #EEEEEE !important;
    border: 1px solid #000000;
}

    .rowEditTable td {
        font-family: Verdana;
        font-size: 10px;
        color: #000000;
    }

.rounded-corners {
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
}

/*---------start of div----------------*/
.div-wrapper {
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--accentcolor1);
}
/*---------end of div ----------------*/


/*---------start of formview ----------------*/
.Formview {
    background-color: var(--accentcolor1);
}





/*---------end of formview ----------------*/








/*---------start of menuItem ----------------*/
.SideMenu {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 60px;
    font-family: var(--font);
}

    .SideMenu a:hover {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60px;
        font-family: var(--font);
        color: var(--white);
        background: var(--accentcolor1);
        padding: 10px,10px,10px,10px;
    }


/*---------end of menuItem ----------------*/

/*---------start of nav----------------*/
.navbar {
    color: var(--white) !important;
    font-size: var(--normalfontsize) !important;
    font-family: var(--font) important;
}

    .navbar:link {
        color: var(--white) !important;
        font-size: var(--normalfontsize) !important;
        font-family: var(--font) important;
    }

    .navbar:visited {
        color: red !important;
        font-size: var(--normalfontsize) !important;
        font-family: var(--font) important;
    }


    .navbar :hover {
        color: deeppink !important;
        font-size: var(--normalfontsize) !important;
        font-family: var(--font) important;
    }



/*---------end of nav ----------------*/
/*---------start of link button ----------------*/
.linkbutton {
    color: var(--hyperlink);
    font-size: var(--normalfontsize);
    font-family: var(--font);
}


/*---------end of link button ----------------*/


/*---------start of calendar ----------------*/
.myCalendar {
    background-color: #f2f2f2;
    border: 2px solid var(--black) !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow: hidden;
}

    .myCalendar a {
        text-decoration: none;
    }

    /*Title */
    .myCalendar .myCalendarTitle {
        font-weight: bold;
        font-family: var(--font);
        height: 40px;
        line-height: 40px;
        background-color: var(--accentcolor1);
        color: #ffffff;
        -webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-topleft: 8px;
    }

    /* Gridlines between days of the week*/
    .myCalendar th.myCalendarDayHeader {
        height: 25px;
        border-bottom: outset 2px #fbfbfb;
        border-right: outset 2px #fbfbfb;
    }

    /*gridlines between days*/
    .myCalendar td.myCalendarDay {
        border: outset 2px #fbfbfb;
    }

        /*Sunday Text*/
        .myCalendar td.myCalendarDay:nth-child(7) a {
            /*     color: #c52e2e !important;*/
        }


    .myCalendar .myCalendarNextPrev {
        text-align: center;
        font-size: 24px;
        /*	color: var(--black) !important; */
    }

        .myCalendar .myCalendarNextPrev a {
            /*	font-size: 1px; */
        }

        /*  month before button*/
        .myCalendar .myCalendarNextPrev:nth-child(1) a {
            color: var(--white) !important;
        }

            /*  month before/after button hover */
            .myCalendar .myCalendarNextPrev:nth-child(1) a:hover, .myCalendar .myCalendarNextPrev:nth-child(3) a:hover {
                background-color: var(--accentcolor2);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
            }

        /* month after button*/
        .myCalendar .myCalendarNextPrev:nth-child(3) a {
            color: var(--white) !important;
        }


    .myCalendar td.myCalendarSelector a {
        background-color: var(--accentcolor2);
    }

    /*calendar size */
    .myCalendar .myCalendarDayHeader a,
    .myCalendar .myCalendarDay a,
    .myCalendar .myCalendarSelector a,
    .myCalendar .myCalendarNextPrev a {
        display: block;
        line-height: 30px;
        width: 30px;
    }



        /*calendar on hover*/
        .myCalendar .myCalendarDay a:hover,
        .myCalendar .myCalendarSelector a:hover {
            background-color: var(--accentcolor1);
        }
/*---------end of calendar ----------------*/


/*---------start of popup ----------------*/
/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    /* The actual popup (appears on top) */
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*---------end of popup ----------------*/



/*--------Start of RadioButtonTitle-------------------------------------------*/

.RadioButtonTitle {
    align-content: center;
    font-weight: 600;
    font-family: var(--font)
}


/*--------End of RadioButtonTitle-------------------------------------------*/



/*--------Start of RadioButton-------------------------------------------*/
.RadioButton input[type="radio"] {
    width: auto;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    margin: 0 10px 0 10px;
}

.RadioButton label {
    color: var(--white);
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 5px 0 5px;
    background-color: var(--accentcolor1);
    padding: 5px;
    font-size: var(--normalfontsize);
}

.RadioButton input[type="radio"]:checked + label {
    color: var(--white);
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 5px 0 5px;
    background-color: var(--accentcolor2);
    padding: 5px;
}

    .RadioButton input[type="radio"]:checked + label :hover {
        color: var(--white);
        border: 1px var(--black);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden;
        margin: 0 5px 0 5px;
        background-color: deeppink;
    }

.RadioButton label:hover {
    color: var(--white);
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 5px 0 5px;
    background-color: var(--accentcolor2);
    font-size: var(--normalfontsize);
}

/*--------End of RadioButton-------------------------------------------*/


/*--------Start of WarningButton-------------------------------------------*/

.warningbutton {
    transition-duration: 0.4s;
    background-color: var(--warningcolor1);
    border: none;
    color: white;
    padding: 5px 5px 5px 5px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--normalfontsize);
    font-family: var(--font);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

    .warningbutton:hover {
        background-color: var(--warningcolor2);
        color: var(--white);
    }

/*--------End of WarningButton-------------------------------------------*/


/*--------Start of Button-------------------------------------------*/

.button {
    transition-duration: 0.4s;
    background-color: var(--accentcolor1);
    border: none;
    color: white;
    padding: 5px 5px 5px 5px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--normalfontsize);
    font-family: var(--font);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

    .button:hover {
        background-color: var(--accentcolor2);
        color: var(--white);
    }

/*--------End of Button-------------------------------------------*/



/*--------Start of LinkButton-------------------------------------------*/

.linkbutton {
    transition-duration: 0.4s;
    background-color: var(--accentcolor1);
    border: none;
    color: white !important;
    padding: 5px 5px 5px 5px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--normalfontsize);
    font-family: var(--font);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

    .linkbutton:visited {
        transition-duration: 0.4s;
        background-color: var(--accentcolor1);
        border: none;
        color: white !important;
        padding: 5px 5px 5px 5px;
        margin-left: 3px;
        margin-right: 3px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: var(--normalfontsize);
        font-family: var(--font);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }


    .linkbutton:hover {
        background-color: var(--accentcolor2);
        color: var(--white);
    }

/*--------End of LinkButton-------------------------------------------*/

/*--------Start of LinkButton2-------------------------------------------*/

.linkbutton2 {
    transition-duration: 0.4s;
    background-color: var(--accentcolor3);
    border: none;
    color: white !important;
    padding: 5px 5px 5px 5px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--normalfontsize);
    font-family: var(--font);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.linkbutton:visited {
    transition-duration: 0.4s;
    background-color: var(--accentcolor3);
    border: none;
    color: white !important;
    padding: 5px 5px 5px 5px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--normalfontsize);
    font-family: var(--font);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}


.linkbutton:hover {
    background-color: var(--accentcolor2);
    color: var(--white);
}

/*--------End of LinkButton2-------------------------------------------*/

/*--------Start of Textbox-------------------------------------------*/
.TextBox {
    width: 185px;
    border: 2px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    transition: 500ms all ease;
    padding: 5px 5px 5px 5px;
    font-family: var(--font)
}

/*--------End of Textbox-------------------------------------------*/

/*--------Start of Dropdown------------------------------------------*/
.search_categories {
    font-size: 13px;
    font-family: var(--font);
    padding: 5px 5px 5px 5px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

    .search_categories .select {
        width: 120%;
        background: url('arrow.png') no-repeat;
        background-position: 80% center;
    }

        .search_categories .select select {
            background: transparent;
            line-height: 1;
            border: 0;
            padding: 0;
            border-radius: 0;
            width: 120%;
            position: relative;
            z-index: 10;
            font-size: 1em;
        }

/*--------End of Dropdown------------------------------------------*/


/*--------start of combo1------------------------------------------*/
/*textbox*/
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    font-family: var(--font);
    height: 18px;
    position: relative;
    border: 1px var(--black);
    /*   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;*/

    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 8px;
    overflow: hidden;
}

/*button*/
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    -webkit-appearance: none;
    background: url('downarrow.png');
    background-size: 150px;
    background-position: center;
    border: solid;
    border-color: #ffffff;
    border-width: medium;
    /*-webkit-border-radius: 8px;*/
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 0px;
    /*     -moz-border-radius: 8px;*/
    /*    border-radius: 8px;*/
    overflow: hidden;
    height: 21px;
    width: 21px;
}

/*dropdownlist*/
.WindowsStyle .ajax__combobox_itemlist {
    border-color: var(--black);
    font-family: var(--font);
}

/*--------End of combo1------------------------------------------*/

/*--------start of combo2 WindowsStyle2------------------------------------------*/
/*textbox*/
.WindowsStyle2 .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    font-family: var(--font);
    height: 18px;
    position: relative;
    border: 1px var(--black);
    /*   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;*/

    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 8px;
    overflow: hidden;
}

/*button*/
.WindowsStyle2 .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    -webkit-appearance: none;
    background: url('downarrow2.png');
    background-size: 150px;
    background-position: center;
    border: solid;
    border-color: var(--accentcolor1);
    border-width: medium;
    /*-webkit-border-radius: 8px;*/
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 0px;
    /*     -moz-border-radius: 8px;*/
    /*    border-radius: 8px;*/
    overflow: hidden;
    height: 21px;
    width: 21px;
}

    /*button*/
    .WindowsStyle2 .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button:hover {
        background-color: var(--accentcolor2);
        color: var(--white);
    }

/*dropdownlist*/
.WindowsStyle2 .ajax__combobox_itemlist {
    border-color: var(--black);
    position: relative;
    max-height: 75px;
    overflow-y: auto;
}


.WindowsStyle2 {
}

    .WindowsStyle2 ul {
        position: inherit !important;
    }
/*--------End of combo2 WindowsStyle2------------------------------------------*/




/*--------start of combo3------------------------------------------*/

.comboBoxInsideModalPopup .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
    margin: 0;
    align-self: center;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    font-family: var(--font);
    height: 25px;
    position: relative;
    border: 1px var(--black);
    /*   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;*/
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 8px;
    overflow: hidden;
}

/*button*/
.comboBoxInsideModalPopup .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    -webkit-appearance: none;
    background: url('../Images/downarrow.png');
    background-size: 150px;
    background-position: center;
    border: solid;
    border-color: #ffffff;
    border-width: medium;
    /*-webkit-border-radius: 8px;*/
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 0px;
    /*     -moz-border-radius: 8px;*/
    /*    border-radius: 8px;*/
    overflow: hidden;
    height: 21px;
    width: 21px;
}


/*dropdownlist*/
.comboBoxInsideModalPopup .ajax__combobox_itemlist {
    border-color: var(--black);
    position: absolute !important;
    /*height: 100px !important;
	overflow: auto !important;*/
    top: auto !important;
    left: auto !important;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 8px;
}

.comboBoxInsideModalPopup {
}

    .comboBoxInsideModalPopup ul {
        position: inherit !important;
        /*/left: 215px !important;
        top: 90px !important;*/
    }

/*--------End of combo3------------------------------------------*/

/*--------Start of Heading------------------------------------------*/
.heading {
    font-family: var(--font);
    font-size: 20px;
}
/*--------End of Heading------------------------------------------*/

/*--------Start of Label------------------------------------------*/
.label {
    font-family: var(--font);
}
/*--------End of Label------------------------------------------*/



/*--------Start of Label------------------------------------------*/
.labelwhite {
    color: var(--white);
    font-family: var(--font);
    font-size: 20px;
    font-weight: bold;
}
/*--------End of Label------------------------------------------*/

/*--------Start of linklabel------------------------------------------*/
.linklabel {
    font-family: var(--font);
    color: var(--white) !important;
    text-decoration: none;
}

linklabel:link {
    font-family: var(--font);
    color: var(--white) !important;
    text-decoration: none;
}

.linklabel:visited {
    font-family: var(--font);
    color: var(--white) !important;
    background-color: yellow !important;
    text-decoration: none;
}

/*--------End of linklabel------------------------------------------*/

/*--------Start of title------------------------------------------*/
.title {
    font-family: var(--font);
    font-weight: bolder;
    font-size: larger;
    align-content: center;
}
/*--------End of title------------------------------------------*/







/*--------Start of Grid------------------------------------------*/

.GridViewStyle {
    border: solid 1px #5D7B9D;
    color: #333333;
    width: 100%;
    font-family: var(--font)
}

.GridViewHeaderStyle {
    background-color: var(--tablecolor2);
    font-weight: bold;
    text-align: left;
    color: var(--black);
    font-family: var(--font);
}

    .GridViewHeaderStyle a {
        color: var(--black);
    }

    .GridViewHeaderStyle:hover {
    }

.GridViewRowStyle {
    background-color: var(--tablecolor1);
    color: var(--black);
    font-family: var(--font)
}

    .GridViewRowStyle:hover {
        background-color: var(--tablehightlight);
        cursor: pointer;
    }

.GridViewAlternatingRowStyle {
    background-color: var(--tablecolor2);
    color: var(--black);
    cursor: pointer;
    font-family: var(--font)
}

    .GridViewAlternatingRowStyle:hover {
        background-color: var(--tablehightlight);
        cursor: pointer;
    }

.GridViewSelectedRowStyle {
    background-color: Red;
    font-weight: bold;
    font-family: var(--font)
}

.GridViewPagerStyle a /** FOR THE PAGING ICONS **/ {
    padding: 5px 5px 5px 5px;
    color: var(--hyperlink);
    font-weight: 100;
    font-family: var(--font);
}

    .GridViewPagerStyle a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ {
        color: var(--accentcolor2);
    }

.GridViewPagerStyle span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
    padding: 5px 5px 5px 5px;
    background-color: var(--accentcolor1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    font-family: var(--font);
}

    .GridViewPagerStyle span:hover /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        padding: 5px 5px 5px 5px;
        background-color: var(--accentcolor2);
        color: var(--white);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }

.GridViewPagerStyle {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--white);
    height: 30px;
    text-align: left;
    font-family: var(--font);
}


/*.header {
    background-color: var(--tablecolor1);
    font-family: var(--font);
    color: var(--white);
    height: 25px;
    text-align: center;
    font-size: var(--normalfontsize);
    border: 1px var(--black);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
}

    .header:hover {
        background-color: var(--tablecolor1);
        font-family: var(--font);
        color: var(--white);
        height: 25px;
        text-align: center;
        font-size: var(--normalfontsize);
    }*/



/*.rows {
    background-color: #fff;
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
    min-height: 25px;
    text-align: left;
}*/

/*    .rows:hover {
        background-color: lightyellow;
        color: black;
    }*/


/*li:nth-last-child(-n+1):hover {
    background-color: var(--accentcolor1) !important;
}


.mydatagrid tr:nth-child(even) {
    background-color: var(--tablecolor1);
}

.mydatagrid tr:nth-child(odd) {
    background-color: var(--tablecolor2);
}

.mydatagrid tr:nth-child(even):hover {
    background-color: var(--tablehightlight);
}

.mydatagrid tr:nth-child(odd):hover {
    background-color: var(--tablehightlight);
}



.mydatagrid td {
    font-family: var(--font);
    padding: 5px;
}

.mydatagrid th {
    font-family: var(--font);
    padding: 5px;*/
}
/*--------End of Grid------------------------------------------*/

/*--------Start of panel dark------------------------------------------*/
.paneldark {
    font-family: var(--font);
    font-weight: bolder;
    font-size: larger;
    align-content: center;
    background-color: cornflowerblue
}
/*--------End of panel dark------------------------------------------*/

/*--------Start of panel light------------------------------------------*/
.panellight {
    font-family: var(--font);
    font-weight: bolder;
    font-size: larger;
    align-content: center;
    background-color: lightblue
}
/*--------End of panel light------------------------------------------*/

.hidden {
    display: none;
}
/*Start of new code - started 18/08/2026 in Visual Studio 2026*/

.login-input {
    width: 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.9em;
    box-sizing: border-box;
}

.scrollable-gridview {
    width: 100%;
    max-width: 100%;
    display: block;
}

.srollable-gridview table {
    min-width: 100%;
    width: auto;
    display: table;
}

.transactionDdlMonths{
    width: 30%;
}

.transactionDdlYears {
    width: 35%;
}

/* Mobile devices - screens 768px or smaller */
@media (max-width: 768px) {
    .login-input {
        width: 60%;
        max-width: 296px;
        box-sizing: border-box;
    }

    .wrapper {
        width: 100%;
        border-left: none;
        border-right: none;
    }

    .footer, .push {
        width: 100%;
        border-left: none;
        border-right: none;
    }

    .scrollable-gridview {
        overflow-x: auto;
        max-width: 75%;
        -webkit-overflow-scrolling: touch;
    }

    .transactionDdlMonths {
        width: 60%;
    }
    
    .transactionDdlYears {
        width: 80%;
    }

    .addTransactionPopupTable table,
    .addTransactionPopupTable thead,
    .addTransactionPopupTable tbody,
    .addTransactionPopupTable th,
    .addTransactionPopupTable td,
    .addTransactionPopupTable tr {
        display: block;
        width: 100%;
    }
}