@import url(bootstrap-custom-5.2.2.css);
@import url(responsive-vertical-tabs.css);

:root {
    --bs-body-font-size: 0.875rem;
    /* switch link colors */
    --bs-link-color: #769e3c;
    --bs-link-hover-color: #93c54b;
    
    /* my table style */
    /* --my-timesheet-header-background-color: #5183ad; */
    --my-timesheet-header-background-color: #41698a;
    --my-timesheet-header-color: white;

    /*
    target: 
    --my-timesheet-header-background-color: #d2dfea;
    --my-timesheet-header-color: #555555; ? #333333
    */
}

/* source-sans-3-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v18-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v18-latin-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/source-sans-3-v18-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-200italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/source-sans-3-v18-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/source-sans-3-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-300italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/source-sans-3-v18-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/* source-sans-3-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v18-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v18-latin-600italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/source-sans-3-v18-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/source-sans-3-v18-latin-700italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.my-homepage-header {
    background: url("../images/blue-gradient.svg") center center / cover no-repeat;
    color: white;
}

.modal-content {
    border-radius: 0.3rem;
}

.spinner-border-sm {
    --bs-spinner-border-width: 0.15em;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-item .nav-link.active {
    color: var(--bs-dropdown-link-color)
}

/* hack for enhanced project pick and mobile view: 
    we set the collapsed button to transparent color
*/
.accordion-button {
    background-color: rgba(0, 0, 0, 0);
}

/* @media (min-width: 1320px) {
    .container{
        max-width: 1140px;
    }
}*/


.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

/* fix bug in close X button */
.btn-close {
    padding: 1em 1em;
}

/*
@media (min-width: 992px) {
    .container{
        max-width: 960px;
    }
}
*/

@media (min-width: 1200px) {
    .container{
        max-width: 1320px;
    }
}

/****************************************************
    START old FormStyleSheet 
****************************************************/

table.layout-only {
    border-style: none;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
}

table.layout-only-strict, table.layout-only-strict td {
    border-style: none;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
}

.mytitle-container {
    margin-top: 0.9375rem; /* 15px; */
}

.title{
    font-size: 1.4375rem; /* 23px; */
    text-decoration: none;
    text-align: left;
    margin-top: 0.5rem; /* 8px; */
}

.subtitle {
    font-size: 0.9375rem; /* 15px; */
}

.subtitle-link {
    font-size: 0.9375rem; /* 15px; */
    margin-top :  7px;
    margin-bottom : 0.9375rem; /* 15px; */
}

div.boxrow {
    border-bottom: 1px solid #DDDDDD;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 1.0rem;
}

.redstar{
    font-size: 12px;
    color: #CC0000;
    text-align: left;

}

.redstartext{
    font-size: 10px;
    color: #696969;
}

.mailtolink {
    text-decoration: none;
}

.my-timesheet-table-header {
    background-color: var(--my-timesheet-header-background-color);
    color: var(--my-timesheet-header-color);
}

/***************************************************/
/* START time sheet */

td.outlinetd {
    border : 0px;
    padding : 3px;
    vertical-align : middle;
    empty-cells: show;
}

td.graylinetd {
    border-top: 1px solid Silver;
    line-height : 1px;
    padding : 0px;
    margin : 0px;
    empty-cells: show;
}

tr.stripe1TR{
    /*background-color:#F6F6F6;*/
    background-color:#f3f3f3;
    empty-cells: show;
}

tr.stripe2TR{
    background-color: #FFFFFF;
    empty-cells: show;
}

.grayBox{
    background: #F6F6F6;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    text-align: left;
    margin: 3px;
    padding: 3px;
    padding-left: 6px;
}

/* END time sheet */
/***************************************************/

/***************************************************/
/* START paging */

.pages {
    margin-top: 15px;
}

.page {
    display: inline-block;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    padding: 5px 7px 5px 7px;
    margin-left: 5px;
    margin-right: 1px;
}

.pages .selection {
    cursor: inherit;
    color: white;
    border-color: transparent;
    background-color: rgb(62, 65, 72);
}

.pages .nonselection:hover {
    background-color: #EEEEEE;
}

.page:focus {
    border-color: transparent;
    background-color: #f2f2f2;
}

/* START enhanced project pick paging */
.pickpager {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border-style: none;
    border-width: 0px;
    border-color: transparent;
    background-color: transparent;
    background-color: #d4d4d4 !important;
    outline: none;
    margin-left: 5px;
    margin-right: 1px;
}

.pickpager:disabled {
    background-color: #e5e5e5 !important;
}

.pickpager:active {
    background-color: #d4d4d4 !important;
    background-color: #d4d4d4 !important;
}

.pagefirst {
    background:url("../images/chevron-double-left.svg") no-repeat center center;
    background-size: 12px 12px;
}
.pagefirst:disabled {
    background:url("../images/chevron-double-left-disabled.svg") no-repeat center center;
    background-size: 12px 12px;
    color: darkgray;
}

.pagenext {
    background:url("../images/chevron-left.svg") no-repeat center center;
    background-size: 12px 12px;
}
.pagenext:disabled {
    background:url("../images/chevron-left-disabled.svg") no-repeat center center;
    background-size: 12px 12px;
}

.pageprevious {
    background:url("../images/chevron-right.svg") no-repeat center center;
    background-size: 12px 12px;
}
.pageprevious:disabled {
    background:url("../images/chevron-right-disabled.svg") no-repeat center center;
    background-size: 12px 12px;
}

.pagelast {
    background:url("../images/chevron-double-right.svg") no-repeat center center;
    background-size: 12px 12px;
}
.pagelast:disabled {
    background:url("../images/chevron-double-right-disabled.svg") no-repeat center center;
    background-size: 12px 12px;
}
/* END enhanced project pick paging */
/* END paging */
/***************************************************/

/***************************************************/
/* START form elements */

input, select, textarea, .inputbox {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: white; /* Firefox */

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.mybuttonstyle {
    border-radius: 3px 3px 3px 3px;
    cursor: default;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;*/
    color: #333333;
    color: rgb(36, 41, 47);
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;

    /* Browser hack! This is for everyone: */
    min-width: 90px;
    width: auto;
    overflow: visible;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.mybuttonstyle:hover {
    border:1px solid #AAAAAA;
    background-color: #F2F2F2;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
}

.mybuttonstyle:focus, .mybuttonstyle:active {
    /* sandstone style */
    border-color: #99aec4;
    outline: 0;
    border-radius: 0.125rem;
    /* box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25); */
}

.mybuttonstyle:disabled {
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: #B5B5B5;
    /* cursor: not-allowed; */
    cursor: default;
}

.mybuttonstyleplus {
    background-color: #82b53a;
    border-color: #77A535;
    color: white;
    height: 30px;
    min-width: 55px;
    padding: 0px 12px;
    /* background: white url("../images/plus-white.svg") no-repeat; */
}

.mybuttonstyleplus:hover {
    background-color: #93c54b;
    border-color: #85B83C;
}

.mybuttonstyledelete {
    /* background-color: rgb(108, 117, 125);
    border-color: #6c757d; 
    color: white; */
    height: 30px;
    min-width: 55px;
}

.mybuttonstyledelete:hover {
    /* background-color: #5c636a;
    border-color: #565e64; */
}

.mybuttonstyleGreybox {
    background-color: #e5e5e5;
    border: 1px solid #c4c4c4;
}

.mybuttonstyleGreybox:hover {
    border:1px solid #a0a0a0;
    background-color: #e8e8e8;
}

.mygreenbutton {
    background-color: #82b53a;
    border-color: #77A535;
    border-radius: 4px;
    color: white;
}

.mygreenbutton:hover {
    background-color: #93c54b;
    border-color: #85B83C;
}

.mydarkbluebutton {
    background-color: rgb(50, 93, 136);
    border-color: #2d547b;
    border-radius: 4px;
    color: white;
}

.mydarkbluebutton:hover {
    background-color: #366695;
    border-color: #325e89;
}

/* the date navigation buttons are smaller */
.mysmallbuttonstyle {
    /* font-size: 11px; */
    font-weight: bold;
    /* padding: 5px 8px; */
}

.myybuttonstyle {
    cursor: default;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;*/
    color: #333333;

    font-size: 11px;
    font-weight: bold;
    padding: 0px;

    /* Browser hack! This is for everyone: */
    /* 
    TODO: remove
    width: 0px;
    height: 0px;
    margin: 0px; */
}

.slightlyDarkenButton {
    background-color: #E8E8E8;
}

.slightlyDarkenButton:hover, .slightlyDarkenButton:focus {
    background-color: #EEEEEE;
}

.myInputTextstyle {
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-color : #B6B6B6;
    margin: 3px;
    margin-left: 0px;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.myInputTextstyle:focus, .myInputTextstyle:active {
    border-color: #99aec4;
    outline: 0;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);

    /*
    blue color sample ... 
    background-color: #EBF2FC;
    border: 1px solid #CDDCF9;
    */
}

.myInputSecretstyle {
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-color : #B6B6B6;
    margin: 3px;
    margin-left: 0px;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.myInputSecretstyle:focus, .myInputSecretstyle:active {
    border-color: #99aec4;
    outline: 0;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);
}

.mySelectMenustyle {
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-color : #B6B6B6;
    margin: 3px;
    margin-left: 0px;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.mySelectMenustyle:focus, .mySelectMenustyle:active {
    border-color: #99aec4;
    outline: 0;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);
}

.myCheckboxstyle {
    border-style: none;
    background: transparent;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.myRadiostyle input, .myRadiostyle input:checked, .myRadiostyle input:active {
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 5px;
    margin-right: 5px;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

/* we must overwrite the system radio button */
.myRadiostyle input[type='radio']:after {
    width: 15px;
    height: 15px;
    content: '';
    display: inline-block;
    visibility: visible;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.myRadiostyle input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: #325d88;
    border-color: #325d88;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.myRadiostyle input[type='radio']:focus:after,
.myRadiostyle input[type='radio']:active:after{
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-color: #99aec4;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);
}

.myRadiostyle input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.3;
}

.myRadiostyle input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    cursor: default;
    opacity: 0.3;
}

.myTextareastyle {
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-color : #B6B6B6;
    /*text-align : right;*/
    margin: 3px;
    margin-left: 0px;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.myTextareastyle:focus, .myTextareastyle:active {
    border-color: #99aec4;
    outline: 0;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);
}

/* checkbox and radio from sandstone theme - renamed */

.myform-check {
    display: block;
    min-height: 1.1382rem;
    padding-left: 1.5em;
    /*me margin-top: 0.125rem;
    margin-bottom: 0.125rem;*/
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}
.myform-check .myform-check-input {
    float: left;
    /*me margin-left: -1.5em; */
    margin-left: -1.5em;
}

.myform-check-reverse {
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
}
.myform-check-reverse .myform-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

.myform-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    /*me */
    margin-right: 0.5em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}
.myform-check-input[type=checkbox] {
    border-radius: 0.25em;
}
.myform-check-input[type=radio] {
    border-radius: 50%;
}
.myform-check-input:active {
    filter: brightness(90%);
}
.myform-check-input:focus {
    border-color: #99aec4;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(50, 93, 136, 0.25);
}
.myform-check-input:checked {
    background-color: #325d88;
    border-color: #325d88;
}
.myform-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.myform-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.myform-check-input[type=checkbox]:indeterminate {
    background-color: #325d88;
    border-color: #325d88;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.myform-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}
.myform-check-input[disabled] ~ .form-check-label, .myform-check-input:disabled ~ .form-check-label {
    cursor: default;
    opacity: 0.5;
}

/* checkbox from sandstone theme - renamed */

/* adjust padding for stacked labels */
mycol-form-label {
    padding-bottom: 3px;
    white-space: nowrap !important;
}

/* END form elements */
/***************************************************/


/***************************************************/
/* START animations */

@keyframes myScaleY {
    from {
        transform: scaleY(0.5);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes popIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* END animations */
/***************************************************/


/***************************************************/
/* START message styles */

.MyInputErrorStyle {
    /* color: indianred; */
    color: darkgoldenrod;
}

.MyInputWarnStyle {
    color: darkgoldenrod;
}

.MyInputInfoStyle {
    /* color: dimgray; */
    color: #5a5a5a;
}

/* this style is missused for Success-messages */
.MyInputFatalStyle {
    color: darkgreen;
}

/* animation for message styles */
.w3-animate-opacity{
    animation:opac 0.75s;
}
@keyframes opac{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}

/* this style is missused for Success-messages */
.MyInputFatalStyle2 {
    /* color: darkgreen; */
    /* green */
    padding: 8px 14px 8px 14px;
    margin: 0px;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 8px;
    color: #333;
    /* border: 1px solid #e8f8e6; */
    border: 1px solid rgb(237, 243, 230);
    ;
    /* background-color: #e8f8e6; */
    background-color: rgb(237, 243, 230);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    text-align: left;
}

.MyInputErrorStyle2 {
    /*color: darkgoldenrod;*/
    /* pink */
    padding: 8px 14px 8px 14px;
    margin: 0px;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 8px;
    border: 1px solid #fde7e9;
    color: #333;
    /* background-color:#fde7e9; magenta */
    background-color:#FCF0F1; /* magenta pastel */
    /* background-color:#FFF2E6; apricot */
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    text-align: left;
}

.MyInputWarnStyle2 {
    /*color: darkgoldenrod;*/
    /* yellow */
    padding: 8px 14px 8px 14px;
    margin: 0px;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 8px;
    border: 1px solid rgb(255, 252, 222);
    color: #333;
    background-color: rgb(255, 252, 222);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    text-align: left;
}

.MyInputInfoStyle2 {
    /*color: #5a5a5a;*/

    padding: 8px 14px 8px 14px;
    margin: 0px;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 8px;
    color: #333;
    /* sky blue 
    border: 1px solid rgb(209, 225, 246);
    background-color: rgb(209, 225, 246);
    */
    /* gray */
    border: 1px solid #FAF9F8;
    background-color: #FAF9F8;
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
    text-align: left;
}

/* END message styles */
/***************************************************/

/***************************************************/
/* START time clock */

.punchinbutton, .punchinbuttonTolerance {
    border:1px solid #8cae6a;
    border-radius: 4px 4px 4px 4px;
    padding: 3px 6px;
    width: 224px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    /*background:url("images/gradblau.gif") repeat-x scroll center #515662;*/
    background:none repeat scroll 0 0 #a8cc73;
    /* border:1px solid green; */
    color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;

}

.punchinbutton:hover, .punchinbutton:focus, .punchinbuttonTolerance:hover, .punchinbuttonTolerance:focus {
    border:1px solid #668447;
    /* box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, 0.15);*/
    box-shadow: none;
    /* width: 190px; */
    background:none repeat scroll 0 0 #9fc765;
    color:white;
}

.punchinbuttonTolerance {
    width: 115px;
}

.punchoutbutton, .punchoutbuttonTolerance {
    border:1px solid #e1791d;
    border-radius: 4px 4px 4px 4px;
    padding: 3px 6px;
    width: 224px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    /*background:url("images/gradred.gif") repeat-x scroll center #cc6600;*/
    background:none repeat scroll 0 0 #e68e40;
    color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.punchoutbutton:hover, .punchoutbutton:focus, .punchoutbuttonTolerance:hover, .punchoutbuttonTolerance:focus  {
    border:1px solid #be6617;
    box-shadow: none;
    /* box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, 0.15);*/
    background:none repeat scroll 0 0 #e2791c;
    color:white;
}

.punchoutbuttonTolerance {
    width: 113px;
}

.timeclocklist_weekday
{
    font-size: 20px;
    /*color: #003399;*/
    color: #768ec9;
}

.timeclocklist_timentry_closed
{
    background-color: transparent;
}

.timeclocklist_timentry_open
{
    /* .recentlyChanged and (former) .templateHeader are using this color also */
    background-color: #eaf0fa;
    /* background-color: rgb(237, 244, 252); PSK */
}

/* END time clock  */
/***************************************************/

/***************************************************/
/* START time sheet */

.styleHoliday {
    /*font-weight: bold;*/
    color: #f56d71;
    border-bottom: 1px;
    border-bottom-style: dotted;
    /* border-bottom-style: dashed; */
    /* text-decoration: underline; */
    /* a holiday has a tool-tip-description: */
    cursor: help;
}
.colorSunday {
    color: #f56d71;
}
.colorWorkday {
    color: #768ec9;
}
.colorOtherDay {
    color: #777777;
}

.recentlyChanged {
    /* light blue
    background-color: #dae5f6;*/
    /* pale green */
    /* background-color: #ecf9eb; */
    background-color: rgb(237, 243, 230);
}

/* END time sheet */
/***************************************************/

/***************************************************/
/* START enhanced project picker */

.my-enhanced-search-button, .my-enhanced-search-button:hover, .my-enhanced-search-button:focus {
    width: 28px;
    height: 29px;
    margin: 3px;
    margin-left: 0px;
    background-color: #EEEEEE !important;
    outline: none;
    box-shadow: none;
    border: rgb(182, 182, 182) solid 1px;
    border-left: none;
    background: url("../../jakarta.faces.resource/images/search.svg") no-repeat;
    background-position: top 6px right 4px;
}

.my-enhanced-search-button:focus {
    box-shadow: 0 0 0 0.125rem rgba(50, 93, 136, 0.25);
    border-radius: 2px;
    border-left: none;
}

.my-enhanced-search-button_smart_launcher, .my-enhanced-search-button_smart_launcher:hover, .my-enhanced-search-button_smart_launcher:focus {
    width: 34px;
    height: 36px;
    margin: 0px;
    background-color: #EEEEEE !important;
    outline: none;
    box-shadow: none;
    border: rgb(182, 182, 182) solid 1px;
    border-left: none;
    background: url("../../jakarta.faces.resource/images/search.svg") no-repeat;
    background-size: 25px 25px;
    background-position: top 4px right 3px;
}

.my-enhanced-search-button_smart_launcher:focus {
    box-shadow: 0 0 0 4px rgb(205, 211, 217);
    border-left: none;
}

/* enhanced project picker */
/***************************************************/

/***************************************************/
/* START my tooltip */

/* Tooltip container */
.mytooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
}

/* Tooltip text */
.mytooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted #ccc; */
    color: #006080;
}

.mytooltip .mytooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.mytooltip:hover .mytooltiptext {
    visibility: visible;
    opacity: 1;
}

.mytooltip-right {
    top: -5px;
    left: 125%;
}

.mytooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.mytooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -60px;
}

.mytooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.mytooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.mytooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.mytooltip-left {
    top: -5px;
    bottom:auto;
    right: 128%;
}
.mytooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

/* END my tooltip */
/***************************************************/

/* info_bubble START */

.info_bubble_container {
    position: relative;
}

.info_bubble {
    background: url("../images/bg_info_bubble_peak_333333.png") no-repeat scroll 12px bottom transparent;
    bottom: 15px;
    left: 1px;
    position: absolute;
    z-index: 1000;
}

.info_bubble_box {
    background: none repeat scroll 0 0 #333333;
    color: whitesmoke;
    text-align: left;
    /* white-space: nowrap; */
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 11px;
    padding: 6px;
    z-index: 1000;
}

.info_bubble {
    visibility: hidden;
}

.info_bubble_container:hover .info_bubble {
    visibility: visible;
}

/* info_bubble END */

/* balloon info START */
.info_balloon {
    position: relative;
    background-color: white;
    border: #d0d7de 1px solid;
    border-radius: 7px 7px 7px 7px;
    box-shadow:rgba(140, 149, 159, 0.2) 0px 8px 24px 0px;
}

.info_balloon_text, .info_balloon_text_header {
    font-size: 14px;
    /* line-height: 18px; */
    color: #555555;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.info_balloon_text_header {
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
}

.close_icon {
    opacity: 0.8;
}

/* no more in use? */
.close_icon:hover, .close_icon:active {
    opacity: 1;
}

.mysvg_icon {
    fill: #333333;
}

/* no more in use? */
.mysvg_icon:hover, .mysvg_icon:active {
    fill: #555555;
}


/* balloon info END */




/***************************************************
    END old FormStyleSheet 
****************************************************/