@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2'), url('flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

body {
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding: 20px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.user-profile {
    margin-right: 15px;
    margin-top: 6px;
}

.master-layout-content {
    margin-top: 64px;
    font-family: "Proxima Nova", Arial, sans-serif !important;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select {
    max-width: 280px;
}

.less-padding a {
    padding-right: 8px !important;
    padding-left: 8px !important;
    /*border-top-color: black !important;
    border-right-color: black !important;
    border-left-color: black !important; 
    padding-top: 5px  !important;
    padding-bottom: 5px !important;*/
}

@-webkit-keyframes YellowHighlightAnimation {
    0% {
        background-color: Yellow;
    }

    100% {
        background-color: White;
    }
}

@-moz-keyframes YellowHighlightAnimation {
    0% {
        background-color: Yellow;
    }

    100% {
        background-color: White;
    }
}

@-o-keyframes YellowHighlightAnimation {
    0% {
        background-color: Yellow;
    }

    100% {
        background-color: White;
    }
}

@keyframes YellowHighlightAnimation {
    0% {
        background-color: Yellow;
    }

    100% {
        background-color: White;
    }
}

.yellow-highlight.ng-enter {
    -webkit-animation: YellowHighlightAnimation 2s; /* Safari 4+ */
    -moz-animation: YellowHighlightAnimation 2s; /* Fx 5+ */
    -o-animation: YellowHighlightAnimation 2s; /* Opera 12+ */
    animation: YellowHighlightAnimation 2s; /* IE 10+, Fx 29+ */
}



@-webkit-keyframes GreenHighlightAnimation {
    0% {
        background-color: lightgreen;
    }

    100% {
        background-color: White;
    }
}

@-moz-keyframes GreenHighlightAnimation {
    0% {
        background-color: lightgreen;
    }

    100% {
        background-color: White;
    }
}

@-o-keyframes GreenHighlightAnimation {
    0% {
        background-color: lightgreen;
    }

    100% {
        background-color: White;
    }
}

@keyframes GreenHighlightAnimation {
    0% {
        background-color: lightgreen;
    }

    100% {
        background-color: White;
    }
}

.green-highlight.ng-enter {
    -webkit-animation: GreenHighlightAnimation 2s; /* Safari 4+ */
    -moz-animation: GreenHighlightAnimation 2s; /* Fx 5+ */
    -o-animation: GreenHighlightAnimation 2s; /* Opera 12+ */
    animation: GreenHighlightAnimation 2s; /* IE 10+, Fx 29+ */
}

.pull-top_right {
    position: absolute;
    top: 0;
    right: 0;
    padding: inherit;
    margin-right: 25px;
    margin-top: 15px;
}

*::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #428bca;
}

*:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #428bca;
    opacity: 1;
}

*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #428bca;
    opacity: 1;
}

*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #428bca;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.tvcenter {
    margin-top: 6px;
    padding-right: 0;
}

.select-view {
    padding: 0;
}

.HtmlTooltipParent {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.HtmlTooltip {
    visibility: hidden;
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: -20px;
    left: 110%;
    color: #fff;
    padding: 5px 15px;
    position: relative;
    z-index: 1000;
    white-space: normal;
}

    .HtmlTooltip::before {
        content: "";
        position: absolute;
        top: 13px;
        left: -10px;
        margin-left: -5px;
        margin-top: -5px;
        border-width: 5px 10px 5px 5px;
        border-style: solid;
        border-color: transparent #555 transparent transparent;
    }

.lineitems-dropdown {
    width: 100%;
    max-width: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.lineitems-countrylogo {
    height: 35px;
    top: -20px;
}

.panel-default > .panel-heading-stickybar {
    background-color: #FFF;
    color: #000;
    padding-bottom: 5px;
}

/*border-color:#FFF;*/
/*Adding classes for loading sections*/

.data-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
    background-color: rgba(230,230,230,0.3);
}

.img-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40px;
}

/*#region Changes for new UI Next #GRAN-1857*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=checkbox] {
    opacity: 0;
    float: left;
    margin-bottom: 24px;
}

    input[type=checkbox].empty-label {
        margin-bottom: 0px;
        float: none;
    }

    input[type=checkbox] + label {
        margin: 0 0 0 16px;
        position: absolute;
        font-size: 12px;
        float: left;
        font-weight: normal;
    }


        input[type=checkbox] + label::before {
            content: ' ';
            position: absolute;
            left: -28px;
            top: -3px;
            width: 16px;
            height: 16px;
            display: block;
            background: white;
            border: 1px solid rgb(0, 170, 231);
        }

    input[type=checkbox].empty-label + label::before {
        content: ' ';
        position: absolute;
        left: -28px;
        top: 2px;
        width: 16px;
        height: 16px;
        display: block;
        background: white;
        border: 1px solid rgb(0, 170, 231);
    }

    input[type=checkbox][disabled].empty-label + label::before {
        border: 1px solid rgb(221, 221, 221);
        cursor: not-allowed;
    }

    input[type=checkbox][disabled]:checked + label::after {
        cursor: not-allowed;
        color: rgb(0, 170, 231);
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(221, 221, 221);
    }

    input[type=checkbox][disabled] + label {
        /*color: rgb(221, 221, 221);*/
    }

    input[type=checkbox] + label::after {
        position: absolute;
        left: -28px;
        top: -3px;
        width: 16px;
        height: 16px;
        display: block;
        z-index: 1;
        content: '\f00c';
        font-family: 'FontAwesome';
        color: rgb(255, 255, 255);
        background-color: rgb(0, 170, 231);
        -ms-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        transition: all .3s ease;
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    input[type=checkbox].empty-label + label::after {
        position: absolute;
        left: -28px;
        top: 2px;
        width: 16px;
        height: 16px;
        display: block;
        z-index: 1;
        content: '\f00c';
        font-family: 'FontAwesome';
        color: rgb(255, 255, 255);
        background-color: rgb(0, 170, 231);
        -ms-transition: all .2s ease;
        -webkit-transition: all .2s ease;
        transition: all .3s ease;
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    input[type=checkbox]:checked + label::after {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

select {
    border: 1px solid #999999 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: url('Images/dropdown arrow.png') no-repeat white !important;
    background-position: right 8px center !important;
    background-size: 16px 16px !important;
    padding-right: 30px !important;
    -webkit-appearance: none;
}

    select::-ms-expand {
        display: none;
    }

/*#endregion Changes for new UI Next #GRAN-1857*/

/*Adding validation classes for all validation messages*/

.validation-tooltip {
    visibility: visible;
    width: 250px;
    color: #cf1f45;
    position: relative;
    font-weight: bold;
    margin: 5px 0px 2px 0px;
}

input.ng-invalid.ng-dirty, select.ng-invalid.ng-dirty {
    border: 1px solid #cf1f45 !important;
}

.validationMessage {
    color: #cf1f45;
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.icons[disabled] {
    cursor: not-allowed !important;
}

.greyedOut {
    color: #CCC;
}

[readonly].form-control {
    cursor: default !important;
}


/*---------------GrantPlan Look -------Start------------------------------------------------------------------------------*/

/*.MenuDropdown{
    border:0px !important;
}

.menuBtnBkColor
{
     background-color: rgb(248, 248, 248) !important;
}

.btn .caret {
    display: none !important;
}

.btn .MenuDropdown
{
     border:0px !important;
}

.navbar-default
{
    border-top-color: black !important;
    border-bottom-color: black !important;
    border-right-color: black !important;
    border-left-color: black !important; 

}

.nav-tabs
{
    margin-bottom: 20px !important;
    color: red !important;
}

.dropdown-menu 
{
    border-top-color: black !important;
    border-bottom-color: black !important;
    border-right-color: black !important;
    border-left-color: black !important; 
      
}

.divider
{
     background-color: black !important;

}*/


/*---------------GrantPlan Look -------End--------------------------------------------------------------------------------*/



/*---------------------ADONIS-Start--------------------------------------------------------------------------------*/

.mat-dialog-container {
    overflow-y: hidden !important;
}

.hidden-style {
    display: none !important;
}

.ag-header-viewport {
    background-color: #CCEEFA !important;
}

.modal-body {
    padding: 21px !important;
}

#searchBox {
    font-size: small;
}


.modal-footer {
    margin-top: 5px !important;
}


/*modal starts*/
.cdk-overlay-backdrop {
    position: fixed !important;
}

.cdk-global-overlay-wrapper {
    margin-bottom: 30px;
    height: auto !important;
}

.modal.fade.show {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-backdrop.fade:last-child {
    display: none;
}

.mat-dialog-container {
    overflow: hidden !important;
}

.cdk-overlay-container {
    overflow-y: scroll;
}

.customScroll {
    overflow: hidden !important;
}

.modal-backdrop.fade {
    opacity: 0.5 !important
}

.custom-class .modal-header {
    background-color: #00AAE7;
}

.custom-class .modal-title {
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 3px !important;
    color: #FFF !important;
}

.custom-class .modal-dialog {
    margin-top: 50px !important;
    max-width: 900px !important;
    width: 900px !important;
}


/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

/*.btn {
    margin:0px 5px 0px 5px;
}*/

/*.dropdown > .btn-default, 
.dropdown > .btn-default > .dropdown-menu,
 .img-responsive
{
    margin-left:20px;
}*/

.navbar {
    min-height: 0px;
}

.modal-content .save {
    text-align: center;
}
/*.modal-content table{
       width: 850px;
   max-width: 850px;
   padding:5px;
}*/

.modal-content .header {
    padding-bottom: 5px;
    font-weight: bolder;
    font-size: larger !important;
}

.modal-content th, td {
    padding: 2px;
}

.modal-content .results,
.modal-content .selected {
    max-height: 300px;
    overflow-y: auto;
}


/*modal ends*/





/*ag-grid starts*/

.grid-cell {
    background-color: #FFF !important;
}

.ag-cell {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.ag-row-hover {
    background-color: #ebf8fe !important;
}

.ag-row-selected {
    background-color: #b0e0e6 !important;
}

.ag-cell-focus {
    border: 1px solid #CCEEFA !important;
}

.ag-body-viewport {
    background-color: #FFF !important;
}

.grid-header-cell {
    font-size: 12px;
    background-color: #CCEEFA !important;
    border-right: 0.030em solid #FFF !important;
    border-top: 0.030em solid #FFF !important;
    font-weight: 700;
    padding-left: 5px !important;
}

/*modal ends*/




/*panel starts*/

.obsolete {
    font-style: italic !important;
    color: #cf1f45 !important;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
}


.panel-primary > .panel-heading {
    background-color: #00AAE7;
    border-color: #00AAE7;
}

    .panel-primary > .panel-heading h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 3px;
        color: #FFF !important
    }

    .panel-primary > .panel-heading .icons {
        cursor: pointer;
        width: 20px;
        height: 30px;
        border: none;
        padding: 0px 18px;
        font-size: 20px;
        color: #fff;
        background-color: #00AAE7;
    }

.panel-body {
    font-family: "Proxima Nova", Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    padding: 0px 0px 15px 0px;
}


/*panel ends*/

/* Button colors */

/*Archive/Edit:*/

.btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
}


/*Cancel/Delete*/

.btn-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
}

/*Square/rounded corner buttons*/

.btn {
    border-radius: 4px;
}

/*Button buttons to create a new study*/
.bottom-panel .btn {
    margin: 0px 4px 0px 4px;
}



/*FORMS-STARTS*/


.form-group-sm .form-control-static {
    height: 25px;
    line-height: 25px;
    min-height: 25px;
    padding: 0px 3px;
}

.form-group-sm select.form-control {
    height: 25px;
    line-height: 25px;
    min-height: 25px;
}

.form-group-sm textarea.form-control {
    height: 70px;
}

.form-control {
    font-size: 12px !important;
}

.form-group-sm .validationMessage,
.form-group-sm .checkboxes {
    padding: 0 !important;
    margin-bottom: 10px;
}

.nopadding {
    padding-right: 0 !important;
    margin-right: 0 !important;
}


/*FORMS-ENDS*/




/*INDICATIOS STARTS*/

#indications-section > .panel-body {
    padding: 0px 15px;
}

#indications-section .selected {
    background-color: #B0E0E6;
}

#indications-section table tbody tr td {
    padding: 3px;
}


#indications-section table tbody tr:hover {
    background-color: #EBF8FD;
}

#indications-section table thead {
    background-color: #CCEEFA;
}

#indications-section table th {
    border: 1px solid #fff;
}

    #indications-section table th[align="center"] {
        text-align: center;
    }

#indications-section table td {
    border: 1px solid #CCEEFA;
}


.html-table .panel-body {
    padding: 0px 15px;
}

.html-table .selected {
    background-color: #B0E0E6;
}

.html-table tbody tr:hover {
    background-color: #EBF8FD;
}

.html-table thead {
    background-color: #CCEEFA;
}

.html-table th {
    border: 1px solid #fff;
}

    .html-table th:last-child {
        border-right: none;
    }

    .html-table th:first-child {
        border-left: none;
    }

    .html-table th[align="center"] {
        text-align: center;
    }

.html-table td {
    border: 1px solid #CCEEFA !important;
}

form[name=studyDetailsForm] textarea {
    resize: vertical;
}

form[name=studyDetailsForm] {
    word-wrap: break-word;
}

    form[name=studyDetailsForm] .required-field label:after, form[name=studyDetailsForm] .bottom-panel label:before, form[name=studyDetailsForm] .required-approver {
        content: "*";
        color: red
    }

.gridInput {
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    padding: 0 2px !important;
    margin: 0 0 0 !important;
    max-height: 19px;
}

select.gridInput {
    padding-right: 30px !important;
    line-height: 90%;
}

.numberInput {
    text-align: right;
}

    .numberInput .currencyInput {
        text-align: right;
        width: 96px;
    }

.popover {
    min-width: 500px;
}


.BudgetColumnPopup {
    visibility: visible;
    border-radius: 5px;
    border: 1px solid black;
    color: #a94442;
    position: relative;
    z-index: 1000;
    white-space: normal;
    text-overflow: clip;
    margin-bottom: 2px;
}

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

.dragover {
    border-bottom: 1px solid blue !important;
}

.centerContent {
    text-align: center
}

.input-group .dateInput {
    padding-bottom: 0px;
    padding-top: 0px;
    height: 25px;
    margin-bottom: 10px !important;
}

.input-group .dateIcon {
    padding-top: 3px;
    padding-bottom: 3px;
    height: 25px;
    margin-bottom: 10px !important;
    border-left-width: 1px;
}

#newStudyModalContent .panel {
    padding: 0px;
}

#newStudyModalContent .panel-body {
    padding: 15px;
}

.fixed-bar {
    position: fixed;
    top: 64px;
    width: 100%;
    z-index: 1;
}

.panel-default > .panel-heading-stickybar h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 3px;
    color: #00AAE7;
}

.modal {
    -ms-overflow-style: scrollbar;
}

    .modal.fade .modal-dialog {
        transform: translate(0, 0) !important;
    }

.mat-checkbox .mat-ripple-element {
    background-color: transparent;
}

.mat-checkbox-frame {
    border-color: #00aae7;
    border-width: 1px !important;
    border-radius: 0 !important;
}

.mat-checkbox .mat-checkbox-ripple {
    height: 0 !important;
    width: 0 !important;
}

.invalid-input {
    border: 1px solid #d43f3a !important;
}

.close-right {
    display: block !important;
}

/*INDICATIOS ENDS*/

/*fix visual issues in Sub-study section*/
.ag-body-viewport.ag-layout-auto-height .ag-center-cols-clipper, .ag-body-viewport.ag-layout-auto-height .ag-center-cols-container {
    min-height: 0px !important;
}

.ag-theme-fresh .ag-header-cell {
    border-right: 1px solid #fff !important;
}
/*fix visual issues in Sub-study section END */

#footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    background-color: #f8f9fb;
    color: black;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}

#footer .container {
    width: 100%;
    padding: 0px;
    padding-right: 36px;
    color: #0768fd;
    font-size: 14px;
    font-family: "Proxima Nova", "Noto Sans", Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    #footer .container .version-label {
        margin-left: 24px;
        color: #595959 !important;
    }

#footer .copyright {
    color: #595959;
    flex-grow: 1;
    text-align: end;
}