/*a:link {
    text-decoration: underline;
}*/
.input_title {
    display: inline-block;
    padding: 2px 10px;
    width: 230px;
    color: #333;
}
.input_content {
    display: inline-block;
}
.number-in-cell {
    text-align: right;
}
#gridData tr th {
    font-weight: bold;
    text-align: center;
}
#submitFile {
    padding-left: 6cm;
}

/* Overrides the default icon positioning in Kendo buttons/icons */
a[role="button"] .k-icon {
    margin-left: auto;
    margin-right: auto;
}
.k-icon.k-i-pdf, .k-icon.k-i-excel {
    margin-left: auto;
    margin-right: auto;
}

.k-state-selected > td > div > .positive_field {
    color: white;
}

/*used in BillableHeadsBySite*/
.percentage_field {
    color: forestgreen;
}
.message_field{
    color: red;
}

/* used on Project Capcity Review page*/
.negative_field {
    color: red;
    font-weight: bolder;
}
.positive_field {
    color: forestgreen;
    font-weight: bolder;
}
.header_field {
    color: black;
    font-weight: bolder;
}
.total_field {
    font-weight: bolder;
}
/*.k-grid tr {
    height: 28px;
}*/
.save-button {
    width: 100px
}

/*used for title of page or grid*/
.j-title {
    /*font-size:large;
    font-weight:500;*/
    text-align: center;
    margin-bottom: 0.5em;
    margin-top: 0.5em
}
.sub-title {
    font-weight:500;
    text-align: center;
    font-size:medium;
    margin-bottom: 0.5em;
    margin-top: 0.5em
}

/*bootstrap divs used as labels for widgets*/
/*.div-label {
    font-weight: bold;
}*/
.paddingTop {
    padding-top: 10px !important;
}
/*a #draftUpload {
    width: 900px
}*/

/*for aligning label text in center of widget in bootstrap 3*/
.v-align-center {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
} 

/* sets standard width between bootstrap row */
.row {
    margin-top: 0.25em;
}

/*used in ProjectAssingmentResources*/
.allocationMet {
    color: green;
}
.allocationOverUnder {
    color: red;
}

/*used in fix time entrires page*/
.neworchange {
    display: inline-block;
}
.old_field {
    background-color: #FFC6C6; 
}
.new_field {
    background-color: #BFEAD5;
}
.hideMe {
    display: none;
}

/*popup editor css*/
.k-edit-form-container {
    width: 700px;
}
.k-popup-edit-form .k-edit-label {
    width: 20%;
    text-align: left;
}
/*.k-popup-edit-form .k-edit-field {
    width: 70%;
}
.k-popup-edit-form .k-edit-field > .k-textbox,
.k-popup-edit-form .k-edit-field > .k-widget:not(.k-tooltip) {
    width: 80%;
}*/
/*popup editor css*/

/*bootstrap grid text alingment css*/
.text-nowrap {
    white-space: nowrap;
}
/* Setting margins between div */
.div-margins {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* This puts a border around the div for developing */
.div-border {
    border: #cdcdcd medium solid;
}

.requst_top {
    margin: 10px 30px;
    border: 1px solid #ccc;
    padding: 10px;
}

/*Sets min-Width to fit content*/
.j-min-width-fit {
    min-width: 0 !important;
}
/* https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
 below helpers can be used to align div content responsive-ably.
@media min-width are set to bootstrap 3 documentation. 
we might want to add some @media defaults for other popular elements.
*/
.text-xs-left {
    text-align: left;
}
.text-xs-right {
    text-align: right;
}
.text-xs-center {
    text-align: center;
}
.text-xs-justify {
    text-align: justify;
}
@media (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }
    .text-sm-right {
        text-align: right;
    }
    .text-sm-center {
        text-align: center;
    }
    .text-sm-justify {
        text-align: justify;
    }
}
@media (min-width: 992px) {
    .text-md-left {
        text-align: left;
    }
    .text-md-right {
        text-align: right;
    }
    .text-md-center {
        text-align: center;
    }
    .text-md-justify {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left;
    }
    .text-lg-right {
        text-align: right;
    }
    .text-lg-center {
        text-align: center;
    }
    .text-lg-justify {
        text-align: justify;
    }
}

/******* Announcements Styles *********/
.announcementBanner {
    border-radius: 5px;
    margin: 0px 100px 10px;
    text-align: left;
    max-height: 500px;
}
#announcementModal .announcementBanner {
    margin: 0px;
    text-align: left;
}
.announcementBanner .k-scrollview-next,
.announcementBanner .k-scrollview-prev {
    color: #337AB7;
}
.announcementBanner .k-scrollview-next span,
.announcementBanner .k-scrollview-prev span {
    font-size: 2.5em;
}
.announcementBanner .k-scrollview-next:hover,
.announcementBanner .k-scrollview-prev:hover {
    color: #2E79B4;
    text-decoration: none;
}
.announcement {
    white-space: normal;
    max-height: 500px;
    min-height: 250px;
}
.announcementTitle {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 40px 8px 10px;
}
.announcementBody {
    max-height: 170px;
    overflow-y: auto;
    padding: 10px 10px 10px 40px;
    margin-right: 30px;
}
.announcementFooter {
    padding: 5px 0px 5px 10px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
label.required:after {
    content: "*";
    color: red;
}

@keyframes border-pulsate {
    0% {
        border-color: currentColor;
    }

    50% {
        border-color: rgba(255, 36, 0, 1);
    }

    100% {
        border-color: currentColor;
    }
}

@keyframes text-pulsate {
    0% {
        color: currentColor;
    }

    50% {
        color: rgba(255, 36, 0, 1);
    }

    100% {
        color: currentColor;
    }
}
@keyframes noRecords-pulsate {
    0% {
        color: currentColor;
        border-color: currentColor;
    }

    50% {
        color: rgba(255, 36, 0, 1);
        border-color: rgba(255, 36, 0, 1);
    }

    100% {
        color: currentColor;
        border-color: currentColor;
    }
}

.highlight{
    animation: text-pulsate 2s infinite;
}
.highlightBorder {
    animation: border-pulsate 2s infinite;
}
.highlightNoRecords {
    animation: noRecords-pulsate 2s infinite;
    border: 3px solid;
    font-size: large;
}

a[target=_blank]::after {
    font-family: "WebComponentsIcons";
    content: "\e134";
    font-size: .7em;
}

/* SUPPORT WIDGET STYLES */
#supportWidgetButton {
    z-index: 999;
    font-size: 14px;
}
#supportWidgetButton .k-icon {
    font-size: 20px;
}
#supportWidgetButton .k-fab-text {
    display: none;
}
#supportWidgetWindow .k-radio-label {
padding-left: 5px;
}

.k-toolbar .k-toolbar-overflow-button{
    margin-inline-start: inherit;
}
/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Material-Symbol-Outlined.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/*Fix the padding issue with the k-body and panel*/
.k-block, .k-panel {
    padding: 4px 8px;
}

/*Styles for Material Symbols from Google*/
body {
    --google-font-color-materialiconstwotone: none;
}

.font-effect-anaglyph {
    text-shadow: -0.06em 0 red, 0.06em 0 cyan;
}

.font-effect-emboss {
    text-shadow: 0px 1px 1px #fff, 0 -1px 1px #000;
    color: #ddd;
}

.font-effect-fire {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70, 0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
    color: #ffe;
}

@-webkit-keyframes font-effect-fire-animation-keyframes {
    0% {
        text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
    }

    25% {
        text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.05em 0.17em #FE0, 0.04em -0.12em 0.22em #FC0, 0.04em -0.13em 0.27em #F90, 0.05em -0.23em 0.33em #F70, 0.07em -0.28em 0.47em #F70, 0.1em -0.3em 0.8em #F50, 0.1em -0.3em 0.9em #F40;
    }

    50% {
        text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
    }

    75% {
        text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.06em 0.18em #FE0, 0.05em -0.15em 0.23em #FC0, 0.05em -0.15em 0.3em #F90, 0.07em -0.25em 0.4em #F70, 0.09em -0.3em 0.5em #F70, 0.1em -0.3em 0.9em #F50, 0.1em -0.3em 1.0em #F40;
    }

    100% {
        text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
    }
}

.font-effect-fire-animation {
    -webkit-animation-duration: 0.8s;
    -webkit-animation-name: font-effect-fire-animation-keyframes;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    color: #ffe;
}


.font-effect-neon {
    text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.3em #fff, 0 0 0.4em #f7f,0 0 0.6em #f0f, 0 0 0.8em #f0f, 0 0 1.0em #f0f, 0 0 1.2em #f0f;
    color: #fff;
}

.font-effect-shadow-multiple {
    text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
    -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
}

.font-effect-outline {
    text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
    color: #fff;
}

.font-effect-3d {
    text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;
    color: #fff;
}

.font-effect-3d-float {
    text-shadow: 0 0.032em 0 #b0b0b0, 0px 0.15em 0.11em rgba(0,0,0,0.15), 0px 0.25em 0.021em rgba(0,0,0,0.1), 0px 0.32em 0.32em rgba(0,0,0,0.1);
    color: #fff;
}

/* Overwriting the position of the Kendo Toolbar items by default so that the toolbar buttons are in the correct order. */
.k-toolbar button[data-role="pdf"]{
    order: 99 !important;
}

.k-toolbar button[data-role="excel"] {
    order: 98 !important;
}

.k-toolbar button[data-role="expandall"] {
    order: 97 !important;
}

.k-toolbar button[data-role="collapseall"] {
    order: 96 !important;
    margin-left: auto !important;
}

.k-toolbar button[data-role="collapseall"] {
    order: 96 !important;
    margin-left: auto !important;
}

/* Parity Style for Kendo's deprecation of font-icons */
.k-icon {
    width: 1em;
    height: 1em;
    outline: 0;
    font-size: 16px;
    font-family: "WebComponentsIcons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}