* {
    font-family: 'Manrope';
}

html,
body {
    position: relative;
    height: auto;
    min-height: 100% !important;
    font-family: 'Manrope';
	overflow:auto;
}

.container {
    display: block;
    height: calc(100vh - 132px);
    max-width: 1920px !important;
    min-width: 1920px !important;
    background-color: transparent;
}

.justifyContentCenter {
    justify-content: center;
    display: flex !important;
}

.welcomeTitle {
    margin-top: 40px;
    font-size: 40px;
    text-align: center;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.welcomeSubTitle{
    text-align: left;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.LoginGraphic{
    height: 517px;
    background: transparent 0% 0% no-repeat padding-box;
    opacity: 1;
}

.Logout{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    color: #060081;
    border: 1px solid #B5E0DD;
    border-radius: 4px;
    opacity: 1;
}

.LogoutText{
    color: #060081;
    opacity: 1;
}

.yosemite-window {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #B3B3B3;
    border-radius: 6px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    width: 455px;
    height: 432px;
  }
  
  .yosemite-titlebar {
    background-color: #ffffff;
    border-bottom: 1px solid #B3B3B3;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
  }
  
  .yosemite-title-text {
    text-align: center;
    font: normal normal normal 28px/38px Manrope;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
  }
  
  .yosemite-text {
    text-align: center;
    font: normal normal normal 16px/22px Manrope;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
  }

  .yosemite-buttons {
    display: flex;
    align-items: center;
  }
  
  .yosemite-button {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    margin-left: 5px;
    margin-right: 5px;
    width: 10px;
  }

  .InitialPageGraphicBloom{
    width: 327px;
    height: 183px;
  }
  
  
  .yosemite-close {
    background-color: #D94758;
  }
  
  .yosemite-minimize {
    background-color: #FFB229;
  }
  
  .yosemite-fullscreen {
    background-color: #2EA744;
  }
  
  .yosemite-content {
    height: calc(100% - 30px);
    text-align: center;
    padding: 10px;
    overflow: auto;
  }

  .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #060081 !important;
    color: #fff;
    border-color: #060081 !important;
}

.StrategyTextBox{
    width: 349px;
    height: 196px;
    text-align: left;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #7ACAC4;
    border-radius: 10px;
    opacity: 1;
}
.StrategyText{
    height: 180px;
    width: 345px;
    padding: 20px;
    overflow-y: auto; /* Add vertical scrollbar */
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #7ACAC4 transparent;
}
  
  .StrategyText::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px; /* Adjust the width as needed */
  }
  
  .StrategyText::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
  .StrategyText::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    display: none;
  }

.dropzone {
    width: 404px;
    height: 264px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px dashed #66B5BE;
    border-radius: 10px;
    opacity: 1;
  }
  
  .dropzone.dragover {
    border-color: #00c8ff;
  }

  .dropzone-import {
    width: 404px;
    height: 264px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px dashed #F58025;
    border-radius: 10px;
    opacity: 1;
  }
  
  .dropzone-import.dragover {
    border-color: #ffbb88; /* Adjusted brightness */
  }
  

.templateRectangle {
    height: 290px;
    background-color: wheat;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.templateHeader {
    font-size: 18px;
    font-weight: 600;
}

.templateDetails {
    font-size: 13px;
    margin-top: 4px;
}

.actionTextIndex {
    font-size: 20px;
    font-weight: 400;
}

.actionTextCol {
    margin-top: 24px;
}

.hrIndex {
    margin-top: 40px;
}

.inputColIndex {
    margin-top: 40px;
}

.newLDTitle {
    margin-top: 40px;
    font-size: 22px;
}

.newLDLabel {
    font-size: 15px;
}

.addBtn {
    height: 32px;
    width: 32px;
}

/*.navBar {
    background-color: rgba(242, 242, 242, 1);
}*/

.navBarTitle {
    font-size: 24px !important;
    font-weight: 600;
}

.noPaddingRight {
    padding-right: 0 ! important;
}

.noPaddingLeftRight {
    padding-right: 0 ! important;
    padding-left: 0 ! important;
}

.noMarginLeftRight {
    margin-right: 0 ! important;
    margin-left: 0 ! important;
}

.toolbarRow {
    margin-top: 10px;
}

.toolbarLabel {
    font-size: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgb(204, 204, 204);
}

.toolbarCol {
    height: 100%;
    border-right: 1px solid rgb(204, 204, 204);
}

.fullHeight {
    height: 100%;
}

.fullWidth {
    width: 100%;
}

.halfWidth {
    width: 50%;
}

.tab-base {
    width: 100%;
    height: calc(100vh - 174px);
}

.conceptual-container,
.flowModel-container {
    width: 100%;
    height: 100%;
}

#conceptual-grid,
.flowModelGrid {
    position: relative;
    width: 1900px;
    height: 7500px;
    overflow: hidden;
}

.subToolbarLabel {
    font-size: 16px;
    background-color: rgb(232, 232, 232);
}

.toolbarIcon {
    width: 50px;
    height: 50px;
}

.toolbarIconPhaseFlow {
    width: 100px;
    height: 40px;
}

.toolbarIconPhaseLink {
    width: 60px;
    height: 40px;
}

.toolbarIconRule {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.toolbarIconDecisionFlow {
    max-width: 160px;
    max-height: 160px;
}

.baseCard {
    background-color: yellow;
    border-radius: 8px;
}

.trash {
    background-color: #cc6857;
    height: 60px;
}

.grid-stack-item {
    border: 0;
}

.grid-stack-item-removing {
    opacity: 0.8;
    filter: blur(5px);
}

.imgAnimation {
    animation-name: example;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.activity-label {
    position: absolute;
    top: 45px;
    font-size: 10px;
    justify-content: center;
    background: #343a40;
    border-radius: 4px;
    color: white;
    font-family: 'Manrope', Tahoma, Geneva, Verdana, sans-serif;
    padding: 2;
    text-align: center;
}

.actor-label {
    position: absolute;
    top: 48px;
    color: black;
    background: #343a40;
    border-radius: 4px;
    color: white;
    font-family: 'Manrope', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1;
    text-align: center;
}

.ActorIcon {
    width: 50px;
    height: 50px;
}

.phaseflowIcon {
    width: 100%;
    height: 50px;
}

.flowPhase-label {
    float: left;
    font-size: 10px;
    size: 10;
}

.phaseLinkHr {
    border-top: 4px solid green;
    border-radius: 4px;
    cursor: pointer !important;
}

.phaseLinkHr:hover {
    border-top: 6px solid yellow;
    border-radius: 4px;
}

.flowPhaseRow {
    width: 100%;
}

.backgroundAi {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0022B8; /* Lighter shade of blue */
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
  }
  
  .circleBgAi {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Make the element circular */
    background: radial-gradient(ellipse at center, #0022B8, #0022B8 20%, #003BFF 50%, #005AFF 80%, #FFFFFF); /* Lighter gradient colors */
    opacity: 0.4; /* Increased opacity for lighter appearance */
    overflow: hidden;
  }
  
  .circleBgAi:nth-child(2) {
    transform: rotate(45deg);
    opacity: 0.3; /* Increased opacity for lighter appearance */
    top: 20%;
    left: 20%;
    overflow: hidden;
  }
  
  .circleBgAi:nth-child(3) {
    transform: rotate(-45deg);
    opacity: 0.3; /* Increased opacity for lighter appearance */
    bottom: 10%;
    right: 10%;
    overflow: hidden;
  }
  

.bubble-container{
    position: fixed;
    top: 35%;
    padding:10px;
    max-width: 25%;
    max-height: 50%;
    background-color: white;
    border-radius: 20px;
    right: 20px; /* Adjust the distance from the right side as needed */
    z-index: 1000; /* Ensure it's above other elements */
    overflow-y: auto; /* Add vertical scrollbar */
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #7ACAC4 transparent;
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

.container::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px; /* Adjust the width as needed */
  }
  
.container::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
.container::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    display: none;
  }

.AiUnHideButton{
    display: none;
    top: 50%;
    position: fixed;
    background-color: white;
    right: 20px; /* Adjust the distance from the right side as needed */
    z-index: 1000; /* Ensure it's above other elements */
    border-radius: 50%; /* Make it a circle */
}

.overlay-bubble {
    display: none; /* Initially hide the bubble */
}

.GenerateRemembering,
.GenerateUnderstanding,
.GenerateApplying,
.GenerateAnalyzing,
.GenerateEvaluating,
.GenerateCreating,
.LearningGoalsReady {
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
}

.GenerateRemembering { border: 1px solid #1376DC; animation-delay: 0.3s; }
.GenerateUnderstanding { border: 1px solid #29B3F2; animation-delay: 0.6s; }
.GenerateApplying { border: 1px solid #37A872; animation-delay: 0.9s; }
.GenerateAnalyzing { border: 1px solid #FCD264; animation-delay: 1.2s; }
.GenerateEvaluating { border: 1px solid #FBA84C; animation-delay: 1.5s; }
.GenerateCreating { border: 1px solid #D83B44; animation-delay: 1.8s; }

.ActorsToAdd{
    display: none;
}

.Make-Collaboratice-button{
    display:none;
}

.AiButton {
    margin-top: 5px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
    border: 1px solid #7ACAC4; 
  }

#IncludeGagneYesButton,
#IncludeGagneNoButton,
#MakeCollaborativeYesButton,
#MakeCollaborativeNoButton,
#GenerateGoalsYesButton,
#GenerateGoalsNoButton,
#PrepareDescriptionYesButton,
#PrepareDescriptionNoButton,
#ActivityCreationYesButton,
#ActivityCreationNoButton,
#AddAssessmentYesButton,
#Groups-Done,
#AddAssessmentNoButton,
#SeparateTopicsYesButton,
#SeparateTopicsNoButton,
#AddDepthYesButton,
#AddDepthNoButton,
#MoveToFacilitatorYesButton,
#GainAttentionYesButton,
#GainAttentionNoButton,
#RecallButton,
#InformButton,
#RecallInformButton,
#RecallInformCancelButton,
#RecallInformYesButton,
#RecallInformNoButton,
#RecallInformYes2Button,
#RecallInformNo2Button,
#CreateAssessmentYesButton,
#CreateAssessmentNoButton,
#AssessmentCancelButton,
#AddResourcesYesButton,
#AddResourcesNoButton,
#AddResourceDescriptionsYesButton,
#AddResourceDescriptionsNoButton,
#NextTopicButton,
#ToCourse{
    display:none;
}

.BloomType-dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.AiInput{
    border-radius: 5px;
    border: 1px solid #7ACAC4; 
    display:none;
    margin-top:10px;
    width: 100%;
    height: 2em;
}

.TopicsToAssess{
    display:none;
}

.ai-message-container {
    overflow: hidden; /* Clip the content to the rounded corners */
    border-radius: 25px;
    padding-bottom: 20px; 
    background: radial-gradient(circle, #ffffff 0%, #addeff 100%);
    height: 100%; /* Set maximum height to 100% of the viewport height */
}

.ai-message-container > * {
    margin: 0 auto; /* Center horizontally */
    display: block; /* Ensure block-level elements behave correctly */
}

#AiChat {
    margin-top: 10px;
    width: 95%;
    height: 90%; /* Set maximum height to 100% of the viewport height */
    overflow-y: auto; /* Enable vertical scrollbar if content exceeds the height */
    display: flex;
    flex-direction: column; /* Stack messages vertically */
}

@keyframes bubbleAppear {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.bubble-animation {
    animation: bubbleAppear 1s ease-in-out;
}

@media (max-width: 1700px) {
    .bubble-container{
        position: fixed;
        top: 35%;
        max-width: 20%;
        background-color: white;
        border-radius: 20px;
        right: 20px; /* Adjust the distance from the right side as needed */
        z-index: 1000; /* Ensure it's above other elements */
        overflow-y: auto; /* Add vertical scrollbar */
        scrollbar-width: thin; /* Set the width of the scrollbar */
        scrollbar-color: #7ACAC4 transparent;
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }
}

@media (max-width: 1500px) {
    /* Adjust the styling for smaller screens */
    .bubble-container{
        position: fixed;
        top: 15%;
        max-width: 15%;
        background-color: white;
        border-radius: 20px;
        right: 20px; /* Adjust the distance from the right side as needed */
        z-index: 1000; /* Ensure it's above other elements */
        overflow-y: auto; /* Add vertical scrollbar */
        scrollbar-width: thin; /* Set the width of the scrollbar */
        scrollbar-color: #7ACAC4 transparent;
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }
}
@media (max-width: 1350px) {
    /* Adjust the styling for smaller screens */
    .bubble-container{
        position: fixed;
        top: 5%;
        max-width: 10%;
        background-color: white;
        border-radius: 20px;
        right: 20px; /* Adjust the distance from the right side as needed */
        z-index: 1000; /* Ensure it's above other elements */
        overflow-y: auto; /* Add vertical scrollbar */
        scrollbar-width: thin; /* Set the width of the scrollbar */
        scrollbar-color: #7ACAC4 transparent;
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }
}


.loading-dot-1,
.loading-dot-2,
.loading-dot-3 {
  opacity: 0;
  display: inline-block;
  animation: fadeInOut 1s ease-in-out infinite;
}

.loading-dot-2 {
  animation-delay: 0.3s;
}

.loading-dot-3 {
  animation-delay: 0.6s;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}


@keyframes example {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1.5., 1.5);
    }
    50% {
        transform: scale(1.9, 1.9);
    }
    50% {
        transform: scale(1.5, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}

.user-message {
    font-weight: 400;
    background-color: #5297b2;
    max-width: 60%;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    color: white;
    align-self: flex-end;
    float: right;
}


.ai-message{
    font-weight: 400;
    padding:5px;
    border-radius: 10px;
    margin-top:10px;
    width:100%;
    background: linear-gradient(to bottom, #80c7c3 0%, #01157d 100%);
}

.ai-message-content{
    background-color: #ffffff;
    border-radius: 10px;
    padding:20px;
}

.ai-row{
    display: flex;
    align-items: center; /* Vertically center the child */
    /* You can add other styles to the parent element as needed */
}

.ai-profile-picture{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, #619cb2 0%, #051b7f 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-chatbox{
    margin-top: 5px;
    width: 95%;
    background-color: white;
    display: flex; 
    border-radius: 4px;
    border: 2px solid #060081;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.enterButton{
    height: 20px;
    width: 20px;
    margin-top: 8px;
    border: none; /* Adjust the color and thickness as needed */
    background-color: transparent;
    cursor: pointer;
}

.Chatbox{
    margin-top: 5px; 
    margin-bottom: 5px; 
    border: none;
    border-radius: 4px;
    width:100%;
    min-width:200px;
    resize: none;    
}

.Chatbox::-webkit-scrollbar {
    display: none;
}

.modalEditInfo {
    max-width: 1366px !important;
}

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

path {
    cursor: pointer;
    stroke: black;
}

.selected {
    stroke: red;
    stroke-width: 2px;
}

.deleteImg {
    object-fit: cover;
    width: 100%;
    height: 60px;
}

.tab-content>.tab-pane,
.pill-content>.pill-pane {
    visibility: hidden !important;
}

.tab-content>.active,
.pill-content>.active {
    visibility: visible !important;
}

.conceptualItem {
    width: 50px;
    height: auto;
}

.widthHeight100 {
    width: 100%;
    height: 100%;
}

.strategyLabel {
    width: 300px;
    background-color: yellow;
    border-radius: 4px;
    left: 350px;
    position: relative;
    justify-content: center;
    display: flex;
}

.baseCardText {
    color: black;
    line-height: 50px;
    padding: 10px;
}

span:empty {
    display: none;
    /* or visibility: hidden */
}

.flowCompositeActivity {
    border: 1px solid black;
    border-top: 15px solid black;
    background-color: transparent;
    border-radius: 10px;
}

.compositeSubItem {
    background-color: transparent;
}

.flowSubItem {
    width: 200px;
    z-index: 2;
}

.flowActorItem {
    width: 100px
}

.flowCommentToolbarIcon {
    height: 60px;
}

.flowComment {
    height: 100;
    width: 100;
    background-color: yellow;
    padding-top: 10px;
}

.flowComment:hover {
    cursor: pointer;
}

.flowComment>textarea {
    width: 85%;
    height: 85%;
    background-color: yellow;
    border-color: black;
    font-size: 11px;
    margin-top: 1px;
    resize: none;
}

.conceptualComment {
    height: 100;
    width: 100;
    background-color: yellow;
    padding-top: 10px;
}

.conceptualComment:hover {
    cursor: pointer;
}

.flowCompositeActivity:hover,
.flowSubItem:hover,
.conceptualItem:hover {
    cursor: pointer;
}

.conceptualComment>textarea {
    width: 85%;
    height: 85%;
    background-color: yellow;
    border-color: black;
    font-size: 11px;
    margin-top: 1px;
    resize: none;
}

.project-tab {
    padding: 10%;
    margin-top: -8%;
}

.project-tab #tabs {
    background: #007b5e;
    color: #eee;
}

.project-tab #tabs h6.section-title {
    color: #eee;
}

.project-tab #tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 3px solid !important;
    color: #060081 !important;
    font-size: 16px;
    font-weight: bold;
}


.nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #060081 !important;
    font-size: 14px;
    font-weight: 600;
}

.project-tab .nav-link:hover {
    border: none;
    border-bottom: 3px solid !important;
    border-color: transparent transparent #f3f3f3;
    color: #171194 !important;
}

.goalsText{
    color: black !important;
    font-weight: normal;
}

.project-tab thead {
    background: #f3f3f3;
    color: #333;
}

.project-tab a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.flowPattern {
    width: 60px;
    margin-top: -15px;
    position: absolute;
    background: white;
    border: 1px solid black;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: rgb(26, 26, 26);
    padding: 2px;
}

.hightlightedWidget {
    border: 4px solid yellow;
    border-radius: 6px;
    margin-top: 4px;
}

.hightlightedBorder {
    border: 4px solid orange;
    border-radius: 6px;
}

.hightlightedPhase>hr {
    border-top: 8px solid yellow;
    border-radius: 4px;
}

.activity-label-area {
    resize: vertical;
    width: 65px !important;
    height: 100px;
}

.userChoiceIcon {
    width: 100px;
    height: 100px;
}

.timerIcon {
    width: 100px;
    height: 100px;
}

.noRepeatIcon {
    width: 100px;
    height: 100px;
}

.highlightedImg {
    background-color: yellow;
}

.decisionIcon {
    width: 100%;
    height: 100%;
}

.modalLoading {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0;
    left: 0;
    z-index: 10040;
    overflow: auto;
    overflow-y: auto;
    background-color: whitesmoke;
    visibility: hidden;
}

button.multiselect {
    background-color: initial;
    border: 1px solid #ced4da;
}

.infoToast {
    max-width: 350px;
    overflow: hidden;
    font-size: .875rem;
    background-color: rgba(255, 255, 255, .85);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    backdrop-filter: blur(10px);
    opacity: 0
}

.infoToast:not(:last-child) {
    margin-bottom: .75rem
}

.infoToast.showing {
    opacity: 1
}

.infoToast.show {
    display: block;
    opacity: 1
}

.infoToast.hide {
    display: none
}

.modal-dialog {
    max-width: 600px;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.tooltiptext {
  display: none;
}
    
.toolbarIcon:hover + .tooltiptext {
  display: block;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

.ResourceStatusTable{
    padding: 10px;
    width: 800px;
  }

.legend{
  margin: auto;
  padding: 10px;
}

.legendcolumn{
	padding: 10px;
}

.legend .rememberingstatistic {
	background-color: #2D87BB; 
	border: 1px solid #ccc; 
	float: left; 
	width: 12px; 
	height: 12px; 
	margin: 2px;
}

.legend .understandingstatistic { 
	background-color: #64C2A6; 
	border: 1px solid #ccc; 
	float: left; 
	width: 12px; 
	height: 12px; 
	margin: 2px; 
}

.legend .applyingstatistic {
	background-color: #AADEA7;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px;
}

.legend .analyzingstatistic {
	background-color: #E6F69D;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px;
}

.legend .evaluatingstatistic {
	background-color: #FEAE65;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px;
}

.legend .creatingstatistic { 
	background-color: #F66D44;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px; 
}

.legendtable {
	text-align: center;
    padding: 0 15px;
}

.legend .CompleteResrouces {
	background-color: #53D344;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px;
}

.legend .IncompleteResources {
	background-color: #D36D44;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px;
}

.facilitatorArea{
	text-align: center;
	font-size: 12px;
    justify-content: center;
	font-family: 'Manrope', Tahoma, Geneva, Verdana, sans-serif;
    padding: 2;
	overflow-y: scroll;
	word-wrap: break-word;
	-ms-overflow-style: none;  /*Hide scrollbar for IE and Edge */
	scrollbar-width: none;  /*Hide scrollbar for Firefox */
}

.facilitatorArea::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.legend .facilitatedstatistic { 
	background-color: #21A7F3;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px; 
}

.legend .notfacilitatedstatistic { 
	background-color: #B91D47;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px; 
}

.legend .SpecifiedResrouces { 
	background-color: #53D344;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px; 
}

.legend .PendingResources { 
	background-color: #D36D44;
	border: 1px solid #ccc;
	float: left;
	width: 12px;
	height: 12px;
	margin: 2px; 
}

#LanguageSelect{
    width: 46px;
    height: 44px;
    text-align: center;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #B5E0DD;
    border-radius: 4px;
    opacity: 1;
}

#NavBarDrop{
    width: 72px;
    height: 44px;
    text-align: center;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #B5E0DD;
    border-radius: 4px;
    opacity: 1;
}

.EduLevel {
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .EduLevel.active {
    background-color: #5297B2;
    color: #fff;
  }
  
  .GoalsRemembering{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #1376DC;
    background-color: #FFFFFF;
  }

  .GoalsRemembering:focus {
    outline-color: #1376DC;
  }

  .GoalsUnderstanding{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #29B3F2;
    background-color: #FFFFFF;
  }

  .GoalsUnderstanding:focus {
    outline-color: #29B3F2;
  }

  .GoalsApplying{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #37A872;
    background-color: #FFFFFF;
  }

  .GoalsApplying:focus {
    outline-color: #37A872;
  }

  .GoalsAnalyzing{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #FCD264;
    background-color: #FFFFFF;
  }

  .GoalsAnalyzing:focus {
    outline-color: #FCD264;
  }

  .GoalsEvaluating{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #FBA84C;
    background-color: #FFFFFF;
  }

  .GoalsEvaluating:focus {
    outline-color: #FBA84C;
  }

  .GoalsCreating{
    width: 124px;
    height: 61px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #D83B44;
    background-color: #FFFFFF;
  }
  
  .GoalsCreating:focus {
    outline-color: #D83B44;
  }

  .LDsettings{
    height:100%;
    overflow-y: auto; /* Add vertical scrollbar */
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #7ACAC4 transparent;
  }

  .LDsettings::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px; /* Adjust the width as needed */
  }
  
  .LDsettings::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
  .LDsettings::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    display: none;
  }

.AiGoalsContainer{
    height:99%;
    overflow-y: auto; /* Add vertical scrollbar */
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #7ACAC4 transparent;
 }

.AiGoalsContainer::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px; /* Adjust the width as needed */
  }
  
.AiGoalsContainer::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
.AiGoalsContainer::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    display: none;
  }
  

  .ai-chat-messages {
    height: 100%;
    overflow-y: auto; /* Add vertical scrollbar */
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #7ACAC4 transparent; /* Set the color of the scrollbar */
    padding-right: 5px; /* Add padding to push scrollbar to the right */
  }
  
  .ai-chat-messages::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 5px; /* Adjust the width of the scrollbar */
  }
  
  .ai-chat-messages::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
  .ai-chat-messages::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    background-color: transparent;
    display: none;
  }
  

  .chartLabel{
    color: #4179A2;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 10px;
  }

  .FlowActivityBody{
    width: 200px;
    height: 185px;
    /* UI Properties */
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    border: 1px solid var(--unnamed-color-66b5be);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #66B5BE;
    border-radius: 10px;
    opacity: 1;
    padding:8px;
    margin-right:50px;
  }

  .FlowActivityText{
    display:flex;  
    flex-direction:column;  
    flex-wrap:wrap;
    overflow-y: scroll;
    max-height:100px;
    min-height:100px;
    font: normal normal normal 14px/19px Manrope;
  }

  .FlowActivityText::-webkit-scrollbar {
    width: 0px;
  }
  
  .FlowActivityText::-webkit-scrollbar-thumb {
    background-color: #7ACAC4;
    border-radius: 20px;
  }
  
  .FlowActivityText::-webkit-scrollbar-track {
    background-color: #7ACAC4;
    border-radius: 20px;
    background-color: transparent;
  }
  
  .FlowActivityDuration{
    background: #00147C1A 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    margin-left:18px;
    margin-top:2px;
    margin-bottom:2px;
    height:2em;
    padding:5px;
  }

.ConceptualBgText{
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/22px var(--unnamed-font-family-manrope);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-3d78a5);
    text-align: left;
    font: normal normal bold 16px/22px Manrope;
    letter-spacing: 0px;
    color: #3D78A5;
    opacity: 1;
}

.addTopicBtn{
    /* UI Properties */
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #B5E0DD;
    font: normal normal bold 14px/19px Manrope;
    letter-spacing: 0px;
    color: #060081;
    border-radius: 4px;
    opacity: 1;
    padding:10px;
}

.SaveButton{
    text-align: right;
    font: normal normal bold 14px/14px Manrope;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    background: var(--unnamed-color-060081) 0% 0% no-repeat padding-box;
    background: #060081 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    padding:10px;
}

.flowActor{
    width: 200px;
    height: 46px;
    /* UI Properties */
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #B5E0DD;
    border-radius: 23px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal bold 14px/19px Manrope;
    letter-spacing: 0px;
    color: #66B5BE;
}

.flowActorIcon{
    width: 25px;
    height: 21px;
    margin-right:10px;
}

.flowActorIcon path {
    fill: #66B5BE;
  }

.DesignBody{
    background-color: #F4FFFE;
}

#flowTab{
    background-color: white;
}

#conceptualTab{
    background-color: white;    
}

.newTopicPhase {
    background-color: rgba(0, 0, 0, 0.2); /* Use rgba to specify the color with transparency */
}