@charset "utf-8";

/* Other global styles */
.title-status h1 {
    display: inline-block;
}

.title-status .status {
    position: relative;
    bottom: 6px;
    margin-left: 15px;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
    outline: none;
    box-shadow: none;
}

.plain {
    appearance: none;
    outline: none;
    border: none;
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 15px;
    width: 100%;
    height: 47px;
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    padding: 10px 15px;
    transition: all 300ms;
    font-weight: 400;
    display: flex;
    align-items: center;
}

    .select-styled:after {
        content: "\f078";
        font-family: "Font Awesome 5 Pro";
        font-weight: 100;
        font-size: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
    }

    .select-styled:active,
    .select-styled.active {
        background: none;
    }

        .select-styled:active:before,
        .select-styled.active:before {
            content: "";
            position: absolute;
            top: 46px;
            right: 15px;
            z-index: 20;
        }

.select-options {
    display: none;
    position: absolute;
    top: 62px;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 10px;
    list-style: none;
    font-weight: 400;
    max-height: 155px;
    overflow: auto;
}

    .select-options li {
        margin: 0;
        padding: 12px 0;
        text-indent: 15px;
        transition: all 300ms;
    }

        .select-options li[rel="hide"] {
            display: none;
        }

label {
    color: var(--secondary-text);
}

textarea,
select,
input:not(.vs__search):not(.form-control):not([type]),
input:not(.vs__search):not(.cke_dialog_ui_input_text):not(.form-control)[type="text"],
input:not(.vs__search):not(.form-control)[type="number"],
input:not(.vs__search):not(.form-control)[type="search"],
input:not(.vs__search):not(.form-control)[type="email"],
input:not(.vs__search):not(.form-control)[type="url"],
input:not(.vs__search):not(.form-control)[type="password"]:not(.Password) {
    background-color: transparent;
    color: var(--primary-text);
    border-radius: 0.25rem; /* boottrap radius */
    border: 1px solid var(--light-30);
    padding: 0.375rem 0.75rem; /* bootstrap padding*/
    max-width: 100%;
    height: calc(1.42857143em + 0.75rem + 2px); /* bootstrap calc*/
    line-height: 1.42857143; /* bootstrap line height */
}

    textarea:focus,
    select:focus,
    input:not(.vs__search):not(.form-control):not([type]):focus,
    input:not(.vs__search):not(.cke_dialog_ui_input_text):not(.form-control)[type="text"]:focus,
    input:not(.vs__search):not(.form-control)[type="number"]:focus,
    input:not(.vs__search):not(.form-control)[type="search"]:focus,
    input:not(.vs__search):not(.form-control)[type="email"]:focus,
    input:not(.vs__search):not(.form-control)[type="url"]:focus,
    input:not(.vs__search):not(.form-control)[type="password"]:not(.Password):focus {
        border-color: var(--cpai-light-alpha-30);
    }

    select option {
        background-color: var(--dark);
        color: var(--primary-text);
    }

input[type="text"].datepicker {
    text-align: center;
}

input[type="text"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
    outline: none;
}

textarea {
    height: 121px;
    width: 498px;
}

input[type="radio"],
input[type="checkbox"] {
    border-color: var(--light);
}

    input[type="radio"] > label,
    input[type="checkbox"] > label,
    input[type="radio"] + label,
    input[type="checkbox"] + label {
        margin: 0 0 0 var(--spacing-2);
        text-align: left;
    }

.chkChoice {
    display: flex;
    align-items: center;
}

.error {
    color: var(--red);
}

.validation_error {
    background-color: var(--gray-lightest);
    border-radius: 0.25rem;
    color: var(--danger);
    position: absolute;
    top: 90%;
    font-size: 0.75rem;
    font-style: normal;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    z-index: 99;
}

input.cpinput {
    background-color: var(--light);
}

input:-webkit-autofil {
    box-shadow: none;
}

/* Primary Containers  */

#main {
    min-height: 100%;
    position: relative;
}

/*Login pages css is moved in here*/

#login-form #errorExplanation:not(.active) {
    display: none;
}

#login-form #errorExplanation.active {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    top: 0;
}

#tblLogin {
    position: relative;
    min-width: 320px;
    z-index: 10;
    margin: 30px auto;
}

.login-logo {
    display: block;
    margin-bottom: 40px;
}

#tblLogin table td {
    padding: 0 !important;
}

#tblLogin label {
    color: var(--primary-text);
}

#tblLogin td input[type="text"],
#tblLogin td input[type="password"],
.forgot-pass-box input[type="text"],
.forgot-pass-box input[type="password"],
input.cpinput {
    width: 100%;
    height: 32px;
    border-radius: 0.25rem;
    text-align: left;
    border: 1px solid var(--light-30);
    background: none;
    color: var(--purple-gray-dark);
    padding: 0 15px;
    transition: all 300ms;
}

.login_bg {
    display: none;
}

a[id="LoginButton"],
input[id="LoginButton"],
input[id="btnEmailRequest"] {
    background: linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) !important;
    color: var(--primary-text) !important;
    border: none !important;
    font-weight: 700;
}

    a[id="LoginButton"]:hover,
    input[id="LoginButton"]:hover,
    input[id="btnEmailRequest"]:hover {
        opacity: 0.8;
    }

input.login-input:focus {
    background-color: var(--dark-67) !important;
    border-color: var(--yellow) !important;
    color: var(--yellow) !important;
}

#Password {
    -webkit-text-security: disc;
}

@media only screen and (min-width: 768px) {
    #tblLogin {
        position: fixed;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .login_bg {
        display: block;
    }
}

/* dlLinks used by setuplinksnew.ascx */

#dlLinks {
    width: 100% !important;
}

/*login*/

.cpaction,
input[id="btnEmailRequest"] {
    background: transparent linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) 0% 0% no-repeat padding-box;
    color: var(--white) !important;
    display: block;
    width: 100%;
    padding: 0px;
    border: none;
    font-weight: bold;
    font-family: arial;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin: 25px 0 12px 0;
    border-radius: 26px !important;
}

    .cpaction:hover,
    a[id="LoginButton"]:hover,
    .primary-cpaction:hover,
    input[id="LoginButton"]:hover {
        background: transparent linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) 0% 0% no-repeat padding-box;
        opacity: 0.8;
    }

/***** Layout *****/

#account {
    float: right;
}

#quick-search {
    float: right;
}

#content {
    margin: 0px;
    min-height: 500px;
}

body.iframe #app > main > #main > #content {
    min-height: unset;
}

* html #content {
    width: 83%;
    padding-left: 10px;
    margin-top: 0px;
    padding: 6px 10px 10px 10px;
}

* html body #content {
    height: 600px;
}

/* IE */

div.modal h3.title {
    display: none;
}

div.modal p.buttons {
    text-align: right;
    margin-bottom: 0;
}

input#openid_url {
    background: url(../images/openid-bg.gif) no-repeat;
    background-color: var(--light);
    background-position: 0 50%;
    padding-left: 18px;
}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

a img {
    border: none;
}

a.issue.closed,
a.issue.closed:link,
a.issue.closed:visited {
    color: var(--gray);
    text-decoration: line-through;
}

a.project.closed,
a.project.closed:link,
a.project.closed:visited {
    color: var(--gray);
}

/**/

a.collapsible {
    padding-left: 12px;
    background: url(../images/arrow_expanded.png) no-repeat -3px 40%;
}

    a.collapsible.collapsed {
        background: url(../images/arrow_collapsed.png) no-repeat -5px 40%;
    }

/***** Tables *****/

table.list {
    border: 1px solid var(--gray-lighter);
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 4px;
    margin-top: 0.5em;
}

    table.list thead tr th {
        color: var(--tertiary-text);
        padding: var(--spacing-2);
        white-space: nowrap;
        text-align: left;
        background-color: transparent;
        text-transform: uppercase;
        font-size: 0.875rem;
        font-weight: 500;
    }

        table.list thead tr th a,
        table.list thead tr th span {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
        }

    table.list td {
        vertical-align: top;
        text-align: left;
        padding: 0.5rem;
        color: var(--primary-text);
        font-size: 14px;
    }

        table.list td.detail-row-toggle {
            cursor: pointer;
        }

    table.list .detail-row-toggle .btn > i {
        transition: all 300ms;
    }

    table.list .detail-row-toggle .btn.not-collapsed > i {
        transform: rotate(90deg);
    }

    table.list .detail-row-toggle .collapsed > .when-open,
    table.list .detail-row-toggle .not-collapsed > .when-closed {
        display: none;
    }

    table.list td.id {
        width: 2rem;
        text-align: left;
    }

    table.list th.table-checkbox {
        text-align: center;
    }

    table.list td.checkbox {
        width: 16px;
        padding: 2px 0 0 0;
    }

    table.list caption {
        text-align: left;
        padding: 0.5em 0.5em 0.5em 0;
    }

    table.list .fa-link {
        transform: rotate(45deg);
    }

    table.list .pretty i {
        display: block;
    }

/*  table responsive */

.table-responsive tr {
    border-bottom: 1px solid var(--light-15);
}

.table-responsive th,
.table-responsive td {
    border: none;
}

.table-responsive thead tr th {
    color: var(--tertiary-text);
    padding: var(--spacing-2);
    white-space: nowrap;
    text-align: left;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
}

    .table-responsive thead tr th a,
    .table-responsive thead tr th span {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

.table-responsive tbody tr td {
    background-color: var(--cpai-light-alpha-10);
}

.table-responsive tbody tr:nth-child(even) td {
    background-color: var(--cpai-light-alpha-5);
}

.table-responsive tbody tr.details-row td {
    background-color: var(--panel) !important;
}

/* adjust the row alterntion if we have details rows to every 3rd alternating*/
.table-responsive tbody tr:nth-child(4n-2).details-row + tr td {
    background-color: var(--cpai-light-alpha-5);
}

.table-responsive tbody:not(.hoverable-none) > tr:not(.details-row):hover > td {
    background-color: var(--cpai-primary-alpha-70) !important;
    color: var(--white);
}

.table-responsive tbody tr td {
    padding: 0.5em;
    font-size: 14px;
    vertical-align: middle;
    cursor: default;
}

.table-responsive > tbody > tr:not(.details-row) > td {
    min-height: 64px;
    height: 64px;
}

.table-responsive .detail-row-toggle .btn > i {
    transition: all 300ms;
}

.table-responsive .detail-row-toggle .btn.not-collapsed > i {
    transform: rotate(90deg);
}

.table-responsive .detail-row-toggle .collapsed > .when-open,
.table-responsive .detail-row-toggle .not-collapsed > .when-closed {
    display: none;
}

.table-responsive tbody tr td a:not(.btn),
.table--acd-fields tbody tr td.adobeSign a:not(.btn),
.table--acd-fields tbody tr td.docuSign a:not(.btn) {
    display: block;
    transition: all 300ms;
    color: currentColor;
}

.table--acd-fields tbody tr td.adobeSign .copy-btn::after,
.table--acd-fields tbody tr td.docuSign .copy-btn::after {
    color: var(--muted);
}

.table--acd-fields tbody tr td.adobeSign div.dropdown,
.table--acd-fields tbody tr td.docuSign div.dropdown {
    display: inline;
}

.table-responsive tbody tr td a.action-icon {
    display: block;
    font-size: 13px;
    padding: 0 5px;
    border-radius: 50%;
    border: 1px solid var(--purple-gray-dark);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    transition: all 300ms;
}

.table-responsive thead tr th.table-checkbox,
.table-responsive tbody tr td.table-checkbox {
    width: 1rem;
    text-align: center;
}

.table-responsive tbody tr td.comma-separate-breaks br::after {
    content: ", ";
}

.table-responsive tbody tr td.comma-separate-breaks br:not(:last-child),
.table-responsive tbody tr td.separate-breaks br:not(:last-child) {
    content: " ";
}

.table-responsive .actions > a:not(.btn) {
    margin: var(--spacing-2);
    padding: 0 !important;
    color: var(--primary-text);
}

    .table-responsive .actions > a:not(.btn):hover {
        color: var(--pink);
    }

    .table-responsive .actions > a:not(.btn) i,
    .table-responsive .actions > a:not(.btn) span {
        display: block;
    }

/**/

ul.tree-list {
    list-style-type: none;
    padding: 0;
}

    ul.tree-list > li {
        user-select: none;
        margin: var(--spacing-1) 0 var(--spacing-1) var(--spacing-3);
    }

/**/

.docusign-send-table tbody tr:hover td {
    background-color: var(--light) !important;
}

.my-contract-panel .table-responsive tbody tr:hover {
    cursor: pointer;
}

.table-responsive .pretty.p-icon {
    margin-left: 4px;
    margin-right: 0;
}

    .table-responsive .pretty.p-icon .state .icon {
        font-size: 10px;
        padding-top: 11px;
        padding-bottom: 0;
        padding-left: 5px;
    }

    .table-responsive .pretty.p-icon label {
        min-height: 12px;
    }

.table-responsive .pretty.p-icon {
    margin-left: 0;
}

.table-responsive .tdCheckBox {
    text-align: left;
}

@media only screen and (min-width: 800px) {
    .table-responsive {
        display: table !important;
    }
}

/* end table responsive */

tr.project td.name a {
    white-space: nowrap;
}

tr.project.closed,
tr.project.archived {
    color: var(--gray-light);
}

    tr.project.closed a,
    tr.project.archived a {
        color: var(--gray-light);
    }

tr.project.idnt td.name span {
    background: url(../images/bullet_arrow_right.png) no-repeat 0 50%;
    padding-left: 16px;
}

tr.project.idnt-1 td.name {
    padding-left: 0.5em;
}

tr.project.idnt-2 td.name {
    padding-left: 2em;
}

tr.project.idnt-3 td.name {
    padding-left: 3.5em;
}

tr.project.idnt-4 td.name {
    padding-left: 5em;
}

tr.project.idnt-5 td.name {
    padding-left: 6.5em;
}

tr.project.idnt-6 td.name {
    padding-left: 8em;
}

tr.project.idnt-7 td.name {
    padding-left: 9.5em;
}

tr.project.idnt-8 td.name {
    padding-left: 11em;
}

tr.project.idnt-9 td.name {
    padding-left: 12.5em;
}

tr.issue {
    text-align: center;
    white-space: nowrap;
}

    tr.issue td.subject,
    tr.issue td.category,
    td.assigned_to,
    tr.issue td.string,
    tr.issue td.text {
        white-space: normal;
    }

    tr.issue td.subject {
        text-align: left;
    }

    tr.issue td.done_ratio table.progress {
        margin-left: auto;
        margin-right: auto;
    }

    tr.issue.idnt td.subject a {
        background: url(../images/bullet_arrow_right.png) no-repeat 0 50%;
        padding-left: 16px;
    }

    tr.issue.idnt-1 td.subject {
        padding-left: 0.5em;
    }

    tr.issue.idnt-2 td.subject {
        padding-left: 2em;
    }

    tr.issue.idnt-3 td.subject {
        padding-left: 3.5em;
    }

    tr.issue.idnt-4 td.subject {
        padding-left: 5em;
    }

    tr.issue.idnt-5 td.subject {
        padding-left: 6.5em;
    }

    tr.issue.idnt-6 td.subject {
        padding-left: 8em;
    }

    tr.issue.idnt-7 td.subject {
        padding-left: 9.5em;
    }

    tr.issue.idnt-8 td.subject {
        padding-left: 11em;
    }

    tr.issue.idnt-9 td.subject {
        padding-left: 12.5em;
    }

tr.entry {
    border: 1px solid var(--gray-lightest);
}

    tr.entry td {
        white-space: nowrap;
    }

        tr.entry td.filename {
            width: 30%;
        }

        tr.entry td.filename_no_report {
            width: 70%;
        }

        tr.entry td.size {
            text-align: right;
            font-size: 90%;
        }

        tr.entry td.revision,
        tr.entry td.author {
            text-align: center;
        }

        tr.entry td.age {
            text-align: right;
        }

    tr.entry.file td.filename a {
        margin-left: 16px;
    }

    tr.entry.file td.filename_no_report a {
        margin-left: 16px;
    }

tr span.expander {
    background-image: url(../images/bullet_toggle_plus.png);
    padding-left: 8px;
    margin-left: 0;
    cursor: pointer;
}

tr.open span.expander {
    background-image: url(../images/bullet_toggle_minus.png);
}

tr.changeset {
    height: 20px;
}

    tr.changeset ul,
    ol {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    tr.changeset td.revision_graph {
        width: 15%;
        background-color: var(--light);
    }

    tr.changeset td.author {
        text-align: center;
        width: 15%;
        white-space: nowrap;
    }

    tr.changeset td.committed_on {
        text-align: center;
        width: 15%;
        white-space: nowrap;
    }

table.files tr.file td {
    text-align: center;
}

    table.files tr.file td.filename {
        text-align: left;
        padding-left: 24px;
    }

    table.files tr.file td.digest {
        font-size: 80%;
    }

table.members td.roles,
table.memberships td.roles {
    width: 45%;
}

tr.message {
    height: 2.6em;
}

    tr.message td.subject {
        padding-left: 20px;
    }

    tr.message td.created_on {
        white-space: nowrap;
    }

    tr.message td.last_message {
        font-size: 80%;
        white-space: nowrap;
    }

    tr.message.locked td.subject {
        background: url(../images/locked.png) no-repeat 0 1px;
    }

    tr.message.sticky td.subject {
        background: url(../images/bullet_go.png) no-repeat 0 1px;
        font-weight: bold;
    }

tr.version.closed,
tr.version.closed a {
    color: var(--gray);
}

tr.version td.name {
    padding-left: 20px;
}

tr.version.shared td.name {
    background: url(../images/link.png) no-repeat 0% 70%;
}

tr.version td.date,
tr.version td.status,
tr.version td.sharing {
    text-align: center;
    white-space: nowrap;
}

tr.user td {
    width: 13%;
}

    tr.user td.email {
        width: 18%;
    }

tr.user td {
    white-space: nowrap;
}

tr.user.locked,
tr.user.registered {
    color: var(--gray-light);
}

    tr.user.locked a,
    tr.user.registered a {
        color: var(--gray-light);
    }

table.permissions td.role {
    color: var(--gray);
    font-size: 90%;
    font-weight: normal !important;
    text-align: center;
    vertical-align: bottom;
}

tr.wiki-page-version td.updated_on,
tr.wiki-page-version td.author {
    text-align: center;
}

tr.time-entry {
    text-align: center;
    white-space: nowrap;
}

    tr.time-entry td.subject,
    tr.time-entry td.comments {
        text-align: left;
        white-space: normal;
    }

td.hours {
    text-align: right;
    font-weight: bold;
    padding-right: 0.5em;
}

    td.hours .hours-dec {
        font-size: 0.9em;
    }

table.plugins td {
    vertical-align: middle;
}

    table.plugins td.configure {
        text-align: right;
        padding-right: 1em;
    }

table.plugins span.name {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

table.plugins span.description {
    display: block;
    font-size: 0.9em;
}

table.plugins span.url {
    display: block;
    font-size: 0.9em;
}

table.list tbody tr.group td {
    padding: 0.8em 0 0.5em 0.3em;
    font-weight: bold;
    border-bottom: 1px solid var(--light-30);
}

table.list tbody tr.group span.count {
    color: var(--gray-light);
    font-size: 80%;
}

tr.group a.toggle-all {
    color: var(--gray-light);
    font-size: 80%;
    font-weight: normal;
    display: none;
}

tr.group:hover a.toggle-all {
    display: inline;
}

a.toggle-all:hover {
    text-decoration: none;
}

table.list tbody tr.group:hover {
    background-color: inherit;
}

table td {
    padding: 2px;
}

table p {
    margin: 0;
}

a.sort {
    padding-right: 16px;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    position: relative;
}

    a.sort.asc:after {
        content: "\f0d8";
        font-family: "Font Awesome 5 Pro" !important;
        position: absolute;
        right: 0;
        font-weight: bold;
    }

    a.sort.desc:after {
        content: "\f0d7";
        font-family: "Font Awesome 5 Pro";
        position: absolute;
        right: 0;
        font-weight: bold;
    }

table.attributes {
    width: 100%;
}

    table.attributes th {
        vertical-align: top;
        text-align: left;
    }

    table.attributes td {
        vertical-align: top;
    }

table.boards a.board,
h3.comments {
    background: url(../images/comment.png) no-repeat 0% 50%;
    padding-left: 20px;
}

table.boards td.topic-count,
table.boards td.message-count {
    text-align: center;
}

table.boards td.last-message {
    font-size: 80%;
}

table.messages td.author,
table.messages td.created_on,
table.messages td.reply-count {
    text-align: center;
}

table.query-columns {
    border-collapse: collapse;
    border: none;
}

    table.query-columns td.buttons {
        vertical-align: middle;
        text-align: center;
    }

td.center {
    text-align: center;
}

h3.version {
    background: url(../images/package.png) no-repeat 0% 50%;
    padding-left: 20px;
}

div.issues h3 {
    background: url(../images/ticket.png) no-repeat 0% 50%;
    padding-left: 20px;
}

div.members h3 {
    background: url(../images/group.png) no-repeat 0% 50%;
    padding-left: 20px;
}

div.news h3 {
    background: url(../images/news.png) no-repeat 0% 50%;
    padding-left: 20px;
}

div.projects h3 {
    background: url(../images/projects.png) no-repeat 0% 50%;
    padding-left: 20px;
}

#watchers ul {
    margin: 0;
    padding: 0;
}

#watchers li {
    list-style-type: none;
    margin: 0px 2px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#watchers select {
    width: 95%;
    display: block;
}

#watchers a.delete {
    opacity: 0.4;
}

    #watchers a.delete:hover {
        opacity: 1;
    }

#watchers img.gravatar {
    margin: 0 4px 2px 0;
}

span#watchers_inputs {
    overflow: auto;
    display: block;
}

span.search_for_watchers {
    display: block;
}

span.search_for_watchers,
span.add_attachment {
    font-size: 80%;
    line-height: 2.5em;
}

    span.search_for_watchers a,
    span.add_attachment a {
        padding-left: 16px;
        background: url(../images/bullet_add.png) no-repeat 0 50%;
    }

div.square {
    border: 1px solid var(--gray);
    float: left;
    margin: 0.3em 0.4em 0 0.4em;
    overflow: hidden;
    width: 0.6em;
    height: 0.6em;
}

.contextual {
    position: relative;
    z-index: 7;
    line-height: 1.4em;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 1em;
    color: var(--purple-gray-dark);
    float: right;
    margin-right: 20px;
}

    .contextual input,
    .contextual select {
        font-size: 0.9em;
    }

.message .contextual {
    margin-top: 0;
}

.splitcontent {
    overflow: auto;
}

.splitcontentleft {
    float: left;
    width: 98%;
    border: 1px solid var(--light-30);
}

.splitcontentright {
    float: right;
    width: 49%;
}

form {
}

fieldset {
    border: 1px solid var(--gray-lighter);
    margin: 0;
}

hr {
    width: 100%;
    height: 1px;
    background: var(--gray-medium);
    border: none;
}

blockquote {
    font-style: italic;
    border-left: 3px solid var(--gray-lighter);
    padding-left: 0.6em;
    margin-left: 2.4em;
}

    blockquote blockquote {
        margin-left: 0;
    }

acronym {
    border-bottom: 1px dotted;
    cursor: help;
}

textarea.wiki-edit {
    width: 99%;
}

li p {
    margin-top: 0;
}

.cp-pdfbox {
    padding: 10px 20px !important;
    background-color: var(--light);
    border-radius: 0.25rem;
}

p.breadcrumb {
    font-size: 0.9em;
    margin: 4px 0 4px 0;
}

p.subtitle {
    font-size: 0.9em;
    margin: -6px 0 12px 0;
    font-style: italic;
}

p.footnote {
    font-size: 0.9em;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*Calendar Activity*/

.cal_activity {
    padding: 10px 20px;
    width: 100%;
}

.activity_heading h3,
.modal_heading h3 {
    font-size: 21px;
    padding: 15px;
    border-bottom: 1px solid var(--gray-lighter);
}

/*Add Metadata field*/

.cp-modal {
    padding: 10px 15px;
}

/*Activity and note in Request flow*/

.note_activity {
    max-width: 800px;
    padding: 10px 15px !important;
    margin: 15px auto 0;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
    border-radius: 0.25rem;
}

    .note_activity .activity_heading h3 {
        margin: 15px 0;
        padding-left: 0;
    }

div .issue .next-prev-links {
    color: var(--gray);
}

div.issue table.attributes th {
    width: 22%;
}

div.issue table.attributes td {
    width: 28%;
}

#issue_tree table.issues,
#relations table.issues {
    border: none;
}

#issue_tree td.checkbox,
#relations td.checkbox {
    display: none;
}

#relations td.buttons {
    padding: 0;
}

fieldset.collapsible {
    border-width: 1px 0 0 0;
    font-size: 0.9em;
}

    fieldset.collapsible legend {
        padding-left: 16px;
        background: url(../images/arrow_expanded.png) no-repeat 0% 40%;
        cursor: pointer;
        border: none;
        font-size: 12px;
        margin: 0;
    }

    fieldset.collapsible.collapsed legend {
        background-image: url(../images/arrow_collapsed.png);
    }

fieldset#date-range p {
    margin: 2px 0 2px 0;
}

fieldset#filters table {
    border-collapse: collapse;
}

    fieldset#filters table td {
        padding: 0;
        vertical-align: middle;
    }

fieldset#filters tr.filter {
    height: 2.1em;
}

fieldset#filters td.field {
    width: 250px;
}

fieldset#filters td.operator {
    width: 170px;
}

fieldset#filters td.values {
    white-space: nowrap;
}

    fieldset#filters td.values select {
        min-width: 130px;
    }

    fieldset#filters td.values input {
        height: 1em;
    }

fieldset#filters td.add-filter {
    text-align: right;
    vertical-align: top;
}

.toggle-multiselect {
    background: url(../images/bullet_toggle_plus.png) no-repeat 0% 40%;
    padding-left: 8px;
    margin-left: 0;
    cursor: pointer;
}

div#issue-changesets {
    float: right;
    width: 45%;
    margin-left: 1em;
    margin-bottom: 1em;
    background-color: var(--light);
    padding-left: 1em;
    font-size: 90%;
}

    div#issue-changesets div.changeset {
        padding: 4px;
    }

    div#issue-changesets div.changeset {
        border-bottom: 1px solid var(--light-30);
    }

    div#issue-changesets p {
        margin-top: 0;
        margin-bottom: 1em;
    }

.journal ul.details img {
    margin: 0 0 -3px 4px;
}

div#activity dl {
    margin-left: 2em;
}

div#activity dd {
    margin-bottom: 1em;
    padding-left: 18px;
    font-size: 0.9em;
}

div#activity dt {
    font-weight: 600;
    margin-bottom: 0px;
    padding-left: 15px;
    line-height: 18px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

    div#activity dt.me .time {
        border-bottom: 1px solid var(--gray);
    }

    div#activity dt .time {
        color: var(--gray);
        font-size: 80%;
    }

div#activity span.project:after {
    content: " -";
}

div#activity dd span.description {
    display: block;
    color: var(--gray);
}

dt.issue-edit {
    background-image: url(../images/ticket_edit.png);
}

dt.issue-closed {
    background-image: url(../images/ticket_checked.png);
}

dt.issue-note {
    background-image: url(../images/ticket_note.png);
}

dt.changeset {
    background-image: url(../images/changeset.png);
}

dt.news {
    background-image: url(../images/news.png);
}

dt.message {
    background-image: url(../images/message.png);
}

dt.reply {
    background-image: url(../images/comments.png);
}

dt.wiki-page {
    background-image: url(../images/wiki_edit.png);
}

dt.attachment {
    background-image: url(../images/attachment.png);
}

dt.document {
    background-image: url(../images/document.png);
}

dt.project {
    background-image: url(../images/projects.png);
}

dt.time-entry {
    background-image: url(../images/time.png);
}

dt.issue.closed {
    background-image: url(../images/ticket_checked.png);
}

div#roadmap .related-issues {
    margin-bottom: 1em;
}

    div#roadmap .related-issues td.checkbox {
        display: none;
    }

div#roadmap .wiki h1:first-child {
    display: none;
}

div#roadmap .wiki h1 {
    font-size: 120%;
}

div#roadmap .wiki h2 {
    font-size: 110%;
}

body.controller-versions.action-show div#roadmap .related-issues {
    width: 70%;
}

div#version-summary {
    float: right;
    width: 28%;
    margin-left: 16px;
    margin-bottom: 16px;
    background-color: var(--light);
}

    div#version-summary fieldset {
        margin-bottom: 1em;
    }

        div#version-summary fieldset.time-tracking table {
            width: 100%;
        }

    div#version-summary th,
    div#version-summary td.total-hours {
        text-align: right;
    }

table#time-report td.hours,
table#time-report th.period,
table#time-report th.total {
    text-align: right;
    padding-right: 0.5em;
}

table#time-report tbody tr.subtotal {
    font-style: italic;
    color: var(--gray);
}

    table#time-report tbody tr.subtotal td.hours {
        color: var(--gray-light);
    }

table#time-report tbody tr.total {
    font-weight: bold;
    background-color: var(--gray-lighter);
    border-top: 1px solid var(--gray-lighter);
}

table#time-report .hours-dec {
    font-size: 0.9em;
}

div.wiki-page .contextual a {
    opacity: 0.4;
}

    div.wiki-page .contextual a:hover {
        opacity: 1;
    }

form .attributes select {
    width: 60%;
}

input#issue_subject {
    width: 99%;
}

select#issue_done_ratio {
    width: 95px;
}

ul.projects {
    margin: 0;
    padding-left: 1em;
}

    ul.projects ul {
        padding-left: 1.6em;
    }

    ul.projects.root {
        margin: 0;
        padding: 0;
    }

    ul.projects li {
        list-style-type: none;
    }

#projects-index ul.projects ul.projects {
    border-left: 3px solid var(--gray-lighter);
    padding-left: 1em;
}

#projects-index ul.projects li.root {
    margin-bottom: 1em;
}

#projects-index ul.projects li.child {
    margin-top: 1em;
}

#projects-index ul.projects div.root a.project {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 10px 0;
}

.my-project {
    padding-left: 18px;
    background: url(../images/fav.png) no-repeat 0 50%;
}

#notified-projects ul,
#tracker_project_ids ul {
    max-height: 250px;
    overflow-y: auto;
}

#related-issues li img {
    vertical-align: middle;
}

ul.properties {
    padding: 0;
    font-size: 0.9em;
    color: var(--gray);
}

    ul.properties li {
        list-style-type: none;
    }

        ul.properties li span {
            font-style: italic;
        }

.total-hours {
    font-size: 110%;
    font-weight: bold;
}

    .total-hours span.hours-int {
        font-size: 120%;
    }

.autoscroll {
    overflow-x: auto;
    overflow-y: hidden;
}

#user_login,
#user_firstname,
#user_lastname,
#user_mail,
#my_account_form select,
#user_form select,
#user_identity_url {
    width: 90%;
}

#workflow_copy_form select {
    width: 200px;
}

table.transitions td.enabled {
    background: #bfb;
}

table.fields_permissions select {
    font-size: 90%;
}

table.fields_permissions td.readonly {
    background: var(--gray-medium);
}

table.fields_permissions td.required {
    background: var(--red);
}

textarea#custom_field_possible_values {
    width: 99%;
}

input#content_comments {
    width: 99%;
}

paginationPanel {
    margin-left: 0px;
}

pagination {
    width: 97.7%;
    height: auto;
    border-bottom: 2px solid var(--peach-dark);
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
}

    pagination a {
        color: var(--peach-dark);
        font-style: italic;
        text-align: center;
        padding: 5px 5px 5px 5px;
    }

        pagination a:hover {
            color: var(--primary-text);
            font-style: italic;
            background-color: var(--peach-dark);
            text-decoration: none;
        }

        pagination a.selected {
            color: var(--primary-text);
            font-style: italic;
            background-color: var(--peach-dark);
            text-decoration: none;
        }

span.pagination {
    color: var(--peach-dark);
    text-decoration: none;
    font-style: italic;
}

paginationtd {
    font-family: sans-serif, Verdana, Arial, Helvetica;
    font-size: 9pt;
}

/***** Tabular forms ******/

.tabular p {
    margin: 0;
    padding: 3px 0 3px 0;
    min-height: 1.8em;
    clear: left;
}

.tabular label.floating {
    font-weight: normal;
    margin-left: 0px;
}

.tabular label.block {
    font-weight: normal;
    margin-left: 0px !important;
    text-align: left;
    float: none;
    display: block;
    width: auto;
}

.tabular label.inline {
    float: none;
    margin-left: 5px !important;
    width: auto;
}

/*Tabular label solving in small device*/

@media only screen and (min-width: 768px) {
    .tabular p {
        margin: 0;
        padding: 3px 0 3px 0;
        padding-left: 180px;
        /* width of left column containing the label elements */
    }

    .tabular label {
        float: left;
        text-align: left;
        /* width of left column */
        margin-left: -150px;
        width: 175px;
    }

        .tabular label.floating {
            font-weight: normal;
            margin-left: 0px;
            text-align: left;
            width: 270px;
        }

        .tabular label.block {
            font-weight: normal;
            margin-left: 0px !important;
            text-align: left;
            float: none;
            display: block;
            width: auto;
        }

        .tabular label.inline {
            float: none;
            margin-left: 5px !important;
            width: auto;
        }
}

label.no-css {
    font-weight: inherit;
    float: none;
    text-align: left;
    margin-left: 0px;
    width: auto;
}

input#time_entry_comments {
    width: 90%;
}

#preview fieldset {
    margin-top: 1em;
    background: url(../images/draft.png);
}

.tabular.settings p {
    padding-left: 300px;
}

.tabular.settings label {
    margin-left: -300px;
    width: 295px;
}

.tabular.settings textarea {
    width: 99%;
}

.settings.enabled_scm table {
    width: 100%;
}

.settings.enabled_scm td.scm_name {
    font-weight: bold;
}

fieldset.settings label {
    display: block;
}

fieldset#notified_events .parent {
    padding-left: 20px;
}

span.required {
    color: var(--danger) !important;
    /* color: var(--primary-text); */
    text-indent: -3px;
    display: inline-block;
    margin-right: var(--spacing-1);
}

.summary {
    font-style: italic;
}

#attachments_fields input.description {
    margin-left: 8px;
    width: 340px;
}

#attachments_fields span {
    display: block;
    white-space: nowrap;
}

#attachments_fields img {
    vertical-align: middle;
}

div.attachments {
    margin-top: 25px;
    background: var(--light-10);
    color: var(--light);
}

    div.attachments:empty {
        display: none;
    }

    div.attachments p + p {
        margin-top: 8px;
    }

    div.attachments p:last-child {
        margin-bottom: 0px;
    }

    div.attachments img {
        vertical-align: middle;
    }

    div.attachments a {
        color: var(--tertiary-text);
    }

    div.attachments span.author {
        font-size: 0.9em;
        color: var(--color-gray);
    }

    div.attachments a.delete {
        float: right;
        margin: 0 var(--spacing-2);
    }

div.thumbnails {
    margin-top: 0.6em;
}

    div.thumbnails div {
        background-color: var(--light);
        border: 2px solid var(--gray-medium);
        display: inline-block;
        margin-right: 2px;
    }

    div.thumbnails img {
        margin: 3px;
    }

p.other-formats {
    text-align: right;
    font-size: 0.9em;
    color: var(--gray);
}

.other-formats span + span:before {
    content: "| ";
}

a.atom {
    background: url(../images/feed.png) no-repeat 1px 50%;
    padding: 2px 0px 3px 16px;
}

em.info {
    font-style: normal;
    font-size: 90%;
    color: var(--color-gray);
    display: block;
}

    em.info.error {
        padding-left: 20px;
        background: url(../images/exclamation.png) no-repeat 0 50%;
    }

table.members td.group {
    padding-left: 20px;
    background: url(../images/group.png) no-repeat 0% 50%;
}

/***** Flash & error messages ****/

.Notice {
    padding: 4px 4px 4px 30px;
    margin-bottom: 12px;
    font-size: 1.1em;
    border: 2px solid;
    background: url(../images/exclamation.png) 8px 50% no-repeat;
    background-color: #ffe3e3;
    border-color: var(--red);
    color: var(--red);
}

#errorExplanation,
div.flash,
.nodata,
.warning,
.conflict {
    padding: 4px 4px 4px 30px;
    margin-bottom: 12px;
    font-size: 1.1em;
    border: 2px solid;
}

.nodata,
.warning {
    text-align: center;
    width: 90%;
    margin-left: 5%;
}

.warning {
    background-color: #ffebc1;
    border-color: #fdbf3b;
    color: #a6750c;
}

#errorExplanation ul {
    font-size: 0.9em;
}

#errorExplanation {
    display: none;
}

    #errorExplanation h2,
    #errorExplanation p {
        display: none;
    }

.conflict-details {
    font-size: 80%;
}

/***** Ajax indicator ******/

#ajax-indicator {
    position: absolute;
    /* fixed not supported by IE */
    background-color: var(--gray-lighter);
    border: 1px solid var(--gray-light);
    top: 35%;
    left: 40%;
    width: 20%;
    font-weight: bold;
    text-align: center;
    padding: 0.6em;
    z-index: 100;
    opacity: 0.5;
}

html > body #ajax-indicator {
    position: fixed;
}

    #ajax-indicator span {
        background-position: 0% 40%;
        background-repeat: no-repeat;
        background-image: url(../images/loading.gif);
        padding-left: 26px;
        vertical-align: bottom;
    }

/***** Calendar *****/

.calendar-wrapper:empty {
    display: none;
}

table.cal {
    border-collapse: collapse;
    width: 100%;
    margin: 0px 0 6px 0;
    border-top: none;
    table-layout: fixed;
}

    table.cal thead th {
        background: var(--panel);
        border: 1px solid var(--light-30);
        color: var(--primary-text);
        padding: var(--spacing-2) var(--spacing-1);
        text-align: center;
    }

    table.cal tbody tr td {
        border: 1px solid var(--light-30);
        vertical-align: middle;
        font-size: 0.875rem;
    }

    table.cal thead th.week-number {
        width: auto;
    }

    table.cal tbody tr:not(:empty) {
        height: 100px;
    }

    table.cal td.week-number {
        background-color: var(--panel);
        padding: 4px;
        border: none;
        font-size: 1em;
    }

    table.cal td p.day-num {
        text-align: right;
        padding: var(--spacing-1);
    }

        table.cal td p.day-num > a {
            display: block;
            padding: var(--spacing-5) 0;
            text-align: center;
            color: var(--secondary-text);
            transition: all 300ms;
        }

        table.cal td p.day-num a img {
            position: relative;
            top: -2px;
            transition: all 300ms;
            /* Safari 6.0 - 9.0 */
            filter: grayscale(100%);
            transform: scale(0.7);
        }

        table.cal td p.day-num > a:hover img {
            /* Safari 6.0 - 9.0 */
            filter: grayscale(0);
            transform: scale(1.3);
        }

    table.cal td.today {
        background: var(--gray-lightest);
    }

        table.cal td.today p.day-num {
            font-weight: bold;
        }

    table.cal img#CloseUploaderImg {
        width: 0.75rem;
        height: 0.75rem;
        filter: brightness(2);
        margin: var(--spacing-1);
    }

    table.cal .starting a,
    p.cal.legend .starting {
        background: url(../images/bullet_go.png) no-repeat -1px -2px;
        padding-left: 16px;
    }

    table.cal .ending a,
    p.cal.legend .ending {
        background: url(../images/bullet_end.png) no-repeat -1px -2px;
        padding-left: 16px;
    }

    table.cal .starting.ending a,
    p.cal.legend .starting.ending {
        background: url(../images/bullet_diamond.png) no-repeat -1px -2px;
        padding-left: 16px;
    }

p.cal.legend span {
    display: block;
}

.drive-integration-list {
    overflow: hidden;
}
/***** Tooltips ******/
.tooltip {
    position: relative;
    z-index: 5;
}

    .tooltip:hover {
        z-index: 25;
        color: var(--dark);
    }

    .tooltip span.tip {
        display: none;
        text-align: left;
    }

        .tooltip span.tip a {
            color: currentColor;
        }

            .tooltip span.tip a:empty {
                display: none;
            }

div.tooltip:hover span.tip {
    display: block;
    position: absolute;
    top: 12px;
    left: 24px;
    width: 270px;
    border: 1px solid var(--dark-30);
    background-color: var(--white);
    padding: 4px;
    font-size: 0.8em;
    color: var(--purple-darkest);
    z-index: 99;
}

.configure-auto-delegation-page input[type="text"].datepicker,
.event-add-page input[type="text"].datepicker,
.custom-report-selectors-table input[type="text"].datepicker {
    padding: 0 var(--spacing-4) 0 var(--spacing-2); /* make space for the calendar icon */
    text-align: left;
}

.configure-auto-delegation-page .ui-datepicker-trigger,
.event-add-page .ui-datepicker-trigger,
.custom-report-selectors-table .ui-datepicker-trigger {
    transition: all 300ms;
    position: absolute;
    right: 2rem;
    top: 0.667rem;
}

.custom-report-selectors-table .ui-datepicker-trigger {
    right: 0.5rem; /* slightly different position for this instance */
}

img.ui-datepicker-trigger {
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
}

.ui-timepicker.ui-menu .ui-menu-item {
    list-style: none !important;
}

.ui-datepicker.hide-calendar .ui-datepicker-calendar {
    display: none;
}

.ui-datepicker {
    z-index: 100 !important;
}
select.ui-datepicker-month,
select.ui-datepicker-year {
    color: var(--purple-darkest);
}

/***** Progress bar *****/

table.progress {
    border-collapse: collapse;
    border-spacing: 0pt;
    empty-cells: show;
    text-align: center;
    float: left;
    margin: 1px 6px 1px 0px;
}

    table.progress td {
        height: 1em;
    }

        table.progress td.closed {
            background: #bae0ba none repeat scroll 0%; /*DC no color match , single instance */
        }

        table.progress td.done {
            background: #d3edd3 none repeat scroll 0%; /*DC no color match , single instance */
        }

        table.progress td.todo {
            background: var(--gray-lighter) none repeat scroll 0%;
        }

p.pourcent {
    font-size: 80%;
}

p.progress-info {
    clear: left;
    font-size: 80%;
    margin-top: -4px;
    color: var(--gray);
}

#roadmap table.progress td {
    height: 1.2em;
}

div.tabs-buttons {
    position: absolute;
    right: 0;
    width: 48px;
    height: 24px;
    background-color: var(--light);
    bottom: 0;
    border-bottom: 1px solid var(--gray-light);
}

button.tab-left,
button.tab-right {
    font-size: 0.9em;
    cursor: pointer;
    height: 24px;
    border: 1px solid var(--light-30);
    border-bottom: 1px solid var(--gray-light);
    position: absolute;
    padding: 4px;
    width: 20px;
    bottom: -1px;
}

button.tab-left {
    right: 20px;
    background: var(--gray-lighter) url(../images/bullet_arrow_left.png) no-repeat 50% 50%;
    border-top-left-radius: 3px;
}

button.tab-right {
    right: 0;
    background: var(--gray-lighter) url(../images/bullet_arrow_right.png) no-repeat 50% 50%;
    border-top-right-radius: 3px;
}

/***** Diff *****/

.diff_out {
    background: #fcc;
}

    .diff_out span {
        background: #faa;
    }

.diff_in {
    background: #cfc;
}

    .diff_in span {
        background: #afa;
    }

.text-diff {
    padding: 1em;
    background-color: #f6f6f6;
    color: var(--gray);
    border: 1px solid var(--gray-lighter);
}

/***** Wiki *****/

div.wiki table {
    border-collapse: collapse;
    margin-bottom: 1em;
}

div.wiki table,
div.wiki td,
div.wiki th {
    border: 1px solid var(--gray-light);
    padding: 4px;
}

div.wiki .noborder,
div.wiki .noborder td,
div.wiki .noborder th {
    border: none;
}

div.wiki .external {
    background-position: 0% 60%;
    background-repeat: no-repeat;
    padding-left: 12px;
    background-image: url(../images/external.png);
}

div.wiki a.new {
    color: var(--red);
}

div.wiki ul,
div.wiki ol {
    margin-bottom: 1em;
}

div.wiki pre {
    margin: 1em 1em 1em 1.6em;
    padding: 8px;
    background-color: var(--gray-lightest);
    border: 1px solid var(--gray-lighter);
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
}

div.wiki ul.toc {
    background-color: var(--gray-lightest);
    border: 1px solid var(--gray-lighter);
    padding: 4px;
    line-height: 1.2em;
    margin-bottom: 12px;
    margin-right: 12px;
    margin-left: 0;
    display: table;
}

* html div.wiki ul.toc {
    width: 50%;
}

    /* IE6 doesn't autosize div */

    div.wiki ul.toc.right {
        float: right;
        margin-left: 12px;
        margin-right: 0;
        width: auto;
    }

    div.wiki ul.toc.left {
        float: left;
        margin-right: 12px;
        margin-left: 0;
        width: auto;
    }

    div.wiki ul.toc ul {
        margin: 0;
        padding: 0;
    }

    div.wiki ul.toc li {
        list-style-type: none;
        margin: 0;
        font-size: 12px;
    }

        div.wiki ul.toc li li {
            margin-left: 1.5em;
            font-size: 10px;
        }

    div.wiki ul.toc a {
        font-size: 0.9em;
        font-weight: normal;
        text-decoration: none;
        color: var(--gray);
    }

        div.wiki ul.toc a:hover {
            color: var(--red);
            text-decoration: underline;
        }

a.wiki-anchor {
    display: none;
    margin-left: 6px;
    text-decoration: none;
}

    a.wiki-anchor:hover {
        color: var(--gray-light) !important;
        text-decoration: none;
    }

h1:hover a.wiki-anchor,
h2:hover a.wiki-anchor,
h3:hover a.wiki-anchor {
    display: inline;
    color: var(--gray-medium);
}

div.wiki img {
    vertical-align: middle;
}

/***** My page layout *****/

.block-receiver {
    border: 1px dashed var(--gray-medium);
    margin-bottom: 20px;
    padding: 15px 0 15px 0;
}

.mypage-box {
    margin: 0 0 20px 0;
    color: var(--gray);
    line-height: 1.5em;
}

.handle {
    cursor: move;
}

a.close-icon {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url("../images/close.png");
}

    a.close-icon:hover {
        background-image: url("../images/close_hl.png");
    }

/***** Gantt chart *****/

.gantt_hdr {
    position: absolute;
    top: 0;
    height: 16px;
    border-top: 1px solid var(--light-30);
    border-bottom: 1px solid var(--light-30);
    border-right: 1px solid var(--light-30);
    text-align: center;
    overflow: hidden;
}

.gantt_subjects {
    font-size: 0.8em;
}

    .gantt_subjects div {
        line-height: 16px;
        height: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.task {
    position: absolute;
    height: 8px;
    font-size: 0.8em;
    color: var(--color-gray);
    padding: 0;
    margin: 0;
    line-height: 16px;
    white-space: nowrap;
}

    .task.label {
        width: 100%;
    }

        .task.label.project,
        .task.label.version {
            font-weight: bold;
        }

.task_late {
    background: var(--red) url(../images/task_late.png);
    border: 1px solid var(--red);
}

.task_done {
    background: var(--green) url(../images/task_done.png);
    border: 1px solid var(--green);
}

.task_todo {
    background: var(--gray-light) url(../images/task_todo.png);
    border: 1px solid var(--gray-light);
}

    .task_todo.parent {
        background: var(--color-gray);
        border: 1px solid var(--color-gray);
        height: 3px;
    }

.task_late.parent,
.task_done.parent {
    height: 3px;
}

.task.parent.marker.starting {
    position: absolute;
    background: url(../images/task_parent_end.png) no-repeat 0 0;
    width: 8px;
    height: 16px;
    margin-left: -4px;
    left: 0px;
    top: -1px;
}

.task.parent.marker.ending {
    position: absolute;
    background: url(../images/task_parent_end.png) no-repeat 0 0;
    width: 8px;
    height: 16px;
    margin-left: -4px;
    right: 0px;
    top: -1px;
}

.version.task_late {
    background: var(--red) url(../images/milestone_late.png);
    border: 1px solid var(--red);
    height: 2px;
    margin-top: 3px;
}

.version.task_done {
    background: var(--green) url(../images/milestone_done.png);
    border: 1px solid var(--green);
    height: 2px;
    margin-top: 3px;
}

.version.task_todo {
    background: var(--light) url(../images/milestone_todo.png);
    border: 1px solid var(--light);
    height: 2px;
    margin-top: 3px;
}

.version.marker {
    background-image: url(../images/version_marker.png);
    background-repeat: no-repeat;
    border: none;
    margin-left: -4px;
    margin-top: 1px;
}

.project.task_late {
    background: var(--red) url(../images/milestone_late.png);
    border: 1px solid var(--red);
    height: 2px;
    margin-top: 3px;
}

.project.task_done {
    background: var(--green) url(../images/milestone_done.png);
    border: 1px solid var(--green);
    height: 2px;
    margin-top: 3px;
}

.project.task_todo {
    background: var(--light) url(../images/milestone_todo.png);
    border: 1px solid var(--light);
    height: 2px;
    margin-top: 3px;
}

.project.marker {
    background-image: url(../images/project_marker.png);
    background-repeat: no-repeat;
    border: none;
    margin-left: -4px;
    margin-top: 1px;
}

.version-behind-schedule a,
.issue-behind-schedule a {
    color: var(--peach-dark);
}

.version-overdue a,
.issue-overdue a,
.project-overdue a {
    color: var(--red);
}

/***** Icons *****/

.icon-edit {
    background-image: url(../images/edit.png);
}

.icon-copy {
    background-image: url(../images/copy.png);
}

.icon-duplicate {
    background-image: url(../images/duplicate.png);
}

.icon-move {
    background-image: url(../images/move.png);
}

.icon-save {
    background-image: url(../images/save.png);
}

.icon-cancel {
    background-image: url(../images/cancel.png);
}

.icon-multiple {
    background-image: url(../images/table_multiple.png);
}

.icon-folder {
    background-image: url(../images/folder.png);
}

.open .icon-folder {
    background-image: url(../images/folder_open.png);
}

.icon-package {
    background-image: url(../images/package.png);
}

.icon-user {
    background-image: url(../images/user.png);
}

.icon-projects {
    background-image: url(../images/projects.png);
}

.icon-help {
    background-image: url(../images/help.png);
}

.icon-attachment {
    background: none;
    position: relative;
    padding-left: 1rem;
}

    .icon-attachment:after {
        content: "\f0c1";
        font-family: "Font Awesome 5 Pro" !important;
        font-weight: bold;
        position: absolute;
        left: 0;
    }

.icon-history {
    background-image: url(../images/history.png);
}

.icon-time {
    background-image: url(../images/time.png);
}

.icon-time-add {
    background-image: url(../images/time_add.png);
}

.icon-stats {
    background-image: url(../images/stats.png);
}

.icon-warning {
    background-image: url(../images/warning.png);
}

.icon-fav {
    background-image: url(../images/fav.png);
}

.icon-fav-off {
    background-image: url(../images/fav_off.png);
}

.icon-reload {
    background-image: url(../images/icon-show.jpg);
    padding-left: 25px;
}

.icon-lock {
    background-image: url(../images/locked.png);
}

.icon-unlock {
    background-image: url(../images/unlock.png);
}

.icon-checked {
    background-image: url(../images/icon-right.jpg);
}

.icon-details {
    background-image: url(../images/zoom_in.png);
}

.icon-report {
    background-image: url(../images/report.png);
}

.icon-comment {
    background-image: url(../images/comment.png);
}

.icon-summary {
    background-image: url(../images/lightning.png);
}

.icon-server-authentication {
    background-image: url(../images/server_key.png);
}

.icon-issue {
    background-image: url(../images/ticket.png);
}

.icon-zoom-in {
    background-image: url(../images/zoom_in.png);
}

.icon-zoom-out {
    background-image: url(../images/zoom_out.png);
}

.icon-passwd {
    background-image: url(../images/textfield_key.png);
}

.icon-test {
    background-image: url(../images/bullet_go.png);
}

.icon-file {
    background-image: url(../images/files/default.png);
}

    .icon-file.text-plain {
        background-image: url(../images/files/text.png);
    }

    .icon-file.text-x-c {
        background-image: url(../images/files/c.png);
    }

    .icon-file.text-x-csharp {
        background-image: url(../images/files/csharp.png);
    }

    .icon-file.text-x-java {
        background-image: url(../images/files/java.png);
    }

    .icon-file.text-x-javascript {
        background-image: url(../images/files/js.png);
    }

    .icon-file.text-x-php {
        background-image: url(../images/files/php.png);
    }

    .icon-file.text-x-ruby {
        background-image: url(../images/files/ruby.png);
    }

    .icon-file.text-xml {
        background-image: url(../images/files/xml.png);
    }

    .icon-file.text-css {
        background-image: url(../images/files/css.png);
    }

    .icon-file.text-html {
        background-image: url(../images/files/html.png);
    }

    .icon-file.image-gif {
        background-image: url(../images/files/image.png);
    }

    .icon-file.image-jpeg {
        background-image: url(../images/files/image.png);
    }

    .icon-file.image-png {
        background-image: url(../images/files/image.png);
    }

    .icon-file.image-tiff {
        background-image: url(../images/files/image.png);
    }

    .icon-file.application-pdf {
        background-image: url(../images/files/pdf.png);
    }

    .icon-file.application-zip {
        background-image: url(../images/files/zip.png);
    }

    .icon-file.application-x-gzip {
        background-image: url(../images/files/zip.png);
    }

.icon-activityadd {
    background-image: url(../images/time_add.png);
}

.icon-noteadd {
    background-image: url(../images/note_add.png);
}

.icon-activityall {
    background-image: url(../images/ActivityFilterAll.png);
}

.icon-activityonly {
    background-image: url(../images/ActivityFilterAct.png);
}

.icon-notesonly {
    background-image: url(../images/ActivityFilterNote.png);
}

.icon-checkin {
    background-image: url(../images/check_in.png);
}

.icon-checkout {
    background-image: url(../images/check_out.png);
}

.icon-compare {
    background-image: url(../images/zoom_in.png);
}

.icon-users {
    background-image: url(../images/group.png);
}

.icon-masters {
    background-image: url(../images/table_multiple.png);
}

.icon-configurators {
    background-image: url(../images/ActivityFilterSysAct.png);
}

.icon-stage {
    background-image: url(../images/ticket.png);
}

.icon-reject {
    background-image: url(../images/false.png);
}

.icon-library {
    background-image: url(../images/ActivityFilterNote.png);
}

.icon-upload {
    background-image: url(../images/icon-chain.jpg);
}

.icon-document {
    background-image: url(../images/document.png);
}

img.gravatar {
    padding: 2px;
    border: solid 1px var(--gray-medium);
    background-color: var(--light);
    vertical-align: middle;
}

div.issue img.gravatar {
    float: left;
    margin: 0 6px 0 0;
    padding: 5px;
}

div.issue table img.gravatar {
    height: 14px;
    width: 14px;
    padding: 2px;
    float: left;
    margin: 0 0.5em 0 0;
}

h2 img.gravatar {
    margin: -2px 4px -4px 0;
}

h3 img.gravatar {
    margin: -4px 4px -4px 0;
}

h4 img.gravatar {
    margin: -6px 4px -4px 0;
}

td.username img.gravatar {
    margin: 0 0.5em 0 0;
    vertical-align: top;
}

#activity dt img.gravatar {
    float: left;
    margin: 0 1em 1em 0;
}

/* Used on 12px Gravatar img tags without the icon background */

.icon-gravatar {
    float: left;
    margin-right: 4px;
}

#activity dt,
.journal {
    clear: left;
}

.journal-link {
    float: right;
}

h2 img {
    vertical-align: middle;
}

.hascontextmenu {
    cursor: context-menu;
}

/***************My New CSS********/

.dottedborder {
    border-style: dotted;
}

.tabularr p {
    margin: 0;
    padding: 3px 5px 3px 0;
    padding-left: 180px;
    /* width of left column containing the label elements */
    min-height: 1.8em;
    clear: left;
}

@media only screen and (max-width: 490px) {
    #activity .tabularr p {
        padding-left: 100px !important;
    }
}

/*html>body .tabular p {overflow:hidden;}*/

.tabularr label {
    float: left;
    text-align: right;
    /* width of left column */
    margin-left: -230px;
    /* width of labels. Should be smaller than left column to create some right margin */
    width: 225px;
}

    .tabularr label.floating {
        font-weight: normal;
        margin-left: 0px;
        text-align: left;
        width: 270px;
    }

    .tabularr label.block {
        font-weight: normal;
        margin-left: 0px !important;
        text-align: left;
        float: none;
        display: block;
        width: auto;
    }

    .tabularr label.inline {
        float: none;
        margin-left: 5px !important;
        width: auto;
    }

/*Added by Dilip*/

.linkbutton {
    text-align: center;
    font-size: 120%;
    font-family: sans-serif;
    white-space: nowrap;
    color: var(--white);
    background: var(--peach);
    display: inline-block;
    padding: 5px 10px;
    transition: all 0.25s ease;
}

/*End*/

.links-rightaligned {
    margin: -6px 4px -4px 0;
    color: var(--blue);
    font-size: 13px;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    padding: 2px 10px 1px 0px;
    margin: 0 0 10px 0;
    float: right;
    white-space: nowrap;
    line-height: 1.4em;
    margin-top: 5px;
    padding-left: 10px;
}

a.lnkAdd {
    display: inline-block;
    color: var(--peach);
    padding: 5px 10px;
    border: 1px solid var(--peach);
    border-radius: 0.25rem;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: auto;
    margin: 8px 0 5px;
    transition: all 300ms;
}

    a.lnkAdd:hover {
        background: var(--peach);
        color: var(--white);
    }

/********************************* NEW UI CLASSES *********************************************/

.right-title {
    width: 35%;
    height: auto;
    font-size: 17px;
    font-weight: 500;
    margin-top: 5px;
}

.btn-plus {
    background: url(../images/btn-plus.jpg) no-repeat;
    width: 100px;
    height: 26px;
    border: none;
    cursor: pointer;
}

.search-filter-title {
    width: 100%;
    height: auto;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}

.search-filter-label {
    width: 30%;
    height: auto;
    color: var(--purple-gray-dark);
    font-size: 14px;
    margin-top: 5px;
}

.search-filter-label2 {
    width: 50%;
    height: auto;
    font-size: 12px;
    margin: 5px 5px 0 0;
    font-weight: 500;
    text-align: right;
}

.menu-text {
    font-size: 15px;
    font-weight: 500;
    padding: 0 5px;
    margin-right: 13px;
}

.table-heading {
    font-size: 15px;
    font-weight: 500;
}

.chkbox {
    border: 1px solid var(gray-light);
    background-color: var(--light);
}

.pagination-container {
    width: 97.7%;
    height: auto;
    border-bottom: 1px solid var(--peach-dark);
    padding: 10px;
    margin-bottom: 10px;
}

.footer {
    height: auto;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
}

.support-cont-container {
    width: 47%;
    margin: 0 auto;
}

.text-tab {
    font-size: 13px;
    margin-top: 5px;
    font-weight: 500;
}

/********************************* NEW UI CLASSES [Updated by Bharati] *********************************************/

.advance-search-box input[type="radio"] {
    vertical-align: middle;
}

input[type="submit"]:not(.btn),
input[type="button"]:not(.btn),
.theme-button:not(.btn) {
    border: none;
    cursor: pointer;
}

.box-container {
    width: 720px; /* match bootstrap tablet container width */ /*600px;*/
    max-width: 100%;
    margin: 0 auto;
}

.box {
    width: 720px; /* match bootstrap tablet container width */ /*600px;*/
    max-width: 100%;
    margin: 0 auto;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--cpai-light-alpha-25);
    border-radius: 0.25rem;
    padding: var(--spacing-3);
}

    .box:empty {
        display: none;
    }

.search-result-box {
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--cpai-light-alpha-25);
    border-radius: 0.25rem;
    padding: var(--spacing-3);
}

    .search-result-box:hover {
        text-decoration: none;
    }

.keyfield-box {
    padding: 0 20px;
}

.icon-pulse {
    position: relative;
    transition: all 300ms;
}

    .icon-pulse:hover {
        transform: scale(1.3);
    }

.icon-checkin {
    background-image: url(../images/check_in.png);
}

.icon-checkout {
    background-image: url(../images/check_out.png);
}

.icon-compare {
    background-image: url(../images/zoom_in.png);
}

.icon-masters {
    background-image: url(../images/table_multiple.png);
}

.icon-library {
    background-image: url(../images/ActivityFilterNote.png);
}

a.plupload_button {
    background: var(--peach);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

    a.plupload_button:hover {
        background: var(--peach-dark);
        color: var(--primary-text);
        text-decoration: none;
    }

span[class~="journal-link"] a[class~="icon"] {
    color: var(--primary-text);
    font-size: 13px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

span[class~="journal-link"] a[class~="icon-upload"] {
    background: var(--peach-dark) url(../images/upload-icon.png) no-repeat left;
    color: var(--primary-text);
    padding: 5px 10px 5px 25px;
    border: none;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: right;
    vertical-align: middle;
}

a[onclick="AddRow(this)"] {
    background: var(--peach);
    color: var(--white);
    padding: 5px 10px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    width: auto;
    text-align: right;
    vertical-align: middle;
    border-radius: 0.25rem;
}

a[onclick="RemoveRow(this)"] {
    background: var(--peach-dark) url(../images/icon-del.jpg) no-repeat left;
    color: var(--primary-text);
    padding: 5px 10px 5px 20px;
    border: none;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: right;
    vertical-align: middle;
    text-transform: capitalize;
}

.RecipientClass a[onclick="RemoveRow(this)"] {
    background: var(--peach);
}

/*****************************Santosh Jadhav**************************************/

a[class~="icon-back-to-previous-request"] {
    background: var(--peach-dark) url(../images/check_out.png) no-repeat left;
    color: var(--primary-text);
    border: none;
    padding: 5px 5px 5px 20px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

/*******************************************************************/

span[class~="journal-link"] a[class~="icon-checkin"] {
    background: var(--peach-dark) url(../images/upload-icon.png) no-repeat left;
    color: var(--primary-text);
    border: none;
    padding: 5px 5px 5px 25px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

span[class~="journal-link"] a[class~="icon-checkout"] {
    background: var(--peach-dark) url(../images/upload-icon.png) no-repeat left;
    color: var(--primary-text);
    border: none;
    padding: 5px 5px 5px 25px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

span[class~="journal-link"] a[class~="icon-compare"] {
    background: var(--peach-dark) url(../images/upload-icon.png) no-repeat left;
    color: var(--primary-text);
    border: none;
    padding: 5px 5px 5px 25px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

a[class="downlnk"],
a[class="uplnk"] {
    background: var(--peach-dark) url(../images/upload-icon.png) no-repeat left;
    color: var(--primary-text);
    border: none;
    padding: 5px 5px 5px 25px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

div a[id="lnkActivityAdd"] {
    margin-right: 50px;
}

ul,
ul[class~="details"] {
    list-style-position: inside;
}

    ul[class~="details"] li p[class~="answer"] {
        text-indent: 12px;
    }

    ul li strong,
    .text-tab {
        color: var(--purple-gray-dark);
        margin-top: 5px;
        font-size: 13px;
        font-weight: 500;
    }

div[id="update"] {
    background-color: var(--light);
}

h4 a[class~="icon-attachment"],
h4 span[id="spanStageName"],
h4 span[id="lblQuestionnaireUpdated"],
a[class~="icon-attachment"],
span[id="spanPendingStageName"] {
    color: var(--tertiary-text);
    font-size: 0.75rem;
    font-weight: 500;
    width: 90%;
}

dt.issue a.clsActivityText {
    color: var(--peach-dark);
    font-size: 13px;
    font-weight: bold;
    width: 90%;
}

div.box p {
    font-size: 0.75rem;
}

div.pagination {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
}

    div.pagination a {
        color: var(--peach-dark);
        font-style: italic;
        text-align: center;
        padding: 5px 5px 5px 5px;
    }

        div.pagination a:hover {
            color: var(--primary-text);
            font-style: italic;
            background-color: var(--peach-dark);
            text-decoration: none;
        }

        div.pagination a.selected {
            color: var(--primary-text);
            font-style: italic;
            background-color: var(--peach-dark);
            text-decoration: none;
        }

span.pagination {
    color: var(--purple-blue);
    text-decoration: none;
    font-style: italic;
}

.loading,
.custom-loading {
    border-radius: 0.25rem;
}

    .loading p,
    .custom-loading p {
        max-width: 500px;
        padding: 10px 20px;
    }

div[id="CalendarTabs"] ul,
#MainContent_PanelContractTemplate div {
    margin-left: 0;
}

#content div.autoscroll,
table.list {
    border: none;
}

#content input[type="submit"] {
    margin-left: 10px;
}

div.tabsDivContainer {
    height: 100%;
    padding-bottom: 12px;
    margin-bottom: 30px;
    border-radius: 0.25rem;
}

div.attachments,
#MainContent_PanelContractTemplate div {
    margin-left: 0;
}

div.tab-content {
    width: 98%;
    margin-left: 1%;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 12px;
    background-color: var(--light-10);
    padding-bottom: 22px;
    padding-top: 22px;
    z-index: 900;
}

span[id="HeadLoginName"],
span[id="lblCurrentDate"] {
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-text);
}

span[id="lblCurrentDate"] {
    padding: 3px 7px;
}

span[id="*HeadLoginName"] {
    font-family: "Archivo", sans-serif;
    font-weight: 600;
}

#footer {
    clear: both;
    background: none;
    color: var(--dark);
    padding: 8px 15px;
    text-align: center;
}

hr {
    color: var(--dark);
}

#tblLogin td input:not(.form-control):not(.vs__search)::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    opacity: 1;
    /* Firefox */
}

#tblLogin #LoginUser_RememberMe {
    margin-right: 5px;
}

table.attributes th {
    color: var(--purple-blue);
    font-size: 13px;
    margin-top: 5px;
    font-weight: 500;
}

#tblTrackLineChanges td {
    height: 25px;
}

#tblTrackLineChanges thead tr th {
    padding-bottom: 12px;
    padding-top: 12px;
}

#tab-content-Lines {
    margin-left: 0px;
}

/*Approval*/

#tblotherdetails th {
    font-size: 13px;
    margin-top: 5px;
    font-weight: 500;
    text-align: right;
}

#tblotherdetails div,
#note-1,
#tblData,
#Emailbox {
    margin-left: 0px;
}

#note-1,
#tabledata div.TextDiv,
#tabledata div.DivDDLS,
#tabledata div.DateDiv,
#MainContent_PanelContractTemplate div {
    margin-left: 0;
}

#tabledata .icon-add {
    font-size: 12px;
    font-weight: 500;
}

#tabledata .icon-del {
    font-size: 12px;
    font-weight: 500;
}

#lnkAddStage {
    font-size: 12px;
    font-weight: 500;
}

span[id*="lblConditions"],
span[id*="lblAssignedTo"] {
    color: var(--orange);
    font-weight: 500;
}

div[id*="PanelContractTemplate"] div {
    margin-left: 0px;
}

fieldset td {
    font-size: 13px;
    margin-top: 5px;
}

/*Begin Contract Template*/

th {
    color: var(--tertiary-text);
    font-size: 14px;
    text-transform: uppercase;
}

table#chkList td label {
    color: var(--gray);
    font-size: 14px;
}

/*End Contract Template*/

#popup_content td:not(span),
#mainTable td[align="right"] {
    font-size: 13px;
    margin-top: 5px;
    font-weight: 500;
}

#popup_content td span,
#chkAVailableFor label {
    color: var(--gray);
    font-size: 13px;
    height: auto;
    font-weight: normal;
}

#tblData a.btnDelete {
    background-image: url(../images/icon-del.jpg);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 14px;
    margin-top: 5px;
}

#tblData a.up {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
}

#tblData a.down {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
}

.areadOnly {
    cursor: default;
    text-decoration: none !important;
}

.ac_input {
    width: 220px;
    margin-right: 15px;
}

/**************Contracts Relationship Chart***************/

table {
    border-spacing: 0;
}

fieldset,
img {
    border: none;
}

.chart {
    height: 100px;
    margin: 0px;
    width: 100%;
    display: run-in;
}

.Treant > .node {
    color: var(--primary-text);
    height: auto;
}

.Treant > p {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 12px;
}

.node-name {
    font-weight: bold;
}

.nodeExample1 {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--dark);
    width: 150px;
    font-family: Tahoma;
    font-size: 12px;
    text-align: center;
}

    .nodeExample1 p:not(.node-name) {
        color: var(--gray-lightest);
        font-size: 11px;
        font-family: "Trebuchet MS", Verdana, sans-serif;
    }

    .nodeExample1 a {
        color: var(--primary-text);
        font-size: 12px;
        font-family: "Trebuchet MS", Verdana, sans-serif;
    }

    .nodeExample1 img {
        margin-right: 0px;
        vertical-align: bottom;
        text-align: right;
        width: 20px;
        height: 20px;
    }

.rootClass {
    background-color: var(--purple-blue);
}

.currentNode {
    font-size: 18px;
}

/* required LIB STYLES */

/* .Treant se automatski dodaje na svaki chart conatiner */

.Treant {
    position: relative;
    padding: 0 !important;
}

    .Treant > .node,
    .Treant > .pseudo {
        position: absolute;
        display: block;
        visibility: hidden;
        word-wrap: break-word;
    }

    .Treant.Treant-loaded .node,
    .Treant.Treant-loaded .pseudo {
        visibility: visible;
    }

    .Treant > .pseudo {
        width: 0;
        height: 0;
        border: none;
        padding: 0;
    }

    .Treant .collapse-switch {
        width: 3px;
        height: 3px;
        display: block;
        border: 1px solid var(--dark);
        position: absolute;
        top: 1px;
        right: 1px;
        cursor: pointer;
    }

    .Treant .collapsed .collapse-switch {
        background-color: var(--blue-light);
    }

    .Treant > .node img {
        border: none;
        float: left;
    }

.bgColor {
    border-color: var(--red) !important;
}

tr.AllCheckBoxClass td:last-child input {
    width: 80%;
}

table#tblTable:nth-child(n + 2) thead tr th:nth-child(n + 2) {
    display: none;
}

/* columsn config box */

#columns-config-box .filter-group {
    margin: 4px 0;
    padding: 2px 0;
}

    #columns-config-box .filter-group span {
        font-size: 16px;
    }

/* Application Types */

@media only screen and (max-width: 1640px) {
    .application-types #query_form_content .buttons {
        flex-wrap: wrap;
    }
}

.aplication-types #query_form_content .buttons > * {
    margin-top: 10px !important;
}

.hover-color:hover {
    color: var(--orange) !important;
}

@media only screen and (max-width: 1184px) {
    .application-types #query_form_content .buttons .search-wrapper {
        width: 50%;
        max-width: unset;
    }

    .application-types #query_form_content .buttons .select-wrapper {
        width: calc(50% - 30px);
        max-width: unset;
    }

    .application-types #query_form_content .buttons a {
        margin-top: 10px;
    }

    .application-types #query_form_content .buttons > a:first-of-type {
        margin-left: 0;
    }
}

/***** Links *****/

.page-container {
    width: 1002px;
    height: auto;
    margin: 0 auto;
    background-color: var(--light);
}

.container-100-bg {
    width: 100%;
    height: auto;
    background-color: var(--light);
}

.container-100 {
    width: 100%;
    height: auto;
}

.container-98 {
    width: 98%;
    height: auto;
}

.container-48 {
    width: 48%;
    height: auto;
}

.container-65 {
    width: 65%;
    height: auto;
}

.container-75 {
    width: 75%;
    height: auto;
}

.container-80 {
    width: 80%;
    height: auto;
}

.container-30 {
    width: 30%;
    height: auto;
}

.container-38 {
    width: 38%;
    height: auto;
}

.form-control {
    box-shadow: none;
}

label {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 5px;
}

td {
    font-size: 14px;
    height: auto;
}

.top-border {
    width: 100%;
    height: 25px;
    margin-left: 0px;
}

/*Flash notice, warning and error display*/

div.flash {
    margin: 10px 15px;
}

    div.flash.error,
    #errorExplanation {
        background-color: #ffe3e3;
        border: none;
        color: var(--red);
        margin: 0;
        padding: 15px 20px;
    }

    div.flash.notice {
        background: url(../images/true.png) 8px 11px #dfffdf no-repeat;
        padding: 10px 10px 10px 30px;
        border-color: #9fcf9f;
        color: #005f00;
    }

    div.flash.warning,
    .conflict {
        background: url(../images/warning.png) 8px 5px no-repeat;
        background-color: #ffebc1;
        border-color: #fdbf3b;
        color: #a6750c;
        text-align: left;
    }

.header {
    width: 100%;
    height: auto;
    padding-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.header-right {
    width: 35%;
    height: auto;
}

.top-block {
    width: 20px;
    height: auto;
    font-size: 18px;
    font-weight: 500;
}

.profile-pic {
    width: 34px;
    height: auto;
    margin-right: 5px;
}

.btn-next-container {
    width: 9px;
    height: 28px;
}

.btn-next-profile {
    background: url(../images/btn-next.jpg) no-repeat;
    width: 9px;
    height: 28px;
    border: none;
    cursor: pointer;
}

.relative {
    position: relative;
}

.footer-copyright {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
}

    .footer-copyright .opensource_credit,
    .footer-copyright .opensource_credit:hover {
        position: absolute;
        right: 20px;
        top: 10px;
        color: var(--purple-lighter);
    }

.footer-privacypolicy {
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
}

    .footer-privacypolicy .opensource_credit,
    .footer-privacypolicy .opensource_credit:hover {
        position: absolute;
        right: 20px;
        top: 10px;
        color: var(--purple-lighter);
    }

.credits-page {
    padding: 0;
    margin: 0;
}

    .credits-page ul {
        margin: 0;
        padding: 0;
    }

    .credits-page h1,
    .credits-page h2,
    .credits-page h3,
    .credits-page h4,
    .credits-page h5,
    .credits-page h6 {
        margin-top: 0;
    }

    .credits-page .credits {
        background: var(--tertiary) !important;
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        font-weight: 400;
        padding: 30px 20px 50px;
        color: var(--primary-text);
    }

        .credits-page .credits h2,
        .credits-page .credits h3 {
            color: var(--primary-text);
        }

    .credits-page .cp-logo {
        text-align: center;
    }

        .credits-page .cp-logo img {
            max-width: 300px;
            height: auto;
        }

    .credits-page .credits .os-name {
        font-size: 19px;
        font-weight: 600;
        color: var(--primary-text);
        margin-left: -20px;
        margin-bottom: 15px;
    }

    .credits-page .open-source-items {
        margin: 30px 0;
        padding-left: 20px;
    }

        .credits-page .open-source-items ul li {
            line-height: 1.6;
            list-style: none;
            position: relative;
            overflow: hidden;
            padding-left: 20px;
            margin-top: 30px;
        }

            .credits-page .open-source-items ul li:after {
                position: absolute;
                content: "";
                width: 2px;
                height: 100%;
                background: var(--purple-gray);
                left: 0;
                top: 45px;
            }

            .credits-page .open-source-items ul li label {
                display: inline-block;
                width: 100px;
                font-weight: 500;
                color: var(--purple-lighter);
            }

            .credits-page .open-source-items ul li a {
                display: inline-block;
                text-decoration: none;
                transition: all 300ms;
                color: var(--primary-text);
            }

                .credits-page .open-source-items ul li a:hover {
                    text-decoration: underline;
                }

@media only screen and (max-width: 767px) {
    .credits-page .open-source-items ul li div {
        margin-bottom: 15px;
    }

    .credits-page .open-source-items ul li label {
        display: block;
    }
}

.password-forgot #formForgotPassword {
    position: relative;
    z-index: 3;
}

    .password-forgot #formForgotPassword label {
        color: var(--primary-text) !important;
    }

.password-forgot .fpass-form-action #btnEmailRequest {
    background: transparent linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) 0% 0% no-repeat padding-box;
    border-radius: 26px !important;
    border: none;
}

    .password-forgot .fpass-form-action #btnEmailRequest:hover {
        background: transparent linear-gradient(100deg, #6a30db 0%, #cd4df4 100%) 0% 0% no-repeat padding-box;
    }

.password-forgot .captcha {
    text-align: center;
}

    .password-forgot .captcha img {
        width: 100%;
        height: auto;
    }

.password-forgot .footer-copyright.password_recovery {
    position: relative;
}

.password-forgot .forgot-pass-box {
    margin-top: 100px;
    margin-bottom: 30px;
}

.password-forgot .forgot-pass {
    width: 300px;
    margin: 20px auto;
}

    .password-forgot .forgot-pass label {
        display: block;
        font-weight: 400;
        margin-bottom: 8px;
    }

    .password-forgot .forgot-pass input {
        width: 100%;
        height: 32px;
        border-radius: 0.25rem;
        padding: 4px 15px;
    }

.password-forgot .forgot-pass-box label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    color: var(--primary-text) !important;
}

.password-forgot .forgotpass-logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: 25px;
}

.password-forgot .forgot-pass .fpass-form-action {
    margin-top: 20px;
    text-align: center;
}

.password-forgot a,
.password-forgot a:hover {
    color: var(--purple-lighter);
}

.password-forgot .fpass-form-action #Submit7,
.password-forgot .reset_action #BtnLogout {
    border: none;
    background: none;
    color: var(--peach) !important;
    margin-left: 0;
}

    .password-forgot .fpass-form-action #Submit7:hover,
    .password-forgot .reset_action #BtnLogout:hover {
        color: var(--purple-muted) !important;
    }

/*==================================*/

.btn-text {
    font-size: 12px;
    font-weight: bold;
    padding-top: 8px;
    text-align: left;
    width: 72%;
    line-height: 19px;
}

.btn-text-2 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    width: 72%;
    line-height: 19px;
}

.icon-home {
    background: url(../images/icon-home.png) no-repeat;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    padding: 0px 10px 10px;
}

.search-icon {
    background: url(../images/search-icon-2.png) no-repeat;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/*====================
==============New CSS written for mobile responsive
#ContractPod, coded by Ariful Ahsan
=====================*/

.hidden {
    display: none !important;
}

.m10,
.margin10 {
    margin-top: 10px;
}

.margin25 {
    margin-top: 25px;
}

.cp_box {
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

.topbar-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: none;
    z-index: 1000;
}

    .topbar-loader:after {
        position: absolute;
        content: "";
        width: 0;
        height: 4px;
        background: var(--purple-gray);
        transition: all 7s;
    }

    .topbar-loader.run:after {
        width: 100%;
        height: 4px;
    }

.whiteheading {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 500;
}

#divDbSearch a {
    transition: all 300ms;
}

.main-content {
    transition: all 300ms;
}

.inner-heading {
    font-size: 18px;
    font-weight: 500;
    padding: 5px 15px;
}

/*Color Class*/

.color_p {
    background: var(--pink-medium);
}

/*Content*/

#content {
    position: relative;
    padding: 0;
    transition: all 300ms;
}

/*New CSS for change ui 1 to ui 2*/

/*Ariful Ahsan*/

/*Start from 24 September 2018*/

.logo img {
    max-width: 150px;
    margin: 4px 0 4px 15px;
}

.page-heading {
    padding: 24px 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

    .page-heading .breadcrumb-container {
        width: 100%;
        margin-bottom: 15px;
        text-indent: 3px;
    }

        .page-heading .breadcrumb-container a {
            font-family: "Poppins", sans-serif;
            font-weight: bold;
        }

    .page-heading.admin-main-page-heading {
        min-height: 46px;
        padding: 9px 20px;
    }

    .page-heading .page-title.cr-title {
        margin-top: 10px;
    }

    .page-heading .page-title .current-contract-status {
        font-size: 15px;
        font-weight: 400;
        display: block;
        margin-top: 15px;
    }

        .page-heading .page-title .current-contract-status i {
            margin-right: 7px;
        }

.contract-template-form,
.contract-template-form tbody,
.contract-template-form tbody tr,
.contract-template-form tbody td {
    display: block;
    width: 100%;
}

.panel .panel-heading {
    padding: 15px;
    border: none;
    font-size: 20px;
    font-weight: 500;
    border-radius: 0.25rem;
}

.panel-default {
    padding: 15px;
}

.panel-contract-request {
    padding: 15px 0;
}

.panel-heading {
    border: 1px solid var(--light-30);
}

.panel-body {
    padding: 15px;
    position: relative;
    border: none;
    border-radius: 0.25rem;
}

.panel-contract-request .panel-heading {
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.panel-contract-request .panel-body {
    background-color: var(--light);
    margin-top: 15px;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.panel .panel-heading[data-toggle="collapse"] {
    position: relative;
    cursor: pointer;
}

    .panel .panel-heading[data-toggle="collapse"]:after {
        content: "\2212";
        font-size: 26px;
        line-height: 26px;
        font-weight: bold;
        right: 20px;
        position: absolute;
    }

    .panel .panel-heading[data-toggle="collapse"].collapsed:after {
        content: "\002B";
    }

    .panel .panel-heading[data-toggle="collapse"] + .panel-body {
        margin-top: 0;
    }

.input-100 {
    width: 100%;
}

.panel-request-type label {
    display: block;
    margin-top: 0;
}

.panel-contract-request label {
    display: block;
}

.activity-wrap {
    background-color: var(--dark);
    margin: 0 15px 15px;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

/*Filter Box*/

.filter-box .search-wrapper,
.filter-box .select-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}

.filter-box .search-wrapper {
    margin-right: var(--spacing-2);
    max-width: 330px /* col-5 width*/;
}

.filter-box .search-wrapper-vertical {
    margin-right: var(--spacing-2);
    max-width: 260px /* col-4 width*/;
}

.filter-box .select-wrapper {
    max-width: 260px /* col-4 width*/;
    flex-wrap: wrap;
}

.filter-box .search-wrapper label {
    padding-right: var(--spacing-2);
}

.filter-box .search-wrapper-vertical label {
    color: var(--primary-text);
}

.filter-box .search-wrapper-vertical input {
    border-color: var(--purple-gray) !important;
}

.filter-box #txtSearch,
.filter-box input.rounded {
    border-radius: 30px !important;
    flex-grow: 1;
    min-width: 0; /* fix for safari */
}

.filter-box label {
    display: block;
}

.filter-box .select-wrapper select,
.filter-box .select-wrapper .chzn-container {
    flex-grow: 1;
    width: 100% !important;
}

.filter-action {
    display: flex;
    align-items: flex-end !important; /* this allows buttons and input to align correctly */
    justify-content: flex-start;
}

    .filter-action .search-wrapper label,
    .filter-action .select-wrapper label {
        color: var(--primary-text);
        white-space: nowrap;
        padding-right: var(--spacing-2);
    }

#query_form_content {
    margin: var(--spacing-3);
    padding: 0;
    border: none;
}

@media only screen and (min-width: 1200px) {
    #query_form_content .filter-action > a {
        text-transform: uppercase;
    }

    #main {
        min-height: 600px;
    }
}

.filter-box {
    border-bottom: 1px solid var(--light-30);
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.panel-heading .filter-box {
    border: none;
    margin: 0 !important;
    padding: 0 !important;
}

.filter-box .filter-group label {
    display: block;
}

.filter-box .select-control {
    width: 100%;
}

.form-action {
    padding-bottom: 25px;
}

    .form-action a {
        margin-right: 10px;
    }

.filter-action.advance1 a {
    background-color: var(--light);
}

.report-action > a {
    margin-left: 0;
    margin-right: 10px;
}

.report-contextual {
    float: none !important;
}

.exports-btn .aspNetDisabled:hover {
    opacity: 0.3;
}

#uploadbox label {
    margin-top: 0 !important;
}

/*Table*/

.table-padding {
    padding: 0 var(--spacing-3) var(--spacing-4);
}

.header-btn .dropdown-button {
    width: 54px;
    height: 50px;
    position: relative;
    background: none;
    border-left: 1px solid var(--purple-muted);
    cursor: pointer;
    transition: all 300ms;
}

    .header-btn .dropdown-button img {
        width: 30px;
        height: auto;
        margin: 0 auto;
    }

.header-btn .admin-dropdown img {
    width: 30px;
    height: 30px;
    margin: 10px;
    border-radius: 0.25rem;
}

.navbar-link-primary {
    position: relative;
}

.header-btn small {
    position: absolute;
    border-radius: 10px;
    padding: 4px 5px;
    font-size: 9px;
    line-height: 1em;
    background: var(--peach-dark);
    top: 4px;
    right: 4px;
}

.navbar-cpod {
    width: 38%;
    float: left;
}

.main-search-wrapper {
    position: relative;
    margin-top: 8px;
    padding-right: 15px;
}

    .main-search-wrapper .main-search {
        padding: 0 40px 0 20px;
        height: 32px;
        border: none;
    }

    .main-search-wrapper button {
        background: none;
        border: none;
    }

/*create-new-task*/

.create-new-task-wrapper {
    float: left;
}

.create-new-task {
    position: relative;
    height: 50px;
    margin: 0 15px;
}

.new-task-button {
    border: none;
    width: 110px;
    height: 30px;
    line-height: 28px;
    border-radius: 0.25rem;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

    .new-task-button i {
        margin-left: 5px;
        display: inline-block;
    }

/*
/*dropdown-button*/

.dropdown-button {
    border: none;
    color: var(--purple-gray-dark);
    padding: 0;
    width: 90px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
}

    .dropdown-button.dropdown-user-button {
        display: block;
        width: 235px;
        height: 50px;
        text-align: left;
        position: relative;
    }

.dropdown-user-button img {
    float: left;
    margin-right: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.dropdown-user-button h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 48px;
    padding-top: 0;
    height: 50px;
    overflow: hidden;
}

.dropdown-user-button p {
    font-size: 15px;
    line-height: 1.4;
}

.navbar-nav > li {
    height: 50px;
}

.navbar .navbar-link-primary > small {
}

.navbar .navbar-link-primary > small {
    position: absolute;
    background-color: var(--red);
    top: 18px;
    right: 18px;
}

.navbar-toggle {
    display: block !important;
    border-radius: 0;
    margin: 8px 8px 0 8px;
}

/*stylish round hover for contractpod*/

.round_hover {
    position: relative;
    overflow: hidden;
    transform: translateZ(0px);
}

    .round_hover:before {
        z-index: -1;
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--dark-50);
        background: #004f59;
        transform: scale(0, 1);
        transform-origin: 50% 50% 0;
        transition: all 300ms;
    }

    .round_hover:hover:before,
    .round_hover:focus:before {
        transform: scale(1, 1);
    }

/*
    Contract Request Page
*/

.contract-template-form tr td.tdAlign {
    text-align: left;
}

.contract-template-form #ParentDiv {
    position: relative;
}

h3.plupload_droptext {
    position: relative;
    top: 15px;
    font-size: 20px;
    color: var(--gray) !important;
}

#txtcontractdescription {
    height: 118px !important;
}

/*My Contracts*/

.my-contract-panel {
    background: none;
    border: none;
    padding: 0;
}

    .my-contract-panel .panel-heading {
        background: var(--gray-lightest);
        border: none;
        padding: 15px 0 20px;
    }

    .my-contract-panel .panel-body {
        border-radius: 0 0 5px 5px;
        padding-top: 5px;
        border: none;
    }

.data-container-title {
    width: 100%;
    height: auto;
    font-size: 22px;
    color: var(--purple-blue);
    font-weight: bold;
    margin-bottom: 8px;
}

#aViewAll {
    background: var(--peach);
    color: var(--white);
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0.25rem;
    width: auto;
    text-align: center;
    vertical-align: middle;
}

input[type="submit"].cp-submit {
    background: var(--peach);
    color: var(--white) !important;
}

.cp-button {
    font-size: 14px;
    display: inline-block;
    padding: 7px 20px;
    background: var(--peach);
    border-radius: 0.25rem;
    color: var(--white) !important;
    transition: all 300ms;
}

    .cp-button i {
        padding-right: 5px;
    }

    .cp-button:hover {
        background: var(--peach-dark);
    }

/*=============Dashboard
======================*/

.activity-wrap .col-xs-6 {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.check-contracts-db {
    position: relative;
    cursor: pointer;
    color: var(--purple-blue);
    padding: 30px 0;
    transition: all 300ms;
}

    .check-contracts-db > table img {
        max-width: 50px;
        height: auto;
        margin-top: 5px;
        margin-left: 5px;
    }

    .check-contracts-db .activity-notification {
        background: var(--gray-lightest);
        display: inline-flex;
        padding: 5px 13%;
        margin-right: 10px;
        transition: all 300ms;
    }

    .check-contracts-db .activity-notification-number {
        background: var(--gray-lightest);
        display: inline-block;
        padding: 5px 15px;
        float: left;
        margin-right: 10px;
        transition: all 300ms;
    }

        .check-contracts-db .activity-notification-number a {
            color: var(--purple-blue);
            font-weight: 600;
            font-size: 16px;
        }

            .check-contracts-db .activity-notification-number a:hover {
                text-decoration: none;
            }

    .check-contracts-db:hover .activity-notification-number {
        background: #fdd5b9;
    }

    .check-contracts-db .notification-title {
        font-size: 16px;
        font-weight: 500;
        display: inline-block;
        float: left;
        padding: 7px 0;
        transition: all 300ms;
        margin-left: 7%;
    }

    .check-contracts-db:hover .notification-title {
        color: var(--peach-dark);
    }

.check-contracts-right-bar {
    float: right;
    width: 1px;
    height: 50px;
    background: var(--gray-lighter);
}

.check-contracts {
    position: relative;
    cursor: pointer;
    color: var(--purple-blue);
    padding: 30px 0;
    transition: all 300ms;
}

    .check-contracts > table {
        border-radius: 8px;
        box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/

        position: relative;
        transition: all 300ms;
    }

    .check-contracts:hover > table {
        background-color: #1995ab !important;
    }

    .check-contracts > table img {
        max-width: 50px;
        height: auto;
        margin-top: 5px;
        margin-left: 5px;
    }

    .check-contracts .activity-notification-number {
        background: var(--gray-lightest);
        display: inline-block;
        padding: 5px 15px;
        float: left;
        margin-right: 10px;
        transition: all 300ms;
    }

        .check-contracts .activity-notification-number a {
            color: var(--purple-blue);
            font-weight: 600;
            font-size: 30px;
        }

            .check-contracts .activity-notification-number a:hover {
                text-decoration: none;
            }

    .check-contracts:hover .activity-notification-number {
        background: #fdd5b9;
    }

    .check-contracts .notification-title {
        font-size: 15px;
        font-weight: 400;
        display: inline-block;
        float: left;
        padding: 7px 0;
        transition: all 300ms;
    }

    .check-contracts:hover .notification-title {
        color: var(--peach-dark);
    }

    .check-contracts .right-bar {
        float: right;
        width: 1px;
        height: 50px;
        background: var(--gray-lighter);
    }

.charts-heading {
    padding: 12px 0;
    text-align: center;
    color: var(--primary-text) !important;
    border-radius: 5px 5px 0 0;
    margin-top: 15px;
    text-transform: uppercase;
    font-size: 21px;
}

.dashboard-charts h3.charts-heading i {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 25px;
    height: 25px;
    font-weight: normal;
    position: absolute;
    right: 27px;
    top: 30px;
}

.charts-heading1 {
    background-color: var(--peach);
}

.charts-heading2 {
    background-color: #23709e;
}

.charts-heading3 {
    background-color: #40b97c;
}

.charts-heading4 {
    background-color: var(--peach);
}

h2.subpage-heading {
    font-size: 20px;
    padding: 5px 10px 5px 10px;
    margin: 0;
    border-bottom: 1px solid var(--gray-lightest);
}

    h2.subpage-heading p {
        font-size: 0.85em;
    }

h3.subpage-heading {
    font-size: 27px;
    padding: 15px 10px 15px 20px;
}

h2.iframe-heading {
    font-size: 20px;
    text-align: center;
}

.utility-button {
    padding: var(--spacing-3) 0;
}

    .utility-button .contextual a.task-btn {
        display: inline-block;
        margin-right: var(--spacing-2);
        margin-bottom: var(--spacing-1);
    }

    .utility-button .contextual a:hover {
        color: var(--orange);
    }

.add-new-request-table {
    margin-top: 10px;
}

    .add-new-request-table tr.trdynamic {
        background-color: var(--light);
        margin-left: 15px;
    }

    .add-new-request-table tr.trdynamic,
    .add-new-request-table tr#MainContent_EV {
        padding-left: 20px;
    }

        .add-new-request-table tr.trdynamic td {
            text-align: left !important;
        }

            .add-new-request-table tr.trdynamic td input[type="radio"],
            .add-new-request-table tr.trdynamic td input[type="checkbox"] {
                margin-right: 10px;
            }

/*Table CSS*/

.docusign-send-table {
    padding: 15px;
    background-color: var(--light);
    border-radius: 0.25rem;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

    .docusign-send-table tr.RecipientClass a {
        color: var(--primary-text);
        border-radius: 0.25rem;
    }

        .docusign-send-table tr.RecipientClass a:hover {
            background: var(--green);
        }

    .docusign-send-table td {
        border-bottom: none !important;
    }

:not(.cp-datatable-body) > tr.even {
    background: var(--gray-lightest);
}

:not(.cp-datatable-body) > tr.odd {
    background-color: var(--light);
}

/*Contract Relatioin Page*/

.cp-relation-update {
    padding: 10px 15px;
}

.label-margin-sp {
    margin-top: 8px !important;
}

.label-with-checkbox label {
    margin-top: 0 !important;
}

.label-without-margin {
    margin: 0;
}

/*Advance Search Page*/

.advance-search-box fieldset.collapsible legend {
    margin-left: 15px;
}

.advance-search-box .search-box {
    position: relative;
    display: block !important;
    padding: 0 15px 25px 15px;
    padding-bottom: 25px;
}

    .advance-search-box .search-box .advance-search-input {
        display: inline-block;
        padding: 5px 15px;
    }

.advance-search-box p.suggestion {
    padding-left: 15px;
    padding-right: 15px;
}

.advance-search-box p.dynamic-suggestion {
    padding: 0 15px;
    margin: 0;
}

.adv_reset {
    display: inline-block;
    float: right;
    margin-top: 15px;
}

.adv_filter h3 {
    font-size: 18px;
    margin-top: 10px;
}

.adv_filter .radio_group {
    margin: 10px 0;
}

.adv_filter_radio {
    max-width: 440px;
    margin-bottom: 15px;
}

    .adv_filter_radio label {
        margin-left: -2px;
    }

/*Radio button design*/

.adv_filter_radio {
    position: relative;
}

.cpai_radios,
.cpai_radios tr td {
    position: relative;
    padding: var(--spacing-2);
}

    .cpai_radios input {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    .cpai_radios label {
        position: relative;
        display: inline-block;
        padding-left: 25px;
        top: 0;
        cursor: pointer;
        line-height: 17px;
    }

        .cpai_radios label:before,
        .cpai_radios label:after {
            content: "";
            width: calc(1em + 2px);
            height: calc(1em + 2px);
            display: block;
            box-sizing: border-box;
            border: calc(1em / 7) solid transparent;
            z-index: 0;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
        }

    .cpai_radios input:checked ~ label:before {
        animation: pulse 1s;
    }

    .cpai_radios label:after {
        transform: scale(0.4) !important;
    }

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--gray-light);
    }

    100% {
        box-shadow: 0 0 0 1.5em rgba(189, 195, 199, 0); /* needs to be in this format to pulse correctly */
    }
}

.adv_filter button.ui-datepicker-trigger,
.custom-report-data button.ui-datepicker-trigger {
    display: none;
}

.adv_filter label.small,
.custom-report-data label.small {
    color: var(--muted);
    margin: 0 0 var(--spacing-2);
}

.adv_filter .form-group {
    margin-bottom: 20px;
}

.adv_control_label label {
    display: block;
}

.KeyotisearchBtn {
    display: inline-block;
    height: 32px;
    padding: 5px 30px !important;
    border-radius: 0.25rem;
    background: var(--peach);
    color: var(--white);
    font-weight: 500;
    position: relative;
    top: 0;
    margin-left: 10px;
}

    .KeyotisearchBtn:hover {
        background: var(--peach-dark);
    }

.adv_fieldset {
    background-color: var(--light);
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
    margin: 0 15px 15px;
    padding: 10px 20px;
}

.radio-group {
    border: 1px solid var(--gray-lighter);
    display: inline-block;
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 0.25rem;
    position: relative;
}

.radio-group-named {
    padding-left: 0px;
    margin-bottom: 20px;
    background-color: var(--light);
}

.radio-group-name {
    background: var(--gray-lighter);
    color: var(--purple-blue);
    height: 42px;
    line-height: 42px;
    margin-right: 25px;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    text-align: center;
}

.radio-group-radios {
    display: inline-block;
    float: right;
}

.radio-group .btn-radio {
    display: inline-block;
    margin-right: 15px;
}

.checkbox-with-label {
    display: block;
    width: 100%;
}

    .checkbox-with-label td {
        height: 42px;
    }

.form-box {
    padding: 10px;
    margin-left: 15px;
}

    .form-box .form-group label {
        padding-right: 8px;
    }

.input-with-label {
    width: 100%;
}

.add-customers-form {
    text-align: center;
    width: 100%;
}

.vendor_saved_data {
    border: none;
}

.autofill-wrap input {
    width: 100%;
    margin-bottom: 7px;
}

.autofill-wrap .btn-success {
    padding: 5px 20px;
    background: var(--peach);
    color: var(--white);
    border: none;
    border-radius: 0.25rem;
    display: block;
    width: 180px;
}

    .autofill-wrap .btn-success:hover {
        background: var(--peach-dark);
    }

.alert-box {
    margin: 10px auto;
}

    .alert-box p {
        color: var(--red);
    }

.form-with-label label {
    margin: 0;
}

.division-title {
    font-weight: bold;
}

.mwschild-button-row {
    margin-top: 15px;
}

/*Contracts and Contact Page*/

.contract-search,
.contact-search {
    position: relative;
}

    .contract-search input .contact-search input {
        width: 100%;
        position: relative;
        padding-right: 40px;
    }

.form-box label {
    display: block;
}

/*Reports*/

/*
    Calendar Page
*/

.calendar .action-wrapper {
    align-self: flex-end;
    justify-content: space-between;
    padding-bottom: 0.25rem;
}

.calendar-agenda .filter-action a:not(:first-child) {
    margin-left: 10px;
}

.calendar-filter {
    margin-top: 10px;
    margin-bottom: 25px;
    display: flex;
}

    .calendar-filter label {
        margin-right: 8px;
        margin-left: 8px;
    }

.calendar-header .calendar-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CalendarTabs {
    margin-top: 10px;
}

    #CalendarTabs ul {
        margin-bottom: 0;
    }

        #CalendarTabs ul li {
            margin-top: 1px;
            float: left;
            list-style: none;
            display: block;
        }

            #CalendarTabs ul li:not(:first-of-type) {
                border-left: 1px solid;
            }

            #CalendarTabs ul li a {
                display: inline-block;
                padding: 0 20px;
            }

                #CalendarTabs ul li a.selected {
                    font-weight: bold;
                }

.calendar-note {
    padding: 0 15px 15px;
    text-align: center;
}

#Calendar {
    padding: 0 20px;
}

.calendar-plusi {
    display: none;
}

table.cal a.cal-data {
    display: block;
    text-align: center;
    padding: 10px;
}

table.cal td h3 a {
    font-size: 20px;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 10px;
}

.calendar-header .calendar-title div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
}

a.calendar-nav {
    display: inline-block;
    transition: all 300ms;
}

.activity-legend {
    padding-left: 20px;
}

    .activity-legend i {
        margin: 8px;
    }

.calendar-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.calendar-nav-label {
    padding: 0 10px 0 20px;
}

ol.calendar-sync {
    padding-left: 15px;
}

    ol.calendar-sync img {
        max-width: 100%;
        height: auto;
    }

.open-activity-bg span.tip {
    display: none;
    text-align: left;
}

/* Custom Scrollbar Styles specific to this particular page */

.ss-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    float: left;
}

.ss-content {
    height: 100%;
    padding: 0 0 0 0;
    position: absolute;
    top: 0;
    overflow: visible;
    box-sizing: border-box;
}

    .ss-content.rtl {
        width: calc(100% + 18px);
        right: auto;
    }

.ss-scroll {
    position: relative;
    background: var(--dark-10);
    border-radius: 0.25rem;
    top: 0;
    z-index: 2;
    cursor: pointer;
    width: 1px;
    background: var(--purple-gray-dark);
}

.ss-hidden {
    display: none;
}

.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll {
    opacity: 1;
}

.ss-grabbed {
    user-select: none;
}

/*End Custom Scrollbar*/

a.back-calendar {
    position: relative;
    top: -49px;
    right: 15px;
    float: right;
    border-radius: 0.25rem;
    padding: 6px 12px;
    transition: all 300ms;
}

.sp-clear-calendar {
    display: none;
}

/*


/*Register Page*/

.user-register-box {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0 15px;
}

    .user-register-box .user-photo {
        padding-top: 15px;
        text-align: center;
    }

    .user-register-box .form-group label {
        display: block;
    }

    .user-register-box .form-group input {
        width: 100%;
    }

/*My vault page form*/

.box-center {
    text-align: center;
}

.vault-forms {
    display: block;
    padding: 15px;
    background-color: var(--light);
    max-width: 800px;
    margin: 60px auto 20px;
    border-radius: 0.25rem;
    text-align: left;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

    .vault-forms.size-xl {
        max-width: 600px;
    }

    .vault-forms .form-group label {
        display: block;
    }

    .vault-forms .form-action input[type="submit"] {
        margin-left: 0 !important;
        margin-right: 10px;
    }

/*Schedule Report Page*/

.custom-report-schedule-label {
    margin: 0;
}

/*Filter database*/

.filter-group label {
    min-width: 110px;
}

.schedule-form-group label {
    margin: 0;
}

/*Advance Search Page*/

.checkbox-with-label label {
    padding-left: 5px;
}

#filters1 .row {
    margin-top: 4px;
    margin-bottom: 4px;
}

#MainContent_tblMetadataTitle .container-fluid:first-of-type {
    padding: 0 50px;
}

#MainContent_tblMetadataTitle
#masterDataTable
tbody
tr
td[data-title="Found In"]
.highlights
.highlightsDisplayName {
    cursor: pointer;
}

/*My Vault Page*/

.clause-form-action {
    padding: 20px 10px;
}

.register-form-action {
    text-align: center;
    padding: 10px 0 40px;
}

.user-role-table {
    padding: 15px;
}

    .user-role-table .clickMe .role-permission-section {
        padding: 15px;
    }

.role-permission-checks {
    padding: 15px 0;
}

tr.urole-checkboxes td {
    padding: 5px 0;
}

.user-role-table .form-action {
    text-align: center;
}

    .user-role-table .form-action input[type="submit"] {
        width: 200px;
        margin: 15px 0;
    }

.add-contract-template table#chkList td label {
    margin-top: 0;
}

.add-contract-template table#chkList input[type="checkbox"] {
    margin-right: 4px;
}

.cp-template-cbox td {
    display: block;
}

.add-contract-template span {
    font-weight: 500;
}

/*Edit Clause Page*/

.clause-description-editor textarea {
    width: 100%;
}

.clause-add-fields {
    margin-bottom: 15px;
}

    .clause-add-fields a:hover {
        text-decoration: none;
    }

/*Some special margin class*/

.marginb10 {
    margin-bottom: 10px;
}

.table-title-heading td {
    padding: 10px;
}

.all-checkbox-selector-th #chkSelectAll {
    position: relative;
    left: 2px;
}

/*Branding ContractPodAi*/

.cptextarea {
    border: 1px solid var(--purple-gray);
    border-radius: 0.25rem;
    color: var(--purple-blue);
    outline: none;
}

    .cptextarea:focus {
        border-color: var(--purple-gray-dark);
        box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
    }

/*Snapshot page*/

.page-breadcrumb {
    margin: 10px 0;
}

.page-breadcrum a,
a.violet {
    color: var(--purple-blue);
}

    .page-breadcrum a:hover,
    a.violet:hover {
        color: var(--peach-dark);
    }

.page-breadcrumb {
    color: var(--purple-gray-dark);
}

#lblContractIDHeader {
    font-size: 30px;
}

.snapshot-action {
    margin: 20px 0;
}

.snapshot-carousel {
    background: var(--gray-lightest);
    padding: 10px 15px;
    margin: 0 15px 15px;
    text-align: center;
}

.snapshot-box {
}

    .snapshot-box .subject h3,
    .snapshot-box p.author {
        padding-left: 15px;
    }

    .snapshot-box p.author {
        margin: 10px 0;
    }

.snapshot-heading {
    background: #1995ab;
    color: var(--primary-text) !important;
    padding: 10px 15px;
}

    .snapshot-heading h3 {
        color: var(--primary-text) !important;
        margin: 0;
        font-size: 18px;
    }

.snapshot-data {
    padding-bottom: 20px;
}

.data-box {
    background-color: var(--light);
    padding: 10px 15px 15px;
    font-size: 14px;
    display: inline-block;
    float: left;
    min-width: 250px;
}

    .data-box.highlighted {
        background: var(--gray-lightest);
        border-radius: 0.25rem;
    }

.data-heading {
    font-weight: 500;
    color: var(--purple-gray-dark);
    margin-bottom: 5px;
}

.data-value {
    color: var(--purple-blue);
    font-weight: 400;
    word-break: break-word;
}

.contract-details {
    padding: 20px 0;
    border-top: 1px solid var(--light-30);
    border-bottom: 1px solid var(--light-30);
}

    .contract-details h3 {
        padding-left: 15px;
    }

.contract-data-detail {
    margin-bottom: 20px;
}

#trLatestContractFileLINK td {
    padding-left: 15px;
}

#divReqDescr {
    margin-bottom: 20px;
}

.snapshot-box2 {
    margin-top: 20px;
}

.cp-tab {
    background-color: var(--light);
    margin: 15px 0;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

.latest-cp-file {
    background-color: var(--light);
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
    padding: 15px 15px 25px;
}

.latest_cp_icon {
    padding: 0 5px 0 15px;
    font-size: 14px;
}

.attachments .latest_cp_icon {
    padding-left: 0;
}

.attachments .size {
    font-size: 0.75rem;
}

.snapshot-tabs {
    margin: 0 15px;
    border-bottom: 1px solid var(--purple-gray-dark);
}

    .snapshot-tabs > li {
        list-style: none;
        width: auto;
        float: left;
    }

        .snapshot-tabs > li a,
        .snapshot-tabs > li > span {
            display: block;
            padding: 15px 25px;
            text-align: center;
            color: var(--purple-gray-dark);
            font-size: 14px;
            font-weight: 500;
            position: relative;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 300ms;
        }

        .snapshot-tabs > li:last-child a {
            border-right: none;
        }

        .snapshot-tabs > li a i {
            padding-right: 10px;
        }

        .snapshot-tabs > li > a:hover,
        .snapshot-tabs > li.selected > span:hover,
        .snapshot-tabs > li > a.selected,
        .snapshot-tabs > li.selected > a,
        .snapshot-tabs > li.selected > span {
            color: var(--primary-text);
            box-shadow: 0 3px 0 0 var(--peach);
        }

#activity .pagination {
    margin-left: 0;
}

span.journal-link a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 20px;
}

.snapshot-action #divEditRequest a {
    display: inline-block;
    margin-left: 7px;
    font-weight: normal;
    float: right;
}

    .snapshot-action #divEditRequest a i {
        padding-right: 6px;
    }

.snapshot-action input[type="submit"] {
    float: left;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 0.25rem;
    background: var(--gray-lightest);
    color: var(--peach) !important;
    border: 1px solid var(--peach);
    margin: 0;
    height: 34px;
}

    .snapshot-action input[type="submit"]:hover {
        background: var(--peach);
        color: var(--white);
    }

.section-title {
    font-size: 21px;
    font-weight: 600;
    position: relative;
    margin-bottom: 20px;
}

    .section-title.tab-title {
        margin-bottom: 30px;
    }

.contract-request-action .bg-cyan {
    background: #00bcd4 !important;
}

    .contract-request-action .bg-cyan:hover {
        background: #009fb3 !important;
    }

.file-button {
    display: inline-block;
    border: 1px solid var(--peach);
    padding: 5px 7px;
    border-radius: 3px;
    transition: all 300ms;
    font-size: 16px;
    margin: 0 4px;
}

.journal-link-big a {
    padding: 8px 20px !important;
}

a.linkContractVersionFile {
    font-size: 14px;
}

#note-1 h4 {
    padding-bottom: 20px;
}

.exportToPdfHead {
    padding: 10px 15px;
    text-align: center;
    background: var(--gray-lightest);
    margin: 15px;
}

.pdf-export {
    display: inline-block;
    padding: 7px 40px !important;
    font-size: 14px;
}

    .pdf-export:hover {
        text-decoration: none;
    }

#MainContent_Workflowexport ul li {
    list-style: none;
}

.CR-back {
    margin: 0 20px 40px 20px;
}

/*Snapshot Activity Tab*/

#actdiv legend {
    font-size: 18px;
    text-align: center;
    color: var(--peach-dark);
}

/*Snapshot document tab*/

#tab-content-document .attachments {
    padding-left: 20px;
    overflow: hidden;
}

.attachments span label {
    min-width: 120px;
}

.cp_attached_file {
    display: block;
    float: left;
    width: 45%;
    padding: 15px;
    margin: 15px;
    background: var(--gray-lightest);
    border-radius: 0.25rem;
    min-height: 222px;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

.cp_attachment_delete {
    display: block;
    margin-top: 10px;
    text-align: center;
}

    .cp_attachment_delete a.delete {
        text-align: center;
        margin: 0 auto;
        display: inline-block;
        border: 1px solid var(--peach);
        padding: 5px 15px;
        border-radius: 0.25rem;
    }

        .cp_attachment_delete a.delete:hover {
            background: var(--peach);
            color: var(--white);
        }

/*Key Obligation Master*/

.key-obligation-heading p {
    padding: 5px 0 5px 15px;
}

.KeyG[style] {
    min-height: 42px !important;
}

.key-obligation-table .q_yes img,
.key-obligation-table .q_no img {
    max-width: 20px;
    height: auto;
    margin-right: 5px;
}

.key-obligation-table .q_yes {
    margin-right: 15px;
}

.key_termination_q img {
    max-width: 20px;
    height: auto;
    margin-right: 5px;
    margin: 5px 5px 5px 0;
}

/*Snapshot Key fields*/

.snapshot-keyfields {
    position: relative;
}

    .snapshot-keyfields ul li {
        list-style: none;
    }

/*Snapshot Key Obligations*/

.cp_fieldset {
    background-color: var(--light);
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
    padding: 15px;
    margin: 10px 0;
    max-width: 1000px;
}

    .cp_fieldset h3 {
        background: var(--gray-lightest);
        padding: 15px;
        margin-bottom: 10px;
    }

.key-obligation-table ul li,
#tab-content-keyobligations ul li {
    list-style: none;
}

.obligations {
    border-bottom: 1px dotted var(--gray-lighter);
    padding-top: 10px;
}

    .obligations h4 {
        padding: 0;
        border: none;
        font-size: 13px;
        font-weight: 500;
    }

    .obligations p {
        font-size: 13px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        min-height: 25px;
    }

/*Edit Key Obligation*/

.snapshot-keyob {
    position: relative;
}

.edit-key-obligation {
    padding: 0 15px;
}

/*Add Manual Contract Page*/

.manual-contract-date-table fieldset td {
    margin-top: 0;
}

.boxKyObligation #divkeyObligation label {
    width: auto;
}

/*Snapshot page doc-upload-button*/

td.doc-upload-button a.plupload_button {
    display: block;
    padding: 14px 0;
    margin-top: 5px;
    z-index: 2;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: bold;
}

/*Document Type Master*/

.document-type-master {
    /* background-color: var(--light); */
    border-radius: 0.25rem;
    padding: 15px;
}

/*Application Type Master*/

.application-type-master-page #masterDataTable i {
    font-weight: 600;
}

    .application-type-master-page #masterDataTable i.fa-grip-vertical {
        color: var(--light-30);
    }

.application-type-master-page .application-type-master {
    border-radius: 0.25rem;
    margin: 15px;
    padding: 15px;
}

    .application-type-master-page .application-type-master table {
        margin-bottom: 20px;
    }

        .application-type-master-page .application-type-master table label.switch {
            vertical-align: middle;
        }

    .application-type-master-page .application-type-master label {
        color: var(--primary-text);
    }

    .application-type-master-page .application-type-master .form-action {
        text-align: center;
    }

    .application-type-master-page
    .application-type-master
    #tblTable:not(:first-of-type)
    tbody
    tr
    td:first-child {
        color: var(--primary-text);
        font-size: 15px;
    }

    .application-type-master-page
    .application-type-master
    #tblTable:first-of-type
    tbody
    tr
    td:first-child {
        font-weight: 500;
        text-transform: capitalize;
        font-size: 15px;
    }

    .application-type-master-page
    .application-type-master
    .AllCheckBoxClass
    td:first-child {
        padding-right: 1.5rem;
    }

.application-type-master-page input[readonly] {
    background: var(--cpai-secondary-text-alpha-30) !important;
    border-color: var(--cpai-secondary-text-alpha-30) !important;
    color: var(--primary-text) !important;
}

/*Snapshot page pdf export*/

.pdf-export-wrap {
    margin-top: 5px;
}

    .pdf-export-wrap a {
        background: var(--peach-dark);
        display: inline-block;
        padding: 8px 20px;
        color: var(--primary-text) !important;
        font-size: 13px;
        text-align: center;
    }

        .pdf-export-wrap a:hover {
            background: #2d9da1;
            text-decoration: none;
        }

.cpai-link {
    display: inline-block;
    padding: 5px 15px;
    background: var(--peach);
    color: var(--white) !important;
    transition: all 300ms;
}

    .cpai-link:hover {
        background: var(--peach-dark);
        text-decoration: none;
    }

.SingleSelect input[type="button"] {
    vertical-align: middle;
}

/*Forget password form*/

#formForgotPassword .box.tabular {
    margin-top: 15px;
}

/*Add Manual Contract*/

.add-manual-contract .priority-reason {
    display: block;
    margin: 7px 0;
}

    .add-manual-contract .priority-reason label {
        margin-left: -230px;
        margin-top: 0px;
        display: block;
        text-align: right;
    }

/*Approval Page*/

.approval-stage label {
    margin-top: 0;
}

.approval-stage input[type="radio"] {
    margin-right: 2px;
}

.stage-contract-type {
    margin: 0 15px;
    border-bottom: 1px solid var(--light-30);
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 8px;
    color: var(--peach-dark);
}

    .stage-contract-type label {
        color: var(--peach-dark);
    }

.stage-wrapper {
    padding: 0 15px;
    display: block;
}

    .stage-wrapper td {
        padding: 0;
    }

.stage-td-pad {
    padding-top: 15px !important;
}

.stage-heading {
    background: var(--purple-muted);
    color: var(--primary-text);
    font-size: 17px;
    font-weight: 600;
    padding: 10px 15px;
    margin-bottom: 12px;
    height: 44px;
}

    .stage-heading th {
        background: none !important;
    }

    .stage-heading .stage-heading-title {
        padding-left: 15px;
    }

    .stage-heading .add-stage-th {
        padding-right: 0 !important;
    }

    .stage-heading .stage-heading-title {
        width: 100%;
    }

.add-stage-button {
    color: var(--white) !important;
    background: var(--peach);
    padding: 15px 60px;
    position: relative;
    vertical-align: middle;
    text-align: center;
    transition: all 300ms;
}

.add-approval-stage {
    padding-left: 15px !important;
    padding-bottom: 15px !important;
}

.add-stage-button i {
    padding-right: 5px;
}

.add-stage-button:hover {
    background: var(--purple-blue);
    text-decoration: none;
}

.single-stage-td {
    vertical-align: top;
}

    .single-stage-td .StageBox {
        background: var(--gray-lightest);
        border: none;
        margin-right: 15px;
        margin-bottom: 15px;
        padding: 20px;
    }

.single-stage-td-3 .StageBox {
    margin-right: 0px;
}

.single-stage-td .splitcontentleft {
    float: none;
    width: 100%;
    border: none;
}

.StageBox h3 {
    font-size: 18px;
}

.StageBox b {
    font-size: 15px;
    display: block;
    margin-top: 7px;
}

.StageBox .tblEditDelete {
    margin-top: 15px;
}

.StageBox .tblEditDelete {
    text-align: center;
}

.tblEditDelete .stage-action {
    display: inline-block;
}

.created-by-me .subject,
.created-by-me .subject a {
    font-size: 16px;
}

/*User Management Generate Password*/

body.generate-pass-body {
    margin: 0;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.generate-pass-logo {
    text-align: center;
}

    .generate-pass-logo img {
        max-width: 400px;
        height: auto;
    }

.generate-password-box {
    border-top: 1px solid var(--gray-lighter);
    padding-top: 20px;
    margin-top: 20px;
}

    .generate-password-box h2 {
        text-align: center;
    }

/*Generate Password Page*/

#tblpwd {
    width: 100%;
}

    #tblpwd tr {
        display: block;
    }

        #tblpwd tr[style],
        #tblpwd tr td[style] {
            display: block !important;
            width: 100% !important;
            text-align: left !important;
        }

.tabular #tblpwd label {
    text-align: left;
}

.generate-pass-action {
    text-align: center;
    padding: 0 20px;
}

    .generate-pass-action input {
        margin-bottom: 20px;
    }

.approval_remark {
    font-weight: bold;
    padding-left: 10px;
    color: #1995ab;
}

/*CheckOut Page Send Email*/

#Emailbox {
    padding-bottom: 30px;
}

    #Emailbox .e-attach-label {
        margin-top: 0;
    }

    #Emailbox input,
    #Emailbox textarea {
        max-width: 100%;
    }

/*New Select Box Design by Ariful Ahsan*/

/** Custom Select **/

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    z-index: 9;
}

    .custom-select-wrapper select {
        display: none;
    }

.custom-select {
    position: relative;
    display: inline-block;
}

.custom-select-trigger {
    position: relative;
    display: block;
    padding: 0 50px 0 15px;
    font-size: 13px;
    font-weight: 400;
    line-height: 30px;
    background: var(--gray-lightest);
    color: var(--purple-gray-dark);
    border: 1px solid var(--purple-gray);
    border-radius: 0.25rem;
    cursor: pointer;
}

    .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: "";
        width: 8px;
        height: 8px;
        top: 50%;
        right: 25px;
        margin-top: -2px;
        border-bottom: 2px solid var(--purple-gray-dark);
        border-right: 2px solid var(--purple-gray-dark);
        transform: rotate(45deg) translateY(-50%);
        transition: all 300ms;
        transform-origin: 50% 0;
    }

.custom-select.opened .custom-select-trigger:after {
    margin-top: 2px;
    transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    text-align: left;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid var(--gray-light);
    border-radius: 0.25rem;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* Dc normalize dshadows*/
    background-color: var(--light);
    transition: all 300ms;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
}

.custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.custom-options:before {
    position: absolute;
    display: block;
    content: "";
    bottom: 100%;
    left: 25px;
    width: 7px;
    height: 7px;
    margin-bottom: -4px;
    border-top: 1px solid var(--gray-light);
    border-left: 1px solid var(--gray-light);
    background-color: var(--light);
    transform: rotate(45deg);
    transition: all 300ms;
}

.option-hover:before {
    background: var(--gray-lightest);
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    border-bottom: 1px solid var(--gray-light);
    font-size: 14px;
    font-weight: 400;
    color: var(--purple-gray-dark);
    line-height: 42px;
    cursor: pointer;
    transition: all 300ms;
}

    .custom-option:first-of-type {
        border-radius: 4px 4px 0 0;
    }

    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
    }

    .custom-option:hover,
    .custom-option.selection {
        background: var(--gray-lighter);
    }

/*Advance filter box in contract request data table*/

.adavance-filter-box {
    display: none;
    padding: 15px 15px 20px;
    background-color: var(--light);
    margin: 15px;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.contractrequest-adavance-filter-box {
    padding: 0px 0px 20px;
    display: none;
    background-color: var(--light);
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.filter-action.advance1 {
    margin-top: 28px;
}

/*Modal CSS write by Ariful Ahsan*/

/* The Modal (background) */

.modal:not(.cp-confirm) {
    background-color: var(--black-75);
    border-radius: 5px;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
}

/* Modal Content/Box */

.modal-content:not(.cp-confirm) {
    background-color: var(--gray-lightest);
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    width: 80%;
    /* Could be more or less, depending on screen size */
    border-radius: 0;
    border: none; /* 1px solid var(--color-gray);*/
}

/* The Close Button */

.close {
    color: var(--gray-light);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: var(--dark);
        text-decoration: none;
        cursor: pointer;
    }

.global-search-item {
    margin-right: 15px;
    padding: 6px;
    border: 1px dotted var(--purple-gray);
}

    .global-search-item dt a {
        display: inline-block;
        padding: 7px 0;
    }

#DivQuestionnair > h3 {
    color: var(--purple-gray-dark);
}

/*Questionnaire page styling*/

.update-questionnair {
    background-color: var(--light);
    padding: 20px;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 3px 0 var(--dark-50);
}

.ques_action {
    margin: 20px 15px;
}

/*RequestFlow Pdf export page*/

.contract-pdf {
    text-align: center;
    margin: 15px auto;
    padding: 0 15px;
}

    .contract-pdf a {
    }

.requestFlowPdf .search-filter-label {
    text-align: left;
}

div.password-reset {
    text-align: center;
}

.password-reset h2 {
    padding: 20px 5px;
}

.password-reset input[type="submit"] {
    padding: 8px 20px;
    max-width: 300px;
}

#tblpwd {
    position: relative;
    max-width: 300px;
}

.cp-activity-type-master input[type="radio"] {
    vertical-align: middle;
}

.edit-key-obligation textarea.KeyG {
    width: 100%;
    min-height: 60px;
}

/* Icons by Malik Hemphill */

.icon-right {
    margin-left: var(--spacing-1);
}

.icon-left {
    margin-right: var(--spacing-2);
}

/* Tabs Container by Malik Hemphill */

.main-content .tabs-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    clear: both;
}

    .main-content .tabs-container .tab-link {
        display: flex;
        font-size: 0.875rem;
        justify-content: center;
        text-transform: uppercase;
        padding: 0.5rem 0.25em;
        max-height: 51px;
        text-align: center;
        align-items: center;
        width: 100%;
        margin: 0;
        background-color: var(--panel);
        color: var(--primary-text);
        border: none;
        white-space:nowrap;
    }

/* Cognitive Search */

.search-results-page .search-container {
    align-items: center;
}

.search-results-page .tooltip-inner {
    max-width: 450px !important;
}

.search-results-page .advance-search-box input.adv-search-input {
    height: 40px;
}

.search-results-page
.advance-search-box
.advanced-inputs-cont
.advanced-inputs-toggle {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
}

.search-results-page .adv-search-input {
    vertical-align: middle;
    width: 100%;
    font-size: 16px;
    color: var(--grey);
    display: inline-block;
    padding: 5px 15px;
}

.search-results-page .spell-check {
    vertical-align: middle;
    font-size: 16px;
    color: var(--secondary-text);
    display: inline-block;
    margin-left: 15px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.search-results-page .spell-check-suggestion {
    vertical-align: middle;
    font-size: 16px;
    color: var(--tertiary-text);
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 10px;
}

.search-results-page #collapseExample.in {
    display: block;
}

.search-results-page .input-group > .ClearDate {
    height: 14px;
    margin: 9px 0px;
}

.search-results-page .input-group > .ui-datepicker-trigger {
    height: 16px;
    margin: 8px 2px;
}

.search-results-page .advance-search-box .adv_filter .datepicker {
    padding: 0 var(--spacing-4) 0 var(--spacing-2) !important; /* make space for the calendar icon */
    text-align: left;
    border-radius: 18px;
}

.search-results-page .advance-search-box .adv_filter .ui-datepicker-trigger {
    transition: all 300ms;
    position: absolute;
    margin-left: -2rem;
    margin-top: 0.5rem;
}

.search-results-page #compareModel {
    overflow: hidden;
    opacity: 1;
}

    .search-results-page #compareModel .modal-content {
        margin-top: 90px;
    }

.search-results-page span.is-translated {
    background-color: var(--dark-50);
    color: var(--primary-text);
    font-weight: bold;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
}

.search-results-page mark.search-match {
    background: var(--secondary);
    color: var(--white);
    border-radius: 0.25em;
    font-size: 14px;
    padding: 0 var(--spacing-1);
}

.search-results-page div.search-highlight {
    background: var(--dark-10);
    border: 1px solid var(--blue);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.search-results-page .highlightsIcon {
    cursor: pointer;
}

.search-results-page .cpai-content-wrapper div.modal {
    padding: 0;
    border-radius: 0;
}

.search-results-page .cpai-content-wrapper .modal-dialog {
    min-width: 100vw;
    height: 100%;
    margin-top: 0;
}

.search-results-page .cpai-content-wrapper .modal-content .row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

.search-results-page .cpai-content-wrapper .modal-content {
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
    border: 0;
}

.search-results-page .cpai-content-wrapper .modal-header {
    border-bottom: 1px solid var(--purple-lighter);
    padding: 7px 20px;
    background-color: var(--purple-darker);
}

    .search-results-page .cpai-content-wrapper .modal-header .modal-title {
        margin-top: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .search-results-page .cpai-content-wrapper .modal-header .modal-title p {
            margin-bottom: 0;
        }

.search-results-page .cpai-content-wrapper .modal-body {
    padding-top: 30px;
}

    .search-results-page .cpai-content-wrapper .modal-body .left-side-text {
        padding: 0 var(--spacing-4);
        flex-grow: 1;
    }

    .search-results-page .cpai-content-wrapper .modal-body .right-side-text {
        padding: 0 var(--spacing-4);
        flex-grow: 2;
    }

    .search-results-page .cpai-content-wrapper .modal-body .text-block {
        padding: 10px;
        background: var(--purple-pale);
        color: var(--purple-darkest);
        margin-bottom: 15px;
        border-radius: 10px;
        cursor: pointer;
    }

    .search-results-page
    .cpai-content-wrapper
    .modal-body
    .right-side-text
    .rs-text-block {
        overflow: hidden;
        height: 90vh;
        margin: 1px;
    }

    .search-results-page .cpai-content-wrapper .modal-body .left-highlight-block {
        overflow: hidden;
        height: 90vh;
    }

    .search-results-page .cpai-content-wrapper .modal-body .mCSB_dragger_bar {
        background-color: var(--dark) !important;
    }

    .search-results-page
    .cpai-content-wrapper
    .modal-body
    .right-side-text
    .rs-text-block
    .hl-span {
        display: block;
        background-color: var(--cyan);
    }

.search-results-page .advance-search-box .tips-section {
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
    margin: 25px 0 0;
}

.search-results-page .advance-search-box .advanced-inputs-cont {
    margin-bottom: 15px;
}

.search-results-page .switch {
    color: var(--purple-gray-dark);
    font-size: 14px;
    position: relative;
    margin-left: var(--spacing-3);
}

    .search-results-page .switch .slider {
        width: 42px;
    }

        .search-results-page .switch .slider:before {
            top: 1px;
        }

    .search-results-page .switch input[type="checkbox"]:checked:after {
        display: none;
    }

.search-results-page #MainContent_tblMetadataTitle .exports-btn div a,
.search-results-page #MainContent_tblMetadataTitle .exports-btn div input {
    border-radius: 50px;
}

.search-results-page #MainContent_tblMetadataTitle h2 {
    font-size: 25px;
}

.search-results-page .search-container {
    display: flex;
    margin: 0 50px;
}

.search-results-page .twitter-typeahead {
    flex-grow: 1;
}

.search-results-page .tt-menu,
.search-results-page .gist {
    text-align: left;
}

.search-results-page .typeahead,
.search-results-page .tt-query,
.search-results-page .tt-hint {
    height: 30px;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 30px;
    border: 2px solid var(--light-30);
    border-radius: 8px;
    outline: none;
}

.search-results-page .typeahead {
    background-color: var(--white);
    color: var(--purple-darkest);
}

    .search-results-page .typeahead:focus {
        border: 2px solid var(--pink);
    }

.search-results-page .tt-query {
    box-shadow: inset 0 1px 1px var(--dark-75);
}

.search-results-page .tt-hint {
    color: var(--gray);
}

.search-results-page .tt-menu {
    width: 422px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: var(--white);
    color: var(--purple-darkest);
    border: 1px solid var(--dark-30);
    border-radius: 8px;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.search-results-page .tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

    .search-results-page .tt-suggestion:hover {
        cursor: pointer;
        color: var(--white);
        background-color: var(--pink);
    }

    .search-results-page .tt-suggestion.tt-cursor {
        color: var(--white);
        background-color: var(--pink);
    }

    .search-results-page .tt-suggestion p {
        margin: 0;
    }

.search-results-page .gist {
    font-size: 14px;
}

.search-results-page #custom-templates .empty-message {
    padding: 5px 10px;
    text-align: center;
}

.search-results-page #multiple-datasets .league-name {
    margin: 0 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid var(--light-30);
}

.search-results-page #scrollable-dropdown-menu .tt-menu {
    max-height: 150px;
    overflow-y: auto;
}

.search-results-page #rtl-support .tt-menu {
    text-align: right;
}

.search-results-page .w3-container:after,
.w3-container:before {
    content: "";
    display: table;
    clear: both;
}

.search-results-page .w3-container {
    padding: 0.01em 16px;
}

.search-results-page .w3-modal-content {
    margin: auto;
    background-color: var(--white);
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}

@media (max-width: 600px) {
    .search-results-page .w3-modal-content {
        margin: 0 10px;
        width: auto !important;
    }

    .search-results-page .w3-modal {
        padding-top: 30px;
    }
}

@media (max-width: 768px) {
    .search-results-page .w3-modal-content {
        width: 500px;
    }
}

@media (min-width: 993px) {
    .search-results-page .w3-modal-content {
        width: 900px;
    }
}

.search-results-page .w3-display-topright {
    position: absolute;
    right: 0;
    top: 0;
}

.search-results-page .w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--dark-30);
}

.search-results-page .w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.search-results-page
.advance-search-box
.adv_filter
.inner-container
.input-group
table {
    max-width: 250px;
}

.search-results-page
.advance-search-box
.adv_filter:last-of-type
.inner-container
.input-group
table {
    max-width: 350px;
}

.search-results-page .advance-search-box .adv_filter .advanced-search-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 16px;
    height: 45px;
}

    .search-results-page .advance-search-box .adv_filter .advanced-search-tab h3 {
        text-transform: uppercase;
        font-size: 19px;
        font-weight: 600;
        margin: 0;
    }

    .search-results-page
    .advance-search-box
    .adv_filter
    .advanced-search-tab
    p.buttons.hide-when-print.filter-action.adv_reset {
        margin: 0;
    }

        .search-results-page
        .advance-search-box
        .adv_filter
        .advanced-search-tab
        p.buttons.hide-when-print.filter-action.adv_reset
        #btnReset {
            border-radius: 50px;
        }

.search-results-page div#MainContent_divExport .cpai_radios {
    display: flex;
    justify-content: space-between;
    max-width: 350px;
    width: 100%;
}

    .search-results-page div#MainContent_divExport .cpai_radios > div {
        width: 50%;
    }

search-results-page div#MainContent_divExport .cpai_radios > div {
    width: 50%;
}

.search-results-page .advance-search-box input:not(.chzn-container-multi) {
    border-radius: 18px !important;
}

.search-results-page .advance-search-box .chzn-container-multi .chzn-choices {
    border-radius: 18px !important;
}

/* */
/* Tab Component */
table#dlLinks tr {
    display: flex;
    flex-wrap: wrap;
}

    table#dlLinks tr td {
        width: calc(50% - 2px);
        padding: 1px;
    }

/* Buttons, inputs, textarea, and etc... */

.application-types .pretty.p-icon.p-pulse .icon {
    top: -4px;
}

div#MainContent_PaginationButtons1_panel1 > a {
    min-width: 71px;
    border-radius: 50px;
}

table#MainContent_PaginationButtons1_tblPaging .pagination-td-2 a {
    min-width: 71px;
    border-radius: 50px;
}

/* Legal Matter Type */

.application-types #MainContent_btnAddRecord i {
    display: inline-block;
}

/* Workflow Designer */

/*===========================
    Responsive Media Queries by Ariful Ahsan
============================*/

@media only screen and (min-width: 1440px) {
    .cp-box {
        padding: 16px 0;
    }

    .home_logo_user {
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 1200px) {
    .home_logo_user {
        margin-top: 10px;
    }

    .homepage {
        position: fixed;
        top: 50%;
        left: 50%;
        padding-bottom: 30px;
        transform: translate(-50%, -51%);
    }

    p.buttons.contract-request-filter {
        margin-top: 30px;
        margin-bottom: 0;
        text-align: right;
    }

    .sp_menu_name {
        font-size: 12px;
        font-weight: 500;
        color: var(--peach);
    }
}

@media only screen and (min-width: 1280px) {
    .docusign-send-table {
        display: block;
    }
}

@media only screen and (max-width: 1199px) {
    div.tabs ul.snapshot-tabs {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .homepage_logout_button .home-logout a {
        margin-bottom: 15px !important;
    }

    .contract-request-filter {
        margin-top: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1090px) {
    .sidebar-sp[style] {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .custom-report-checkboxes tr td {
        width: 50%;
    }

    .advance-search-input[style] {
        width: 70% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    /* Tabs Container */
    table#dlLinks tr {
        flex-wrap: wrap;
    }

        table#dlLinks tr td {
            width: calc(33% - 2px);
        }

            table#dlLinks tr td .tab-link {
                margin: 0;
            }
}

@media only screen and (min-width: 993px) {
    /* Tabs Container */
    .main-content .tabs-container {
        flex-wrap: nowrap;
    }

        .main-content .tabs-container .tab-link {
            width: 100%;
            margin: 0 1px;
        }

    table#dlLinks tr {
        flex-wrap: nowrap;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-logo {
        display: none;
    }
    /*Dashboard*/

    .dashdiv {
        position: relative;
    }
    /*Special css class for width 20%*/
    .col-sm-20 {
        width: 20%;
        float: left;
    }
    /*Snapshot page*/
    .data-box {
        width: 250px;
        min-height: 70px;
    }

    .snapshot-action {
        text-align: center;
        padding-right: 15px;
        position: relative;
        float: right;
        margin-top: 50px;
    }

        .snapshot-action #divEditRequest {
            position: relative;
            top: 0;
            display: inline-block;
        }

    .contract-request-action {
        padding-right: 20px;
        text-align: center;
    }

    .cp-utility a.cp-btn {
        margin-right: 10px;
    }
    /*Key Obligation Update*/
    .edit-key-obligation .trdynamic td input[type="text"] {
        width: 280px !important;
    }

    .clause-form-action {
        padding-left: 160px;
    }

    .contract-template-form-action {
        padding-left: 20%;
    }

    .manual-contract-action {
        text-align: center;
        padding: 5px 15px 15px;
    }

    #tblpwd {
        max-width: 400px;
    }

    .table-sp {
        display: block;
        width: 300px;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 5;
    }

        .table-sp tbody {
            float: right;
        }

    .edit-key-obligation .tdAlign {
        padding-left: 15px;
        width: 25%;
    }

    .edit-key-obligation textarea.KeyG {
        width: 60%;
    }
    /*Email Template*/
    .e_template_box p label {
        width: 200px;
    }

    .e_template_box p #txtSubject {
        margin-left: 202px;
        margin-top: 12px;
    }

    .user-register-box .user-photo .cp-button {
        margin-left: 15px;
    }

    .user-register-box {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 992px) {
    /*Special css class for width 20%*/

    .homepage_date_user {
        float: right;
    }

    #content {
        width: 100%;
    }
    /*Add Manual Contract*/
    .manual-contract-template {
        margin-left: 280px;
    }

    .main-content {
        width: 100%;
        padding-top: var(--spacing-2);
        padding-left: var(--spacing-2);
        transition: all 300ms;
    }

        .main-content.active {
            padding-left: 0;
            width: 100%;
            left: 0;
        }

    .single-stage-td .StageBox {
        min-height: 280px;
    }

    .cp-utility {
        position: absolute;
        right: 15px;
        top: 20px;
        z-index: 5;
    }

    .new_contract_request,
    .new_contact_request {
        text-align: right;
    }
}

@media only screen and (max-width: 991px) {
    .main-content {
        padding-left: 0;
    }

        .main-content.active {
            padding-left: 170px;
        }

    .home_logo img {
        display: inline-block;
    }

    .home_logo,
    .homepage_date_user {
        text-align: center;
    }

    .user-info-block {
        clear: both;
    }

    #menubar {
        display: block;
    }

    .global-search-box {
        position: absolute !important;
        top: 55px;
        left: 0;
        width: 100%;
        padding: 0 15px;
    }

    .main-search-wrapper {
        border: 1px solid var(--dark);
        border-radius: 0.25rem;
    }

    .main-content {
        padding-top: 20px;
    }

    #content {
        left: 0;
        width: 100%;
        transition: left 300ms;
    }

        #content.active {
            left: 200px;
        }

    #wrapper {
        left: 0px;
        transition: all 0.45s;
    }

        #wrapper.active {
            position: relative;
            left: 220px;
        }

    h3.plupload_droptext {
        font-size: 20px;
    }
    /*hide Calendar Activity hover effect in mobile and tablet*/
    div.tooltip:hover span.tip {
        display: none;
    }
    /*pagination hack*/
    .pagination-tr,
    .pagination-td-1,
    .pagination-td-2 {
        display: block !important;
        width: 100% !important;
    }

        .pagination-td-1 span.pagination {
            display: block;
        }
    /*Stage Configurator*/
    .stageTable,
    .stageTable > tbody,
    .stageTable > tbody > tr {
        display: block;
        width: 100%;
    }

        .stageTable .single-stage-td[style] {
            display: block;
            width: 100% !important;
        }

    .single-stage-td .StageBox {
        margin-right: 0;
    }

    .stageTable .single-stage-td .splitcontentleft {
        float: none;
        width: 100%;
    }

    .snapshot-tabs > li > a .tab-title {
        display: none;
    }

    .snapshot-tabs > li > a > i {
        padding: 0;
        font-size: 18px;
    }

    .cp-utility {
        margin-top: 15px;
    }

    .new_contract_request,
    .new_contact_request {
        margin-top: 15px;
        text-align: center;
    }
}

@media only screen and (min-width: 768px) {
    .text-right-d {
        text-align: right;
    }

    .contract-meta-checkboxes {
        margin-left: 20%;
    }
    /*Contract Request Page*/
    .input-with-label {
        width: 30%;
    }

    .add-new-request-contract-id input {
        width: 30%;
    }

    .textarea-with-label {
        width: 60%;
    }

    .contract-template-form #ParentDiv {
        padding: 10px 0;
    }
    /*Title Master Data Page*/
    .cp-title-master.box label,
    .cp-activity-type-master.box label,
    .application-type-master label,
    .add-contracting-party label,
    .add-department label {
        margin-top: 0;
    }

    /*Add manual contracts*/
    .boxKyObligation {
        margin-left: 200px;
    }
    /*All Modal top position fixing*/
    /*dhtml Modal responsive*/
    #FieldDetails.dhtmlwindow[style],
    #FieldDetailsMAW.dhtmlwindow[style],
    #FieldDetailsMA.dhtmlwindow[style],
    #FieldDetailss.dhtmlwindow[style],
    #FieldDetailssS.dhtmlwindow[style] {
        top: 30px !important;
    }
    /*Metadata search result in advance search*/
    #MainContent_tblMetadataTitle h2,
    #MainContent_tblDocumentTitle h2 {
        margin: 10px 0;
    }

    .search-box {
        padding-right: 100px;
    }

    .radio-group-name {
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
    }

    .checkbox-with-label {
        float: right;
        padding-left: 175px;
    }
    /*Schedule Report*/
    .schedule-form-group .control-pad {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    /*Advance Search Page*/
    #MainContent_SearchBox1 input[type="text"][style] {
        width: 380px !important;
    }

    .advance-search-input[style] {
        width: 60% !important;
    }
}

.WorkflowDesignerMaster-page .el-select__tags .el-select__tags-text,
.WorkflowDesignerMaster-page .el-select__tags .el-tag {
  max-width: 100%;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
  display: inline-block;
}
.WorkflowDesignerMaster-page .el-select__tags .el-tag {
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}

a.cp-btn {
    padding: 5px 20px;
}

@media only screen and (max-width: 767px) {
    /*Footer copyright*/
    .footer-copyright {
        position: relative;
    }

        .footer-copyright .opensource_credit {
            position: relative;
            top: 0;
            right: auto;
            margin-left: 25px;
        }

    .cp-form-label {
        display: inline-block;
        margin-bottom: 5px;
    }

    .cp-form-input {
        width: 100%;
    }

    .new-task-button {
        width: 75px;
    }

    .homepage {
        padding-bottom: 40px;
    }

    .check-contracts .right-bar {
        display: none;
    }

    a.cp-btn,
    a.cp-button {
        display: block !important;
        margin-bottom: 8px;
        margin-left: 0;
        text-align: center;
    }

    .my-contract-panel .panel-body {
        padding-right: 15px;
    }

    span.journal-link a {
        display: block;
        margin-left: 0;
    }

    .attachments h4 #spanDeleteContractVersion {
        display: inline-block;
        margin-top: 10px;
    }

    .colhalf {
        width: 100% !important;
    }

    p.buttons a {
        display: block;
        margin-top: 12px;
        margin-left: 0;
    }

    .report-action > a {
        display: block;
        margin-bottom: 10px;
        margin-left: 0;
    }

    .form-action {
        padding-left: 15px;
        padding-right: 15px;
    }

    .vault-forms .form-action {
        padding: 0 !important;
    }

    .form-action input[type="submit"] {
        display: block;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
        text-align: center;
    }

    .contract-request-action input[type="submit"] {
        width: 100% !important;
    }

        .contract-request-action input[type="submit"]:hover {
            width: 100% !important;
            text-align: center !important;
        }

    p.buttons a#btnReset {
        display: inline-block;
        margin: 10px 15px;
    }

    .report-contextual {
        margin: 0 10px !important;
    }

    .autofill-wrap .btn-success {
        width: 100%;
    }

    h3.plupload_droptext {
        font-size: 16px;
    }

    /*fixing form label in mobile*/
    .tabular p {
        padding: 15px;
    }

    .tabular label {
        margin-left: 0;
        text-align: left;
    }

    .tabular input {
        width: 100%;
        margin: 7px 0;
    }

        .tabular input[type="radio"],
        .tabular input[type="checkbox"] {
            width: auto;
        }

    .date-range-box input[style] {
        width: 48% !important;
    }
    /*dhtml Modal responsive*/
    #FieldDetails.dhtmlwindow[style] {
        width: 90% !important;
        left: 5% !important;
    }

    .div.box label {
        float: none !important;
    }
    /*Table*/

    /*==============
        Contract request page mobile responsive code
    ===============*/
    .input-with-label {
        width: 90%;
    }

    .add-new-request-contract-id input {
        width: 90%;
    }

    .textarea-with-label {
        width: 90%;
    }

    .contract-template-form #ParentDiv {
        width: 100%;
    }

    .add-new-request-table .trdynamic input[style] {
        width: 90% !important;
    }
    /*Request Flow page*/
    span[class~="journal-link"] a[class~="icon"] {
        text-align: left !important;
    }
    /*Calendar Page*/
    .sp-clear-calendar {
        display: block;
    }

    #CalendarTabs ul {
        margin-bottom: 25px;
    }

    #Calendar td .day-num > a > img,
    #CalendarDay td .day-num > a > img,
    #CalendarWeek td .day-num > a > img {
        display: block;
        margin: 0 auto !important;
    }

    div[class="tabs"] ul li {
        width: 50%;
    }

    #CalendarTabs ul li {
        padding: 3px 5px;
    }
    /*dhtml Modal responsive*/
    #FieldDetails.dhtmlwindow[style],
    #FieldDetailsMAW.dhtmlwindow[style],
    #FieldDetailsMA.dhtmlwindow[style],
    #FieldDetailss.dhtmlwindow[style],
    #FieldDetailssS.dhtmlwindow[style] {
        width: 100% !important;
        left: 0 !important;
        top: 20px !important;
    }
    /*Advance Search Page*/
    #MainContent_SearchBox1 input[type="text"][style] {
        width: 100% !important;
    }

    .lable-mbl-margin10 {
        margin-top: 10px !important;
    }
    /*User Register Page*/
    .user-register-box.box label {
        width: 100%;
    }

    .user-register-box input[type="submit"] {
        width: auto;
    }
    /*Snapshot tab activity and notes */
    #actdiv div.box label {
        width: 100%;
    }

    #actdiv div.box input[type="text"][style] {
        width: 90% !important;
    }

    li.plupload_droptext[style] {
        font-size: 16px !important;
    }
    /*Uploader modal hack*/
    #uploader[style] {
        width: 100% !important;
    }
    /*Edit Key Obligation Master*/
    .edit-key-obligation,
    .edit-key-obligation tbody {
        display: block;
    }

        .edit-key-obligation tr,
        .edit-key-obligation tr td {
            display: block !important;
            width: 100% !important;
            text-align: left !important;
        }
    /*Important Date Table*/
    .important-date-table tr,
    .important-date-table tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

        .important-date-table tr td input[type="text"][style] {
            width: 80% !important;
        }

    .update-questionnair table tr,
    .update-questionnair table tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    .update-questionnair table tr {
        padding: 10px 0;
    }

        .update-questionnair table tr td {
            margin-bottom: 5px;
        }

            .update-questionnair table tr td.td_colon {
                display: none !important;
            }
    /*Application Type Meta data detail Modal*/
    #mainTableMetadata.mainTableMetadata,
    #mainTable.mainTableMetadata {
        margin-left: 15px !important;
    }

    .custom-report-checkboxes tr td {
        display: block;
        width: 100%;
    }

    /*User Change Password*/
    .user-change-password-table tr,
    .user-change-password-table tr td {
        display: block;
        width: 100% !important;
    }

        .user-change-password-table tr td {
            text-align: left !important;
        }
    /*Upload box*/
    .blockUI.blockMsg.blockPage[style] {
        width: 96% !important;
        left: 2% !important;
    }
    /*Add manual contract*/
    .manual-contract-template {
        margin-left: 15px;
    }

    .add-manual-contract {
        margin-left: 190px !important;
    }

        .add-manual-contract.tabularr label {
            display: block;
            margin-left: 0;
            text-align: left;
            float: none;
            width: 100%;
        }

        .add-manual-contract.tabularr P {
            padding-left: 0;
            margin-bottom: 8px;
        }

        .add-manual-contract .manual-send-notification {
            margin: 0 !important;
            position: relative;
            top: 20px;
        }

    #MainContent_pnlCtrl td input[type="text"][style] {
        width: 150px !important;
    }
    /*table-block-mobile , make this table display block in mobile*/
    .contract-relation-add tr,
    .contract-relation-add tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    .contract-relation-add tr {
        margin-bottom: 15px;
    }

    /*Snapshot paga workflow tab buttons */
    .snapshot-box {
        margin-top: 15px;
    }

    .attachments .journal-link {
        display: block;
        float: none;
        margin-bottom: 10px;
    }

    .cp_attached_file {
        width: 90%;
        float: none;
    }
    /*Snapshot Document Tab*/
    .snapshot-document-upload {
        width: 90% !important;
    }
    /*Add Manual Contract Page*/
    .add-manual-contract[style] {
        margin-left: 0 !important;
    }

    .add-manual-contract > fieldset[style] {
        margin-left: 0 !important;
    }

    .manual-contract-date-table tr,
    .manual-contract-date-table tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

        .manual-contract-date-table tr td input[type="text"][style] {
            width: 250px !important;
        }

    .boxKyObligation p {
        padding-left: 0 !important;
    }

        .boxKyObligation p label {
            display: block !important;
            width: 100%;
            text-align: left;
            margin-left: 0 !important;
        }

    .boxKyObligation #keyObligationTable,
    .boxKyObligation #keyObligationTable tr,
    .boxKyObligation #keyObligationTable tr td {
        display: block;
        width: 100%;
    }

        .boxKyObligation #keyObligationTable tr td {
            text-align: left !important;
        }

            .boxKyObligation #keyObligationTable tr td label {
                margin-left: 0 !important;
            }

            .boxKyObligation #keyObligationTable tr td input[type="text"] {
                width: 100% !important;
            }
    /*Configurator Modal*/

    .clause-add-fields .cpai-link {
        margin: 5px 0;
    }
    /*Bulk Import Template*/
    label.bulk-import-status {
        width: auto !important;
    }
    /*Forgot Password form*/
    /*Form with label mobile view*/
    .mobile-formbox label {
        display: block;
    }

    /*contextual in mobile*/
    .contextual {
        float: none !important;
        padding-top: 6px;
    }

    .contract-template-form #txtpriorityremark[style] {
        width: 90% !important;
    }

    .KeyotisearchBtn {
        margin-top: 10px;
    }

    .checkbox-with-label {
        padding: 0 15px;
    }
    /*Snapshot page*/
    .snapshot-action {
        padding: 0 15px;
    }

        .snapshot-action input[type="submit"],
        .snapshot-action #divEditRequest a {
            display: block;
            width: 100%;
            text-align: center;
            margin-left: 0 !important;
            margin-bottom: 12px;
        }

    .contract-template-filter {
        margin-left: 0 !important;
        padding: 0 20px;
    }
    /*Custom Report Create */
    .custom-report-button {
        padding: 0 20px;
    }

    .panel-request-type label {
        margin-top: 10px;
    }
    /*Custom Report Schedule Box*/
    .custom-report-schedule-table,
    .custom-report-schedule-table tr,
    .custom-report-schedule-table tr td {
        display: block;
        width: 100%;
    }

        .custom-report-schedule-table .ShecduleCheck {
            margin-left: 0;
        }

        .custom-report-schedule-table .custom-report-schedule-label[style] {
            margin-left: 0 !important;
        }

        .custom-report-schedule-table input[type="text"] {
            width: 250px !important;
        }

        .custom-report-schedule-table .EmailList {
            width: 250px !important;
            height: 250px;
        }

    .create-custom-report-action {
        margin-left: 40px !important;
    }

    .e_template_box p label {
        display: block;
    }

    .e_template_box input[style] {
        width: 100% !important;
    }
}

@media only screen and (min-width: 501px) {
    .tabularr p {
        padding-left: 180px;
        /* width of left column containing the label elements */
    }
}

@media only screen and (max-width: 767px) {
    .dropdown-button.dropdown-user-button {
        width: 50px !important;
        overflow: hidden;
    }
}

@media only screen and (max-width: 500px) {
    /*Calendar hack for mobile*/
    div[id="Calendar"]:not(.attachments):not([id="ApprovalStages"]):not([id*="msg"]):not([id="note-1"]) {
        padding: 10px 0;
    }

    /*Dashboard Activity Notification Box*/
    .check-contracts > table img {
        max-width: 80px;
    }

    .check-contracts .activity-notification-number {
        right: 20px;
    }

    li.plupload_droptext[style] {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 800px) {
    .table-responsive > thead {
        display: none;
    }

    .table-responsive tr {
        border-top: 1px solid var(--light-30);
        border-left: 1px solid var(--light-30);
        border-right: 1px solid var(--light-30);
        margin-bottom: 10px;
    }

    .table-responsive td:before {
        position: absolute;
        content: attr(data-title);
        padding: 8px;
        left: 0;
        top: 0;
        width: 50%;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
    }

    .table-responsive td {
        border: none;
        border-bottom: 1px solid var(--gray-lighter);
        position: relative;
        padding-left: 50% !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        white-space: normal;
        text-align: left;
        min-height: 35px;
        width: 100%;
        word-wrap: break-word;
    }
    /*Docusing Send*/
    .table-responsive.docusign-send-table td {
        padding-left: 100px !important;
    }

        .table-responsive.docusign-send-table td:before {
            width: 100px;
        }

    .table-responsive tr.recipientListHeader {
        display: none;
    }

    .docusign-message-th {
        display: none !important;
    }

    .docusign-send-table .RecipientClass input[type="text"][style] {
        width: 100% !important;
    }
    /*End Docusing Send*/
    .table-responsive,
    .table-responsive tbody,
    .table-responsive td,
    .table-responsive th,
    .table-responsive tr {
        display: block;
    }

    .application-type-metadata-table th,
    .metadata-configurator-table th {
        display: none;
    }

    .table-responsive td.table-heading-small:before {
        font-size: 11px;
    }

    .table-responsive tbody tr td span {
        padding: 8px 0;
    }
    /*Custom Report Create Page special table Fields, Operator, Value*/

    #tabledata.table-responsive td {
        padding-left: 30% !important;
    }

        #tabledata.table-responsive td:before {
            width: 30% !important;
        }

    .stage-configurator-table td.stage-configurator-btns[style] {
        width: 100% !important;
    }
    /*Custom css class added in all big heading table th value .table-big-heading*/
    .table-responsive td.table-big-heading {
        min-height: 50px;
    }

        .table-responsive td.table-big-heading:before {
            white-space: normal;
        }

    /*User management , Role and Permission table*/
    .user-role-permit-table tr.urole-checkboxes {
        padding-left: 15px;
    }

    td.role-del-td {
        display: none;
    }
    /*Snapshot data table*/
    .snapshot-data-table,
    .snapshot-data-table tbody,
    .snapshot-data-table th,
    .snapshot-data-table tr,
    .snapshot-data-table tr td {
        display: block;
        width: 100% !important;
    }

        .snapshot-data-table th,
        .snapshot-data-table td {
            text-align: left !important;
        }

        .snapshot-data-table tr {
            padding-left: 15px;
            padding-right: 15px;
        }

            .snapshot-data-table tr td {
                margin-bottom: 10px;
            }
    /*Snapshot data table*/
    .key-obligation-table,
    .key-obligation-table tbody,
    .key-obligation-table th,
    .key-obligation-table tr,
    .key-obligation-table tr td {
        display: block;
        width: 100% !important;
    }

        .key-obligation-table tr {
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px dotted var(--gray-lighter);
        }

        .key-obligation-table .td-colon {
            display: none;
        }

    .issue.created-by-me {
        margin: 0 15px;
    }

    .add-stage-table-app tr,
    .add-stage-table-app th,
    .add-stage-table-app td {
        display: block;
        width: 100%;
    }

    .add-stage-table-app th {
        text-align: left !important;
    }

    .add-stage-table-app .td-colon {
        display: none;
    }

    .add-contract-template table#chkList,
    .add-contract-template table#chkList tbody,
    .add-contract-template table#chkList tbody tr,
    .add-contract-template table#chkList tbody tr td {
        display: block;
        width: 100%;
    }
}

@media only screen {
    #MainContent_Workflowexport {
        padding: 20px;
    }
}

/*Low resolution small device fixing*/

@media only screen and (max-width: 360px) {
    .header-btn .dropdown-button {
        width: 40px;
    }

    .adv_fieldset {
        padding: 10px 0;
    }
}

body.fixed-body {
    overflow: hidden;
}

.screen-header {
    top: 64px;
    margin-top: 10px;
}

x.main-content .tabs-container.um_tab {
    padding: 20px 0;
}

/*Breadcrumbs redesigned for LMM*/

.title_with_breadcrumb {
    display: inline-block;
}

.main-content .page-heading .tabs-container {
    padding: 15px 0;
}

.vault-forms {
    background: var(--dark);
    border: 1px solid var(--light-30);
}

/*Role & Permission page*/

.urole-checkboxes .pretty.p-default.p-thick .state label:after {
    top: -2px;
}

.user-register-box {
    background: var(--dark);
}

/*Advance search*/

.advance-search-box .adv_filter .inner-container {
    background: var(--dark-20);
    box-shadow: inset 0 0 0 1px var(--light-20);
}

.advance-search-box .adv_filter .container-fluid {
    padding: 0;
}

/*Cloud Dashboard*/
.cloud_box {
    margin-left: calc(var(--spacing-2) * -1);
    margin-right: calc(var(--spacing-2) * -1);
}

    .cloud_box > a {
        margin: var(--spacing-2);
        position: relative;
        display: inline-block;
        padding: 30px 5px;
        color: var(--light);
        border-radius: 0.25rem;
        text-align: center;
        min-width: 130px;
        transition: all 300ms;
        background: var(--secondary) url(../images/cpai_cloud.png) no-repeat 50% 50%;
        background-size: cover;
    }

#app[theme="light"] .cloud_box > a {
    background-color: var(--panel);
}

    .cloud_box > a:hover,
    #app[theme="light"] .cloud_box > a:hover {
        background-color: var(--purple-medium-lighter);
        color: var(--white);
    }

.cloud_box > a > i {
    margin-bottom: var(--spacing-3);
}

.cloud_box > a > span {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.cloud_box > a > div > span {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.dashboard-years-filter {
    margin-top: 22px;
}

.dashboard-summary {
    float: left;
}

    .dashboard-summary > h3 {
        line-height: 22px;
    }

/*Inconsistency issue*/

@media only screen and (min-width: 1200px) {
    #query_form_content .filter-action > a {
        text-transform: uppercase;
    }

    #main {
        min-height: 600px;
    }
}

/*Snapshot page Important Date(key field) UI*/

.important-date-table .cp_fieldset legend[style] {
    border: 1px solid var(--light);
    padding: 12px 15px 12px 25px;
    border-radius: 0.25rem;
    background: var(--dark-67);
}

.important-date-table tr.reminder-content td {
    padding: 20px 0;
}

.important-date-table .cp_fieldset h3 {
    background: var(--dark);
    border-radius: 0.25rem;
}

.keyfield-box a.linkbutton {
    min-width: 177px;
}

.kpi-benchmark .p-warning {
    color: var(--red);
    font-weight: 500;
}

/*kpi-contract-status-overall-page*/

.kpi-contract-status-overall-page label {
    color: var(--primary-text) !important;
}

/* @media only screen and (min-width: 992px) {
  .kpi-contract-status-overall-page .vault-form-submit a:hover,
  .kpi-contract-status-overall-page .vault-form-submit input:hover,
  .kpi-contract-status-overall-page .vault-form-submit .cp-button:hover {
    background: var(--purple-medium-lighter) !important;
    border-color: var(--purple-medium-lighter);
  }
}

.kpi-contract-status-overall-page .vault-form-submit a:hover,
.kpi-contract-status-overall-page .vault-form-submit input:hover {
  background: var(--secondary) !important;
  color: var(--primary-text) !important;
  border-color: var(--secondary);
}

.kpi-contract-status-overall-page .vault-form-submit > *:last-child {
  background-color: transparent !important;
  color: var(--primary-text) !important;
  border-color: var(--light);
}

.kpi-contract-status-overall-page .vault-form-submit a,
.kpi-contract-status-overall-page .vault-form-submit input {
  border-radius: 50px;
  border: 1px solid var(--secondary);
  background: var(--secondary) !important;
  color: var(--primary-text);
  display: inline-block;
  padding: 5px 16px;
} */

/*KpiBenchmark.aspx and others*/
.kpi-container .input-no-border {
    border: none !important;
}

    .kpi-container .input-no-border:focus {
        outline: none;
        border: none !important;
    }

.kpi-container input {
    vertical-align: middle;
    margin-top: 1px;
    margin-bottom: 1px;
    color: var(--purple-gray-dark);
    border-radius: 0.25rem;
    height: 32px;
    border: 1px solid var(--purple-gray);
    padding: 0 10px;
}

.kpi-container td > button {
    border: solid 1px var(--peach);
    background: var(--peach);
    color: var(--white) !important;
    padding: 8px 25px;
    border-radius: 0.25rem;
}

    .kpi-container td > button > i {
        margin-right: 8px;
    }

.kpi-container .col-sm-7 > p {
    color: var(--red);
    font-weight: 500;
}

/*end KpiBenchmark.aspx and others*/

/*BulkImport*/

.validation-errors {
    color: var(--red);
    padding-left: 10px;
    padding-right: 10px;
}

.bulk-contract-upload .number-of-contracts-input-container {
    display: flex;
    width: 100%;
}

    .bulk-contract-upload .number-of-contracts-input-container input {
        width: 5.5em;
        text-align: center;
    }

.bulk-contract-upload #lnkDownload i {
    margin-right: 5px;
}

.bulk-contract-upload .number-of-contracts-input-container span {
    flex: 1;
    white-space: nowrap;
    margin-top: 3px;
    margin-right: 10px;
}

.bulk-contract-upload .buttons {
    flex-wrap: wrap;
}

.progress-bar-control .legend-item > label {
    cursor: pointer;
}

.progress-bar-control .bar {
    height: 35px;
    margin-top: 5px;
    border: none;
    border-radius: 0.25rem;
}

.progress-bar-control .bar-new .ui-progressbar-value,
.progress-bar-legend .legend-item-new div {
    background: #6cb19b7a;
}

.progress-bar-control .bar-inProgress .ui-progressbar-value,
.progress-bar-legend .legend-item-inProgress div {
    background: var(--blue);
}

.progress-bar-control .bar-failed .ui-progressbar-value,
.progress-bar-legend .legend-item-failed div {
    background: var(--red);
}

.progress-bar-control .bar-partially-completed .ui-progressbar-value,
.progress-bar-legend .legend-item-partially-completed div {
    background: var(--orange);
}

.progress-bar-control .bar-completed .ui-progressbar-value,
.progress-bar-legend .legend-item-completed div {
    background: var(--green);
}

.progress-bar-control .bar {
    display: inline-block;
    position: relative;
}

    .progress-bar-control .bar .ui-progressbar-value {
        opacity: 0.7;
        margin: 0;
        border-radius: 0;
        border: none;
        color: var(--primary-text);
    }

.progress-bar-control .progress-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 12px;
}

.progress-bar-control .progress-bar-legend {
    clear: both;
    padding-top: 15px;
}

    .progress-bar-control .progress-bar-legend .legend-item {
        margin-top: 15px;
        margin-left: -15px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

        .progress-bar-control .progress-bar-legend .legend-item div {
            height: 20px;
            width: 25px;
            display: inline-block;
            margin-right: 10px;
            opacity: 0.7;
            border-radius: 0.25rem;
        }

.progress-bar-control {
    margin-left: 15px;
    margin-right: 15px;
}

.bulk-import-reports .detail-row-toggle {
    cursor: pointer;
}

    .bulk-import-reports .detail-row-toggle div {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid var(--green);
        transition: transform 300ms;
    }

    .bulk-import-reports .detail-row-toggle.open div {
        transform: rotate(90deg);
    }

.bulk-import-reports .progress-bar-container {
    margin: 0 20px;
}

.bulk-import-reports thead td {
    font-weight: bold;
}

.bulk-import-reports #masterDataTable thead th a {
    color: var(--primary-text);
    font-size: 13px;
}

.bulk-import-reports #masterDataTable thead th {
    padding: 10px 6px;
}
body[theme="dark"].bulk-import-reports #masterDataTable thead th {
    background: var(--purple-blue);
    color: var(--primary-text) !important;
}

.bulk-import-reports .retry-button-container {
    padding-left: 5px;
    padding-bottom: 15px;
}

/*end BulkImport*/

/*KeyObligations*/

.approvers #editModal label {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin: auto 10px auto 0px;
}

.approvers .error {
    border: 1px solid var(--red) !important;
    color: var(--dark) !important;
}

.approvers #error-text {
    color: var(--red);
    font-weight: bold;
}

.approvers #editModal select,
.approvers #editModal textarea,
.approvers #editModal input[type="text"] {
    width: 100%;
}

.approvers #editModal select {
    height: 33px !important;
    margin-top: 10px;
}

.approvers table.list thead tr {
    border: 1px solid var(--gray-lightest);
    color: var(--purple-gray-dark);
    font-size: 11px;
    font-weight: 500;
    padding: 0;
}

    .approvers table.list thead tr th {
        color: var(--tertiary-text);
        font-size: 11px;
        font-weight: 500;
        padding: 0 0 0 10px;
    }

.approvers .check-row {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 20px;
}

    .approvers .check-row input {
        margin: auto 10px auto 0px;
    }

        .approvers .check-row input:checked {
            height: unset !important;
            width: unset !important;
            margin-top: auto !important;
        }

.compliants .modal-body .row {
    display: flex !important;
    margin-bottom: 30px;
}

.compliants .modal-body label {
    width: 200px;
}

.compliants .modal-body input,
compliants .modal-body select,
compliants .modal-body textarea {
    width: 350px;
}

.key-obligations-list #editModal label {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin: auto 10px auto 0px;
}

.key-obligations-list .error {
    border: 1px solid var(--red);
}

.key-obligations-list #error-text {
    color: var(--red);
    font-weight: bold;
}

.key-obligations-list #editModal select,
.key-obligations-list #editModal textarea,
.key-obligations-list #editModal input[type="text"] {
    width: 100%;
}

.key-obligations-list table.list thead tr {
    border: 1px solid var(--gray-lightest);
    color: var(--purple-gray-dark);
    font-size: 11px;
    font-weight: 500;
    padding: 0;
}

    .key-obligations-list table.list thead tr th {
        color: var(--tertiary-text);
        font-size: 11px;
        font-weight: 500;
        padding: 0 0 0 10px;
    }

.key-obligations-list .check-row {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 20px;
}

    .key-obligations-list .check-row input {
        margin: auto 10px auto 0px;
    }

        .key-obligations-list .check-row input:checked {
            height: unset !important;
            width: unset !important;
            margin-top: auto !important;
        }

/*end KeyObligations*/

/*TaskManager */

.rule-manager-details .cpai-content-wrapper .panel {
    background: none !important;
}

/*end Taskmanager*/

/*Masters*/

.contract-status-master .p-warning {
    color: var(--red);
    font-weight: 500;
}

.contract-status-master .input-no-border {
    border: none !important;
}

    .contract-status-master .input-no-border:focus {
        outline: none;
        border: none !important;
    }

.contract-status-master input {
    vertical-align: middle;
    margin-top: 1px;
    margin-bottom: 1px;
    color: var(--purple-gray-dark);
    border-radius: 0.25rem;
    height: 32px;
    border: 1px solid var(--purple-gray);
    padding: 0 10px;
}

.contract-status-master .input-edit {
    width: 100%;
}

.contract-status-master td > button {
    border: solid 1px var(--peach);
    background: var(--peach);
    color: var(--white) !important;
    padding: 8px 25px;
    border-radius: 0.25rem;
}

    .contract-status-master td > button > i {
        margin-right: 8px;
    }

.contract-status-master .col-sm-7 > p {
    color: var(--red);
    font-weight: 500;
}

.contract-status-master td.status-edit .pretty.p-icon.p-round.p-pulse {
    display: block;
    margin: 10px 0;
}

.contract-status-master #masterDataTable input {
    color: var(--primary-text);
}

.contract-status-master-data .detail-row-toggle div {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--green);
    transition: transform 300ms;
}

.contract-status-master-data .detail-row-toggle.open div {
    transform: rotate(90deg);
}

.contract-status-master-data .progress-bar-container {
    margin: 0 20px;
}

.contract-status-master-data thead td {
    font-weight: bold;
}

.contract-status-master-data #masterDataTable thead th a {
    color: var(--primary-text);
    font-size: 13px;
}

.contract-status-master-data #masterDataTable thead th {
    background: var(--purple-blue);
    padding: 10px 6px;
    color: var(--primary-text) !important;
}

.contract-status-master-data .retry-button-container {
    padding-left: 5px;
    padding-bottom: 15px;
}

/* Complete hack to allow the mutent component to be in place of the normal vue app */
.contract-template-page #app,
.contract-template-page #app main,
.contract-template-page #main,
.contract-template-page #content {
    height: auto !important;
    min-height: 0 !important;
}

.contract-template-page #app-mutant {
    height: auto !important;
    min-height: calc(100vh - 4rem);
    padding-left: 5rem !important; /* make space for the collapsed sidebar & prevent JANK */
}

.contract-template-page .query-builder .has-error {
    border-color: var(--red) !important;
}

.contract-template-page .rule-filter-container {
    max-width: 40%;
}

.contract-template-page .rule-operator-container {
    max-width: 30%;
}

.contract-template-page .rule-value-container {
    max-width: 30%;
}

.contract-template-page .rules-list select,
.contract-template-page .rules-list input {
    max-width: 100%;
}

.contract-template-page .tags-look .tagify__dropdown__item {
    display: inline-block;
    border-radius: 3px;
    padding: 0.3em 0.5em;
    border: 1px solid var(--light-30);
    background: var(--light-30);
    margin: 0.2em;
    font-size: 0.85em;
    color: var(--dark);
    transition: none;
}

.contract-template-page .tags-look .tagify__dropdown__item--active {
    color: var(--dark);
}

.contract-template-page .tags-look .tagify__dropdown__item:hover {
    background: var(--yellow);
    border-color: var(--gold);
}

.contract-template-page .tagify__tag {
    padding-left: 10px;
}

.contract-template-page .paddingLeft {
    padding-left: 5px;
}

.contract-template-page .tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

    .contract-template-page .tooltip.show {
        opacity: 0.9;
    }

    .contract-template-page .tooltip .arrow {
        position: absolute;
        display: block;
        width: 0.8rem;
        height: 0.4rem;
    }

        .contract-template-page .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.contract-template-page .bs-tooltip-top,
.contract-template-page .bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

    .contract-template-page .bs-tooltip-top .arrow,
    .contract-template-page .bs-tooltip-auto[x-placement^="top"] .arrow {
        bottom: 0;
    }

        .contract-template-page .bs-tooltip-top .arrow::before,
        .contract-template-page .bs-tooltip-auto[x-placement^="top"] .arrow::before {
            top: 0;
            border-width: 0.4rem 0.4rem 0;
            border-top-color: var(--dark);
        }

.contract-template-page .bs-tooltip-right,
.contract-template-page .bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

    .contract-template-page .bs-tooltip-right .arrow,
    .contract-template-page .bs-tooltip-auto[x-placement^="right"] .arrow {
        left: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .contract-template-page .bs-tooltip-right .arrow::before,
        .contract-template-page .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            right: 0;
            border-width: 0.4rem 0.4rem 0.4rem 0;
            border-right-color: var(--dark);
        }

.contract-template-page .bs-tooltip-bottom,
.contract-template-page .bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

    .contract-template-page .bs-tooltip-bottom .arrow,
    .contract-template-page .bs-tooltip-auto[x-placement^="bottom"] .arrow {
        top: 0;
    }

        .contract-template-page .bs-tooltip-bottom .arrow::before,
        .contract-template-page .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            bottom: 0;
            border-width: 0 0.4rem 0.4rem;
            border-bottom-color: var(--dark);
        }

.contract-template-page .bs-tooltip-left,
.contract-template-page .bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

    .contract-template-page .bs-tooltip-left .arrow,
    .contract-template-page .bs-tooltip-auto[x-placement^="left"] .arrow {
        right: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .contract-template-page .bs-tooltip-left .arrow::before,
        .contract-template-page .bs-tooltip-auto[x-placement^="left"] .arrow::before {
            left: 0;
            border-width: 0.4rem 0 0.4rem 0.4rem;
            border-left-color: var(--dark);
        }

.contract-template-page .tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: var(--primary-text);
    text-align: center;
    background-color: var(--dark);
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 1px var(--cpai-light-alpha-25);
}

.contract-template-page .userinput-footer {
    background-color: var(--light);
    position: absolute;
    bottom: 0;
    z-index: 100;
}

.contract-template-page .modal-dialog {
    margin: 0 !important;
    max-width: none !important;
}

.contract-template-page .modal-footer {
    text-align: left;
}

.contract-template-page #btnSaveAll {
    padding: 10px 30px;
    min-width: 200px;
}

/* modal right fade show */

/**/
.custom-field-group-master .input-no-border {
    border: none !important;
}

    .custom-field-group-master .input-no-border:focus {
        outline: none;
        border: none !important;
    }

.custom-field-group-master input {
    vertical-align: middle;
    margin-top: 1px;
    margin-bottom: 1px;
    color: var(--purple-gray-dark);
    border-radius: 0.25rem;
    height: 32px;
    border: 1px solid var(--purple-gray);
    padding: 0 10px;
}

/* manage-collaborations-page */

.manage-collaborations-page td.td-filename {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.manage-collaborations-page .detail-row-toggle {
    cursor: pointer;
}

    .manage-collaborations-page .detail-row-toggle div {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid var(--green);
        transition: transform 300ms;
    }

    .manage-collaborations-page .detail-row-toggle.open i {
        transform: rotate(90deg);
    }

.manage-collaborations-page .progress-bar-container {
    margin: 0 20px;
}

.manage-collaborations-page .retry-button-container {
    padding-left: 5px;
    padding-bottom: 15px;
}

.manage-collaborations-page .actions-button {
    color: var(--primary-text);
    border: none;
    width: 110px;
    height: 30px;
    line-height: 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    transition: all 300ms;
}

/* end manage-collaborations-page */

/*configurators*/
.auto-assignment-fields .row {
    margin-left: 9px;
    margin-top: 10px;
}

.auto-assignment-fields .checkbox-container {
    line-height: 30px;
    height: 30px;
}

.auto-assignment-fields .rule-filter-container .form-control {
    max-width: 182px;
}

.application-type-metadata-configurators .chkChoice td {
    padding: 2px 0px 2px 0px;
}

.application-type-metadata-configurators .field-option-row th {
    text-align: left;
}

.application-type-metadata-configurators
.field-option-row
.thFieldValueIsDefault,
.application-type-metadata-configurators
.field-option-row
.tdFieldValueIsDefault {
    text-align: center;
}

.application-type-metadata-configurators span.group-contract-type {
    position: relative;
}

.application-type-metadata-configurators #chkSelectAll {
    position: absolute;
    top: 4px;
}

.application-type-metadata-configurators .nested {
    display: none;
    padding-left: 5px;
}

.application-type-metadata-details
.meta-data-details
#filters
.container-fluid
.row > div#MainContent_ApplicationUpdatePanel > div {
    width: auto;
}

.application-type-metadata-details
.meta-data-details
#filters
.container-fluid
.row > div#MainContent_ApplicationUpdatePanel {
    width: fit-content;
}

.application-type-metadata-details .table-responsive tbody tr td {
    padding: 30px 5px 10px;
    font-size: 15px;
    vertical-align: baseline;
}

.application-type-metadata-details .contract-type__expander {
    height: 50px;
    margin: auto;
    vertical-align: middle;
    display: contents;
    cursor: pointer;
}

.application-type-metadata-details .contract-type__wrapper {
    height: 0;
    display: none;
    transition: all 300ms;
}

.application-type-metadata-details
.contract-type__parent.expanded
.contract-type__wrapper {
    height: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: block;
    transition: all 300ms;
}

.application-type-metadata-details
.contract-type__parent
i.fas.fa-angle-double-right.expand-indicator {
    transition: all 300ms;
    margin-right: 1rem;
}

.application-type-metadata-details
.contract-type__parent.expanded
i.fas.fa-angle-double-right.expand-indicator {
    transform: rotate(90deg);
}

.metadata-configurators .form-group {
    margin-bottom: 15px;
}

    .metadata-configurators .form-group label {
        display: block;
    }

.metadata-key-obligation-branches .detail-row-toggle {
    cursor: pointer;
}

    .metadata-key-obligation-branches .detail-row-toggle i {
        transition: transform 300ms;
    }

    .metadata-key-obligation-branches .detail-row-toggle.open i {
        transform: rotate(90deg);
    }

    .metadata-key-obligation-branches .detail-row-toggle div {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid var(--green);
        transition: transform 300ms;
    }

    .metadata-key-obligation-branches .detail-row-toggle.open div {
        transform: rotate(90deg);
    }

.metadata-key-obligation-branches-configurators .allInput {
    display: flex;
}

.metadata-key-obligation-branches-configurators .chkChoice li {
    display: flex;
    margin-left: 10px;
}

.metadata-key-obligation-branches-configurators .chkChoice td {
    padding: 2px 0px 2px 0px;
}

.metadata-key-obligation-branches-configurators .field-option-row th {
    text-align: left;
}

.metadata-key-obligation-branches-configurators
.field-option-row
.thFieldValueIsDefault,
.metadata-key-obligation-branches-configurators
.field-option-row
.tdFieldValueIsDefault {
    text-align: center;
}

.metadata-key-obligation-branches-configurators span.group-contract-type {
    position: relative;
}

.metadata-key-obligation-branches-configurators .nested {
    display: none;
    padding-left: 5px;
}

.metadata-key-obligation-branches-configurators .active {
    display: block;
}

/*end configurators*/

/*UserManagerment*/

.sso-autopro, .sso-settings {
    margin: 0;
    padding: 0 24px;
    max-width: 1000px;
}

.sso-autopro-actions, .sso-settings-actions {
    margin-top: 15px;
}

.sso-autopro-config fieldset {
    padding: 5px 10px;
}

.sso-autopro-config .form-group label:not(.form__input-label),
.sso-autopro-config .form-group input[type="text"],
.sso-autopro-config .form-group select {
    width: 100%;
}

.sso-autopro-actions a, .sso-settings-actions a,
.sso-autopro-actions #MainContent_btnSave, .sso-settings-actions #MainContent_btnSaveSSOSettings {
    padding: 10px 28px;
}

    .sso-autopro-actions a:hover, .sso-settings-actions a:hover
    .sso-autopro-actions #MainContent_btnSave:hover, .sso-settings-actions #MainContent_btnSaveSSOSettings:hover {
        background: var(--purple-medium-lighter);
        border-color: var(--purple-medium-lighter);
        color: var(--white);
    }

.sso-settings-config .form-group label:not(.form__input-label) {
    width: 25%;
}

.sso-settings-config .form-group input[type="text"],
.sso-settings-config .form-group textarea {
    width: 74%;
}

.rolewise input[type="checkbox"]:checked,
input[type="checkbox"]:checked:after,
.rolewise .cpai-link#ancAddNew {
    display: inline;
    width: inherit;
    height: inherit;
}

.reset-password .reset-pass-box {
    position: relative;
    margin-top: 40px;
    margin-bottom: 50px;
}

.reset-password .reset_action {
    padding-bottom: 0 !important;
}

    .reset-password .reset_action input {
        margin-left: 0 !important;
        margin-bottom: 20px;
        display: block !important;
        width: 100%;
    }

.reset-password .reset-pass {
    width: 510px;
    margin: 10px auto;
    padding: 5px 20px;
}

    .reset-password .reset-pass h2 {
        margin-top: 10px;
        padding: 10px 0;
        background: none;
        color: var(--primary-text);
    }

    .reset-password .reset-pass label {
        color: var(--primary-text);
    }

    .reset-password .reset-pass .cpinput {
        background: transparent;
    }

.reset-password .reset_action.form-action input[type="submit"] {
    background: transparent linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) 0% 0% no-repeat padding-box;
    border-radius: 26px !important;
    border: none;
    padding: 7px 20px;
}

    .reset-password .reset_action.form-action input[type="submit"]:hover {
        background: transparent linear-gradient(100deg, #6a30db 0%, #cd4df4 100%) 0% 0% no-repeat padding-box;
    }

.reset-password #result {
    margin-left: 5px;
}

.reset-password #register .short {
    color: var(--red);
}

.reset-password #register .weak {
    color: var(--orange);
}

.reset-password #register .good {
    color: var(--blue);
}

.reset-password #register .strong {
    color: var(--green);
}

.generate-password .reset-pass-box {
    position: relative;
    margin-top: 40px;
    margin-bottom: 50px;
}

.generate-password .reset_action {
    padding-bottom: 0 !important;
}

    .generate-password .reset_action input {
        margin-left: 0 !important;
        margin-bottom: 20px;
        display: block !important;
        width: 100%;
    }

.generate-password .reset-pass {
    width: 510px;
    margin: 10px auto;
    padding: 5px 20px;
}

    .generate-password .reset-pass h2 {
        margin-top: 10px;
        padding: 10px 0;
        background: unset;
        color: var(--primary-text);
    }

    .generate-password .reset-pass label {
        color: var(--primary-text);
    }

    .generate-password .reset-pass .cpinput {
        background: transparent;
    }

.generate-password .reset_action.form-action input[type="submit"] {
    background: transparent linear-gradient(100deg, #cd4df4 0%, #6a30db 100%) 0% 0% no-repeat padding-box;
    border-radius: 26px !important;
    border: none;
    padding: 7px 20px;
}

    .generate-password
    .reset_action.form-action
    input[type="submit"]:not(.btn):hover {
        background: transparent linear-gradient(100deg, #6a30db 0%, #cd4df4 100%) 0% 0% no-repeat padding-box;
    }

.generate-password #result {
    margin-left: 5px;
}

.generate-password #register .short {
    color: var(--red);
}

.generate-password #register .weak {
    color: var(--orange);
}

.generate-password #register .good {
    color: var(--blue);
}

.generate-password #register .strong {
    color: var(--green);
}

.department-wise input[type="checkbox"]:checked,
input[type="checkbox"]:checked:after,
.department-wise .cpai-link#ancAddNew {
    display: inline;
    width: inherit;
    height: inherit;
}

.confirm-password #result {
    margin-left: 5px;
}

.confirm-password #register .short {
    color: var(--red);
}

.confirm-password #register .weak {
    color: var(--orange);
}

.confirm-password #register .good {
    color: var(--blue);
}

.confirm-password #register .strong {
    color: var(--green);
}

.confirm-password #pwdBoxTabular {
    display: flex;
    justify-content: center;
    align-items: center;
}

.company-wise input[type="checkbox"]:checked,
input[type="checkbox"]:checked:after,
.company-wise .cpai-link#ancAddNew {
    display: inline;
    width: inherit;
    height: inherit;
}

.change-password #result {
    margin-left: 5px;
}

.change-password #register .short {
    color: var(--red);
}

.change-password #register .weak {
    color: var(--orange);
}

.change-password #register .good {
    color: var(--blue);
}

.change-password #register .strong {
    color: var(--green);
}

/*end Usermanagement*/

/*workflow*/

.additional-info .tdAlign {
    text-align: right;
    width: 30%;
}

.additional-info .style1 {
    width: 195px;
}

.add-manual-contract .validation {
    background-color: var(--light);
    color: var(--red);
    height: 24px;
    line-height: 24px;
    font-size: 15px;
    font-style: normal;
    padding: 0px;
    margin: 0px;
    z-index: 99;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.available-multi-clients-master .validation {
    background-color: var(--light);
    color: var(--red);
    padding-left: 5px;
    padding-right: 5px;
    height: 24px;
    line-height: 24px;
    font-size: 15px;
    font-style: normal;
    margin-top: 8px;
    z-index: 99;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.available-multi-clients-master .form-box {
    flex: 1 1 0;
}

.available-multi-clients-master h4 {
  text-transform: uppercase;
}

.available-multi-clients-master .style1 {
  height: 244px;
}

html.collaboration-editor {
  height: 100vh;
}

body.collaboration-editor {
  height: 100vh;
}

body.collaboration-editor .main-content > iframe {
  width: 100%;
  position: absolute;
}

body.collaboration-editor #frameHolder {
  height: 90vh;
  margin-top: 50px;
}

body.collaboration-editor .main-content {
  height: 90vh;
  padding-left: 0px;
}

body.collaboration-editor .navbar-center > h4 {
  position: absolute;
  text-align: center;
  float: left;
  right: calc(50% - 20%);
  padding-top: 8px;
  width: 40%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

body.collaboration-editor div.logout-wrapper {
  margin-top: 7rem;
}

body.collaboration-editor div.logout-wrapper a {
  color: var(--primary-text);
  font-weight: 600;
  transform: translateX(-1rem);
  display: block;
}

.collaboration-editor-preview .main-content > iframe {
  width: 100%;
  height: calc(100% - 62.45px);
  position: absolute;
}

.collaboration-editor-preview #frameHolder {
  height: calc(100vh - 52.45px);
}

.collaboration-editor-preview .main-content {
  min-height: 100vh;
  padding-left: 0px;
}

.collaboration-editor-preview .navbar-center > h4 {
  position: absolute;
  text-align: center;
  float: left;
  right: calc(50% - 20%);
  padding-top: 8px;
  width: 40%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.key-fields-master .d-none {
  display: none;
}

.key-fields-master .tdAlign {
  text-align: left;
  width: 30%;
}

.key-fields-master .important-date-table .reminders td {
  vertical-align: top !important;
}

.key-obligation-master .tdAlign {
  text-align: right;
  width: 30%;
}

.key-obligation-master .tooltip {
  margin-left: 2px !important;
}

/*end workflow*/

/* VAULT PAGE  STYLES */
.vault-page {
}
.vault-page [disabled="disabled"] {
  opacity: 0.3;
  cursor: not-allowed;
  display: none !important;
}
.vault-page [disabled="disabled"] * {
  pointer-events: none;
}

.vault-page .vault-landing .vault-group {
  display: flex;
  padding: var(--spacing-3);
}

.vault-page .vault-landing .vault-group:first-of-type {
  padding-top: 0;
}

.vault-page .vault-landing .vault-group .section-content {
  margin-left: var(--spacing-4);
  padding-left: var(--spacing-4);
  border-left: 1px solid var(--cpai-light-alpha-25);
  width: calc(100% - var(--spacing-4));
}

.vault-page .vault-landing .vault-group .section-content .section-title,
.vault-page .vault-landing .vault-group .section-icon {
  color: var(--light-50);
}

.vault-page .vault-landing .vault-group .section-content .section-title {
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0;
}

.vault-page .vault-landing .vault-group .section-icon {
  margin-top: var(--spacing-1);
}

.vault-page .vault-landing .vault-group .section-content .vault-item {
  display: inline-block; /* prevent margins collapsing */
  width: 100%;
  background: var(--panel);
  color: var(--primary-text);
  border-radius: 0.25rem;
  padding: var(--spacing-3);
  margin: var(--spacing-2) 0;
}

.vault-page .vault-landing .vault-group .section-content .vault-item i {
  margin-right: var(--spacing-2);
}

.vault-page .vault-landing .vault-group .section-content .vault-item ul {
  list-style: none;
  padding: 0;
}

.vault-page .vault-landing .vault-group .section-content .vault-item ul li {
  margin-top: var(--spacing-2);
}
.vault-page .vault-landing .vault-group .section-content .vault-item ul li a {
  color: var(--secondary-text);
}

/* end vault */

.settings-page {
  /*stylesheet for setting page*/
}

.settings-page .cp-settings {
  background-color: var(--cpai-light-alpha-5);
  padding: 15px 25px;
  margin: 10px 20px;
  border-radius: 0.25rem;
}

.settings-page .integration-select {
  display: block;
  background: var(--panel);
  padding: 15px;
  border: 1px solid var(--cpai-light--alpha-30);
  margin-bottom: 30px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 300ms;
}

.settings-page .integration-select:hover {
  border-color: var(--panel);
  box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.settings-page .integration-select h4.integrationTitle,
.settings-page .integration-select h3.add-integration {
  color: var(--tertiary-text);
}

.settings-page .integration-select .integrationInfo {
  color: var(--primary-text);
}
   .disclaimerInfo {
    font-size: small;
    color: var(--muted-90);
    font-style: italic;
}
    .disclaimerInfo a {
        color: var(--secondary-text);
        text-decoration: underline;
    }
.settings-page .integration-select .integration-logo {
  width: 100px;
  height: 100px;
}

.settings-page .integration-select .integration-status {
  color: var(--green) !important;
  text-transform: capitalize;
  text-align: center;
  line-height: 1.5em;
}

.settings-page .integration-select .integrationBtnContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-page .integration-select .btnIntegration {
    height: 46px;
    width: 191px;
}

.settings-page .integration-select .integration-add {
    margin-right: 95px;
}

.settings-page .integration-select .integration-delete {
    display: none;
}

.settings-page .integration-select.connected .integration-add,
.settings-page .integration-select.disconnected .integration-delete {
  display: none;
}

.settings-page .integration-select.connected .integration-delete,
.settings-page .integration-select.disconnected .integration-add {
  display: block;
}

.settings-page .integration-select.connecting .loader,
.settings-page .integration-select.disconnecting .loader {
  display: block;
}

.settings-page .integration-select.connecting .integration-add,
.settings-page .integration-select.connecting .integration-delete,
.settings-page .integration-select.disconnecting .integration-add,
.settings-page .integration-select.disconnecting .integration-delete {
  display: none;
}

.settings-page .integration-select .integration-delete,
.settings-page .integration-select .btnAutoSync,
.settings-page .integration-select .btnCalendarSync {
  display: none;
}

.settings-page .integration-select.connected .integration-delete,
.settings-page .integration-select.connected .btnAutoSync,
.settings-page .integration-select.connected .btnCalendarSync {
  display: inline-block;
}

.settings-page .integration-select .hideButton {
    display: none;
}

.settings-page .integration-select.connected .hideButton {
    display: none;
}

.settings-page .modal .modal-content {
  background-color: var(--app-bg);
  width: 100% !important;
}

.settings-page .modal .modal-content .modal-header {
  background-color: var(--app-bg);
}

.settings-page .tagator_input {
  border: none !important;
}

.settings-page .tagator_element {
  background-color: var(--tertiary) !important;
}

.settings-page .dhtmlwindow#SetFileLocationIntegrationModal {
  z-index: 9999 !important;
}

.btn.drive-integration {
  padding: 0;
  width: 3em;
  height: 3em;
}

.available-multi-clients-master .style1 {
    height: 244px;
}

html.collaboration-editor {
    height: 100vh;
}

body.collaboration-editor {
    height: 100vh;
}

    body.collaboration-editor .main-content > iframe {
        width: 100%;
        position: absolute;
    }

    body.collaboration-editor #frameHolder {
        height: 90vh;
        margin-top: 50px;
    }

    body.collaboration-editor .main-content {
        height: 90vh;
        padding-left: 0px;
    }

    body.collaboration-editor .navbar-center > h4 {
        position: absolute;
        text-align: center;
        float: left;
        right: calc(50% - 20%);
        padding-top: 8px;
        width: 40%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    body.collaboration-editor div.logout-wrapper {
        margin-top: 7rem;
    }

        body.collaboration-editor div.logout-wrapper a {
            color: var(--primary-text);
            font-weight: 600;
            transform: translateX(-1rem);
            display: block;
        }

.collaboration-editor-preview .main-content > iframe {
    width: 100%;
    height: calc(100% - 62.45px);
    position: absolute;
}

.collaboration-editor-preview #frameHolder {
    height: calc(100vh - 52.45px);
}

.collaboration-editor-preview .main-content {
    min-height: 100vh;
    padding-left: 0px;
}

.collaboration-editor-preview .navbar-center > h4 {
    position: absolute;
    text-align: center;
    float: left;
    right: calc(50% - 20%);
    padding-top: 8px;
    width: 40%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.key-fields-master .d-none {
    display: none;
}

.key-fields-master .tdAlign {
    text-align: left;
    width: 30%;
}

.key-fields-master .important-date-table .reminders td {
    vertical-align: top !important;
}

.key-obligation-master .tdAlign {
    text-align: right;
    width: 30%;
}

.key-obligation-master .tooltip {
    margin-left: 2px !important;
}

/*end workflow*/

/* VAULT PAGE  STYLES */
.vault-page {
}

    .vault-page [disabled="disabled"] {
        opacity: 0.3;
        cursor: not-allowed;
        display: none !important;
    }

        .vault-page [disabled="disabled"] * {
            pointer-events: none;
        }

    .vault-page .vault-landing .vault-group {
        display: flex;
        padding: var(--spacing-3);
    }

        .vault-page .vault-landing .vault-group:first-of-type {
            padding-top: 0;
        }

        .vault-page .vault-landing .vault-group .section-content {
            margin-left: var(--spacing-4);
            padding-left: var(--spacing-4);
            border-left: 1px solid var(--cpai-light-alpha-25);
            width: calc(100% - var(--spacing-4));
        }

            .vault-page .vault-landing .vault-group .section-content .section-title,
            .vault-page .vault-landing .vault-group .section-icon {
                color: var(--secondary-text);
            }

            .vault-page .vault-landing .vault-group .section-content .section-title {
                text-transform: uppercase;
                font-size: 1rem;
                padding: 0;
            }

        .vault-page .vault-landing .vault-group .section-icon {
            margin-top: var(--spacing-1);
        }

        .vault-page .vault-landing .vault-group .section-content .vault-item {
            display: inline-block; /* prevent margins collapsing */
            width: 100%;
            background: var(--panel);
            color: var(--primary-text);
            border-radius: 0.25rem;
            padding: var(--spacing-3);
            margin: var(--spacing-2) 0;
        }

            .vault-page .vault-landing .vault-group .section-content .vault-item i {
                margin-right: var(--spacing-2);
            }

            .vault-page .vault-landing .vault-group .section-content .vault-item ul {
                list-style: none;
                padding: 0;
            }

                .vault-page .vault-landing .vault-group .section-content .vault-item ul li {
                    margin-top: var(--spacing-2);
                }

                    .vault-page .vault-landing .vault-group .section-content .vault-item ul li a {
                        color: var(--secondary-text);
                    }

/* end vault */

.settings-page {
    /*stylesheet for setting page*/
}

.settings-page .cp-settings {
    background-color: var(--light-5);
    padding: 15px 25px;
    margin: 10px 20px;
    border-radius: 0.25rem;
}

.settings-page .integration-select {
    display: block;
    background: var(--panel);
    padding: 15px;
    border: 1px solid var(--light-30);
    margin-bottom: 30px;
    border-radius: 0.25rem;
    transition: all 300ms;
}

.settings-page .integration-select:hover {
    border-color: var(--panel);
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.settings-page .integration-select h4.integrationTitle,
.settings-page .integration-select h3.add-integration {
    color: var(--tertiary-text);
}

.settings-page .integration-select .integrationInfo {
    color: var(--primary-text);
}

.settings-page .integration-select .integration-logo {
    width: 100px;
    height: 100px;
}

.settings-page .integration-select .integration-status {
    color: var(--green) !important;
    text-transform: capitalize;
    text-align: center;
    line-height: 1.5em;
}

.settings-page .integration-select .integration-delete {
    display: none;
    cursor: pointer;
}

.settings-page .integration-select.connected .integration-add,
.settings-page .integration-select.disconnected .integration-delete {
    display: none;
}

.settings-page .integration-select.connected .integration-delete,
.settings-page .integration-select.disconnected .integration-add {
    display: block;
}

.settings-page .integration-select.connecting .loader,
.settings-page .integration-select.disconnecting .loader {
    display: block;
}

.settings-page .integration-select.connecting .integration-add,
.settings-page .integration-select.connecting .integration-delete,
.settings-page .integration-select.disconnecting .integration-add,
.settings-page .integration-select.disconnecting .integration-delete {
    display: none;
}

.settings-page .integration-select .integration-delete,
.settings-page .integration-select .btnAutoSync,
.settings-page .integration-select .btnCalendarSync {
    display: none;
}

.settings-page .integration-select.connected .integration-delete,
.settings-page .integration-select.connected .btnAutoSync,
.settings-page .integration-select.connected .btnCalendarSync {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

.settings-page .modal .modal-content {
    background-color: var(--app-bg);
    width: 100% !important;
}

.settings-page .modal .modal-content .modal-header {
    background-color: var(--app-bg);
}

.settings-page .tagator_input {
    border: none !important;
}

.settings-page .tagator_element {
    background-color: var(--tertiary) !important;
}

.settings-page .dhtmlwindow#SetFileLocationIntegrationModal {
    z-index: 9999 !important;
}

.btn.drive-integration {
    padding: 0;
    width: 3em;
    height: 3em;
}

.custom-reports a.btnDelete {
    background-image: url(../images/icon-del.jpg);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
}

.custom-reports a.btnEdit {
    background-image: url(../Images/edit.png);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
}

.custom-reports a.btnSchedule {
    background-image: url(../images/calendar.png);
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
}

.dashboard-page {
}

    .dashboard-page .i-right {
        position: absolute;
        left: auto !important;
        right: 25px !important;
    }

    .dashboard-page .d-none {
        display: none;
    }

    .dashboard-page .dashboard_power {
        margin: 25px 0;
    }

    .dashboard-page .dashdiv-disabled {
        border-right: 2px solid var(--panel);
    }

        .dashboard-page .dashdiv-disabled > a {
            height: 78px;
            position: relative;
            padding: 21px 15px;
            padding-left: 80px;
            margin: 5px;
            font-size: 20px;
            color: var(--purple-blue);
            display: block;
            border: 0px !important;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 300ms;
        }

            .dashboard-page .dashdiv-disabled > a i {
                position: absolute;
                top: 21px;
                left: 25px;
                font-size: 35px;
                color: var(--peach);
                transition: all 300ms;
            }

            .dashboard-page .dashdiv-disabled > a h4 {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 0;
                line-height: 1.2;
                transition: all 300ms;
            }

            .dashboard-page .dashdiv-disabled > a.selected {
                background: LightGray;
                color: var(--primary-text) !important;
                box-shadow: inset 1px 1px 3px 0 var(--gray-05);
                margin-left: 20px;
            }

                .dashboard-page .dashdiv-disabled > a.selected i,
                .dashboard-page .dashdiv-disabled > a.selected h4 {
                    color: var(--primary-text) !important;
                }

    .dashboard-page .dashdiv-mid {
        border-right: 2px solid var(--gray-lightest);
    }

        .dashboard-page .dashdiv-mid > a {
            height: 78px;
            position: relative;
            padding: 21px 15px;
            padding-left: 80px;
            margin: 5px;
            font-size: 20px;
            color: var(--purple-blue);
            display: block;
            border: 0px !important;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 300ms;
        }

            .dashboard-page .dashdiv-mid > a i {
                position: absolute;
                top: 21px;
                left: 25px;
                font-size: 35px;
                color: var(--peach);
                transition: all 300ms;
            }

            .dashboard-page .dashdiv-mid > a h4 {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 0;
                line-height: 1.2;
                transition: all 300ms;
            }

            .dashboard-page .dashdiv-mid > a:hover {
                background: var(--peach);
                color: var(--white) !important;
                box-shadow: inset 1px 1px 3px 0 var(--gray-05);
            }

                .dashboard-page .dashdiv-mid > a:hover i,
                .dashboard-page .dashdiv-mid > a:hover h4 {
                    color: var(--primary-text) !important;
                }

            .dashboard-page .dashdiv-mid > a.selected {
                background: var(--peach);
                color: var(--white) !important;
                box-shadow: inset 1px 1px 3px 0 var(--gray-05);
                margin-left: 20px;
            }

                .dashboard-page .dashdiv-mid > a.selected i,
                .dashboard-page .dashdiv-mid > a.selected h4 {
                    color: var(--primary-text) !important;
                }

                .dashboard-page .dashdiv-mid > a.selected:hover {
                    background: var(--green) !important;
                }

@media only screen and (min-width: 992px) {
    .dashboard-page .dashdiv-mid {
        padding: 0 !important;
    }

    .dashboard-page .dashdiv-disabled {
        padding: 0 !important;
    }

    .dashboard-page .dashdiv-mid.customSelect1 {
        padding-left: 15px !important;
    }

    .dashboard-page .dashdiv-mid.customSelect2 {
        padding-right: 15px !important;
    }

    .dashboard-page .dashdiv-disabled.customSelect1 {
        padding-left: 15px !important;
    }

    .dashboard-page .dashdiv-disabled.customSelect2 {
        padding-right: 15px !important;
    }
}

.dashboard-page .loading {
    margin-top: 10em;
    text-align: center;
    color: var(--gray);
}

.dashboard-page #content {
    padding-bottom: 60px;
}

.dashboard-page .charts-heading {
    padding: 12px 0;
    text-align: center;
    color: var(--primary-text) !important;
    border-radius: 0.25rem;
    font-size: 18px;
    margin-top: 15px;
}

.dashboard-page .dashboard-charts {
    padding: 5px 0;
}

.dashboard-page .accordion {
    cursor: pointer;
    padding: 15px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    background: var(--purple-gray-dark);
    transition: 300ms;
}

    .dashboard-page .accordion:after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f067";
        line-height: 1rem;
        color: var(--white);
        float: right;
        position: relative;
    }

    .dashboard-page .accordion.active:after {
        content: "\f068";
    }

    .dashboard-page .accordion:hover,
    .dashboard-page .accordion.active {
        background: var(--purple-blue);
    }

.dashboard-page .panel {
    background-color: var(--primary-text);
    height: 0;
    opacity: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    margin: 0;
    transition: height 300ms ease-out, opacity 300ms;
}

    .dashboard-page .panel.active {
        height: 420px;
        opacity: 1;
        transition: height 300ms ease-in, opacity 300ms;
    }

@media only screen and (max-width: 1300px) and (min-width: 768px) {
    .dashboard-page .panel.active {
        height: 600px;
    }
}

@media only screen and (max-width: 608px) {
    .dashboard-page .panel.active {
        height: 600px;
    }
}

.calendar .tooltip {
    position: relative;
    z-index: auto;
    opacity: 1 !important;
    font-size: 0.875rem !important;
}

    .calendar .tooltip br:first-child {
        display: none;
    }

.calendar #ActivityFilesModal .drag-statusarea[style] {
    border: none;
}

.calendar #ActivityFilesModal[style] {
    width: 96% !important;
    height: auto !important;
    left: 2% !important;
    top: 5% !important;
    position: fixed !important;
}

.calendar .filter-action-wrapper {
    position: absolute;
    bottom: 24px;
    z-index: 6;
}

    .calendar .filter-action-wrapper > div,
    .calendar .filter-action-wrapper > a {
        display: inline !important;
    }

.calendar .page-heading {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .calendar .page-heading .cp-utility {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin: 14px 0 0 0;
        position: static;
    }

        .calendar .page-heading .cp-utility a:last-child {
            margin-right: 0;
        }

.calendar-agenda .breadcrumb-link i,
.calendar-agenda .button i {
    margin-right: 5px;
}

.calendar-agenda p.filter-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .calendar-agenda p.filter-action label {
        width: 100%;
    }

.calendar-agenda a.sort {
    background-image: none !important;
}

.auto-delegation-fields {
    margin-bottom: 20px;
}

    .auto-delegation-fields fieldset {
        padding: 5px 10px;
    }

    .auto-delegation-fields legend {
        width: auto;
        font-size: 15px;
        font-weight: bold;
    }

    .auto-delegation-fields label {
        width: 180px;
    }

    .auto-delegation-fields .tooltip_outer.ddlApprover {
        margin-left: 172px;
    }

        .auto-delegation-fields .tooltip_outer.ddlApprover .tool_tip {
            background-color: transparent;
            opacity: 1 !important;
        }

/*Functional and Condition*/

.search-clause {
    position: relative;
    width: 100%;
}

    .search-clause input[type="text"] {
        width: 100%;
    }

    .search-clause button {
        position: absolute;
        background: none;
        border: none;
        right: 10px;
        top: 7px;
    }

.search-clause-buttons {
    float: right;
}

    .search-clause-buttons a {
        color: var(--dark);
    }

input.cpai-upload-btn {
    padding: 5px 15px;
    margin: 2px;
    background: transparent;
    color: var(--primary-text);
    border-color: var(--light);
    border-radius: 30px;
}

    input.cpai-upload-btn:hover {
        background-color: var(--light);
        border-color: var(--light) !important;
        color: var(--dark) !important;
    }

#btnSaveAll.cp-submit {
    font-size: 16px;
    padding: 15px 80px;
    border-radius: 31px;
}

/*End Functional and Condition*/

.cpai-page-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.02em;
}

.cpai-page-sub-title {
    font-weight: 600;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -0.02em;
}

.cpai-link-back {
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
}

.cpai-content-wrapper .panel {
    background: var(--panel);
    border: 0px solid var(--light-30);
    border-radius: 0.25rem;
    margin: 10px 0;
}

    .cpai-content-wrapper .panel .panel-heading {
        padding: 10px 15px;
    }

        .cpai-content-wrapper .panel .panel-heading.bg-transparent {
            color: var(--primary-text);
        }

        .cpai-content-wrapper .panel .panel-heading:not(.bg-transparent) {
            background: var(--primary);
            color: var(--white);
        }

    .cpai-content-wrapper .panel .textarea {
        width: 100%;
    }

.cpai-content-wrapper .panel-body p {
    color: var(--secondary-text);
}

.cpai-content-wrapper table#chkList td label {
    color: var(--primary-text);
}

.cpai-content-wrapper .checkbox-cont li {
    padding: 5px 0;
}

.cpai-content-wrapper [hidden] {
    display: none !important;
}

/* modal dialog styles */

.cpai-content-wrapper div.modal {
    padding: 0;
    border-radius: 0;
}

.cpai-content-wrapper .modal-dialog {
    width: 100%;
    height: 100%;
}

.cpai-content-wrapper .modal-content {
    background: var(--dark);
    color: var(--primary-text);
    margin: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    border: none;
    padding: 48px 0 65px; /* make space for the fixed modal header & footer*/
}

.cpai-content-wrapper .close {
    float: none;
    background: transparent;
    border: 2px solid var(--light);
    color: var(--primary-text) !important;
    font-size: 25px;
    font-weight: 400;
    width: 35px;
    height: 35px;
    line-height: 33px;
    border-radius: 50%;
    transition: all 300ms;
    transform-origin: 50% 50%;
    padding: 0 !important;
    text-align: center;
    opacity: 1;
}

    .cpai-content-wrapper .close:hover {
        transform: rotate(90deg);
    }

.cpai-content-wrapper select option,
.cpai-content-wrapper select optgroup {
    color: var(--primary-text);
    background: var(--dark);
    padding: 4px;
}

.cpai-content-wrapper select optgroup {
    color: var(--primary-text);
}

.cpai-content-wrapper .modal-header {
    background: var(--purple-darker);
    color: var(--white);
    font-size: 14px;
    border-bottom: 1px solid var(--purple);
    padding: 8px 16px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

    .cpai-content-wrapper .modal-header * {
        color: currentColor !important;
        border-color: currentColor !important;
    }

    .cpai-content-wrapper .modal-header .cp-submit {
        margin-top: 0;
    }

.btn-icon.btn-outline {
    line-height: 0.5em;
    color: var(--tertiary-text)!important;
}

.cpai-content-wrapper .modal-body {
    width: 80%;
    margin: 20px auto;
}

    .cpai-content-wrapper .modal-body .sub-heading {
        font-size: 24px;
        color: var(--primary-text);
    }

    .cpai-content-wrapper .modal-body .nav {
        overflow: visible;
    }

    .cpai-content-wrapper .modal-body .nav-tabs {
        margin-top: 20px;
        border-bottom: 1px solid var(--purple-medium-lighter);
    }

.modal-body .nav-tabs > .nav-item {
    margin-bottom: -1px;
}

.cpai-content-wrapper .modal-body .nav-tabs .nav-item {
    margin-right: 8px;
}

.cpai-content-wrapper .modal-body .nav-tabs > .nav-item > a:hover {
    border-color: transparent;
}

.cpai-content-wrapper .modal-body .nav-tabs > .nav-item > a {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    color: var(--white);
    background: var(--purple-medium);
    border: 1px solid var(--purple-medium-lighter);
}

    .cpai-content-wrapper .modal-body .nav-tabs > .nav-item > a.active,
    .cpai-content-wrapper .modal-body .nav > .nav-item > a:hover,
    .cpai-content-wrapper .modal-body .nav > .nav-item > a:focus {
        background: linear-gradient( 105deg, rgba(224, 99, 62, 0.9) 0%, rgba(177, 77, 230, 0.8) 100% );
        color: var(--white);
        border-color: var(--purple-medium-lighter);
    }

    .cpai-content-wrapper .modal-body .nav-tabs > .nav-item > a.active {
        border-bottom-color: var(--peach);
    }

.cpai-content-wrapper .modal-body .table {
    width: 100%;
    table-layout: fixed;
}

    .cpai-content-wrapper .modal-body .table th {
        text-align: left;
        padding: 10px 2px;
        font-weight: 600;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--pink);
    }

    .cpai-content-wrapper .modal-body .table td {
        padding: 24px 0;
        border-bottom: 1px solid var(--gray-lighter);
        color: var(--primary-text);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cpai-content-wrapper .modal-body .table .empty-row .name > a:not(.btn),
    .cpai-content-wrapper .modal-body .table .empty-row .question {
        color: var(--purple-gray-dark);
    }

    .cpai-content-wrapper .modal-body .table .empty-row .name > a:not(.btn),
    .cpai-content-wrapper .modal-body .table .name > a:not(.btn) {
        padding: 5px 10px;
        border-radius: 31px;
        border: 1px solid var(--light);
        color: var(--primary-text);
    }

        .cpai-content-wrapper .modal-body .table .empty-row .name > a:not(.btn):hover,
        .cpai-content-wrapper .modal-body .table .name > a:not(.btn):hover {
            background-color: var(--light);
            color: var(--dark);
        }

.cpai-content-wrapper .modal-body .copy-btn {
    border: none;
    background: transparent;
}

.cpai-content-wrapper .alert-warning {
    background: var(--purple-lightest) !important;
    border-radius: 0.25rem;
    padding: 15px 25px;
    color: var(--purple-darkest) !important;
    margin: 20px 0;
    position: relative;
    border-color: var(--cpai-light-alpha-50) !important;
}

    .cpai-content-wrapper .alert-warning p {
        color: currentColor;
    }

.cpai-content-wrapper .alert-dismissible [data-dismiss] {
    color: currentColor;
    border-color: currentColor;
}

.cpai-well {
    background-color: var(--light-10);
    padding: 32px 24px;
    border-radius: 0.25rem;
    height: 100%;
}

    .cpai-well p {
        margin: 0.75em 0;
    }

    .cpai-well .cp-submit {
        margin-left: 0 !important;
        margin-top: 10px;
        background: transparent linear-gradient(105deg, #e0633e 0%, #b14de6 100%);
        color: var(--white) !important;
        border: none;
        border-radius: 31px;
    }

        .cpai-well .cp-submit:hover {
            background: transparent linear-gradient(105deg, #b14de6 100%, #e0633e 0%);
        }

.cpai-content-wrapper .paddingLeft {
    float: left;
    padding-left: 0;
    padding-right: 5px;
}

.cpai-upload-btn {
    background: var(--gray-lightest);
    color: var(--peach);
    border: 1px solid #fdbf97;
    box-sizing: border-box;
    border-radius: 0.25rem;
    padding: 5px 20px;
    margin: 0 15px;
    transition: color 300ms;
}

    .cpai-upload-btn:hover {
        color: var(--dark);
        border: 1px solid var(--peach);
    }

.cpai-icon {
    color: var(--peach);
}

.cpai-spacer {
    display: block;
    margin: 50px 0;
}

/*
///////////////////////////////////
/// start of toggle switch styles
///////////////////////////////////
*/

.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.cpai-content-wrapper .switch {
    width: 44px;
    height: 22px;
}

.switch .label {
    position: absolute;
    left: 55px;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-medium);
    transition: 300ms;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: var(--primary-text);
        transition: 300ms;
    }

.switch input:checked ~ .slider:before {
    background-color: var(--white);
}

.slider:after {
    opacity: 0;
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    color: var(--peach);
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 9px;
    transition: opacity 300ms;
}

input:checked + .slider {
    background-color: var(--peach);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--peach);
}

input:checked + .slider:before {
    transform: translateX(14px);
}

input:checked + .slider:after {
    opacity: 1;
}

/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/*
///////////////////////////////////
/// end of toggle switch styles
///////////////////////////////////
*/

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
*******************************/

.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 683px;
    height: 100%;
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 20px 35px;
    margin: 0;
}

.modal.left .modal-title,
.modal.right .modal-title {
    font-size: 18px;
    color: var(--pink);
    font-weight: 500;
    padding: 2px 10px 1px 0px;
    margin: 0 0 10px 0;
    margin-top: 5px;
}

.modal.left a .modal-title,
.modal.right a .modal-title {
    color: var(--orange);
}

.modal.left .breadcrumb > li + li:before,
.modal.right .breadcrumb > li + li:before {
    content: ">";
    color: currentColor !important;
}

.modal.left .breadcrumb li,
.modal.right .breadcrumb li {
    font-size: 18px;
    font-weight: 500;
    color: var(--tertiary-text) !important;
}

    .modal.left .breadcrumb li a,
    .modal.right .breadcrumb li a {
        color: var(--tertiary-text) !important;
    }

.modal.left .conditional-field-values,
.modal.right .conditional-field-values {
    margin-top: 30px;
}

.modal.left .modal-footer,
.modal.right .modal-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
    justify-content: flex-start;
    background: var(--purple-darker);
}

:not(.cp-confirm) > .modal-footer {
    color: var(--white);
    border-top: 1px solid var(--purple);
    padding: var(--spacing-3);
}

.modal-footer > * {
    margin: 0 var(--spacing-2);
}

/*Left*/

.modal.left.fade .modal-dialog {
    left: -320px;
    transition: opacity 300ms linear, left 300ms ease-out;
}

.modal.left.fade.show .modal-dialog,
.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/

.modal.right.fade .modal-dialog {
    right: -320px;
    transition: opacity 300ms linear, right 300ms ease-out;
}

.modal.right.fade.show .modal-dialog,
.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */

.modal.right .modal-dialog .modal-content .modal-body {
    width: 100%;
}

:not(.cp-confirm) > .modal-header {
    padding: 0 16px;
    min-height: 48px;
    border-bottom-color: var(--dark-10);
    background-color: var(--gray-lightest);
}

:not(.cp-confirm) .modal-title {
    margin-bottom: 0;
}

.modal-body_type-select {
    width: 100%;
}

.modal-body_size-select {
    width: 50%;
}

.require-checkbox {
    display: flex;
    align-items: center;
}

    .require-checkbox input[type="checkbox"] {
        margin-right: 10px;
        transform: scale(1.3);
    }

    .require-checkbox p {
        margin: 0;
        color: var(--dark);
    }

.value-option {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: var(--spacing-2);
}

    .value-option li {
        list-style: none;
        display: contents;
    }

.value-option__order {
    position: absolute;
    right: calc(50% - 1.5rem);
}

.value-option a {
    width: 50%;
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
    border: 1px solid var(--light-30);
    padding: var(--spacing-2) 3rem var(--spacing-2) var(--spacing-2);
    border-radius: 0.25rem;
    cursor: default;
    text-decoration: none;
}

.value-option input[type="text"] {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
    width: 50%;
}

/*.value-option.selected-option a*/

.value-option a:hover,
.value-option a:hover svg.value-option__order > path {
    border-color: var(--light);
}

.selected-option svg.value-option__order path {
    fill: var(--light-30);
}

.selected-option:hover svg.value-option__order > path {
    fill: var(--light);
}

.selected-option svg.value-option__bin,
.value-option__bin {
    cursor: pointer;
    padding-left: 3px;
}

.value-option .fa-plus {
    padding-left: 5px;
}

.modal-body .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

.clause-list {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between;
}

    .clause-list .or-text {
        margin: 10px 15px;
    }

.clause-list__content {
    border-bottom: 1px solid var(--purple-gray);
    padding: 15px 0;
    padding-left: 10px;
}

.clause-list input#btnSave {
    margin-top: 0;
    padding: 4px 20px;
}

.clause-list__content .clause-name p {
    color: var(--peach);
}

.cond-field-value-option .value-option__order {
    right: 30px;
}

.clause-name-cont {
    width: 259px;
    overflow: hidden;
}

.clause-name {
    font-size: 13px !important;
}

.clause-list__content:hover {
    background: var(--light-30);
}

.transition-slider {
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

    .transition-slider .view {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

.vue-input-tag-wrapper .new-tag {
    margin-bottom: 0px !important;
}

.nohandle {
    cursor: not-allowed;
}

input[disabled],
textarea[disabled],
select[disabled] {
    background: var(--cpai-secondary-text-alpha-30) !important;
    border-color: var(--cpai-secondary-text-alpha-30) !important;
    color: var(--white) !important;
}

/* start of tooltips */

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

    .tooltip.show {
        opacity: 0.9;
    }

    .tooltip .arrow {
        position: absolute;
        display: block;
        width: 0.8rem;
        height: 0.4rem;
    }

        .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-top .arrow,
    .bs-tooltip-auto[x-placement^="top"] .arrow {
        bottom: 0;
    }

        .bs-tooltip-top .arrow::before,
        .bs-tooltip-auto[x-placement^="top"] .arrow::before {
            top: 0;
            border-width: 0.4rem 0.4rem 0;
            border-top-color: var(--dark);
        }

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-right .arrow,
    .bs-tooltip-auto[x-placement^="right"] .arrow {
        left: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-right .arrow::before,
        .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            right: 0;
            border-width: 0.4rem 0.4rem 0.4rem 0;
            border-right-color: var(--dark);
        }

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-bottom .arrow,
    .bs-tooltip-auto[x-placement^="bottom"] .arrow {
        top: 0;
    }

        .bs-tooltip-bottom .arrow::before,
        .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            bottom: 0;
            border-width: 0 0.4rem 0.4rem;
            border-bottom-color: var(--dark);
        }

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-left .arrow,
    .bs-tooltip-auto[x-placement^="left"] .arrow {
        right: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-left .arrow::before,
        .bs-tooltip-auto[x-placement^="left"] .arrow::before {
            left: 0;
            border-width: 0.4rem 0 0.4rem 0.4rem;
            border-left-color: var(--dark);
        }

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: var(--primary-text);
    text-align: center;
    background-color: var(--dark);
    border-radius: 0.25rem;
}

.cpai-content-wrapper div.tab-content {
    background: var(--light-10) !important;
    border: 1px solid var(--dark-10);
    margin: 0;
    width: 100%;
}

/* Scheduled Reports */
.predefined-schedule-report-page {
}

    .predefined-schedule-report-page .chkChoice {
        margin-top: 5px;
    }

        .predefined-schedule-report-page .chkChoice input {
            margin-left: 15px;
        }

        .predefined-schedule-report-page .chkChoice td {
            padding: 2px 0px 2px 0px;
        }

    .predefined-schedule-report-page .ShecduleCheck {
        margin-left: 15px;
    }

    .predefined-schedule-report-page fieldset.collapsible legend {
        padding-left: 2px;
        background: none;
        cursor: pointer;
    }

    .predefined-schedule-report-page #txtYearlyMonth .ui-datepicker-calendar {
        display: none;
    }

    .predefined-schedule-report-page .ui-datepicker-calendar {
        display: none;
    }

    .predefined-schedule-report-page .ui-datepicker-year {
        display: none;
    }

    .predefined-schedule-report-page .tabular p {
        padding-left: 65px;
    }

    .predefined-schedule-report-page .hide-calendar .ui-datepicker-calendar {
        display: none;
    }

    .predefined-schedule-report-page .report-system {
        border-bottom: 1px solid var(--light-30);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .predefined-schedule-report-page .schedule-report-name {
        border: 1px solid var(--cpai-light-alpha-5);
        background-color: var(--cpai-light-alpha-5);
        color: var(--peach);
        padding: 10px 15px;
        border-radius: 0.25rem;
        margin-bottom: 12px;
    }

    .predefined-schedule-report-page .schedule-box {
        width: 720px; /* match bootstrap tablet container width */ /*600px;*/
        max-width: 100%;
        margin: 0 auto;
        background: var(--panel);
        box-shadow: inset 0 0 0 1px var(--cpai-light-alpha-25);
        border-radius: 0.25rem;
        padding: var(--spacing-3);
    }

    .predefined-schedule-report-page .schedule-report-name label#lblReportName {
        color: var(--gold);
    }

#dlLinks {
    width: 100% !important;
}

/* ContractRequestdata  .contractrequestdata-page*/

.contractrequest-columns-config-box {
    background-color: var(--light);
    border-radius: 0.25rem;
    padding: 20px 0;
    box-shadow: 1px 1px 3px 0 var(--dark-50); /* dc normalized shadows*/
}

.contractrequestdata-page
.contractrequest-columns-config-box
.filter-group
span {
    font-size: 12px;
}

.contractrequestdata-page .contractrequest-adavance-filter-box {
    overflow: visible !important;
}

    .contractrequestdata-page
    .contractrequest-adavance-filter-box > div.container-fluid > div.row > div {
        height: 65px !important;
    }

.contractrequestdata-page a.bgColor {
    border-color: var(--light) !important;
}

.contractrequestdata-page #columns-config-box {
    background: var(--light-10);
    color: var(--primary-text);
    margin-top: var(--spacing-2);
}

    .contractrequestdata-page #columns-config-box input[type="checkbox"] {
        color: var(--primary-text);
        border: 1px solid var(--light);
        padding: 0;
    }

        .contractrequestdata-page #columns-config-box input[type="checkbox"]:checked {
            background-color: var(--light) !important;
        }

            .contractrequestdata-page
            #columns-config-box
            input[type="checkbox"]:checked:after {
                background: transparent !important;
                color: var(--dark);
                padding: 0;
            }

.contractrequestdata-page #query_form_content {
    padding: 15px 0 0 0;
}

    .contractrequestdata-page #query_form_content p.buttons {
        justify-content: flex-start;
        align-items: unset;
    }

    .contractrequestdata-page
    #query_form_content
    .filter-action > div:first-of-type {
        padding-left: 0;
    }

    .contractrequestdata-page
    #query_form_content
    .filter-action > div:last-of-type {
        padding-right: 0;
    }

    .contractrequestdata-page
    #query_form_content
    .filter-action
    input.form-control {
        background: transparent;
        color: var(--primary-text);
        border-color: var(--purple-gray);
    }

    .contractrequestdata-page
    #query_form_content
    p.buttons
    .filter-action > a:last-of-type {
        margin-left: auto;
    }

/* Partner Add/Edit */

.partners-add-edit h4 {
    color: var(--secondary-text);
}

.partners-add-edit .validation {
    color: var(--danger);
    opacity: 1;
    background: none;
}

.partners-add-edit #divClientfeature:empty,
.partners-add-edit #MainContent_divClientfeature:empty {
    display: none !important;
}

    .partners-add-edit #divClientfeature:empty > .form-box:first-child,
    .partners-add-edit #MainContent_divClientfeature > .form-box:first-child {
        margin-top: var(--spacing-4);
        padding-top: var(--spacing-4);
    }

.partners-add-edit .form-action {
    padding-left: 0;
    padding-right: 0;
}

.partners-add-edit .available-multi-client-adding {
    background: var(--light-10);
    border-radius: 0.25rem;
    box-shadow: none;
    margin: 0;
    max-width: 1050px;
    padding: 20px 10px;
}

@media screen and (min-width: 992px) {
    .partners-add-edit .main-content {
        padding: 0 20px 30px; /* make some space for the overlay panel */
    }
}

.partners-add-edit .available-multi-client-adding div.box label {
    display: block;
    margin-top: 0;
}

.partners-add-edit .available-multi-client-adding .form-box {
    margin-left: 0;
    padding-left: 0;
}

.partners-add-edit .saved-data {
    background-color: var(--light-10);
}

    .partners-add-edit .saved-data table,
    .partners-add-edit .saved-data table tr,
    .partners-add-edit .saved-data table td {
        border: none;
    }

        .partners-add-edit .saved-data table td {
            padding: var(--spacing-1);
        }

            .partners-add-edit .saved-data table td td {
                display: inline !important;
            }

/*Adding Tooltip CSS here to keep existing css order*/

.tags-look .tagify__dropdown__item {
    display: inline-block;
    border-radius: 3px;
    padding: 0.3em 0.5em;
    border: 1px solid var(--light-30);
    background: var(--light-30);
    margin: 0.2em;
    font-size: 0.85em;
    color: var(--dark);
    transition: none;
}

.tags-look .tagify__dropdown__item--active {
    color: var(--dark);
}

.tags-look .tagify__dropdown__item:hover {
    background: var(--yellow);
    border-color: var(--gold);
}

.tagify__tag {
    padding-left: 10px;
}

/* start of tooltips */

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

    .tooltip.show {
        opacity: 0.9;
    }

    .tooltip .arrow {
        position: absolute;
        display: block;
        width: 0.8rem;
        height: 0.4rem;
    }

        .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-top .arrow,
    .bs-tooltip-auto[x-placement^="top"] .arrow {
        bottom: 0;
    }

        .bs-tooltip-top .arrow::before,
        .bs-tooltip-auto[x-placement^="top"] .arrow::before {
            top: 0;
            border-width: 0.4rem 0.4rem 0;
            border-top-color: var(--dark);
        }

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-right .arrow,
    .bs-tooltip-auto[x-placement^="right"] .arrow {
        left: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-right .arrow::before,
        .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            right: 0;
            border-width: 0.4rem 0.4rem 0.4rem 0;
            border-right-color: var(--dark);
        }

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-bottom .arrow,
    .bs-tooltip-auto[x-placement^="bottom"] .arrow {
        top: 0;
    }

        .bs-tooltip-bottom .arrow::before,
        .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            bottom: 0;
            border-width: 0 0.4rem 0.4rem;
            border-bottom-color: var(--dark);
        }

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-left .arrow,
    .bs-tooltip-auto[x-placement^="left"] .arrow {
        right: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-left .arrow::before,
        .bs-tooltip-auto[x-placement^="left"] .arrow::before {
            left: 0;
            border-width: 0.4rem 0 0.4rem 0.4rem;
            border-left-color: var(--dark);
        }

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: var(--primary-text);
    text-align: center;
    background-color: var(--dark);
    border-radius: 0.25rem;
}

/*Customized placeholder for input box*/

:not(.form-control):not(.vs__search)::placeholder {
    /* Chrome/Opera/Safari */
    color: var( --cpai-on-primary-darken-10);
}

/* Everything else below this line are not global styles */

#content:not(.vue-content) h1,
h2 {
    color: var(--peach-dark);
}

.vault-forms .page-heading .page-title,
.user-register-box .page-heading .page-title {
    color: var(--primary-text) !important;
}

.login-logo:after {
    background: var(--gray-lightest);
}

/* No Data */

.nodata {
    border: 1px solid var(--light-30);
    color: var(--primary-text);
    padding: var(--spacing-3);
    margin: var(--spacing-5) 0;
    background: transparent;
    width: 100%;
}

a.issue.closed,
a.issue.closed:link,
a.issue.closed:visited {
    color: var(--gray);
    text-decoration: line-through;
}

a.project.closed,
a.project.closed:link,
a.project.closed:visited {
    color: var(--gray);
}

i.open-activity {
    color: var(--pink-medium);
}

.open-activity-bg {
    background: var(--pink-medium) !important;
    color: var(--white) !important;
}

i.closed-activity {
    color: var(--pink-dark);
}

.closed-activity-bg {
    background: var(--pink-dark) !important;
    text-decoration: line-through;
    color: var(--white) !important;
}

i.task-activity {
    color: var(--blue);
}

.task-activity-bg {
    background: var(--blue) !important;
    color: var(--white) !important;
}

a.subnav-link.active {
    color: var(--peach) !important;
}

#sidebar a.selected {
    background-color: #9db9d5;
    color: var(--primary-text);
}

#MainContent_PanelContractTemplate {
    margin: var(--spacing-3) !important;
}

input[type="submit"].cp-submit,
input[type="submit"]#btnSave.cp-submit,
{
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
    border-radius: 20px;
}

    input[type="submit"].cp-submit:hover,
    input[type="submit"]#btnSave.cp-submit:hover {
        background: var(--purple-medium-lighter);
        border-color: var(--purple-medium-lighter);
        color: var(--white);
    }

input[type="submit"]#btnCancel.cp-submit {
    background: transparent;
    border: 1px solid var(--light);
    border-radius: 20px;
}

    input[type="submit"]#btnCancel.cp-submit:hover {
        background-color: var(--light);
        color: var(--dark) !important;
    }

/* List Group */
.list-group {
}

.list-group-item {
    background: transparent;
    color: currentColor;
}

/***** Table List *****/

.pretty.p-default .state label:before,
.cpai_radios label:before {
    border: 1px solid var(--light) !important;
}

.pretty.p-default input:checked ~ .state label:before,
.cpai_radios input:checked ~ label:before {
    border-color: var(--light) !important;
}

.pretty.p-default input:checked ~ .state label:after,
.cpai_radios input:checked ~ label:after {
    background-color: var(--pink) !important;
    transform: scale(1) !important;
    top: 0;
}

.table-responsive
.tdCheckBox
.pretty
input:checked ~ .state.p-success
label:after,
#columns-config-box .pretty input:checked ~ .state.p-success label:after,
.pretty input:checked ~ .state.p-success label:after,
.pretty.p-toggle .state.p-success label:after,
.pretty.p-round input:checked ~ .state.p-success label:after {
    background-color: var(--pink-bright) !important;
    border-color: var(--pink-bright) !important;
}

.pretty.p-round > input:checked + .state.p-success > i {
    display: none !important;
}

.pretty .state label:before {
    border-color: var(--cpai-on-primary-lighten-10) !important;
}

.pretty i {
    padding-top: 12px !important;
    padding-left: 4px !important;
    color: var(--white) !important; /* always on white*/
    display: none;
}

.pretty.p-icon input:checked ~ .state .icon {
    display: block;
    font-size: 10px;
}

.switch .slider,
.pretty.p-switch .state:before {
    border: 1px solid var(--cpai-secondary-text-alpha-30) !important;
    background: var(--cpai-secondary-text-alpha-30) !important;
}

    .switch .slider:before {
        transform: translateX(1px);
        top: 1px;
    }

.switch input:checked:after {
    display: none;
}

.switch input:checked ~ .slider:before {
    transform: translateX(15px);
}

.pretty.p-switch .state label:after {
    background-color: var(--light) !important;
}

.switch input:checked ~ .slider,
.pretty.p-switch input:checked ~ .state:before {
    background: var(--secondary) !important;
    border: 1px solid var(--secondary) !important;
}

.pretty.p-switch input:checked ~ .state label:after {
    background-color: var(--light) !important;
    top: -1px;
    left: 14px;
}

/* PAGINATION */

.pagination {
    display: inline-table;
}

    .pagination tr {
        display: block;
        margin-top: 25px;
        vertical-align: top;
    }

        .pagination tr td {
            display: block;
            text-align: center;
        }

    .pagination a,
    .paginationPanel a {
        display: inline-block;
        margin-bottom: 4px;
        background-color: var(--light);
        font-size: 13px;
        border: 1px solid var(--light-30);
        border-radius: 0.25rem;
    }

.pagination_per_page span {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
}

div.pagination {
    display: none;
}

table.pagination {
    background: transparent;
    font-weight: 400 !important;
}

    table.pagination tbody .paginationPanel a,
    .pagination a,
    .pagination .current_page {
        background: transparent;
        border: 1px solid var(--light);
        color: var(--primary-text);
        margin: 0 5px;
        border-radius: 50%;
        transition: all 300ms;
        font-family: "Poppins";
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

        table.pagination tbody .paginationPanel a:hover,
        table.pagination tbody .paginationPanel a.selected,
        .pagination a:hover,
        .pagination a.selected {
            background-color: var(--light) !important;
            border: 1px solid var(--light) !important;
            color: var(--dark) !important;
            transition: all 300ms;
        }

    table.pagination tr td span {
        font-size: 15px;
        text-transform: uppercase;
        font-family: "Poppins";
        display: inline-block;
        background: transparent;
        color: var(--primary-text);
    }

    table.pagination tbody .paginationPanel span:nth-last-child(2) {
        display: none;
    }

    table.pagination tbody .paginationPanel > span:last-of-type {
        color: var(--cpai-primary-text-alpha-70);
        text-transform: none;
        font-size: 15px;
        font-style: normal;
        padding: 10px;
    }

    table.pagination tr td.pagination_per_page a {
        border-radius: 16px;
        width: 50px;
    }

.paginationPanel .current_page {
    border-color: var(--light-50);
    background-color: var(--light);
    color: var(--dark);
}

:not(.cp-datatable-body__row):not(.cp-datatable-body__details-row).even {
    background-color: var(--gray-lightest);
}

.contextual {
    color: var(--purple-gray-dark);
}

:not(.vue-form-generator) > fieldset {
    border: 1px solid var(--light-30);
}

legend {
    color: var(--purple-lighter);
}

.activity_heading h3,
.modal_heading h3 {
    color: var(--purple-blue);
    border-bottom: 1px solid var(--gray-lighter);
}

span.pagination {
    color: var(--peach-dark);
    text-decoration: none;
    font-style: italic;
}

#sidebar {
    background: var(--tertiary);
    border-radius: 0;
}

.nav-sidebar {
    background: var(--tertiary);
    color: var(--primary-text);
}

.metro-btn2 {
    background: var(--dark);
    color: var(--gray-lighter);
}

    .metro-btn2 i {
        color: var(--gray-lighter);
    }

    .metro-btn2:after {
        background: var(--peach);
    }

#sidebar .sub_menu {
    background: var(--gray);
}

    #sidebar .sub_menu li a {
        color: var(--gray-lighter);
    }

/*Dashboard  .dashboard-page */
.dashboard-page .activity-wrap .check-contracts {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
    padding: 12px 0;
    transition: all 300ms;
    color: var(--primary-text);
}

.dashboard-page .check-contracts .notification-title,
.dashboard-page .check-contracts .activity-notification-number {
    background: transparent;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

    .dashboard-page .check-contracts .notification-title br {
        content: "";
        margin: 0 0 0 5px;
    }

    .dashboard-page .check-contracts .activity-notification-number a {
        color: var(--white);
        font-size: 28px !important;
        font-weight: 700;
        margin-bottom: 16px;
        display: inline-block;
        background: var(--peach);
        min-width: 100px;
        border-radius: 30px;
        padding: 5px 0;
        transition: all 300ms;
    }

    .dashboard-page .check-contracts:hover,
    .dashboard-page .check-contracts:hover .activity-notification-number,
    .dashboard-page .check-contracts .activity-notification-number:hover {
        background: none;
    }

        .dashboard-page .check-contracts:hover .activity-notification-number a {
            background: var(--orange);
        }

        .dashboard-page .check-contracts:hover .notification-title {
            color: var(--orange);
        }

.dashboard-page .dashboard-filter-box input[type="submit"] {
    background: transparent;
    color: var(--cpai-primary-text-alpha-50) !important;
    padding: 5px 18px;
    border-radius: 0px;
    height: 30px;
    border: none;
    margin: 0 !important;
}

    .dashboard-page
    .dashboard-filter-box
    input[type="submit"]:not(:first-child):not(:last-child) {
        border-right: 1px solid var(--light-50);
        border-left: 1px solid var(--light-50);
    }

    .dashboard-page .dashboard-filter-box input[type="submit"]:hover,
    .dashboard-page .dashboard-filter-box input[type="submit"].selected {
        background: var(--panel);
        color: var(--primary-text) !important;
    }

.dashboard-page .dashboard-years-filter {
    margin: 16px 16px 16px;
}

.dashboard-page .dashboard-filter-box {
    display: flex;
    justify-content: flex-end;
}

.dashboard-page .activity-wrap {
    background: var(--panel);
    border: none;
}

    .dashboard-page .activity-wrap .row div:last-of-type .check-contracts {
        border: none;
    }

.dashboard-page .dashboard-charts .panel {
    background: var(--panel) !important;
}

.dashboard-page .dashboard-charts h3.charts-heading {
    color: var(--primary-text) !important;
    border: none !important;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 1px 1px var(--light-20);
    background: var(--panel);
}

    .dashboard-page .dashboard-charts h3.charts-heading:hover {
        box-shadow: inset 0 0 1px 1px var(--light-50);
    }

    .dashboard-page .dashboard-charts h3.charts-heading i {
        background: var(--pink);
    }

      .dashboard-page .dashboard-charts h3.charts-heading i.help-trigger {
        background: transparent;
        display:inline-block;
        position:relative;
        right:0;
        top:0;
      }

      /*My Contract Page*/
      .my-contract-panel .panel-heading {
        background-color: var(--light);
        border: 1px solid var(--gray-lighter);
        box-shadow: 1px 1px 3px 0 var(--dark-50);
        margin: 5px 15px 15px;
      }

/*RequestFlow page*/

.snapshot-action input[type="submit"] {
    background: var(--gray-lightest);
    color: var(--green) !important;
    border: 1px solid var(--green);
}

.cp-tab {
    border: 1px solid var(--light-30);
}

.latest-cp-file {
    border: 1px solid var(--light-30);
}

.pagination {
    background-color: var(--light);
}

.page-breadcrumb {
    color: var(--dark-text);
}

    .page-breadcrumb a {
        color: var(--peach);
    }

.page-heading .page-title .current-contract-status {
    color: var(--orange);
}

#uploadbox {
    background-color: var(--light);
    margin: 0 15px;
    border-radius: 0.25rem;
}

div.issue {
    padding: var(--spacing-2);
    margin-top: var(--spacing-2);
    border: none;
    color: var(--muted);
}

    div.issue a.issue {
        background: transparent !important;
        color: currentColor !important;
        padding: 0;
    }

    div.issue div.subject div div {
        padding-left: 16px;
    }

    div.issue div.subject p {
        margin: 0;
        margin-bottom: 0.1em;
        font-size: 0.875rem;
    }

    div.issue div.subject > div > p {
        margin-top: 0.5em;
    }

    div.issue div.subject h3 {
        margin: 0;
        margin-bottom: 0.1em;
    }

    div.issue span.private {
        position: relative;
        bottom: 2px;
        text-transform: uppercase;
        font-weight: bold;
        padding: 0px 2px 0px 2px;
        font-size: 60%;
        margin-right: 2px;
        border-radius: 2px;
    }

/* temporarily hiding the select elements */

.main-content .contextual-wrap,
.main-content .contextual {
    /*display: none;*/
}

.main-content .breadcrumb-container a {
    color: var(--primary-text);
}

.main-content .tabs-container .tab-link:first-child {
    border-left: none;
}

.main-content .tabs-container .tab-link:last-child {
    border-right: none;
}

.main-content .tabs-container .tab-link.active,
.main-content .tabs-container .tab-link:hover {
    background: var(--primary-gradiant--active);
    color: var(--white);
    text-decoration: none;
}

.page-heading .filter-action > a i {
    font-size: 10px;
    display: inline-block !important;
}

/* Cognitive search */

.advance-search-box input.adv-search-input {
    color: var(--primary-text) !important;
    background: transparent !important;
    border-color: var(--light-30);
}

.advance-search-box .advanced-inputs-cont .advanced-inputs-toggle {
    color: var(--primary-text);
}

.advance-search-box .adv_fieldset {
    background: transparent;
    border: 0;
}

.advance-search-box .adv_filter .inner-container {
    padding: 24px;
    background: var(--dark);
}

    .advance-search-box
    .adv_filter
    .inner-container
    .input-group
    table
    tbody
    tr
    td
    label {
        color: var(--primary-text);
    }

.advance-search-box .adv_filter label.small {
    color: var(--primary-text);
}

.advance-search-box .adv_filter .advanced-search-tab {
    background: var(--green);
    background: transparent linear-gradient(105deg, #b14de6 0%, #b14de600 100%) 0% 0% no-repeat padding-box;
}

    .advance-search-box .adv_filter .advanced-search-tab h3 {
        color: var(--primary-text) !important;
    }

#MainContent_tblMetadataTitle h2 {
    color: var(--primary-text);
}

#MainContent_tblMetadataTitle
#masterDataTable
thead
tr
th:last-child:not(table.reportTable thead tr th) {
    color: var(--pink);
    background: none;
}

#MainContent_tblMetadataTitle #masterDataTable tbody tr td {
    color: var(--primary-text);
}

    #MainContent_tblMetadataTitle
    #masterDataTable
    tbody
    tr
    td[data-title="Found In"]
    .highlights {
        text-align: left;
    }

        #MainContent_tblMetadataTitle
        #masterDataTable
        tbody
        tr
        td[data-title="Found In"]
        .highlights
        .highlightsDisplayName {
            color: var(--secondary-text);
        }

            #MainContent_tblMetadataTitle
            #masterDataTable
            tbody
            tr
            td[data-title="Found In"]
            .highlights
            .highlightsDisplayName:hover {
                color: var(--primary-text);
                text-decoration: underline;
            }

        #MainContent_tblMetadataTitle
        #masterDataTable
        tbody
        tr
        td[data-title="Found In"]
        .highlights
        i {
            cursor: pointer;
            color: var(--secondary-text);
            border: 1px solid var(--secondary-text);
            padding: 2px;
            border-radius: 0.25rem;
            margin-left: 10px;
        }

            #MainContent_tblMetadataTitle
            #masterDataTable
            tbody
            tr
            td[data-title="Found In"]
            .highlights
            i:hover {
                color: var(--primary-text);
            }

        #MainContent_tblMetadataTitle
        #masterDataTable
        tbody
        tr
        td[data-title="Found In"]
        .highlights
        #chkSelectDocument,
        #MainContent_tblMetadataTitle
        #masterDataTable
        tbody
        tr
        td[data-title="Found In"]
        .highlights
        .highlightsIcon {
        }

div#MainContent_divExport .cpai_radios > div label {
    color: var(--primary-text);
}

/* Edit Legal Matter Request */

#MainContent_autoAssignFieldsSliderContainer .auto-assign-fields-slider {
    left: 0;
}

    #MainContent_autoAssignFieldsSliderContainer
    .auto-assign-fields-slider
    .slider-content {
        background: var(--dark);
        z-index: 200;
    }

        #MainContent_autoAssignFieldsSliderContainer
        .auto-assign-fields-slider
        .slider-content
        .tab-headers
        .snapshot-tabs {
            background: var(--dark);
            border: none;
            z-index: 200;
        }

            #MainContent_autoAssignFieldsSliderContainer
            .auto-assign-fields-slider
            .slider-content
            .tab-headers
            .snapshot-tabs
            li
            span,
            #MainContent_autoAssignFieldsSliderContainer
            .auto-assign-fields-slider
            .slider-content
            .tab-headers
            .snapshot-tabs
            li.selected
            span,
            #MainContent_autoAssignFieldsSliderContainer
            .auto-assign-fields-slider
            .slider-content
            .tab-headers
            .snapshot-tabs
            li.selected
            span:hover {
                color: var(--primary-text);
            }

        #MainContent_autoAssignFieldsSliderContainer
        .auto-assign-fields-slider
        .slider-content
        .cp-tab {
            background: transparent;
            border: none;
        }

            #MainContent_autoAssignFieldsSliderContainer
            .auto-assign-fields-slider
            .slider-content
            .cp-tab
            .cp-tab-content
            table#masterDataTable
            thead
            tr
            th {
                background: transparent;
                color: var(--pink);
                font-size: 16px;
            }

            #MainContent_autoAssignFieldsSliderContainer
            .auto-assign-fields-slider
            .slider-content
            .cp-tab
            .cp-tab-content
            table#masterDataTable
            tbody
            tr.auto-assign-fields-list-row
            td {
                background: var(--purple-blue);
                border: none;
            }

/* Edit Legal Matter Type */

#MainContent_PanelContractTemplate {
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 4em 15px 15px 15px !important;
}

    #MainContent_PanelContractTemplate .section-title {
        color: var(--primary-text);
        margin: 0 0 20px 0 !important;
    }

    #MainContent_PanelContractTemplate br {
        display: none;
    }

    #MainContent_PanelContractTemplate .filter-action > a {
        width: 190px;
        height: 40px;
    }

    #MainContent_PanelContractTemplate div:last-child {
        width: 100%;
    }

    #MainContent_PanelContractTemplate #filters,
    #MainContent_PanelContractTemplate .filter-action {
        display: none;
    }

    #MainContent_PanelContractTemplate .table-padding {
        padding: 0;
    }

.document-type-master .form-action {
    text-align: center;
}

#MainContent_PanelContractTemplate table tbody tr td {
    border: none !important;
    font-size: 15px;
}

#MainContent_PanelContractTemplate table tbody tr:nth-child(even) td {
    background: var(--cpai-light-alpha-10) !important;
}

#MainContent_PanelContractTemplate table tbody tr:nth-child(odd) td {
    background: var(--cpai-light-alpha-20) !important;
}

#MainContent_PanelContractTemplate table tbody tr td:nth-child(odd) {
    color: var(--cpai-primary-text-90);
}

#MainContent_PanelContractTemplate table tbody tr td:nth-child(2) {
    display: none;
}

#MainContent_PanelContractTemplate table tbody tr td:nth-child(6),
#MainContent_PanelContractTemplate table tbody tr td:nth-child(6) a {
    color: var(--purple-lighter);
    text-decoration: underline;
}

/*==================
    Pages
    Each page will add a class to the body tag manually through javascript.
====================*/

/* Fields Auto Assignment */

div#MainConfigDiv .buttons {
    justify-content: flex-start;
}

/*MetaData Configurators */

.versions-container > table tr th {
    font-size: 1rem;
    font-weight: bold;
}

#tblData.metadata-configurator-table
tbody
tr
td[data-title="Comments"] + td
a:before {
    content: "\f044";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: -3px;
    left: 6px;
    color: var(--primary-text);
    font-weight: bold;
}

#tblData.metadata-configurator-table
tbody
tr
td[data-title="Comments"] + td
a
img {
    display: none;
}

/* Legal Matter Groups */

.application-groups .buttons.hide-when-print.filter-action {
    justify-content: unset;
}

    .application-groups
    .buttons.hide-when-print.filter-action
    .search-wrapper
    label {
        margin-right: 6px;
    }

    .application-groups
    .buttons.hide-when-print.filter-action
    .search-wrapper
    input {
        width: 300px;
    }

    .application-groups .buttons.hide-when-print.filter-action a i {
        display: none;
    }

.application-groups #masterDataTable > thead tr th {
    background: transparent;
    padding-left: 0;
}

.application-groups #masterDataTable thead tr th a {
    color: var(--pink);
}

.application-groups #masterDataTable tbody tr td:last-child div a {
    padding: 0 1em;
}

.application-types #masterDataTable tbody tr td:last-child div a {
    padding: 0 1em;
}

.application-groups #masterDataTable tbody tr td.detail-row-toggle i,
#masterDataTable tbody tr td.detail-row-toggle i {
    color: var(--primary-text) !important;
}

.application-groups #masterDataTable > tbody tr td {
    padding: 16px 0;
}

    .application-groups #masterDataTable > tbody tr th:first-of-type,
    .application-groups #masterDataTable > tbody tr td:first-of-type {
        padding: 13px !important;
    }

    .application-groups #masterDataTable > tbody tr td > * {
        color: var(--primary-text);
        font-weight: 500;
        font-size: 15px;
    }

.application-groups #masterDataTable > tbody tr.details-row {
    color: var(--primary-text);
    font-weight: 500;
    font-size: 15px;
}

    .application-groups #masterDataTable > tbody tr.details-row > td:first-of-type {
        background: var(--purple-blue);
    }

.application-groups
table#masterDataTable.issues
tbody
tr.details-row
table
thead
tr,
.application-groups
table#masterDataTable.issues
tbody
tr.details-row
table
thead
tr
td {
    color: var(--primary-text);
    border: none;
    padding: 0;
    background: var(--purple-blue);
}

.application-groups
table#masterDataTable.issues
tbody
tr.details-row
table
tbody
tr,
.application-groups
table#masterDataTable.issues
tbody
tr.details-row
table
tbody
tr
td {
    border: none;
    padding: 0;
    background: var(--purple-blue);
}

.application-groups #masterDataTable tbody tr.details-row table tbody tr td a {
    color: var(--purple-lighter);
    text-decoration: underline;
    padding: 4px 0;
}

/* New Legal Matter Group */

.application-master {
    background: transparent !important;
}

    .application-master .page-heading {
        padding: 24px;
    }

    .application-master > .row input {
        background: transparent;
        border: 1px solid var(--light) !important;
    }

    .application-master > .row {
        background: var(--dark);
        padding: 2em;
        margin: 0 24px;
    }

    .application-master .vault-form-submit {
        background: var(--dark);
        margin: 0 24px;
    }

    .application-master *,
    .application-master label {
        color: var(--primary-text) !important;
    }

/* New Matter Request */

.new-matter-request
.panel-body
.form-group
.pretty.p-default
.state
label:after {
    top: calc((0% - (100% - 1em)) - 8%);
}

.new-matter-request .page-heading,
.new-matter-request .add-new-request-table {
    margin-left: 8px;
}

#MainContent_spnDisclaimer,
.new-matter-request .panel .panel-heading {
    background: transparent linear-gradient(105deg, #e0633e 0%, #b14de6 100%) 0% 0% no-repeat padding-box;
    color: var(--white);
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 600;
}

#MainContent_spnDisclaimer {
    background: transparent;
}

.new-matter-request .panel .panel-body {
    background-color: var(--dark);
    margin: 0;
    border-radius: 0;
}

.panel-body #trAttachrelevantDocument #ParentDiv {
    background: transparent !important;
}

.panel-body #trAttachrelevantDocument h3.plupload_droptext,
.panel-body #trAttachrelevantDocument li.plupload_droptext {
    color: var(--primary-text) !important;
}

.panel-body #trAttachrelevantDocument .plupload_button {
    background: transparent;
    border: 1px solid var(--light);
}

    .panel-body #trAttachrelevantDocument .plupload_button:hover {
        background-color: var(--light);
        color: var(--dark) !important;
    }

.new-matter-request .required:nth-child(2) {
    margin: 0 !important;
}

.new-matter-request .snapshot-tabs li.selected span {
    box-shadow: 0 3px 0 0 var(--secondary);
}

.main-content .form-action.contract-request-action input {
    border-radius: 50px;
    border: 1px solid var(--secondary);
    background: var(--secondary) !important;
    color: var(--primary-text) !important;
    display: inline-block;
    padding: 5px 16px;
}

@media only screen and (min-width: 992px) {
    .main-content .form-action.contract-request-action input:hover {
        background: var(--purple-medium-lighter) !important;
        border-color: var(--purple-medium-lighter);
    }
}

.main-content .form-action.contract-request-action input:last-child {
    border-radius: 50px;
    border: 1px solid var(--light) !important;
    background: transparent !important;
}

.main-content .auto-assign-fields-slider .slider-header {
    background: var(--secondary);
}

.main-content .form-action.contract-request-action input:last-child:hover {
    border-radius: 50px;
    border: 1px solid var(--secondary) !important;
    background: var(--secondary) !important;
}

.panel-body .state label {
    color: var(--primary-text);
}

.panel-body input[type="text"],
.panel-body textarea {
    color: var(--primary-text);
    border: 1px solid var(--light);
    background: transparent;
}

.panel.panel-contract-request
.panel-body.panel-request-type
.row:not(:nth-child(n + 3)) {
    margin: 16px 0 0 0;
}

/* Legal Matters */

input:checked + .slider {
    background-color: var(--secondary);
}

/* Custom Reports */

.section-sunset {
    background: transparent linear-gradient(105deg, var(--sunset-primary) 0%, var(--sunset-secondary) 100%) 0% 0% no-repeat padding-box;
    color: var(--white);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 0.25rem;
}

.section-heading {
    background: var(--panel);
    color: var(--primary-text);
    box-shadow: inset 0 0 0 1px var(--cpai-light-alpha-25);
    border-radius: 0.25rem;
    padding: var(--spacing-2) var(--spacing-3);
    margin: var(--spacing-3) 0 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .section-heading .ckAllCheck, 
    .section-heading .ckShowCurrencyCode {
        display: block;
    }

    .section-heading:not(.active) .ckAllCheck, 
    .section-heading:not(.active) .ckShowCurrencyCode {
        display: none;
    }

.collapsible-section {
    max-height: 0;
    opacity: 0;
    transition: all 600ms linear;
    overflow: hidden;
}

    .collapsible-section.active {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }

.rt-schedule-table,
.custom-report-schedule-table tr td {
    padding: var(--spacing-2);
}

.custom-report-data .chzn-container,
.custom-report-schedule-table .chzn-container,
.custom-report-filters .chzn-container {
    width: 100% !important;
}

/* Workflow Designer */

#MainContent_lblTitle {
    color: var(--primary-text);
}

/* Add Task Rule */

#rule-manager-details .rule-manager-details {
    padding: 0 16px;
}

    #rule-manager-details .rule-manager-details .panel {
        margin: 16px 0;
    }

        #rule-manager-details .rule-manager-details .panel,
        #rule-manager-details .rule-manager-details .panel .panel-heading,
        #rule-manager-details .rule-manager-details .panel .panel-body {
            background: var(--purple-darker);
            box-shadow: none;
        }

            #rule-manager-details .rule-manager-details .panel .panel-heading {
                color: var(--primary-text);
            }

            #rule-manager-details
            .rule-manager-details
            .panel
            .panel-body
            .form-group
            label {
                color: var(--purple-lighter);
            }

            #rule-manager-details .rule-manager-details .panel .panel-body .row > div > a {
                display: inline-block;
                padding: 7px 20px;
                text-decoration: none;
            }

            #rule-manager-details .rule-manager-details .panel .panel-body .list a {
                text-decoration: none;
                border: 1px solid var(--light);
                text-align: center;
                border-radius: 20px;
                width: 100px;
                margin-left: auto;
                display: block;
            }

                #rule-manager-details .rule-manager-details .panel .panel-body .list a:hover {
                    text-decoration: underline;
                    color: var(--purple-lighter);
                }

#rule-manager-details .task-fields .form-group {
    display: flex;
}

    #rule-manager-details .task-fields .form-group label {
        margin-right: 20px;
        width: 100%;
        text-align: right;
    }

/* Buttons, inputs, textarea, and etc... */

.cpai-link {
    background: transparent;
    color: var(--primary-text);
    padding: 5px 20px;
}

.main-search-wrapper {
    position: relative;
}

    .main-search-wrapper #lnkGlobalSearch i {
        position: absolute;
        right: 8px;
        top: 0;
    }

#MainContent_btnAddRecord i {
    display: inline-block;
}

.form-group input:not(.btn) {
    background: transparent;
    color: var(--primary-text);
}

/* Key Data and etc...*/

.meta-data-details #filters .container-fluid .row > div {
    width: auto;
}

#query_form_content.filter-box .buttons .cpai-link#ancAddNew {
    background: var(--secondary) !important;
    border: none !important;
    margin-left: auto;
    width: auto;
    height: auto;
    margin-top: 0;
    border-radius: 20px;
}

    #query_form_content.filter-box .buttons .cpai-link#ancAddNew:hover {
        background: var(--purple-medium-lighter) !important;
    }

/* LMM/KeyObligations/List.aspx  - Popup - Edit/Add new */

#rule-manager-details .rule-manager-details .panel .panel-body .row > div > a,
#rule-manager-details
.rule-manager-details
.panel
.vault-form-submit
.theme-button {
    background: var(--secondary);
    border: none;
    border-radius: 20px;
    color: var(--primary-text);
}

    #rule-manager-details
    .rule-manager-details
    .panel
    .panel-body
    .row > div > a:hover,
    #rule-manager-details
    .rule-manager-details
    .panel
    .vault-form-submit
    .theme-button:hover {
        background: var(--purple-medium-lighter);
    }

#interVeil {
    background: var(--purple-darker-75) !important;
    opacity: 1 !important;
}

.dhtmlwindow,
.dhtmlwindow iframe,
.dhtmlwindow body {
    background: var(--purple-darker) !important;
    color: var(--primary-text) !important;
}

    .dhtmlwindow iframe body {
        margin: 0;
    }

    .dhtmlwindow::before {
        content: "";
        background: var(--dark-75);
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
    }
/* Global stuff */

/* Add New */

.modal_heading ~ .add-metadata,
.modal_heading + .add-metadata {
    padding: 20px;
}

#types input:after {
    background-color: var(--light) !important;
}

#ko-list-content .modal-content .modal-body input[type="checkbox"]:checked {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    padding: 0;
}

    #ko-list-content
    .modal-content
    .modal-body
    input[type="checkbox"]:checked:after {
        background-color: var(--light) !important;
        color: var(--dark) !important;
        padding: 0;
    }

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.block {
    display: block;
}

/*===========================
    Responsive Media Queries by Ariful Ahsan
============================*/

@media only screen and (max-width: 1640px) {
    .application-types #query_form_content .buttons {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 1184px) and (max-width: 1640px) {
    .application-types #query_form_content .buttons > a:nth-child(n + 6) {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 1184px) {
    .application-types #query_form_content .buttons .search-wrapper {
        width: 50%;
        max-width: unset;
    }

    .application-types #query_form_content .buttons .select-wrapper {
        width: calc(50% - 30px);
        max-width: unset;
    }

    .application-types #query_form_content .buttons a {
        margin-top: 10px;
    }

    .application-types #query_form_content .buttons > a:first-of-type {
        margin-left: 0;
    }
}

@media only screen and (max-width: 991px) {
    .main-search-wrapper {
        background: transparent;
        border-radius: 0.25rem;
        border: none;
        padding-right: 0;
    }
}

@media only screen and (max-width: 800px) {
    .application-groups #masterDataTable tbody tr.details-row td:first-of-type {
        padding: 0 !important;
    }

    .application-groups
    #masterDataTable
    tbody
    tr.details-row
    table
    tbody
    tr
    td:first-child {
        display: none;
    }

    .application-groups
    #masterDataTable
    tbody
    tr.details-row
    table
    tbody
    tr
    td:nth-child(2) {
        padding: 0.25em 0 !important;
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .application-groups #masterDataTable > tbody tr.details-row > td {
        padding: 0 !important;
    }

    .main-search-wrapper {
        background: transparent;
        padding-right: 0;
    }

        .main-search-wrapper .Searchovers:hover {
            color: var(--primary-text);
        }

    .application-groups .buttons {
        display: block;
    }

        .application-groups .buttons .search-wrapper {
            width: 100%;
            margin-bottom: 1em;
        }

        .application-groups .buttons a {
            margin: 0 5px 0 0 !important;
        }
}

@media only screen and (min-width: 801px) {
    .application-master > .row > div:first-of-type {
        max-width: 500px;
    }

        .application-master > .row > div:first-of-type
        .form-group:last-child
        .row > div:last-child {
            padding: 0;
        }

        .application-master > .row > div:first-of-type .form-group .row {
            display: flex;
            padding: 0 5em 0 0;
        }

            .application-master > .row > div:first-of-type .form-group .row input,
            .application-master > .row > div:first-of-type .form-group .row textarea,
            .application-master > .row > div:first-of-type
            .form-group
            .row > div:last-child {
                width: 100% !important;
            }

    .application-master > .row > div:last-child table:first-of-type tbody tr td {
        width: 10% !important;
    }

    .application-master > .row > div:last-child table:last-child tbody tr td {
        width: 10% !important;
    }

    .application-master > .row > div:last-child
    table:last-child
    tbody
    tr.AllCheckBoxClass
    td:first-child {
        padding-left: 10px;
    }
}

.royal-wave {
    background: transparent linear-gradient(100deg, var(--royal-wave-purple) 0%, var(--royal-wave-blue) 100%) 0% 0% no-repeat padding-box;
}

.royal-wave:hover {
    background: linear-gradient( 100deg, rgba(119, 62, 168, 1) 0%, rgba(23, 23, 113, 1) 100% );
}

.sunset {
    background: transparent linear-gradient(105deg, var(--sunset-primary) 0%, var(--sunset-secondary) 100%) 0% 0% no-repeat padding-box;
}

.sunset:hover {
    background: transparent linear-gradient(105deg, #e28331 0%, #e64da5 100%) 0% 0% no-repeat padding-box;
}

/* General Dark Theme CSS */

.pretty .state label {
    color: var(--primary-text);
}

#dlLinks {
    width: 100% !important;
}

#menu-btn i {
    cursor: pointer;
}

.search-choice {
    background-color: var(--pink) !important;
    background-image: unset !important;
    border-color: unset !important;
}

.adv_control_label label {
    padding-bottom: 8px;
}

.search-results-modal .modal-title p,
.search-results-modal .modal-title p span {
    color: var(--primary-text) !important;
}

.search-results-modal .search-highlight {
    border: 1px solid var(--secondary);
    color: var(--purple-darkest) !important;
}

.search-results-modal .modal-content {
    background-color: var(--white) !important;
}

.cpai-content-wrapper .search-results-modal .close {
    border: none;
}

.cpai-content-wrapper .search-results-modal .modal-body .mCSB_dragger_bar {
    background-color: var(--secondary) !important;
}

.query-builder {
    --light: var(--black);
}

.cpai-content-wrapper select optgroup {
    background-color: var(--primary-text);
}

.cpai-content-wrapper select optgroup {
    color: var(--dark);
}

select.form-control {
    background-color: transparent !important;
    color: var(--primary-text);
}

/*Popup Modal Window -> Add MetaData Fields, Vault > Configuratos > MetaData.aspx*/

.cpai_i_modal .page-heading {
    padding: 16px 16px 0 !important;
}

    .cpai_i_modal .page-heading .page-title {
        width: 100%;
    }

.cpai_i_modal .form-action input[type="submit"] {
    min-width: 177px;
    margin-bottom: 20px;
}

.dhtmlwindow .drag-controls img[title="Close"] {
    filter: grayscale(100%);
}

@media only screen and (min-width: 768px) {
    #FieldDetails.dhtmlwindow[style] {
        width: 86% !important;
        left: 7% !important;
    }

    .cpai_i_modal .cp-modal .col-xs-5 {
        width: 30%;
    }
}

/*Advanced search page UI*/

.advance-search-box .search-container {
    margin: 0 16px;
    max-width: 717px !important;
}

.advance-search-box .row.tips-section {
    padding-left: 16px !important;
}

#MainContent_tblMetadataTitle .container-fluid:first-of-type {
    padding-left: 16px;
}

.advance-search-box .adv_filter .advanced-search-tab {
    background: var(--tertiary);
    border: 1px solid var(--light-20);
    border-bottom: none;
    cursor: pointer;
}

.advance-search-box .adv_filter .ui-datepicker-trigger[style] {
    margin-left: -38px !important;
    transition: all 300ms;
}

.advance-search-box .adv_filter img.ClearDate {
    cursor: pointer;
    max-width: 12px;
    margin: 2px 5px 0 4%;
    transition: all 300ms;
}

    .advance-search-box .adv_filter .ui-datepicker-trigger:hover,
    .advance-search-box .adv_filter img.ClearDate:hover {
        filter: invert(100%) grayscale(100%);
    }

/*Search Result*/

#MainContent_tblMetadataTitle .container-fluid:first-of-type {
    padding: 0 16px;
}

/*MyContractsColumnVisibilityConfiguration*/

#columns-config-box {
    border: 1px solid var(--light-30);
}

    #columns-config-box .pretty input[type="checkbox"]:checked,
    #columns-config-box .pretty input[type="checkbox"]:checked:after {
        width: 100%;
        height: 100%;
    }

    #columns-config-box .pretty i {
        display: block;
        font-size: 10px;
        padding-top: 14px !important;
        padding-left: 3px !important;
    }

    #columns-config-box .pretty .state label:before {
        border-color: var(--light) !important;
    }

    #columns-config-box .pretty .state.p-success label {
        color: var(--pink) !important;
        text-indent: 24px;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 500;
    }

    #columns-config-box .pretty input:checked ~ .state.p-success label {
        color: var(--primary-text) !important;
    }

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
    #columns-config-box .col-lg-2 {
        width: 25%;
    }
}

/*Snapshot page Important Date(key field) UI*/

.important-date-table .cp_fieldset {
    background: var(--dark);
}

    .important-date-table .cp_fieldset legend[style] {
        color: var(--primary-text) !important;
        border: 1px solid var(--light);
        padding: 12px 15px 12px 25px;
        border-radius: 0.25rem;
        background: var(--dark-67);
    }

.important-date-table input[type="text"] {
    color: var(--primary-text);
}

.important-date-table tr.reminder-content td {
    padding: 20px 0;
}

.important-date-table .cp_fieldset h3 {
    background: var(--dark);
    border-radius: 0.25rem;
}

    .important-date-table .cp_fieldset h3,
    .important-date-table .cp_fieldset h3 label[style] {
        color: var(--primary-text) !important;
    }

.keyfield-box a.linkbutton {
    min-width: 177px;
}

.bgWhite {
    background-color: var(--light) !important;
}

/*****************************************/

/*role permissions*/

.urole-checkboxes .pretty.p-default input:checked ~ .state label {
    color: var(--pink) !important;
}

/* A BUNCH OF GLOBAL STYLING THAT MIGHT BE NEEDED FOR THE NAV */

.table {
    color: var(--primary-text);
}

h1,
h2,
h3 {
    color: var(--primary-text);
}

h5 {
    color: var(--pink);
}

@keyframes click-animation {
    0% {
        box-shadow: 0 0 0 1px var(--light-05);
    }

    35% {
        box-shadow: 0 0 0 5px var(--light-30);
    }

    50% {
        box-shadow: 0 0 1px 7px var(--light-20);
    }

    75% {
        box-shadow: 0 0 2px 7px var(--light-10);
    }

    100% {
        box-shadow: 0 0 4px 6px transparent;
    }
}

.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus,
.btn-basic:focus {
    animation: click-animation 300ms ease-in-out;
}

.select {
    color: var(--primary-text);
}

.select-styled {
    background-color: transparent;
    border: 1px solid var(--purple-gray);
}

    .select-styled.active:before {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid var(--light);
    }

.select-options {
    background-color: var(--light);
}

    .select-options li {
        color: var(--dark);
    }

        .select-options li:not(:first-child) {
            border-top: 1px solid var(--gray-lighter);
        }

@media (min-width: 768px) {
    .select-options li:hover {
        background-color: var(--dark);
        color: var(--primary-text);
    }
}

/*Adding cpai_lmm css file here, its important to force the layout */

x.main-content .tabs-container.um_tab {
    padding: 20px 0;
}

/*Breadcrumbs redesigned for LMM*/

.lmm_breadcrumb {
    font-size: 14px;
}

    .lmm_breadcrumb ul {
        margin: 0;
        padding: 0;
        display: flex;
    }

        .lmm_breadcrumb ul li {
            list-style: none;
        }

            .lmm_breadcrumb ul li a,
            .lmm_breadcrumb ul li > i {
                color: var(--pink);
            }

                .lmm_breadcrumb ul li.active,
                .lmm_breadcrumb ul li a:hover {
                    color: var(--gold);
                }

        .lmm_breadcrumb ul li {
            padding: 0 var(--spacing-2) var(--spacing-2) 0;
        }

            .lmm_breadcrumb ul li > i {
                font-size: 0.75em;
                margin: 0;
            }

            .lmm_breadcrumb ul li a i {
                margin-right: var(--spacing-1);
            }

/* end breadcrumbs */

.main-content .page-heading .tabs-container {
    padding: 15px 0;
}

.vault-forms {
    background: var(--dark);
    border: 1px solid var(--light-30);
}

/*All tabular data*/

table#masterDataTable.issues tbody tr {
    border-bottom: 1px solid var(--cpai-light-alpha-20);
}

    table#masterDataTable.issues tbody tr td {
        border: none;
        vertical-align: middle;
    }

table#masterDataTable tbody tr {
    background: none !important;
}

    table#masterDataTable tbody tr td {
        transition: all 300ms;
    }

/*Role & Permission page*/

.urole-checkboxes .pretty.p-default.p-thick .state label:after,
.urole-checkboxes .pretty.p-default.p-thick .state label:before {
    top: -2px;
}

.urole-checkboxes .pretty.p-default input:checked ~ .state label {
    color: var(--pink) !important;
}

.user-register-box {
    background: var(--dark);
}

/*Form control*/

input.cpinput:focus {
    background-color: var(--dark-67);
    border-color: var(--yellow);
    color: var(--yellow);
}

/*Vault*/

/*Advance search*/

.advance-search-box .adv_filter .inner-container {
    background: var(--dark-20);
    box-shadow: inset 0 0 0 1px var(--light-20);
}

.advance-search-box .adv_filter .container-fluid {
    padding: 0;
}

/*Snapshot page Important Date(key field) UI*/

.important-date-table .cp_fieldset {
    background: var(--dark);
}

    .important-date-table .cp_fieldset legend[style] {
        color: var(--primary-text) !important;
        border: 1px solid var(--light);
        padding: 12px 15px 12px 25px;
        border-radius: 0.25rem;
        background: var(--dark-67);
    }

.important-date-table input[type="text"] {
    color: var(--primary-text);
}

.important-date-table tr.reminder-content td {
    padding: 20px 0;
}

.important-date-table .cp_fieldset h3 {
    background: var(--dark);
    border-radius: 0.25rem;
}

    .important-date-table .cp_fieldset h3,
    .important-date-table .cp_fieldset h3 label[style] {
        color: var(--primary-text) !important;
    }

.keyfield-box a.linkbutton {
    min-width: 177px;
}

/*Edit Email Template Page*/

.email-template-page #uploader {
    color: var(--primary-text) !important;
    background: none !important;
}

    .email-template-page #uploader .plupload_filelist_header {
        padding: 0 0 var(--spacing-2);
        margin: 0;
        border-top: none;
        border-color: var(--light-30);
        height: auto;
    }

    .email-template-page #uploader .plupload_filelist_footer {
        padding: var(--spacing-2) 0 0;
        margin: 0;
        border-bottom: none;
        border-color: var(--light-30);
        height: auto;
    }

    .email-template-page #uploader .plupload_container {
        padding: 0;
    }

    .email-template-page #uploader .plupload_filelist {
        height: auto !important;
    }

        .email-template-page #uploader .plupload_filelist li:last-child {
            border: none;
        }

    .email-template-page #uploader div,
    .email-template-page #uploader span,
    .email-template-page #uploader ul,
    .email-template-page #uploader li {
        color: var(--primary-text) !important;
        background: none !important;
        border-color: var(--light-30) !important;
    }

.email-template-page .plupload_button {
    border-radius: 25px;
    color: var(--light);
    border: 1px solid var(--light);
    background: none;
}

    .email-template-page .plupload_button.disabled {
        opacity: 0;
    }

.email-template-page li.plupload_delete a,
.email-template-page li.plupload_done a {
    background: none;
    position: relative;
}

    .email-template-page li.plupload_delete a:after {
        content: "\f068";
        font-family: "Font Awesome 5 Pro" !important;
        font-weight: bold;
    }

    .email-template-page li.plupload_done a:after {
        content: "\f00c";
        font-family: "Font Awesome 5 Pro" !important;
        font-weight: bold;
    }

.email-template-page .plupload_button:hover {
    background-color: var(--light) !important;
    color: var(--dark-text) !important;
}

.email-template-page .plupload_disabled,
.email-template-page a.plupload_disabled:hover {
    color: var(--light) !important;
    border: 1px solid var(--light) !important;
    background: transparent !important;
    opacity: 0.5 !important;
}

.email-template-page .el-rte .toolbar {
    padding: var(--spacing-2);
    display: flex;
    align-items: center;
    background-color: transparent !important;
    border: none !important;
}

.email-template-page .el-rte .statusbar {
    background-color: transparent !important;
    border: none !important;
    color: var(--primary-text);
}

.email-template-page .el-rte .toolbar ul li {
    background-color: var(--white) !important; /* always on white   */
    color: var(--purple-darkest) !important;
}

.email-template-page .el-rte .el-select label {
    color: currentColor !important;
}

.email-template-page #customHashTag {
    color: var(--primary-text) !important;
}

.email-template-page .plupload_button {
    border-radius: 25px;
    border: 1px solid var(--light);
    background: none;
}

    .email-template-page .plupload_button:hover {
        background-color: var(--light) !important;
        color: var(--dark) !important;
    }

.email-template-page .el-rte .workzone {
    padding: 16px;
}

/* end email template page*/

.pieCharts > img {
    display: none;
}

/*Dashboard page issue*/

#iFrameCustomerSupplierLoader,
#iFrameContractStatusLoader {
    display: none;
}

/* contract-status-master-page */

.contract-status-master-page .application-type-master {
    background: none;
}

    .contract-status-master-page .application-type-master span,
    .contract-status-master-page .application-type-master label,
    .contract-status-master-page .application-master *,
    .contract-status-master-page .application-master label {
        color: var(--primary-text) !important;
        font-size: 14px;
        font-weight: 500;
    }

.contract-status-master-page .vault-form-submit a,
.contract-status-master-page .vault-form-submit input {
    border-radius: 50px;
    border: 1px solid var(--secondary);
    background: var(--secondary) !important;
    color: var(--primary-text);
    display: inline-block;
    padding: 5px 16px;
}

@media only screen and (min-width: 992px) {
    .contract-status-master-page .vault-form-submit a:hover,
    .contract-status-master-page .vault-form-submit input:hover,
    .contract-status-master-page .vault-form-submit .cp-button:hover {
        background: var(--purple-medium-lighter) !important;
        border-color: var(--purple-medium-lighter);
    }
}

.contract-status-master-page .vault-form-submit a:hover,
.contract-status-master-page .vault-form-submit input:hover {
    background: var(--purple-medium-lighter) !important;
    color: var(--primary-text) !important;
    border-color: var(--purple-medium-lighter);
}

.contract-status-master-page #masterDataTable input {
    color: var(--primary-text);
}

    .contract-status-master-page #masterDataTable input:focus {
        outline: transparent;
        border: 1px solid var(--pink);
        color: var(--primary-text);
    }

.contract-status-master-page .input-edit {
    width: 100%;
}

.contract-status-master-page .input-no-border {
    border: none !important;
}

.application-type-master-page #masterDataTable i {
    font-weight: 600;
}

.application-type-master-page #masterDataTable tbody tr td:last-child div a {
    padding: 0 1em;
}
/*Supplier or no supplier*/

.contract-chart-page *,
.contract-chart-page *:before,
.contract-chart-page *:after {
    box-sizing: border-box;
}

.contract-chart-page .set-size {
    font-size: 11em;
}

.contract-chart-page .charts-container:after {
    clear: both;
    content: "";
    display: table;
}

.contract-chart-page .pie-wrapper {
    height: 1em;
    width: 1em;
    float: left;
    margin: 15px;
    position: relative;
}

    .contract-chart-page .pie-wrapper:nth-child(3n + 1) {
        clear: both;
    }

    .contract-chart-page .pie-wrapper .pie {
        height: 100%;
        width: 100%;
        clip: rect(0, 1em, 1em, 0.5em);
        left: 0;
        position: absolute;
        top: 0;
    }

        .contract-chart-page .pie-wrapper .pie .half-circle {
            height: 100%;
            width: 100%;
            border: none;
            background-image: linear-gradient(0deg, #dd624a, #e6509f);
            border-radius: 50%;
            clip: rect(0, 0.5em, 1em, 0);
            left: 0;
            position: absolute;
            top: 0;
            transition: all 300ms;
            mask: radial-gradient(circle 65px, transparent 98%, var(--light) 99%);
            -webkit-mask: radial-gradient(circle 65px, transparent 98%, var(--light) 99%);
        }

            .contract-chart-page .pie-wrapper .pie .half-circle.left-side {
                background-image: linear-gradient(180deg, #e6509f, #dd624a);
            }

    .contract-chart-page .pie-wrapper.progress-full .pie .half-circle.left-side {
        background-image: linear-gradient(180deg, #dd624a, #e6509f);
    }

    .contract-chart-page .pie-wrapper .label {
        font-family: "Segoe UI", "Poppins", sans-serif;
        font-size: 14px;
        color: var(--primary-text);
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*calculate label box dimension to adjust with gradient background*/
        width: calc(100% - 48px);
        height: calc(100% - 48px);
        border-radius: 50%;
        /*mimic as a trasparent background*/
        z-index: 3;
        /*approx. verical alignment to center*/
        padding-top: 22%;
    }

        .contract-chart-page .pie-wrapper .label .number {
            font-weight: bold;
            font-size: 36px;
            margin-bottom: 15px;
            line-height: 1;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

.contract-chart-page .charts-container .name {
    margin-bottom: 5px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: "Segoe UI", "Poppins", sans-serif;
    color: var(--primary-text-75);
    text-align: center;
    width: 200px;
    position: absolute;
    transform: translate(-50%, 100%);
    left: 50%;
    font-weight: 500;
}

.contract-chart-page .name {
    margin-bottom: 5px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: "Segoe UI", "Poppins", sans-serif;
    color: var(--primary-text);
    text-align: center;
    left: 20px;
    font-weight: 500;
}

.contract-chart-page .pie-wrapper .label .smaller {
    color: var(--gray-light);
    font-size: 0.45em;
    padding-bottom: 20px;
    vertical-align: super;
}

.contract-chart-page .pie-wrapper .shadow {
    height: 100%;
    width: 100%;
    border: 24px solid var(--tertiary-75);
    border-radius: 50%;
}

/*
            if pie chart value is less than 50%, The class will be added
            pie-wrapper.progress-30
        */
.contract-chart-page .pie-wrapper.progress-30 .pie .left-side {
    transform: rotate(108deg);
}

/*
            if pie chart value is more than 50, this class is added
            pie-wrapper.progress-75*
        */
.contract-chart-page .pie-wrapper.progress-75 .pie {
    clip: rect(auto, auto, auto, auto);
}

    .contract-chart-page .pie-wrapper.progress-75 .pie .half-circle {
        transition: all 0.9s;
    }

    .contract-chart-page .pie-wrapper.progress-75 .pie .left-side {
        transform: rotate(270deg);
    }

    .contract-chart-page .pie-wrapper.progress-75 .pie .right-side {
        transform: rotate(180deg);
    }

/* TOP 4 Application Type Chart */
.contract-chart-page body {
    background: none !important;
}

.contract-chart-page #skill {
    list-style: none;
    font-family: "Segoe UI", "Poppins", sans-serif;
    position: relative;
    line-height: 2em;
    padding: 30px 0;
}

.contract-chart-page #ApplicationTypesChartDiv,
.contract-chart-page #ContractStatusChartDiv {
    display: flex;
    justify-content: space-evenly;
}

.contract-chart-page #skill li {
    margin-bottom: 50px;
    background: var(--tertiary-50);
    height: 14px;
    border-radius: 10px;
    box-shadow: 0 0 1px 2px var(--light-20), inset 0 0 1px 1px var(--dark-20);
}

    .contract-chart-page #skill li h3 {
        color: var(--primary-text-75);
        top: -75%;
        transform: translateY(-100%);
    }

.contract-chart-page #skill .tooltip {
    display: none;
    top: -200%;
    left: 50%;
    transform: translate(-50%, -100%);
    transition: all 0.3s ease;
}

.contract-chart-page #skill li h3:hover + .tooltip {
    display: block;
}

.contract-chart-page #skill li:hover h3 {
    color: var(--primary-text);
}

.contract-chart-page .bar {
    height: 12px;
    margin: 1px;
    position: absolute;
    border-radius: 10px;
}

.contract-chart-page .contract-node {
    cursor: pointer;
}

.contract-chart-page .graphic-design {
    width: 0%;
    animation: graphic-design 2s ease-out;
    background-image: linear-gradient(90deg, #e37849, #e6509f);
}

.contract-chart-page .html-css {
    width: 90%;
    animation: html-css 2s ease-out;
    background-image: linear-gradient(top, #f0bb4b, #d9aa44);
}

.contract-chart-page .jquery {
    width: 65%;
    animation: jquery 2s ease-out;
    background-image: linear-gradient(top, #a1ce5b, #91ba52);
}

.contract-chart-page .wordpress {
    width: 80%;
    animation: wordpress 2s ease-out;
    background-image: linear-gradient(top, #66b3cc, #5da3ba);
}

@keyframes graphic-design {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

@keyframes html-css {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    }
}

@keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 65%;
    }
}

@keyframes wordpress {
    0% {
        width: 0px;
    }

    100% {
        width: 80%;
    }
}

/*Keep the pie chart vertically align in the container*/
.contract-chart-page #top1ApplicationTypeChart {
    position: relative;
}

@media only screen and (min-width: 1440px) {
    .set-size {
        font-size: 14em;
    }
}

.bulk-contract-upload-page .divMasterMsg {
    margin-left: 5rem;
}

.bulk-contract-upload-page .form label {
    width: 200px;
    padding-right: 5px;
}

.bulk-contract-upload-page .form select {
    width: 225px;
}

.bulk-contract-template-fields-page .form input {
    width: 220px;
}

.bulk-contract-template-fields-page #btnAddMoreFiled {
    color: var(--primary-text);
}

.bulk-import-reports-page .retry-button-container {
    text-align: right;
    margin-right: 20px;
}

.bulk-import-reports-page .masterTable {
    font-size: 13px;
}

.bulk-import-reports-page
.progress-bar-control
.progress-bar-legend
.legend-item {
    float: left;
}

.progress-bar-control {
    font-weight: bolder;
}

    .progress-bar-control .pb-labels {
        float: left;
        width: 100%;
        font-size: 0;
    }

    .progress-bar-control .progress-bar-legend .legend-item:first-child {
        margin-top: 18px;
        cursor: default !important;
    }

    .progress-bar-control .progress-bar-legend .legend-item:last-child {
        margin-top: 18px;
    }

        .progress-bar-control .progress-bar-legend .legend-item:last-child p {
            margin-top: -4px;
        }

.complaints-page .modal-body .row {
    display: flex !important;
    margin-bottom: 30px;
}

.complaints-page .modal-body label {
    width: 200px;
}

.complaints-page .modal-body input,
.modal-body select,
.modal-body textarea {
    width: 350px;
}

.key-obligation-list-page #editModal label {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin: auto 10px auto 0px;
}

.key-obligation-list-page #error-text {
    color: var(--red);
    font-weight: bold;
}

.key-obligation-list-page #editModal select,
#editModal textarea,
#editModal input[type="text"] {
    width: 100%;
}

.key-obligation-list-page .check-row {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 20px;
}

    .key-obligation-list-page .check-row input {
        margin: auto 10px auto 0px;
    }

        .key-obligation-list-page .check-row input:checked {
            height: unset !important;
            width: unset !important;
            margin-top: auto !important;
        }

.key-obligation-list-page #editModal select,
.filters select {
    height: 33px !important;
    margin-top: 10px;
}

.bulk-import-data-page #actinacttd {
    padding-right: 60%;
}

.bulk-contract-template-page .time_entry_issue_id,
.bulk-contract-template-page .lblApplication,
.bulk-contract-template-page .lblTimeEntryIssue,
.bulk-contract-template-page .bulk-import-status {
    width: 200px;
    padding-right: 5px;
}

.bulk-contract-template-page .application-type-master .form-group input,
.bulk-contract-template-page .application-type-master .form-group select,
.bulk-contract-template-page .application-type-master .form-group textarea {
    width: 220px;
}

.bulk-contract-template-page .lblMessage {
    color: var(--red);
    display: none;
    top: 38px;
    left: 230px;
    position: absolute;
}

.bulk-contract-template-page #txtDescription {
    width: 220px;
    height: 100px;
}

.bulk-contract-template-page .application-type-master {
    background: none;
}

.key-obligation-approvers-page .page-title {
    width: 80%;
}

.key-obligation-approvers-page select#selectApplicationId,
.key-obligation-approvers-page select#selectApplicationTypeId {
    width: 200px;
    margin-bottom: 20px;
}

.key-obligation-approvers-page select {
    width: 400px;
    margin-bottom: 20px;
}

.key-obligation-approvers-page button.copy-btn {
    border: none;
    background: transparent;
    margin-top: 5px;
}

.key-obligation-list-page select#selectApplicationId,
.key-obligation-list-pageselect#selectApplicationTypeId {
    width: 200px;
    margin-bottom: 20px;
}

.key-obligation-list-page select {
    width: 400px;
    margin-bottom: 20px;
}

/***** Media print specific styles *****/

@media print {
    #top-menu,
    #app-header,
    #main-menu,
    #app-sidebar,
    #footer,
    .contextual,
    .other-formats {
        display: none;
    }

    #main {
        background-color: var(--light);
    }

    #content {
        width: 99%;
        margin: 0;
        padding: 0;
        border: none;
        background-color: var(--light);
        overflow: visible !important;
    }

    #wiki_add_attachment {
        display: none;
    }

    .hide-when-print {
        display: none;
    }
}

/* Accessibility specific styles */

.hidden-for-sighted {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.key-fields-control .with_pop_up {
    display: inline-block;
    position: relative;
}

.key-fields-control .pop_up_icon {
    padding: 0 10px;
}

.key-fields-control .pop_up_text {
    position: absolute;
    left: 130px;
    top: 50%;
    width: 220px;
    padding: 5px 15px;
    border-radius: 0.25rem;
    opacity: 0;
    transition: all 0.5s;
    transform: translateY(-50%);
}

    .key-fields-control .pop_up_text:before {
        position: absolute;
        content: "";
        left: -12px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: 50%;
        transform: translateY(-50%);
    }

.collapse-icon.collapsed > .btn-icon > .fa-minus {
    display: none;
}

.collapse-icon:not(.collapsed) > .btn-icon > .fa-plus {
    display: none;
}

.cpai-content-wrapper #userInputsModal .pretty i {
    display: block;
    top: -5px;
    left: 0;
    height: 15px;
    width: 13px;
}

.custom-reports .select-wrapper {
    position: relative;
}

    .custom-reports .select-wrapper .tooltip_outer {
        position: absolute;
        bottom: -28px;
    }

.collaboration-editor-page #header {
    width: 100%;
    height: 4rem;
    z-index: 99;
    background: transparent linear-gradient(100deg, var(--app-bg) 0%, var(--tertiary) 100%) 0% 0% no-repeat !important;
    color: var(--primary-text) !important;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.contract-template-page #app > main > #app-footer {
    display: none;
}

.multi-value-textbox-container {
    background-image: linear-gradient(#var(--app-bg) 1%,var(--app-bg) 15%);
    border: 1px solid var(--light-30);
    border-radius: 4px;
    min-height: 40px;
    height: auto;
    box-sizing: border-box;
    padding:5px;
}

#txtActivityTo, #txtActivityCC {
    border: none;
    padding:0px;
}

.multi-value-textbox-container .values-container .value-element button {
    background: transparent;
    border: none;
    border: none;
    margin-left: 8px;
    color: var(--white-75);
    font-weight: bold;
}

.value-element {
    display: inline-block;
    background-color: var(--secondary-75);
    border: 1px solid var(--secondary-75);
    border-radius: 0.25rem;
    color: var(--white);
    line-height: 1.5;
    margin: 4px 2px 0px 2px;
    padding: 0 0.25em;
}

.value-element-err {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background-color: var(--dark-20) !important;

}

.report-dialog {
    background: var(--primary) !important;
    font-family: "Segoe UI", "Poppins", sans-serif;
    font-size: 1em;
}

.report-dialog > .btn {
    font-family: "Segoe UI", "Poppins", sans-serif;
}

.report-dialog > .ui-dialog-content {
    color: var(--primary-text);
    background: inherit;
    font-size: 1em;
}



.report-dialog > .ui-dialog-content {
    color: var(--primary-text);
    background: inherit;
}

.report-dialog > .ui-dialog-titlebar {
    color: var(--primary-text);
    background: var(--tertiary-75);
}

.partyFields {
    margin-bottom: 15px;
    padding-left: 25px;
    padding-top: 10px;
    border-top: 1px solid var(--cpai-light-alpha-25);
}

.partyborder {
    margin-bottom: 0 !important;
    margin-left: 22px;
}

.search-tbl-header {
    min-width : 120px;
}

/*Date picker style for reports*/
.filter-box .datepicker-column label {
    min-width: 53px;
}

.datepicker-mask-wrap {
    position: relative;
    width: 85%;
}

    .datepicker-mask-wrap > .datepicker {
        opacity: 0;
        width: 100% !important;
        position: relative;
        z-index: 1;
        visibility: hidden;
    }

    .datepicker-mask-wrap .datepicker-mask {
        position: absolute;
        width: 100%;
        max-width: 100%;
        left: 0px;
        top: 0px;
        z-index: 0;
        height: 100%;
    }

        .datepicker-mask-wrap .datepicker-mask .datepicker-mask-input {
            width: 100%;
            background-color: transparent;
            border: 1px solid var(--light-30);
            border-radius: 0.25rem;
            color: var(--primary-text);
            height: calc(1.42857em + 0.75rem + 2px);
            line-height: 1.42857143;
            padding: 0.375rem 0.75rem;
        }

    .datepicker-mask-wrap .ui-datepicker-trigger {
        display: none;
    }

.ui-datepicker-trigger-custom {
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    z-index: 10;
}

#MainContent_tblMetadataTitle .reportTable td .highlights .highlightsDisplayName {
    cursor: pointer;
}

#MainContent_tblMetadataTitle .reportTable td .highlights .js-highlighticon {
    cursor: pointer;
}

#MainContent_tblMetadataTitle .reportTable td .highlights:hover .js-highlighticon,
#MainContent_tblMetadataTitle .reportTable td .highlights:hover .highlightsDisplayName {
    text-decoration: underline;
}

span .help-text-icon > svg:not(:hover) + .tooltip {
    z-index: -1;
}

#designerModal .vs__dropdown-toggle,
#designerModal .form-group.field-input {
    border: 1px solid var(--cpai-secondary-text-alpha-30);
}

/*cloud 41897 */
body[theme="dark"].calendar-task-page .view-icon:hover,
body[theme="light"].calendar-task-page .view-icon:hover {
    color: var(--sunset-secondary);
}


a.btn.btn-xs.btn-outline.name-visibility {
    border: 1px solid var(--light);
    color: var(--primary-text);
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}
a.btn.btn-xs.btn-outline.name-visibility:hover{
    background-color:  var(--light);
    color: var(--dark);
}

.table-responsive tbody:not(.hoverable-none)>tr:not(.details-row):hover>td {
    background-color: var(--cpai-primary-alpha-30)!important;
    color: var(--white);
}

.vs--disabled .vs__search {
    background: transparent !important;

}