@import "_styles.css";

/*
    Suggested order:
--------------------------------------------------
    display, position, float, clear
    width, height
    margin, padding
    border, background
    color, font, line-height, text-align, text-decoration
    vertical-align, white-space, overflow, cursor, list-style
*/

HTML,
BODY {
    width: 100%;
    min-height: 100%;
}
HTML {
    background: #f6f6ea;
}
BODY {
    background: #f6f6ea url(bg_body.gif) repeat-x 0 0;
    line-height: 1.4;
    text-align: center;
}
BODY, INPUT, SELECT, TEXTAREA, BUTTON, TD, TH, BLOCKQUOTE {
    color: #000;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

H1, H2, H3, H4, H5, H6 {
    color: #007550;
    line-height: normal;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
H1 {
    font-size: 17px;
    text-transform: uppercase;
}
H1 + DIV.sub-heading {
    margin-top: 6px;
}
H2, H3, H4, H5, H6 {
    font-size: 13px;
}
H2 {
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
}

A {
    color: #007550;
}
A:hover {
    color: #ab1355;
}

OL {
    margin-left: 3em;
}
OL OL {
    margin: .3em 0 .5em 3em;
}
UL {
    margin-left: 1.5em;
}
UL LI {
    padding-left: 12px;
    background: url(bg_ul.gif) no-repeat 0 .5em;
}
UL UL {
    margin: .3em 0 .5em 1.5em;
}
UL UL LI {
    background: url(bg_ul_ul.gif) no-repeat 2px .5em;
}

/* =layout
-------------------------------------------------- */
#wrap {
    min-width: 910px;
    max-width: 1410px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* =header
-------------------------------------------------- */
#header {
    position: relative;
    height: 70px;
    background: #996 url(bg_body.gif) repeat-x 0 100%;
    z-index: 2;
    margin-left: 1em;
    margin-right: 1em;
}
#header,
#header A {
    color: #fff;
    text-decoration: none;
}
#header A {
    font-weight: bold;
}
#header A:hover {
    text-decoration: underline;
}
#header P,
#header UL {
    margin: 0;
}

#logo,
#logo A {
    width: 132px;
    height: 43px;
    overflow: hidden;
}
#logo {
    position: absolute;
    top: 14px;
    left: 0;
    margin: 0;
}
#logo A {
    display: block;
    text-indent: -5000px;
}

#logo.live {
    background: url(logo.svg) no-repeat 30% 0;
    background-size: 110%;
}

#logo.stu {
    background: url(logo-stu.png) no-repeat 100% 0;
}

#logo.dev {
    background: url(logo-dev.png) no-repeat 100% 0;
}

#logo.test {
    background: url(logo-test.png) no-repeat 100% 0;
}

#logo.vesta {
    background: url(logo-vesta.png) no-repeat 100% 0;
}

#support {
    position: absolute;
    top: 11px;
    left: 160px;
    font-size: 11px;
    color: #F6F6EA;
}

#support A {
    color: #F6F6EA;
}

#info {
    position: absolute;
    top: 10px;
    right: 0;
}
#info SPAN {
    font-weight: normal;
}
#info P {
    float: left;
    padding: 0 1em;
    border-right: 1px solid #b8b885;
    white-space: nowrap;
}
#info P.exit {
    padding-right: 0;
    border: none;
}
P.exit A {
    display: block;
    padding-right: 18px;
    background: url(bg_exit.gif) no-repeat 100% 1px;
    font-weight: bold;
}
P.exit A:hover {
    background-position: 100% -49px;
}

#nav {
    position: absolute;
    left: 160px;
    bottom: 0;
}
#nav LI,
#links LI {
    position: relative;
    padding: 0 2px 0 0;
    background: none;
}
#nav LI,
#nav LI A {
    float: left;
}
#nav LI A,
#links LI A {
    margin-top: 1px;
    padding: 4px 12px;
    border-style: solid;
    border-width: 1px 1px 0;
    border-color: #a8a875 #7a7a47 #7a7a47 #a8a875;
    background: #8a8a57;
    color: #f6f6ea;
    font-weight: bold;
    text-decoration: none;
}
#nav LI A:hover,
#links LI A:hover {
    border-color: #a8a875 #5a5a2d #5a5a2d #a8a875;
    background: #7a7a47;
    color: #fee13e;
    text-decoration: none;
}
#nav LI.active A,
#nav LI.active A:hover {
    margin: 0;
    padding: 5px 12px;
    border-color: #fff #5c5c29 #5c5c29 #fff;
    background: #f6f6ea url(bg01.gif) repeat-x 0 0;
    color: #000;
}
#nav UL {
    position: absolute;
    top: 28px;
    left: 0;
    width: 120px;
    margin-left: -1px;
    border: solid #c7c7ac;
    border-width: 0 1px 1px;
    background: #f6f6ea !important;
    background: #8a8a57;
}
#nav UL LI,
#nav UL LI A {
    float: none !important;
}
#nav UL LI {
    padding: 0 !important;
}
#nav UL A,
#links UL A {
    display: block;
    border: solid #a8a875 !important;
    border-width: 0 1px 1px 0 !important;
    background: #f6f6ea !important;
    color: #5a5a2d !important;
}
#nav UL A:hover {
    background: #e1e1cf !important;
    color: #000;
}

#links {
    position: absolute;
    right: 0;
    bottom: 2px;
    margin: 0;
    padding:0;
}
* HTML #links LI {
    display: inline;
}
#links LI A {
    display: block;
}
#links LI {
    padding: 0 !important;
}
#links LI.active A {
    margin: 0;
    padding: 5px 12px;
    border-color: #fff #5c5c29 #5c5c29 #fff;
    background: #f6f6ea url(bg01.gif) repeat-x 0 0;
    color: #000;
}

#links LI.active UL LI A {
    padding-top: 1px;
    padding-bottom: 1px;
    width: 175px;    /* In IE links were not as wide as the ul itself */
}

#links UL {
    display: none;
    position: absolute;
    right: 0;
    width: 200px;
    margin: 1px -1px 0 0;
    border: solid #c7c7ac;
    border-width: 0 1px 1px;
    background: #f6f6ea !important;
    background: #8a8a57;
}

#links UL A:hover {
    background: #e1e1cf !important;
    color: #000;
}

/* =content
-------------------------------------------------- */
P.img-right {
    position: relative;
    float: right;
    margin: 1em 0 .5em 1.5em;
}
P.img-right IMG {
    display: block;
    padding: 1px;
    border: 1px solid #c0c0c0;
    background: #fff;
}
P.img-right A:hover IMG {
    border-color: #ab1355;
    outline: 1px solid #e3bdc5;
}

/* path */

#path {
    margin: -6px 0 10px;
    font-size: 11px;
}
#path,
#path A {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#path A:hover {
    color: #ab1355;
    text-decoration: underline;
}
#path SPAN {
    margin: 0 .1em;
    color: #b2b2b2;
}
#path STRONG {
    font-weight: normal;
}

#content {
    position: relative;
    padding: 9px 0 50px;
    z-index: 1;
    margin-left: 1em;
    margin-right: 1em;
}

/* sub-heading */

DIV.sub-heading + TABLE.data {
    margin-top: 6px;
}
DIV.sub-heading {
    margin-top: 10px;
    padding: 0 0 0 6px;
    background: url(bg07.gif) repeat-x 0 8px;
}
DIV.sub-heading H2 {
    float: left;
    margin: 0;
    padding: 0 3px;
    border: none;
    background: #f6f6ea;
    color: #007550;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
DIV.sub-heading H2.warning {
    color: #d5a13d;
}
DIV.sub-heading H2.error {
    color: #ea1d1d;
}
DIV.sub-heading UL {
    float: right;
    margin: 0;
}
DIV.sub-heading UL LI {
    float: left;
    padding: 0 0 0 3px;
    background: none;
}
DIV.sub-heading UL LI INPUT {
    display: block;
}
DIV.sub-heading H2.fontSizeLarge {
    font-size: 120%;
}

/* =autocomplete */

.autocomplete-container {
}

.autocomplete-container div {
    --float: left;
}

.autocomplete-container.text {
    width: 121px;
}
.autocomplete-container.text2 {
    width: 133px;
}
.autocomplete-container.wide {
    min-width: 192px;
    max-width: 272px;
    width: 100%;
}
.autocomplete-container.wide2 {
    min-width: 301px;
    max-width: 362px;
    width: 100%;
}
.autocomplete-container.wide3 {
    min-width: 431px;
    max-width: 872px;
    width: 100%;
}

.autocomplete-container input.text {
    width: 100px;
}

.autocomplete-container input.text2 {
    width: 133px;
}

.autocomplete-container input.wide {
    min-width: 171px;
    max-width: 278px;
    width: 100%;
}

.autocomplete-container input.wide2 {
    min-width: 280px;
    max-width: 361px;
    width: 100%;
}
.autocomplete-container input.wide3 {
    min-width: 410px;
    max-width: 870px;
    width: 100%;
}

.autocomplete-container INPUT {
    margin: 0;
    vertical-align: top;
    border-right: 0 !important;
    float: left;
}

.autocomplete-button {
    width: 15px;
    height: 19px;
    border-color: #aaa #ddd #ddd #aaa;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    background: #fff url(dropdown.gif) no-repeat center center;
}


DIV.autocompletediv {
    position: absolute;
    width: 250px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #888;
    z-index: 9000;
}
DIV.autocompletediv UL {
    margin: 0;
    padding: 0;
    list-style-type:none;
}
DIV.autocompletediv UL LI.selected {
    background-color: #ffb;
}
DIV.autocompletediv UL LI {
    display: block;
    margin: 0;
    padding: 2px;
    cursor: pointer;
    background-image: none;
    list-style-type: none;
}

.autocomplete-container {
    position: relative;
    display: inline-block; /* Ensure it wraps around the input and button */
}

/* Styling for the input field */
.autocomplete-container input {
    padding-right: 40px; /* Add space for the button */
    box-sizing: border-box; /* Include padding in the input's width */
    --font-size: 16px; /* Adjust as needed */
}

/* Styling for the autocomplete button */
.autocomplete-button {
    position: absolute;
    right: 5px; /* Adjust space from the input edge */
    top: 50%; /* Align vertically with the input */
    transform: translateY(-50%);
    --width: 30px; /* Adjust width of the button */
    height: calc(100% - 10px); /* Adjust height of the button */
    background-color: #f0f0f0; /* Set a background color */
    border: 1px solid #ccc; /* Match input border style */
    border-radius: 3px; /* Optional, for rounded corners */
    cursor: pointer;
    text-align: center; /* Center the text inside the button */
    line-height: 30px; /* Match the button height for vertical alignment */
    --font-size: 16px; /* Match input font size */
}

/* Add hover effect for the button */
.autocomplete-button:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
}

/* =suggest
-------------------------------------------------- */
.ac_results {
    width: 250px !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #888;
    z-index: 99999;
    text-align: left;
}
.ac_results ul {
    width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style-type:none;
}
.ac_results li {
    display: block;
    min-height: 1px;
    margin: 0 !important;
    padding: 2px !important;
    cursor: pointer;
    background-image: none;
    list-style-type: none;
    cursor: pointer;
}
* HTML .ac_results li {
    height: 1px;
}
.ac_results li em {
    color: #808080;
    line-height: normal;
}
.ac_results li em strong {
    font-weight: normal;
}
.ac_results li.ac_odd {
    background: #eee;
}
.ac_results li.ac_over,
.ac_results li.ac_over em {
    background: #ffb;
}

/* =tables
-------------------------------------------------- */
TABLE.data {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #bdbdaa;
}
TABLE.data TH,
TABLE.data TD {
    border-left: 1px solid #e8e8dc;
    padding: 2px 6px;
    background: #fff;
}
TABLE.data TR TH:first-child,
TABLE.data TR TD:first-child {
    border-left-color: #bdbdaa;
}
TABLE.data THEAD TH {
    border: solid #bdbdaa;
    border-width: 0 1px 1px 0;
    background: #eaeada url(bg02.gif) no-repeat 0 0;
    font-weight: normal;
}
TABLE.data THEAD TH A {
    color: #000;
    border: none;
    text-decoration: none;
}
TABLE.data TBODY TD.input {
    padding: 1px 3px;
}
TABLE.data TBODY TD.ico {
    width: 1%;
    padding: 1px 6px 0;
    text-align: center;
}
TABLE.data TBODY TD.ico IMG {
    cursor: help;
}
TABLE.data TBODY TD.action {
    width: 1%;
    padding: 1px 6px 0;
    text-align: right;
    white-space: nowrap;
}
TABLE.data TD.right INPUT.text {
    text-align: right !important;
}
TABLE.data TBODY TD.action INPUT {
    margin: 0 1px;
    vertical-align: top;
}
TABLE.data TBODY TR.alt TD {
    background: #f3f3ed;
}
TABLE.data TBODY TR.alt TH {
    background: #f3f3ed;
}

TABLE.data TBODY TR.passive TD {
    color: #7F7F7F;
}
TABLE.data TBODY TR.passive TD A {
    color: #69A995;
}

TABLE.data TBODY TR .bold {
    font-weight: bold;
}

TABLE.data THEAD TH.sort {
    padding: 1px 0 0 1px;
}
TABLE.data THEAD TH.sort A {
    display: block;
    padding: 2px 18px 3px 5px;
    background: url(sort01.gif) no-repeat 100% 50%;
    outline: none;
}
TABLE.data THEAD TH.sort A:hover,
TABLE.data THEAD TH.sort:hover {
    background-color: #e1e1d0;
}
TABLE.data THEAD TH.ascending A {
    background-image: url(sort02.gif);
}
TABLE.data THEAD TH.descending A {
    background-image: url(sort03.gif);
}

TABLE.data TFOOT TH,
TABLE.data TFOOT TD {
    background: #eee;
}
TABLE.data TFOOT TH {
    text-align: right;
}

TABLE.data TBODY TH {
    font-weight: normal;
}

TR.strong, TD.strong {
    font-weight: bold;
}
/* form */

DIV.form {
    min-width: 925px;
    #margin-left: 1em;
    #margin-right: 1em;
    margin-top: .5em;
    padding: 6px;
    border: 1px solid #d7d7ba;
    background: #eaeada;
}
DIV.form-tabs {
    margin-top: 0;
    border-top: none;
}
DIV.form TABLE {
    margin: 0;
}
DIV.form P.action {
    margin-top: .5em;
    padding-left: 6px;
    padding-right: 6px;
    border-top-width: 1px;
}
DIV.form P.action INPUT {
    width: 8em;
    height: 2em;
    padding-left: 0;
    padding-right: 0;
}
DIV.form P.action INPUT.wide {
    width: 12em;
}
DIV.form TABLE.form INPUT.small {
    width: 60px;
}
TABLE.form {
    width: 100%;
    margin-top: 5px;
}

.header LABEL,
LABEL.header {
    font-weight: bold;
    color: #4A4A4A;
}
TABLE.form TH {
    color: #4A4A4A;
    width: 1%;
    letter-spacing: 1px;
}
TABLE.form TH LABEL,
TABLE.form TH SPAN.label {
    display: inline-block;
    min-width: 130px;
    max-width: 200px;
    --width: 100%;
    width: 13vw;
}
TABLE.form TH.wide2 LABEL {
    min-width: 320px;
    max-width: 390px;
    --width: 100%;
    width: 13vw;
}

TABLE.form.col-2 TH label {
    max-width: 45vw;
}

TABLE.form TD,
TABLE.form TH{
    vertical-align: middle;
}

TABLE.type3,
TABLE.type4 {
    width: 100%;
}
TABLE.type3 TH,
TABLE.type3 TD{
    width: 50% !important;
}
TABLE.type3 TH LABEL {
    width: 100%;
}
TABLE.type4 TD {
    width: 25%;
}
TABLE.form TH {
    padding: 2px 5px 2px;
    text-align: right;
}
TABLE.form TH.type1 {
    font-weight: normal;
}
TABLE.form TD {
    padding: 2px 5px;
    min-width: 14vw;
}
TABLE.form.col-6 TD {
    padding: 2px 5px;
    min-width: 11vw;
}
TABLE.form TD SPAN.action {
    margin-left: .5em;
    padding-left: .5em;
    border-left: 1px solid #999;
}
TABLE.form TD SPAN.action A:hover {
    text-decoration: underline;
}
TABLE.form TD.ul UL {
    margin: 0;
}
TABLE.form TD.data {
    padding: 2px 6px 2px;
}
TABLE.form TD.type1 {
    width: 220px;
}
TABLE.form TD.data INPUT.button {
    margin: -2px 0 -2px 6px;
}
TABLE.form TD.check {
    padding: 2px 24px;
    white-space: nowrap;
}
TABLE.form TD.vertical-block LABEL {
    display: block;
    font-weight: bold;
}
TABLE.form TD.user-photo {
    padding-left: 18px;
}
TABLE.form TD.user-photo IMG {
    display: block;
    padding: 1px;
    border: 1px solid #c0c0c0;
    background: #fff;
}
TABLE.form TD.user-photo A:hover IMG,
TABLE.form TD.user-photo A:focus IMG {
    border-color: #ab1355;
    outline: 1px solid #e3bdc5;
}
.error INPUT,
.error SELECT,
.error TEXTAREA,
.error LABEL,
TABLE.form TD.error ,
TABLE.form TH.error {
    border-color: #ea1d1d !important;
}

TABLE.form TD.error ,
TABLE.form TH.error {
    color: #ea1d1d !important;
}

TABLE.form TD.error SELECT:focus,
TABLE.form TD.error TEXTAREA:focus,
TABLE.form TD.error INPUT[type="text"]:focus,
TABLE.form TD.error INPUT[type="password"]:focus {
    border-color: #ea1d1d #c21515 #c21515 #ea1d1d;
    outline: 1px solid #ea1d1d;
}

.warning INPUT,
.warning SELECT,
.warning TEXTAREA,
.warning LABEL,
TABLE.form TD.warning ,
TABLE.form TH.warning {
    border-color: #d5a13d !important;
}

TABLE.form TD.warning ,
TABLE.form TH.warning {
    color: #d5a13d !important;
}


/* =pager
-------------------------------------------------- */
DIV.pager {
    clear: both;
    margin-top: 6px;
}
DIV.pager UL,
DIV.pager UL LI {
    margin: 0;
    padding: 0;
}
DIV.pager UL {
    float: right;
    list-style: none;
}
DIV.pager UL LI {
    float: left;
    margin-right: 1px;
    padding: 0;
    background: none;
}
DIV.pager UL LI A,
DIV.pager UL LI SPAN,
DIV.pager UL LI STRONG {
    float: left;
    padding: 1px 6px;
    border: 1px solid #f6f6ea;
    line-height: normal;
    text-decoration: none;
}
DIV.pager UL LI SPAN,
DIV.pager UL LI STRONG {
    cursor: default;
}
DIV.pager UL LI A {
    border-color: #b8d6c3;
    background: #fff;
}
DIV.pager UL LI A:hover {
    border-color: #cd849c;
}
DIV.pager UL LI SPAN {
    color: #999 !important;
    border-color: #d5d5d5;
    background-color: #fbfbf5;
    background-position: 100% -95px;
}
DIV.pager UL LI STRONG {
    border-color: #f6f6ea;
    background: #f6f6ea;
    color: #000;
}
DIV.pager UL LI.first A,
DIV.pager UL LI.prev A,
DIV.pager UL LI.next A,
DIV.pager UL LI.last A,
DIV.pager UL LI.first SPAN,
DIV.pager UL LI.prev SPAN,
DIV.pager UL LI.next SPAN,
DIV.pager UL LI.last SPAN {
    padding: 1px 0 2px;
    background-repeat: no-repeat;
    text-indent: -5000px;
    overflow: hidden;
}
DIV.pager UL LI.first A,
DIV.pager UL LI.prev A,
DIV.pager UL LI.next A,
DIV.pager UL LI.last A {
    background-position: 100% 5px;
}
DIV.pager UL LI.first A:hover,
DIV.pager UL LI.prev A:hover,
DIV.pager UL LI.next A:hover,
DIV.pager UL LI.last A:hover {
    background-position: 100% -45px;
}
DIV.pager UL LI.last A,
DIV.pager UL LI.first A,
DIV.pager UL LI.last SPAN,
DIV.pager UL LI.first SPAN {
    width: 19px;
}
DIV.pager UL LI.prev A,
DIV.pager UL LI.next A,
DIV.pager UL LI.prev SPAN,
DIV.pager UL LI.next SPAN {
    width: 17px;
}
DIV.pager UL LI.first A,
DIV.pager UL LI.first SPAN {
    background-image: url(bg_pager_first.gif);
}
DIV.pager UL LI.last A,
DIV.pager UL LI.last SPAN {
    background-image: url(bg_pager_last.gif);
}
DIV.pager UL LI.prev A,
DIV.pager UL LI.prev SPAN {
    background-image: url(bg_pager_prev.gif);
}
DIV.pager UL LI.next A,
DIV.pager UL LI.next SPAN {
    background-image: url(bg_pager_next.gif);
}

DIV.pager LI.simpletext A {
    background: none;
    border: none;
    text-decoration: underline;
}

/* =messages
-------------------------------------------------- */
DIV.message {
    min-width: 908px;
    max-width: 1408px;
    width: 100%;
    margin: .5em 0 0 0;
    border: 1px solid #8f9499;
    background: #fff url(ico_msg_info.png) no-repeat 12px 9px;
    color: #202020;
    outline: 1px solid #fff;
}
DIV.message DIV {
    padding: 0 12px 6px 38px;
    border: 1px solid;
    border-color: #fff #e3e4e5 #e3e4e5 #fff;
}
DIV.message H2 {
    border: none;
    color: #202020;
}
DIV.message H2 A,
DIV.message H2 SPAN {
    font-weight: normal;
}
DIV.message H2 SPAN {
    margin-left: .5em;
}
DIV.message P,
DIV.message H2,
DIV.message OL,
DIV.message UL {
    margin-top: 6px;
}
DIV.message UL {
    margin-left: 0;
}
DIV.message UL LI {
    margin-bottom: .2em;
    padding-left: 10px;
    background-image: url(bg_msg_ul.gif);
    line-height: normal;
}
DIV.message A {
    color: #202020;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
DIV.msg-ok {
    border-color: #48b025;
    background-color: #def6d6;
    background-image: url(ico_msg_ok.png);
}
DIV.msg-ok DIV {
    border-color: #fff #c0d6b9 #c0d6b9 #fff;
}
DIV.msg-error {
    border-color: #ea755c;
    background-color: #ffe7e2;
    background-image: url(ico_msg_error.png);
}
DIV.msg-error DIV {
    border-color: #fff #ecd4cf #ecd4cf #fff;
}
DIV.msg-warning {
    border-color: #d5a13d;
    background-color: #fbf2c3;
    background-image: url(error.png);
    background-position: 11px 8px;
}
DIV.msg-warning DIV {
    border-color: #fff #ecd4cf #ecd4cf #fff;
}
.form-tabs DIV.message {
    width: 894px;
}
/* =tabs
-------------------------------------------------- */
UL.tabs {
    margin: 1em 0 0;
    padding-left: .5em;
    background: url(bg08.gif) repeat-x 0 100%;
    list-style: none;
}
UL.tabs LI,
UL.tabs LI A,
UL.tabs LI A SPAN {
    float: left;
}
UL.tabs LI A,
UL.tabs LI A SPAN {
    background: url(bg_tabs.png) no-repeat 0 -100px;
}
UL.tabs LI {
    margin: 1px 1px 0 0;
    padding: 0;
    background: none;
}
UL.tabs LI A {
    padding-left: 12px;
    color: #404040;
    text-decoration: none;
    outline: none;
}
UL.tabs LI A SPAN {
    padding: 4px 12px 3px 0;
    background-position: 100% -100px;
    cursor: pointer;
}
UL.tabs LI A:hover {
    background-position: 0 -50px;
    color: #202020;
    text-decoration: none;
}
UL.tabs LI A:hover SPAN {
    background-position: 100% -50px;
}
UL.tabs LI.active {
    margin: 0 1px 0 0;
}
UL.tabs LI.active A,
UL.tabs LI.active A:hover {
    background-position: 0 0 !important;
    color: #202020;
    font-weight: bold;
    outline: none;
}
UL.tabs LI.active A SPAN,
UL.tabs LI.active A:hover SPAN {
    padding-top: 5px;
    padding-bottom: 4px;
    background-position: 100% 0 !important;
}
/* =inputs & buttons
-------------------------------------------------- */
SPAN.req {
    color: #606060;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    vertical-align: middle;
}
SELECT,
TEXTAREA,
INPUT.text,
INPUT.date,
INPUT.time {
    border: 1px solid;
    border-color: #aaa #ddd #ddd #aaa;
}
INPUT.text,
INPUT.date,
INPUT.time {
    min-height: 15px;
    padding: 2px;
}
SELECT {
    padding: 1px;
}

/* input/select width normal size */

INPUT.text {
    width: 115px;
}
SELECT.text{
    width: 121px;
}

/* input/select width normal size - used when column has date and time */

INPUT.text2 {
    width: 127px;
}
SELECT.text2{
    width: 133px;
}

/* longer input/select */

INPUT.wide {
    min-width: 186px;
    max-width: 272px;
    width: 100%;
}
SELECT.wide {
    min-width: 192px;
    max-width: 278px;
    width: 100%;
}
/* width is same with textarea */

INPUT.wide2 {
    min-width: 295px;
    max-width: 355px;
    width: 100%;
}
SELECT.wide2 {
    min-width: 301px;
    max-width: 361px;
    width: 100%;
}

/* select2 multiselect width */
.wide2 ul.select2-choices {
    min-width: 300px;
    --max-width: 360px;
    --width: 100%;
}

div.select2-container.wide2 {
    min-width: 300px;
    max-width: 360px;
    width: 100%;
}

div.wide {
    min-width: 192px !important;
    max-width: 278px !important;
    width: 24vw !important;
}

div.wide2 {
    min-width: 300px !important;
    max-width: 361px !important;
    width: 28vw !important;
    --width: 100%;
}

.form-tabs .wide2 ul.select2-choices {
    width: 293px;
}

.form-tabs div.select2-container.wide2 {
    width: 293px;
}

/* longest input/select */

SELECT.max {
    width: 100%;
}
INPUT.max{
    width: 99%;
}

/* smallest input/select */

INPUT.min {
    width: 47px;
}
SELECT.min {
    width: 53px;
}

/* small input/select */

INPUT.small {
    width: 64px;
}
SELECT.small {
    width: 70px;
}

/* input for date and time  */

INPUT.date {
    width: 64px;
}
IMG.datepicker_trigger {
    cursor: pointer;
}
INPUT.time {
    width: 34px;
}
INPUT.time.time-with-seconds {
    width: 50px;
}

/* input for example */

INPUT.blur,
INPUT.example {
    color: #808080;
}

/* textarea  */

TEXTAREA,
TEXTAREA.text {
    width: 300px;
    height: 45px;
    padding: 1px 1px 1px 3px;
    overflow: auto;
}
TEXTAREA.small {
    width: 186px !important;
}
TEXTAREA.max {
    width: 99% !important;
}
TEXTAREA.high {
    height: 90px;
}
TEXTAREA.higher {
    height: 135px;
}
TEXTAREA.highest {
    height: 450px !important;
}

SELECT:focus,
TEXTAREA:focus,
INPUT[type="text"]:focus,
INPUT[type="password"]:focus {
    border-color: #557c6f #a6bfb7 #a6bfb7 #557c6f;
    outline: 1px solid #a2df86;
}

/* action */

INPUT.button, BUTTON.button  {
    min-height: 18px;
    padding: 1px 10px;
    border: 1px solid;
    border-color: #059151 #07713b #07612f #068146;
    background: #04a15c url(bg05.png) repeat-x 0 100%;
    color: #e5f2eb;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    overflow: visible;
}
INPUT.button:hover, BUTTON.button:hover {
    border-color: #006542 #004627 #003619 #005534;
    color: #fff;
}

INPUT.alt, BUTTON.alt {
    border-color: #cacab2 #a0a07c #a0a07c #cacab2;
    background-color: #fff;
    background-image: url(bg06.gif);
    color: #007550;
}
INPUT.alt:hover, BUTTON.alt:hover {
    border-color: #cd849c #a5445f #a5445f #cd849c;
    color: #ab1355;
}

P.action {
    margin-top: 1em;
    padding-top: .5em;
    border-top: 2px solid #d7d7ba;
    text-align: right;
}
P.action INPUT {
    vertical-align: top;
}

TABLE.form TD INPUT.button, BUTTON.button
DIV.sub-heading UL LI INPUT {
    padding: 1px 4px;
    font-size: 11px;
}

/* button sizes */

INPUT.button-small,
INPUT.button-normal,
INPUT.button-wide,
BUTTON.button-small,
BUTTON.button-normal,
BUTTON.button-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
INPUT.button-small , BUTTON.button-small { width: 75px !important; }
INPUT.button-normal, BUTTON.button-normal { width: 125px !important; }
INPUT.button-wide  , BUTTON.button-wide { width: 175px !important; }

/* =timepicker
-------------------------------------------------- */
div.time-picker {
    position: absolute;
    z-index: 120;
    height: 190px;
    width: 60px;
    overflow: auto;
    margin-top: 22px;
    border: 1px solid;
    border-color: #404040 #000 #000 #404040;
    background: #fff;
}
div.time-picker-12hours {
    width: 6em;
}
div.time-picker ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
div.time-picker li {
    padding: 1px 2px;
    background: none;
    cursor: pointer;
}
div.time-picker li.selected {
    background: #007550;
    color: #fff;
}

/* =tooltip
-------------------------------------------------- */
INPUT.help {
    cursor: help;
}

.ui-tooltip {
    opacity: 0.95;
}

.ui-tooltip-content {
    color: #000;
    font-size: 12px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}

/* =tools
-------------------------------------------------- */
DIV.tools {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    background: url(bg03.png) repeat-x 0 0;
    text-align: center;
}
DIV.tools DIV.a {
    min-width: 710px;
    max-width: 1410px;
    width: 100%;
    margin: 0 auto;
    padding: 6px 10px 50px;
    text-align: left;
}
DIV.tools A {
    color: #fff;
    text-decoration: none;
}
DIV.tools A:hover {
    text-decoration: underline;
}
DIV.tools INPUT.button {
    padding: 2px 12px;
    border: none;
    background: none;
}
DIV.tools UL {
    margin: 0;
}
DIV.tools UL LI,
DIV.tools UL LI A,
DIV.tools UL LI A SPAN {
    float: left;
}
DIV.tools UL LI {
    padding: 0;
    background: none;
}

DIV.tools UL.secondary {
    float: left;
    clear: left;
    margin-top: .1em;
    color: #c0c0b3;
}
DIV.tools UL.secondary LI {
    min-width: 120px;
}
DIV.tools UL.secondary LI A {
    float: none;
    display: block;
    padding: 1px 4px 1px 8px;
    background: url(dot02.gif) no-repeat 0 .55em;
    font-size: 12px;
    font-weight: bold;
    outline: none;
}
DIV.tools UL.secondary LI A:hover,
DIV.tools UL.secondary LI A:focus {
    color: #fee13e;
    text-decoration: none;
}
DIV.tools UL.secondary LI.last {
    float: none;
    clear: both;
}
DIV.tools UL.primary {
    float: right;
    padding-top: 7px;
}
DIV.tools UL.primary LI {
    height: 25px;
    overflow: hidden;
    padding-left: 4px;
}
DIV.tools UL.primary LI A,
DIV.tools UL.primary LI A SPAN {
    background-repeat: no-repeat;
    background-image: url(bg_tool_buttons.png);
    color: #4f4f36;
    font-weight: bold;
}
DIV.tools UL.primary LI STRONG,
DIV.tools UL.primary LI STRONG SPAN {
    float: left;
    background-repeat: no-repeat;
    background-image: url(bg_tool_buttons3.png);
    color: #4f4f36;
    font-weight: bold;
}
DIV.tools UL.primary LI STRONG {
    padding-left: 32px;
    background-color: #f6f6ea;
}
DIV.tools UL.primary LI STRONG SPAN {
    padding: 4px 11px 6px 0;
}
DIV.tools UL.primary LI A {
    padding-left: 32px;
    background-color: #f6f6ea;
}
DIV.tools UL.primary LI A SPAN {
    padding: 4px 11px 6px 0;
    cursor: pointer;
}
DIV.tools UL.primary LI A:hover,
DIV.tools UL.primary LI A:hover SPAN,
DIV.tools UL.primary LI A:focus,
DIV.tools UL.primary LI A:focus SPAN {
    color: #000;
    text-decoration: none;
}

DIV.tools UL.primary LI.save A,
DIV.tools UL.primary LI.save STRONG{
    background-position: 0 0;
}
DIV.tools UL.primary LI.save A SPAN,
DIV.tools UL.primary LI.save STRONG SPAN{
    background-position: 100% 0;
}
DIV.tools UL.primary LI.save A:hover,
DIV.tools UL.primary LI.save A:focus {
    background-position: 0 -25px;
}
DIV.tools UL.primary LI.save A:hover SPAN,
DIV.tools UL.primary LI.save A:focus SPAN {
    background-position: 100% -25px;
}

DIV.tools UL.primary LI.confirm A,
DIV.tools UL.primary LI.confirm STRONG{
    background-position: 0 -50px;
}
DIV.tools UL.primary LI.confirm A SPAN,
DIV.tools UL.primary LI.confirm STRONG SPAN {
    background-position: 100% -50px;
}
DIV.tools UL.primary LI.confirm A:hover,
DIV.tools UL.primary LI.confirm A:focus {
    background-position: 0 -75px;
}
DIV.tools UL.primary LI.confirm A:hover SPAN,
DIV.tools UL.primary LI.confirm A:focus SPAN {
    background-position: 100% -75px;
}

DIV.tools UL.primary LI.cancel A,
DIV.tools UL.primary LI.cancel STRONG{
    background-position: 0 -100px;
}
DIV.tools UL.primary LI.cancel A SPAN,
DIV.tools UL.primary LI.cancel STRONG SPAN {
    background-position: 100% -100px;
}
DIV.tools UL.primary LI.cancel A:hover,
DIV.tools UL.primary LI.cancel A:focus {
    background-position: 0 -125px;
}
DIV.tools UL.primary LI.cancel A:hover SPAN,
DIV.tools UL.primary LI.cancel A:focus SPAN {
    background-position: 100% -125px;
}

DIV.tools UL.primary LI.open A,
DIV.tools UL.primary LI.open STRONG{
    background-position: 0 -150px;
}
DIV.tools UL.primary LI.open A SPAN,
DIV.tools UL.primary LI.open STRONG SPAN {
    background-position: 100% -150px;
}
DIV.tools UL.primary LI.open A:hover,
DIV.tools UL.primary LI.open A:focus {
    background-position: 0 -175px;
}
DIV.tools UL.primary LI.open A:hover SPAN,
DIV.tools UL.primary LI.open A:focus SPAN {
    background-position: 100% -175px;
}
/* =modalpopup
-------------------------------------------------- */
#overlay, #loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #ddd;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    display: none;
}

#loadingOverlay {
    z-index: 110;
}

DIV.loading{
    background: none !important;
}
#loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 111;
    width: 110px;
    height: 110px;
    margin: 0 0 0 -55px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    border: 1px solid;
    border-color: #acac87 #996 #996 #acac87;
    background: #dbdbcf url(ajax-loader.gif) no-repeat 50%;
}
#loading A {
    display: block;
    margin-top: 88px;
    padding: 3px 3px 3px 12px;
    background: #8c8c59 url(dot02.gif) no-repeat 5px .7em;
    color: #fff;
    text-decoration: none;
}
#loading2 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 111;
    width: 110px;
    height: 110px;
    margin: 0 0 0 -55px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    border: 1px solid;
    border-color: #acac87 #996 #996 #acac87;
    background: #dbdbcf url(ajax-loader.gif) no-repeat 50% 50%;
    text-indent: -5000px;
}
#modalpopup-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    min-width: 760px;
    --max-width: 820px;
    --max-width: max-content;
    width: 100%;
    --margin: 0 0 0 -380px;
    --margin-right: 2rem;
    --margin-left: 2rem;
    overflow: hidden;
    padding: 0;
    text-align: left;
}
DIV.modalpopup {
    display: none;
    padding: 4px;
    border: 1px solid;
    border-color: #b2b2b2 #808080 #808080 #b2b2b2;
    background: #f6f6ea;
    text-align: left;
}

/* countdown */
#countdown {
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden;
    text-align: left;
    color: red;
    font-size: large;
    border: none;
    border-color: black;
}

/* header */

DIV.modalpopup-header {
    height: 46px;
    overflow: hidden;
    padding: 0 15px;
    background: #996;
    color: #fff;
}
DIV.modalpopup-header H1 {
    float: left;
    width: 400px;
    margin: 10px 0 0;
    border: none;
    color: #fff;
    font-size: 22px;
}
DIV.modalpopup-header P.exit {
    float: right;
    overflow: hidden;
    margin-top: 1.4em;
}
DIV.modalpopup-header P.exit A {
    float: left;
    color: #fff;
    text-decoration: none;
}
DIV.modalpopup-header P.exit A:hover {
    text-decoration: underline;
}


/* gallery header */
DIV.gallery-header {
    height: 22px;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
}

DIV.gallery-header TABLE {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

DIV.gallery-header TABLE TD {
    text-align: center;
}

DIV.gallery-header TABLE DIV.header {
    width: 100px;
    height: 22px;
    margin-left: auto;
    margin-right: auto;
}

DIV.gallery-header TABLE DIV.header DIV {
    height: 22px;
    float: left;
}

DIV.gallery-header DIV.rotate-left {
    background: url(gallery/rotate-left.gif) no-repeat;
    width: 22px;
    cursor: pointer;

}

DIV.gallery-header DIV.rotate-right {
    background: url(gallery/rotate-right.gif) no-repeat;
    width: 22px;
    cursor: pointer;
}

DIV.gallery-header TABLE TD.prev,
DIV.gallery-header TABLE TD.next {
    width: 100px;
}

DIV.gallery-header TABLE TD.close {
    width: 22px;
}

DIV.gallery-header TABLE DIV.fileNo {
    padding-top: 2px;
    color: #fff;
}

DIV.gallery-header A {
    color: #fff;
    display: block;
    text-decoration: none;
}

DIV.gallery-header A.prev {
    background: url(gallery/previous.gif) no-repeat;
    padding-left: 26px;
    padding-top: 2px;
    height: 22px;
    text-align: left;
}

DIV.gallery-header A.next {
    background: url(gallery/next.gif) no-repeat 100% top;
    padding-right: 26px;
    padding-top: 2px;
    height: 22px;
    margin-right: 1px;
    text-align: right;

}

DIV.gallery-header A.close {
    background: url(gallery/close.gif) no-repeat 0 0;
}

#pictureContainer {
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}


.print-view-image {
    position: relative;
}


.print-view-image .buttons {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

.print-view-image:hover .buttons {
    display: block;
}

/* map */
SPAN.map-messages,
A.map-messages {
    background-color: #F6F6EA;
    padding: 2px;
}

/* content */

DIV.modalpopup-content {
    min-height: 100px;
    padding: 5px 15px 15px;
}
DIV.modalpopup-content-a {
    height: 458px;
    overflow: auto;
}
DIV.modalpopup-content-a-inner {
    width: 700px;
}
DIV.modalpopup-content DIV.message {
    width: 100%;
    margin: 1em 0 0;
}

/* footer */

DIV.modalpopup-footer DIV.tools {
    position: static;
    /*width: 750px !important;*/
    height: 50px;
    overflow: hidden;
    background: url(bg03.png) repeat-x 0 0;
}
DIV.modalpopup-footer DIV.tools DIV.a {
    width: auto !important;
    margin: 0;
    padding: 6px 15px;
}
DIV.modalpopup-footer DIV.tools UL.secondary {
    width: 150px !important;
}

/* =IE fixes
-------------------------------------------------- */
* html #tools {
    position: absolute;
    bottom: auto;
    top: expression( ( 0 - tools.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
* html #overlay,
* html #loadingOverlay { /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
* html #modalpopup-wrap { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
* html #loading { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
* html DIV.form TABLE.form TH,
* html DIV.form TABLE.form TD {
    padding-bottom: 0;
}
*+html DIV.form TABLE.form TH,
*+html DIV.form TABLE.form TD {
    padding-bottom: 0;
}
* HTML HTML,
* HTML BODY {
    height: 100%;
}
*+HTML DIV.modalpopup-content-a {
    height: 510px;
    overflow-y: auto;
    overflow-x: hidden;
}
* HTML DIV.modalpopup-content-a {
    height: 510px;
    overflow-y: auto;
    overflow-x: hidden;
}
* HTML DIV.modalpopup-content-a {
    margin-right: 18px;
}
* HTML #nav UL A {
    margin-top: -1px !important;
}
*+HTML #nav UL A {
    margin-top: -1px !important;
}

INS {
    background-color: #C9FCC7;
}

del {
    background-color: #FCC7C7;
}

.news-page-container {
    display: flex;
    width: 100%;
}

.news-sidebar {
    width: 12.5%;
    padding-right: 20px;
}

.news-articles {
    width: 87.5%;
}

.news-load-more {
    text-align: center;
    margin-top: 10px;
}

.news-article-date {
    color: grey;
    font-size: 11px;
    margin-bottom: 5px;
    display: block;
}

.news-article-comment-reply-indent {
    margin-left: 24px;
}

.news-article-comment-row {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.news-article-comment-reply-row {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-left: 24px;
}

.news-article-comment-send-icon {
    cursor: pointer;
    margin-bottom: -5px;
}

.news-article-comments {
    display: flex;
    justify-content: start;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.news-article-comments a,
.news-article-comments button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;

    border-radius: 999px;
    border: none;
    background-color: #007550;
    color: #ffffff;

    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.news-article-comments a:hover,
.news-article-comments button:hover {
    background-color: #006646;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.news-article-comments a:active,
.news-article-comments button:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.news-article-liked a,
.news-article-liked button {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #b5b5b5;
    color: #ffffff;
    box-shadow: none;
    opacity: 0.7;
}

.news-article-liked a:hover,
.news-article-liked button:hover,
.news-article-liked a:active,
.news-article-liked button:active {
    background-color: #b5b5b5;
    transform: none;
    box-shadow: none;
}

.news-comment-author {
    color: #007550;
    text-decoration: underline;
}