/* ================= Global Variables ================= */
:root {
    --main-color: #691551;
    --second-color: #af3d8f;
    --third-color: #a5488a;
    --widget-bg: #EFF1FD;
    --page-max-width: 100%;
    --primary: var(--main-color);
    --dt-primary-color: var(--main-color);
    --blue-avatar-bg: var(--main-color);
    --blue-avatar-color: var(--main-color);
    --blue: var(--main-color);
    --page-max-width: 90%;
}

/* ================= Layout & Backgrounds ================= */
.container {
max-width: var(--page-max-width) !important;
} 
.page-container,
.layout-main-section {
    background-color: var(--widget-bg);
}

body {
    font-size: 14px;
    /*background-color: #f3f6f9;*/
    background-color:  #EFF1FD
}

/* ================= Typography ================= */
a {
    color: #666;
    font-weight: 500;
}

.small,
small {
    font-size: 95%;
}

.h6.uppercase,
h6.uppercase {
    font-weight: 600;
    font-size: 11.5px;
}

.control-label,
.grid-heading-row {
    font-size: 13px;
}

/* ================= Navigation Bar ================= */
.navbar {
    background: linear-gradient(to right, var(--main-color), var(--second-color)) !important;
    border: none !important;
}

.navbar-nav > li > a {
    color: #fff !important;
}

.navbar-nav > li > a:hover,
.navbar-brand:hover {
    color: #ddd !important;
}

/* ================= Sidebar ================= */
.standard-sidebar-item.selected {
    background: linear-gradient(to right, var(--main-color), var(--second-color));
}

.standard-sidebar-item.selected a {
    color: #fff;
}

.standard-sidebar-item.selected a svg {
    fill: #fff;
}

.standard-sidebar-item:hover {
    background-color: var(--second-color);
}

.standard-sidebar-item:hover a,
.standard-sidebar-item:hover svg {
    color: #000;
    fill: #a5488a;
}

.desk-sidebar .desk-sidebar-item {
    font-size: 13px;
    font-weight: 600;
    color: var(--widget-bg);
}

.layout-side-section {
    display: none;
    font-size: 14px;
}

/* ================= Buttons ================= */
.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--third-color) !important;
    color: #fff !important;
}

.btn-default:hover svg {
    stroke: #fff !important;
    fill: #fff !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary.active,
.open > .dropdown-toggle.btn-secondary {
    background-color: var(--third-color);
    color: #fff;
}

.btn-secondary:hover {
    background-color: var(--main-color);
    color: #fff;
}

/* ================= Widgets ================= */
.widget {
    background-color: var(--widget-bg);
    border: none;
    box-shadow: 0px 3px 12px 0px var(--widget-bg), 0 3px 3px -2px #461a7714;
}

.widget.shortcut-widget-box .widget-head .widget-title i {
    color: var(--third-color);
}

.widget.shortcut-widget-box .widget-head .widget-title:hover span {
    color: var(--main-color);
}

.widget-body .link-item:hover {
    color: #fff;
    background: var(--third-color);
}

.widget .widget-head .widget-title,
.section-head,
.comment-input-header {
    font-size: 14px;
    color: var(--third-color);
}

/* ================= Lists and Rows ================= */
.list-row-head {
    background-color: #b13138;
    border-bottom: 1px solid #e4e4e4 !important;
}

.grid-heading-row {
    color: aliceblue;
    background-color: #b13138;
}

/* ================= Dropdowns ================= */
.dropdown-menu > li > a {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.awesomplete > ul > li[aria-selected=true] {
    background-color: transparent;
}

.awesomplete > ul > li:hover {
    background: linear-gradient(to right, var(--main-color), var(--second-color));
}

.awesomplete > ul > li:hover a {
    color: #fff;
}

/* ================= Page Headers ================= */
.page-head {
    border-bottom: none !important;
    box-shadow: 0 1px 10px 1px rgba(115, 108, 203, 0.1);
}

.page-title .title-text {
    color: var(--third-color);
    font-size: 22px;
}

#page-Workspaces .page-head {
    background: var(--widget-bg);
}

/* ================= Indicators ================= */
.indicator-right.blue:after,
.indicator.blue:before {
    background: var(--third-color);
}

.indicator-pill.gray,
.indicator-pill-right.gray,
.indicator-pill-round.gray {
    background: var(--third-color);
    color: #fff;
}

.indicator-pill.green,
.indicator-pill-right.green,
.indicator-pill-round.green {
    color: var(--main-color);
}

/* ================= Checkboxes and Inputs ================= */
input[type=checkbox]:checked:before {
    color: var(--third-color);
}

input[type=checkbox]:checked {
    background: var(--main-color);
}

.frappe-control .ql-editor:not(.read-mode) {
    background: var(--widget-bg);
}

.input-with-feedback,
.like-disabled-input {
    background-color: #e8eafcad;
}

/* ================= Document Links ================= */
.document-link-badge span {
    background-color: var(--main-color) !important;
    color: #fff;
}

.document-link-badge {
    background-color: var(--widget-bg) !important;
}

.document-link button {
    background: var(--third-color) !important;
    color: #fff !important;
}

.document-link button svg {
    fill: white;
    stroke: white;
}

/* ================= Navbar Logo ================= 
.app-logo {
    width: 100px !important;
    height: auto;
}

.navbar-home img {
    max-height: 100px;
    width: auto;
}  */

/* ================= Misc ================= */
.level-left {
    justify-content: flex-start;
    color: white;
}

.onboarding-widget-box {
    display: none !important;
}

.uppercase {
    color: var(--third-color);
}

ul li a:hover {
    background-color: var(--second-color);
    color: #fff;
}