:root {
    --fontFamilyBase: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
}

.dropdown-item {
    font-family: var(--fontFamilyBase) !important;
}

.rounded-circle {
    font-family: var(--fontFamilyBase) !important;
}

#loginButton {
    font-family: var(--fontFamilyBase) !important;
}


#startModal .modal-dialog {
max-width: 900px;
}

#startModal .modal-content {
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 24px;
}

#startModal .modal-body-scroll {
flex: 1;
overflow-y: auto;
padding-right: 10px;
}

.modal-step p {
margin-bottom: 0.15rem;
}

.modal-step ul {
margin-top: 0.15rem;
margin-bottom: 0.15rem;
padding-left: 1.2rem;
}

.customCollapseToggle {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #112B14;
    font-weight: 600;
    line-height: 0.8;
    font-size: 13px;
    font-family: var(--fontFamilyBase) !important;
}

.customCollapseToggle .arrow {
    transition: transform 0.2s ease;
    font-size: 13px;
    color: #112B14;
    -webkit-text-stroke: 0.5px;
}

.customCollapseToggle:not(.collapsed) .arrow {
transform: rotate(180deg);
}


.history-item {
    border-bottom: 18px solid #e9e9e9;
    font-size: 12px;
    color: #112B14;
    cursor: pointer;
    border-bottom: none;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px !important;
    font-family: var(--fontFamilyBase) !important;
    padding-top: 1px;
    padding-bottom: 1px;
}

.historyRightMenuBox .p-0 {
display: inline-grid;
gap: 12px !important;
}

.history-group-header {
color: #47634a;
}

.history-item:hover {
color: #2f4a32;
}

.history-empty {
font-size: 13px;
color: #999;
}

.rightMenuBox {
width: 18px;
height: auto;
overflow: visible;
display: flex;
align-items: center;
justify-content: flex-end;
   
transition: width 0.35s ease, margin-left 0.35s ease;
flex-shrink: 0;
}
.rightMenuBox {
margin-left: 40px !important;
margin-right: 18px !important;
}

.agentRightMenuBox {
height: auto;
margin-top: 0px;
}

.historyRightMenuBox {
height: auto;
margin-top: 0px;
margin-left:41px !important;
}

.rightMenuBox.open .agentsButtons {
display: flex;


}

.rightMenuBox.open .historyButtons {
display: flex;
}




.historyButtons {
display: none;
flex-direction: column;
gap: 12px;
align-items: flex-start;
flex-direction: column;
height: auto;
margin-top: 32px;
width: 100%;
text-align: center;
min-height: 0;
}

.agentsButtons {
display: none;
flex-direction: column;
gap: 12px;
align-items: flex-start;
flex-direction: column;
height: auto;
margin-top: 32px;
width: 100%;
text-align: center;
min-height: 0;
}

.appLogo {
margin-bottom:25px;
}

.rightMenuBox.open {
width: 180px !important;
/*padding-right:55px*/;
margin-left: 40px;
margin-right: 40px !important;

}

.rightMenuBox.open > a {
width: 100%;
}

#helpMenuContainer {
margin-top: auto;
padding-bottom:21px;
}

#helpMenuContainer .rightMenuBox {
justify-content: flex-start !important;
margin-left: 0px !important;
}

#helpMenuContainer .rightMenuBox.open {
    justify-content: flex-start !important;
    margin-left: 41px !important;
}


.infoBtn {
padding-top: 24px;
font-weight: 700;
}

.infoBtn span {
    font-size: 12px !important;
    color: #215527 !important;
}

.infoBtn i {
      
    color: #215527 !important;
          
}


.infoBtn i {
    font-size: 13px !important;
}

.infoBtn.open i {
    font-size: 16px !important;
}



.infoBtn .menu-link {
column-gap: 12px !important;
font-family: var(--fontFamilyBase) !important;
}

.agentBtn {
margin-left: 0px !important;
}

.menu-link {
display: flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
padding: 0px 0px;
border-radius: 6px;
transition: background-color 0.2s;
font-family: var(--fontFamilyBase) !important;
}

.menu-link:hover {
background-color: white;
color: inherit;
}

.history-item:hover {
    background-color: white;
    color: inherit;
    border-radius: 6px;
    padding-top:1px;
    padding-bottom:1px;
}


.menu-link i {
    font-size: 13px;
    color: #215527;
    line-height: 0.85px;
}

.menu-link span {
font-size: 12px;
color: #112B14;
}


#helpMenuContainer {
padding-left: 26px;
}

#helpMenuContainer:not(.is-visible) .menu-link span {
display: none;
}



#helpMenuContainer.is-visible {
padding-left:0px;
opacity: 1;
transform: translateX(0);
}

#popupImage {
margin-right: auto;
height: 30px;
opacity: 0;
transition: opacity 0.2s ease;
}

.rightMenuBox.open #popupImage {
opacity: 1;
}

#toggleBtn {
width: 18px;
height: 12px;
font-size: 24px;
background: none;
border: none;
color: green;
cursor: pointer;
display: flex;
align-items: center;
justify-content: end;
padding: 0;
transform: translateY(1px);
margin-right: 2px !important;
}

#toggleBtn.mirror { 
transform: translateY(2px) scaleX(-1) !important;
margin-right: 5px !important;
}

.square-list {
    list-style-type: square;
    margin-left: 0.5rem;
}

.agentButton {
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}

.rightMenuBox.open #toggleBtn2,
.rightMenuBox.open .agentButton {
width: 100%;
}

#toggleBtn2 {
    height: 40px;
    font-weight: 400;
    background-color: #008500;
    background-image: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    width: 40px;
    font-family: var(--fontFamilyBase);
}


#toggleBtn2 img {
margin-left: -3px;
}

.rightMenuBoxItemHeader {
color: #112B14;
margin: 0;
padding: 0;
line-height: 1;
padding-bottom: 0px;
font-size: 13px;
font-weight: 600;
font-family: var(--fontFamilyBase) !important;

}

.btn-light-green {
background-color: #7CFC00;
color: white;
border: none;
}

.btn-light-green:hover {
background-color: #32CD32; 
}

.mainst {
margin-bottom: 20px;
margin-top: 5px;
border-radius: 30px;
background-size: cover;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: white;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}

.mainst.user-menu-hidden {
margin-top: 20px; 
}

#topstyle {
background-color: none;
border: none;
}

.conwrapper {
margin-top: 22px;
display: flex;
flex-direction: column;
height: calc(100vh - 38px);
min-height: 0;
/*overflow-y: auto;
overflow-x: hidden;*/
scrollbar-gutter: stable;
-ms-overflow-style: none; /* IE + Edge */
scrollbar-width: none; /* Firefox */
}

.conwrapper::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}

.conwrapper .rightMenuBox:first-child {
position: relative;
}

.invisible-but-space {
visibility: hidden; 
}

.centered-text-block {
max-width: 600px; 
margin-left: auto;
margin-right: auto;
}