/* 
This stylesheet contain elements specific to the funder report view/edit page
The styles are not contained in the individual components because they are
needed in the serverside render pages as well. By defining styles here,
we ensure same style exist on both client and server.

all funder report specific styles should go here and contains fr- prefix
*/

/* Only used in Web */
.fr-container {
    margin-top: 28px;
    margin-left: 28px;
    max-width: 1335px;
}

.fr-goal-status-input {
    width: 642px;
    height: 40px;
    display: flex;
}

.fr-notes-input {
    width: 641px;
    height: 72px;
    display: flex;
}

.fr-datepicker-container .k-datepicker .k-picker-wrap {
    border-radius: 8px !important;
}

.fr-datepicker-container .k-dateinput .k-dateinput-wrap {
    border-radius: 8px;
}

.fr-datepicker-container .k-datepicker .k-select {
    background: white;
    border-radius: 8px;
    border-left: 0px
}

.fr-button {
    align-items: center;
    border-radius: 40px !important;
    padding: 10px 24px !important;
    margin: 8px;
    min-width:100px;
}

.fr-button-primary {
    border: 0px;
    background: #1D6EB8;
    color: var(--White---220, #FCFDFF);
}

.fr-button-default {
    border: 1px solid #1d6eb8;
    background: #ffffff;
    color: #1D6EB8;
}

.fr-button-warning {
    border: 0px;
    background: #FFB340;
    color: #414A52;
}

.fr-button-danger {
    border: 0px;
    background: #f12214;
    color: var(--White---220, #FCFDFF);
}

.funderReportFormTemplate .cke {
    border: 1px solid #B6BFCC !important;
    border-radius: 5px !important;
    overflow: hidden;
}

.funderReportFormTemplate .cke_top {
    background: white !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.funderReportFormTemplate .cke_bottom {
    border-top: none !important;
    background: white !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}
/* Shared across both */

.fr-background {
    background-color: #fff;
}

.fr-border {
    border: 1px solid #B6BFCC;
}

.fr-border-radius {
    border-radius: 8px;
}

.fr-default-font {
    font-family: "DM Sans";
    font-weight: 400;
    color: #444444;
}

.fr-content-box {
    padding: 23px;
}

.fr-dialog .k-dialog-titlebar {
    border: none;
    background-color: #fff !important;
    color: #0b0909 !important;
    padding: 10px;
}

.fr-dialog .k-form-field {
    margin-bottom: 25px !important;
}

.fr-dialog .btn-container {
    text-align: right;
    margin-top: 20px;
}

/* Client-Progress-Report CSS */
.chartTable div {
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.OddBGColor {
    background-color: #ddd;
}

.cpProgram {
    margin-bottom: 20px;
}

.cpDomain {
    margin-left: 30px;
}

.cpLesson {
    margin-left: 60px;
    margin-bottom: 20px;
}

.cpProgram .cpTitle {
    font-size: 22px !important;
    font-weight: bold !important;
}

.cpDomain .cpTitle {
    font-size: 20px;
    font-weight: bold !important;
}

.cpLessonName {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    margin: 20px 10px 0px 0px;
}

.objTitle {
    font-size: 16px;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
}

.objTitle2 {
    float: left;
    margin-left: 300px;
}

.objBlock {
    display: block;
    font-weight: normal;
}

.objLeft {
    float: left;
    width: 12%;
    font-weight: normal;
}

.objRight {
    width: 88%;
    float: left;
    font-weight: normal;
}

.fr-edit-input-box {
    border-radius: 8px !important;
    border: 1px solid #CED6E0 !important;
    height: 40px !important;
    padding:10px !important
}


.fr-content-box table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    .fr-content-box table tr:first-child td {
        border: none !important;
        border-radius: 0 !important;
    }

    .fr-content-box table td {
        border: 1px solid #B6BFCC !important;
        border-radius: 0 !important;
    }

    .fr-content-box table tr:nth-child(2) td:first-child {
        border-top-left-radius: 10px !important;
    }

    .fr-content-box table tr:nth-child(2) td:last-child {
        border-top-right-radius: 10px !important;
    }

    .fr-content-box table tr:last-child td:first-child {
        border-bottom-left-radius: 10px !important;
    }

    .fr-content-box table tr:last-child td:last-child {
        border-bottom-right-radius: 10px !important;
    }

    .fr-content-box table th {
        color: #000 !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: normal !important;
    }

.fr-content-box .footerTable {
    width: 700px;
    border-collapse: collapse;
    table-layout: fixed;
}

.fr-content-box .headerTable {
    width: 700px;
    border-collapse: collapse;
    table-layout: fixed;
    font-weight: normal !important;
}

.fr-content-box .headerTable th,
.fr-content-box .headerTable td {
    padding: 0 5px 2px 5px !important;
    max-height: 20px;
    border: 1px solid #ddd;
}

.fr-content-box .footerTable th,
.fr-content-box .footerTable td {
    padding: 0 5px 2px 5px !important;
    max-height: 20px;
    border: 1px solid #ddd;
}

.fr-content-box .headerTable tr:first-child td {
    border: 0;
}

.fr-content-box .footerTable tr td .targetColor {
    margin-left: 5px;
    width: 50px;
    height: 5px;
}

.strategyTable {
    border-radius: 8px !important;
    border: 1px solid #B6BFCC !important;
    border-collapse: separate !important;
    overflow: hidden !important;
    border-spacing: 0 !important;
}

.strategyTable td,
.strategyTable th {
    border: 1px solid #B6BFCC !important;
    border-radius: 0 !important;
    padding-left: 23px !important;
}

/*Ends Here*/

.fr-draft-message {
    color: rgb(255, 0, 0);
    font-style: italic;
}

span.repLabel {
    font-size: 16px;
    font-weight: bold !important;
    max-width: 100%;
    word-wrap: break-word;
    margin-top: 30px;
}

span.resVal {
    text-align: justify;
    vertical-align: bottom;
}

.line-separator {
    padding-left: 0;
    padding-top: 10px;
    width: 100%;
    border-top: none;
    border-bottom: 2.00pt solid #7bb8e5;
    border-left: none;
    border-right: none;
    line-height: 100%
}