@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700&display=swap");

/*!
 * Bootstrap v5.0.0-alpha1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
    --bs-blue: #0948B3;
    --bs-indigo: #31316A;
    --bs-purple: #8965e0;
    --bs-pink: #C96480;
    --bs-red: #FA5252;
    --bs-orange: #FF9F89;
    --bs-yellow: #f5b759;
    --bs-green: #05A677;
    --bs-teal: #1E90FF;
    --bs-cyan: #63b1bd;
    --bs-white: #ffffff;
    --bs-gray: #93a5be;
    --bs-gray-dark: #506690;
    --bs-primary: #262B40;
    --bs-secondary: #424AA0;
    --bs-tertiary: #1B998B;
    --bs-quaternary: #0948B3;
    --bs-primary-app: #EBF4F6;
    --bs-secondary-app: #424AA0;
    --bs-light: #eaedf2;
    --bs-lighten: #F0F3F6;
    --bs-success: #05A677;
    --bs-info: #0948B3;
    --bs-warning: #f5b759;
    --bs-danger: #FA5252;
    --bs-white: #ffffff;
    --bs-gray: #4A5073;
    --bs-neutral: #ffffff;
    --bs-dark: #262B40;
    --bs-soft: #f5f8fb;
    --bs-black: #2e3650;
    --bs-blue: #0948B3;
    --bs-pink: #C96480;
    --bs-cyan: #63b1bd;
    --bs-purple: #8965e0;
    --bs-soft-indigo: #f5e8ff;
    --bs-soft-green: #2CA58D;
    --bs-gray-100: #f3f7fa;
    --bs-gray-200: #f5f8fb;
    --bs-gray-300: #F0F3F6;
    --bs-gray-400: #eaedf2;
    --bs-gray-500: #d1d7e0;
    --bs-gray-600: #93a5be;
    --bs-gray-700: #66799e;
    --bs-gray-800: #506690;
    --bs-facebook: #3b5999;
    --bs-twitter: #1da1f2;
    --bs-google: #DB4337;
    --bs-instagram: #e4405f;
    --bs-pinterest: #bd081c;
    --bs-youtube: #cd201f;
    --bs-slack: #3aaf85;
    --bs-dribbble: #ea4c89;
    --bs-dropbox: #1E90FF;
    --bs-twitch: #4B367C;
    --bs-paypal: #ecb32c;
    --bs-behance: #0057ff;
    --bs-reddit: #E84422;
    --bs-github: #222222;
    --bs-font-sans-serif: "Nunito Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/* button background color according to Mustapha  */
.btn-primary,
.btn-secondary {
    background-color: #0078D2 !important;
}

/*  making active color for currently expanded folder in file storage*/
.active-expanded-folder {
    background: lightgray !important;
    /* color: white !important; */
    width: 70%;
    padding: 5px 10px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}
.active>.page-link {
  background-color: lightgray !important;
  border-color: lightgray !important;
}

body {
    width: 100% !important;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4A5073;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(46, 54, 80, 0);
}


.container-fluid,
.bd-soft {
    width: 100% !important;
    padding: 0px 20px 0px 0px !important;
}

.content-body {
    width: 100% !important;
    height: 100%;
}

.cardCon .col-6 {
    width: 50% !important;
}


/* DISPLAY FLEX CSS */

.d-flex {
    display: flex;
}

.flex-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.flex-fill {
    flex: 1 1 auto !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
    width: 220px !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* JUSTIFY-CONTENT CSS */

.justify-content-start {
    justify-content: flex-start !important;
    gap: 15px;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}


/* ALIGN ITEM CLASS CSS */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

.d-md-block {
    display: block !important
}

.user-card {
    border-bottom: 0.0625rem solid #2e3650
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 0.0625rem solid rgba(46, 54, 80, 0.125);
    border-radius: 0.5rem;
}

.card-body-1 {
    flex: 1 1 auto;
    border-radius: 20px;
}


.dash-card {
    height: 100%;
}

.card>hr {
    margin-right: 0;
    margin-left: 0;
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card>.list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: 0.4375rem;
    border-top-right-radius: 0.4375rem;
}

.card>.list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: 0.4375rem;
    border-bottom-left-radius: 0.4375rem;
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
    border-top: 0;
}

.card-header {
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
    background-color: rgba(46, 54, 80, 0.03);
    border-bottom: 0.0625rem solid rgba(46, 54, 80, 0.125);
}

.card-header:first-child {
    border-radius: 0.4375rem 0.4375rem 0 0;
}

.card-footer {
    padding: 1.25rem 1.5rem;
    background-color: rgba(46, 54, 80, 0.03);
    border-top: 0.0625rem solid rgba(46, 54, 80, 0.125);
}

.card-footer:last-child {
    border-radius: 0 0 0.4375rem 0.4375rem;
}

/* ----------------------------- */

iframe {
    border: 0;
}

figcaption,
figure,
main {
    display: block;
    margin: 0;
}

main {
    overflow: hidden;
}

img {
    max-width: 100%;
}

strong {
    font-weight: 600;
}

button:focus {
    outline: 0;
}

label {
    font-weight: 600;
    margin-bottom: .5rem;
}

.section-image {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.bg-yellow-alt {
    /* background-color: #fce1c3; */
    background-color: #eef1e5;
}

.form-bg-image {
    background-repeat: no-repeat !important;
    background-position: top center !important;
}



.image-small {
    height: 1rem;
}

.rounded-circle {
    border-radius: 50% !important;
}

img {
    max-width: 100%;
}

.ct-square:after {
    content: "";
    display: table;
    clear: both;
}

.ct-minor-second:after {
    content: "";
    display: table;
    clear: both;
}

.ct-major-second:after {
    content: "";
    display: table;
    clear: both;
}

.ct-minor-third:after {
    content: "";
    display: table;
    clear: both;
}

.ct-major-third:after {
    content: "";
    display: table;
    clear: both;
}

.ct-perfect-fourth:after {
    content: "";
    display: table;
    clear: both;
}

.ct-perfect-fifth:after {
    content: "";
    display: table;
    clear: both;
}

.ct-minor-sixth:after {
    content: "";
    display: table;
    clear: both;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #eaedf2;
}

.dropdown-container {
    margin: 5px;
}

.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
    border-color: #ffffff;
}

/* Breadcrumb text */

.breadcrumb .breadcrumb-item a {
    /* color: black !important; */
    color: var(--bs-breadcrumb-item-active-color) !important;
    text-decoration: none;
}


/* media query for frofile   */
@media (max-width: 1235px) {
    .profile {
        width: 100% !important;
    }
}


/* popup modal css */
.jconfirm .jconfirm-box {
    padding: 0px !important;
}

.popup-modal-header {
    background-color: #1976d2 !important;
}

/* Delete popup */

.jconfirm .jconfirm-box.jconfirm-type-red {
    border-top: none !important;
}


/* AllAuth Google */

/* Define custom styles for the modified elements */
.custom-google-btn {
    background-color: #0078D2;
    /* Change to your desired background color */
    color: #fff;
    /* Change to your desired text color */
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.custom-google-icon-wrapper {
    margin-right: 10px;
    /* Adjust spacing as needed */
}

.custom-google-icon {
    width: 20px;
    /* Adjust the size as needed */
    height: 20px;
    /* Adjust the size as needed */
    vertical-align: middle;
}

.custom-btn-text {
    font-size: 15px;
    /* Change to your desired font size */
}

.fa-clock-rotate-left {
    padding-left: 10px;
}

.uneditable-field {
    background-color: #c2c2c2 !important;
    /* Add a light gray background */
    border: none;
    /* Remove border */
    pointer-events: none;
    /* Prevent interaction with the field */
}


.favorite-button {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
}

.favorite-button:before {
    content: "\2605";
    /* Unicode character for a star */
    font-size: 36px;
    color: gray;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color 0.3s, transform 0.3s;
}

.favorite-button:hover:before {
    color: #0078d2;
    /* Change star color on hover */
    transform: translate(-50%, -50%) scale(1.2);
    /* Scale the star slightly on hover */
}

.favorite-button.active:before {
    color: #0078d2;
    /* Star color when active */
    transform: translate(-50%, -50%) scale(1.2);
    /* Scale the star slightly when active */
}

.year-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 300px;
    /* Add padding on the left side */
}

label[for="id_calender_field"] {
    display: none;
}

.jcalendar-prev,
.jcalendar-next,
.jcalendar-header {
    color: white;
}

.show {
    display: inline-block !important;
}

.custom-dropdown-menu {
    position: absolute;
    right: 50px;
    background: white;
}

.hide {
    display: none !important;
}


/* Style for non-editable cells */
.non-editable {
    background-color: #eeeeee !important;
    /* Change the background color to your desired color */
    color: black;
    /* Change the text color if needed */
    font-weight: bold;
    width: 2% !important;
    /* Add other styling as desired */
}


/*popup confirmation style for procure change request in upsert form  */
.jc-bs3-row {
    width: 70% !important;
    margin: auto !important;
}

.jconfirm-buttons {
    margin-right: 15px !important;
}

.generate-forecast-btn {
    color: white;
    height: 42px;
    margin-top: 30px;
    background-color: var(--bs-btn-hover-bg);
}

.eye_icon {
    position:absolute;
    right: 10px;
    bottom: 8px;
}

.program-area-image {
    position: relative;
    display: inline-block;
}

.program-tooltip{
    visibility: hidden;
    width: auto;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.program-area-image:hover .program-tooltip {
    visibility: visible;
}