summary { font-style: italic; display: list-item; list-style-type: disclosure-closed; cursor: pointer; }

details { background-color: #eed8f8; border-radius: 0.5em 0.5em; padding: 5px; margin-bottom: 15px; }

blockquote p { color: #44077d; font-style: italic; font-size: smaller; }

.site-footer { background-color: #f5f5f5; }

.csg-nav { font-size: .9rem; }

.highlight { background-color: #f1d1ff; margin: 0 -0.4em; padding: 0.1em 0.4em; border-radius: 0.8em 0.3em; background: transparent; background-image: linear-gradient(to right, rgba(221, 141, 255, 0.2), rgba(221, 141, 255, 0.7) 4%, rgba(221, 141, 255, 0.4)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.highlight-link { background-color: #f1d1ff; margin: 0 -0.4em; padding: 0.1em 0.4em; border-radius: 0.8em 0.3em; background: transparent; background-image: linear-gradient(to right, rgba(221, 141, 255, 0.2), rgba(221, 141, 255, 0.7) 4%, rgba(221, 141, 255, 0.4)); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #1779ba; }

.student-q { color: DarkMagenta; font-style: italic; padding: 0.2em; border-radius: 0.2em; }

.thumb { object-fit: scale-down; object-position: center; max-width: 60px; max-height: 60px; margin-bottom: 1rem; }

.chat .chat-history .message-data { margin-bottom: 15px; }

.chat .chat-history .message-data-time { color: #a8aab1; padding-left: 6px; }

.chat .chat-history .message { color: white; padding: 18px 20px; line-height: 26px; font-size: 16px; border-radius: 5px; margin-bottom: 30px; width: 90%; position: relative; }

.chat .chat-history .message:after { content: ""; position: absolute; top: -15px; left: 20px; border-width: 0 15px 15px; border-style: solid; border-color: #CCDBDC transparent; display: block; width: 0; }

.chat .chat-history .you-message { background: #CCDBDC; color: #003366; }

.chat .chat-message { padding: 30px; }

.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o { font-size: 16px; color: gray; cursor: pointer; }

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

.align-left { text-align: left; }

.align-right { text-align: right; }

.message a { color: white; text-decoration: underline; }

.message a:hover { color: lightblue; text-decoration: underline; }

.message-data-flex { display: flex; align-items: center; gap: 10px; justify-content: flex-end; /* Aligns the content to the right */ }

.message-data-info { background-color: #3b3b3b; /* Or any other color you prefer */ padding: 5px 10px; border-radius: 4px; color: white; flex: 0 0 auto; /* Prevents the box from growing beyond the text width */ max-width: 80%; /* Ensures it doesn't exceed the container width */ margin-right: 10px; /* Adds space between the text box and the avatar */ }

.thumb { max-height: 70px; border-radius: 50%; flex-shrink: 0; }

.chat .chat-history .weimer-message { background: #990033; }

.chat .chat-history .weimer-message:after { border-color: #990033 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.weimer { color: #990033; }

.chat .chat-history .angstadt-message { background: #993300; }

.chat .chat-history .angstadt-message:after { border-color: #993300 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.angstadt { color: #993300; }

.chat .chat-history .legoues-message { background: #0099FF; }

.chat .chat-history .legoues-message:after { border-color: #0099FF transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.legoues { color: #0099FF; }

.chat .chat-history .fry-message { background: #008000; }

.chat .chat-history .fry-message:after { border-color: #008000 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.fry { color: #008000; }

.chat .chat-history .kleach-message { background: #ff9933; }

.chat .chat-history .kleach-message:after { border-color: #ff9933 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.kleach { color: #ff9933; }

.chat .chat-history .endremad-message { background: #7600bc; }

.chat .chat-history .endremad-message:after { border-color: #7600bc transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.endremad { color: #7600bc; }

.chat .chat-history .sathvika-message { background: #006699; }

.chat .chat-history .sathvika-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.sathvika { color: #006699; }

.chat .chat-history .sdane-message { background: #006699; }

.chat .chat-history .sdane-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.sdane { color: #006699; }

.chat .chat-history .knewman-message { background: #006699; }

.chat .chat-history .knewman-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.knewman { color: #006699; }

.chat .chat-history .priscila-message { background: #006699; }

.chat .chat-history .priscila-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.priscila { color: #006699; }

.chat .chat-history .dannihu-message { background: #006699; }

.chat .chat-history .dannihu-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.dannihu { color: #006699; }

.chat .chat-history .zachK-message { background: #006699; }

.chat .chat-history .zachK-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.zachK { color: #006699; }

.chat .chat-history .rohit-message { background: #006699; }

.chat .chat-history .rohit-message:after { border-color: #006699 transparent; right: 20px; top: -15px; left: auto; bottom: auto; }

.rohit { color: #006699; }

.guide-timeline .timeline-header { cursor: pointer; }
.guide-timeline .invitation { color: purple; }
.guide-timeline .interview { color: blue; }
.guide-timeline .offer { color: green; }
.guide-timeline .reject { color: red; }

.toggle-timeline { color: #007BFF; text-decoration: underline; cursor: pointer; }

/* css for the sidebar */
/* https://afeld.github.io/bootstrap-toc/ */
nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav-link.active, nav[data-toggle='toc'] .nav-link.active:focus, nav[data-toggle='toc'] .nav-link.active:hover, nav[data-toggle='toc'] .nav > li > a:focus { color: #007bff; border-left: 1px solid #007bff; }

nav[data-toggle='toc'] .nav > .active > a, nav[data-toggle='toc'] .nav > .active:hover > a, nav[data-toggle='toc'] .nav > .active:focus > a { color: #007bff; border-left: 2px solid #007bff; }

.card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box; /* Ensures padding is included in the width */ }

.card-section { flex-grow: 1; }

.more-button-container { display: flex; justify-content: flex-end; flex-wrap: wrap; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; font-size: 0.7em; }

.cell { padding-bottom: 15px; }

.thumbnail { width: 50%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 0; align-items: center; border: none; }

.smallheadshot { width: 30%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; align-items: center; border: none; }

/* Ensure the modal and overlay do not affect the background */
.reveal-overlay { z-index: 9999; /* Ensure the overlay is above other content */ overflow: hidden; }

.reveal { z-index: 10000; /* Ensure the modal is above the overlay */ /*top: 0 !important;  Prevent manual top adjustments */ }

/* Ensure the body and html do not shift when the modal is open */
html.is-reveal-open, body.is-reveal-open { overflow: hidden; /*position: fixed; Def not workable*/ width: 100%; }

.tag { display: inline-block; background-color: #e0e0e0; /* This will be overridden by inline styles */ border-radius: 12px; /* Rounded corners for tags */ padding: 5px 10px; margin-right: 5px; margin-top: 1px; margin-bottom: 1px; font-size: 0.7em; color: #fff; /* Ensure the text color is white for better contrast */ }

.tag-filter { margin: 5px; cursor: pointer; color: #fff; /* Ensure the text color is white for better contrast */ background-color: #a2a2a2; /* Grey background when not selected */ border: 2px solid; /* Explicitly set no border */ border-radius: 12px; /* Rounded corners for tag filters */ border-color: black; }

.tag-filter:hover { border: 2px solid; /* Ensure no border on hover */ border-color: black; }

.tag-filter:focus { border: 2px solid; /* Ensure no border on focus */ outline: none; /* Remove focus outline */ }

.tag-filter:active { border: 2px solid; /* Ensure no border on active state */ border-color: black; }

.tag-filter.selected { border: 2px solid; /* Remove border when selected */ border-color: black; }

.link-cell { font-size: 0.875rem; /* Smaller font size */ margin: 0; /* Remove margin */ padding: 5px 0; /* Reduce padding to decrease white space */ line-height: 1.2; /* Adjust line height for less vertical space */ }

.link-cell a { color: #007BFF; /* change link color */ text-decoration: none; /* remove underline from links */ }

.link-cell a:hover { text-decoration: underline; /*  add underline on hover */ }

.toggle-container { display: flex; flex-direction: column; align-items: center; margin-left: 10px; }

.toggle-label { margin-bottom: 5px; font-weight: bold; }

.switch { position: relative; display: block; width: 80px; height: 24px; /* Adjust height for the slider bar */ margin-bottom: 20px; /* Add some space between the slider and labels */ margin-top: -20px; /* Add some space between the slider and labels */ }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background-color: blueviolet; /* Color of the slider bar */ transition: .4s; border-radius: 17px; /* Rounded corners to match the slider height */ }

.slider:before { position: absolute; content: ""; height: 20px; /* Height of the slider knob */ width: 20px; /* Width of the slider knob */ left: 2px; bottom: 2px; /* Centering the slider knob vertically */ background-color: white; transition: .4s; border-radius: 50%; /* Make the slider knob rounded */ }

input:checked + .slider { background-color: #ad426b; /* Updated color */ }

input:checked + .slider:before { transform: translateX(55px); }

.label-container { display: flex; justify-content: space-between; width: 70%; }

.and-label, .or-label { font-size: 16px; color: #333; font-weight: bolder; }

.and-label { color: blueviolet; }

.or-label { color: #ad426b; }

.tag-container { display: flex; flex-wrap: wrap; }

.navbar-brand { font-size: 1.8vw; max-width: 100%; /* Ensure it doesn't overflow */ white-space: normal; display: flex; align-items: center; margin-right: 0px; }

.navbar-brand span { font-size: calc(0.8em + 0.8vw); /* Dynamic size with a base of 1em plus viewport width */ max-width: 100%; display: inline-block; }

.navbar-brand img { max-height: 60px; height: auto; /* Ensure the logo scales with the font */ margin-right: 5px; /* Adjust the spacing between logo and text */ max-width: 100%; /* Ensure it doesn't overflow */ display: flex; }

@media (max-width: 680px) { .navbar-brand { font-size: 1.2em; /* Adjust for very small screens */ } }