/*CSS for cell : onePromptManyAIs*/
:root {
    --top-tooltip: 100px; /* Define the variable */
    --top-tooltip-yellow: 60px;
}

@media (max-width: 767px) 
{ 
    :root 
    {
        --top-tooltip: 130px; /* Increased value for mobile */
        --top-tooltip-yellow: 90px; /* Increased value for mobile */
    }
}

.main-holder-opMAI
{
    position: absolute;
    border-radius: 6px;
}

.textArr-prompt-opmai
{
    border-radius: 6px;
    border: thin solid #101010;
    color: #7D3BBB;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: center;
    overflow-y: auto;
    padding: 5px 5px 5px 5px;   
}

.opMAI-TA-Search-postit
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.little-textArr-prompt-opmai
{
    position: absolute;
    border-radius: 6px;
    color: black;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: center;
    overflow-y: auto;
    overflow-x:hidden;
    padding-top: 5px;
    padding-left: 5px; 
    padding-right: 5px;
    padding-bottom: 5px;
    font-size: 11px;   
    font-family: "Univers Condensed", sans-serif;

}
.little-textArr-label-prompt-opmai
{
    position: absolute;
    border-radius: 6px;
    color: red;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: center;
    overflow-y: hidden;
    overflow-x:hidden;
    font-size: 16px;    
    font-family: "Univers Condensed", sans-serif;
}
.view-each-AI-res-panel
{
    position: absolute;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    flex-direction: column;
}
.view-each-AI-res-upper-inner-panel
{
    border-radius: 8px;
    border: thin solid #feb300;

}
.view-each-AI-res-lower-inner-panel
{
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    color: #7D3BBB;

}
.AI-button-view-responses
{
    border-radius: 4px;
    border : thin solid #7D3BBB;
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    justify-content: center;
}

.textArr-AI-response-each
{
    border-radius: 6px;
    border: thin solid #101010;
    color: #7D3BBB;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: justify;
    overflow-y: auto;
    padding: 5px 5px 5px 5px;   
}
.icon-4-magian6-settings
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-settings:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-settings:hover:after 
{
    content: "Settings - Access Your Account Info";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 80px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

@media screen and (max-width: 767px) 
{
    .icon-4-magian6-folder:hover:after 
    {
        top: 40px; /* Adjust for mobile */
        right: 80px; /* Adjust for mobile */
    }
}

.icon-4-magian6-info
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-info:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-info:hover:after 
{
    content: "Info - Watch the Tutorial Videos";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 60px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-info-you-tell
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-info-you-tell:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-info-you-tell:hover:after 
{
    content: "Info - Watch the Tutorial Videos";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 80px;
    width: 180px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: black;
}

.icon-4-magian6-edit-you-tell
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-edit-you-tell:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-edit-you-tell:hover:after 
{
    content: "Edit - Edit the Map to Tell Your Story";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 60px;
    width:208px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: black;
}

.icon-4-magian6-thumbYT-you-tell
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-thumbYT-you-tell:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-thumbYT-you-tell:hover:after 
{
    content: "View Thumbnail";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 20px;
    width:90px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: black;
}

.icon-4-magian6-search
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-search:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-search:hover:after 
{
    content: "Search for a Card in the Deck";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 25px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-calendar
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-calendar:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-calendar:hover:after 
{
    content: "Trainer - View Your Weekly Achievements";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 50px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-statsXX
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-statsXX:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-statsXX:hover:after 
{
    content: "Analytics - View Your Stats & AI Powered Insights on Your Progress";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 90px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-teacher
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-teacher:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-teacher:hover:after 
{
    content: "Teacher Mode - View the Progress of Your Students";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 40px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-historyQuicker
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-historyQuicker:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-historyQuicker:hover:after 
{
    content: "View History of Searches";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 40px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-socratic
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-socratic:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-socratic:hover:after 
{
    content: "Engage in Learning Using Socratic Method";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 40px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-save
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-save:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-save:hover:after 
{
    content: "Save Your Work";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 0px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-attach
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-attach:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-attach:hover:after 
{
    content: "Attach a Document";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 5px;
    width: 300px;
    color: #7D3BBB;
    font-size: 10px;
}


.icon-4-magian6-juice
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-juice:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-juice:hover:after 
{
    content: "Juice - Add Funds for AI API Access";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 40px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-folder
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-folder:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-folder:hover:after 
{
    content: "History - View History of Analysis";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 40px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-folder-socMet
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-folder-socMet:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-folder-socMet:hover:after 
{
    content: "View Your Previous Conversations";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 30px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-boosterX-socMet
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-boosterX-socMet:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-boosterX-socMet:hover:after 
{
    content: "Boost Intelligence" ;
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 0px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-adIntel-socMet
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-adIntel-socMet:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-adIntel-socMet:hover:after 
{
    content: "Enhance Response";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 0px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-pin-good-socMet
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-pin-good-socMet:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-pin-good-socMet:hover:after 
{
    content: "Boost Intelligence" ;
    content: "Pin To Workspace " ;
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 10px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-info-not-edge
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-info-not-edge:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-info-not-edge:hover:after 
{
    content: "Info - Watch the Tutorial Videos";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 30px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-search-mind
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-search-mind:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-search-mind:hover:after 
{
    content: "Search for a word";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 5px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian6-edit-mind-map
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-edit-mind-map:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-edit-mind-map:hover:after 
{
    content: "Enable menu options for node";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 25px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}





.icon-4-magian6-AI-Ind-Answer
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian6-AI-Ind-Answer:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-AI-Ind-Answer:hover:after 
{
    content: "View Individual Answer of each AI";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 30px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}
.icon-4-magian6-elaborate
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-knowee-elaborate:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian6-elaborate:hover:after 
{
    content: "Analyse the Problem Deeper using MindMap";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 50px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-magian-pin-it
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian-pin-it:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian-pin-it:hover:after 
{
    content: "Pin this tool as your favourites";
    display: block;
    position: relative;
    top: -60px;
    right: 0px;
    width: 200px;
    color: #7D3BBB;
    font-size: 8px;
    font-family: "Univers Condensed", sans-serif;
}

.icon-4-magian-sense-it
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian-sense-it:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian-sense-it:hover:after 
{
    content: "Is this tool suitable for this problem?";
    display: block;
    position: relative;
    top: -60;
    right: 40px;
    width: 200px;
    color: #7D3BBB;
    font-size: 8px;
    font-family: "Univers Condensed", sans-serif;
}


.icon-4-magian-create-tool
{
    position: absolute;
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-magian-create-tool:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-magian-create-tool:hover:after 
{
    content: "Build recommended tool";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 15px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.icon-4-tuptdown
{
    background: linear-gradient(to left, #feb300, #f9cf6f), linear-gradient(to right, #fff, #fff);
    background-blend-mode: normal, lighten;
    border-radius : 50%;
}

.icon-4-tuptdown:hover
{
  cursor: pointer;
  transform: scale(1.2);
}

.icon-4-tuptdown:hover:after 
{
    content: "";
    display: block;
    position: relative;
    top: var(--top-tooltip-yellow);
    right: 60px;
    width: 200px;
    color: #7D3BBB;
    font-size: 10px;
}

.show-video-options
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: justify;
    border-radius: 5px;
    flex-direction: column;
}
.show-video-options-items-lable-Holder
{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: justify;
    flex-direction: row;
    margin-bottom: 10px;
}
.show-video-options-item
{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: justify;
    border-radius: 5px;
    color: #7D3BBB;
}

.compare-responses-of-LLms
{
    position: absolute;
    display: flex;
    justify-content: right;
    align-items: center;
    border-radius: 5px;
    flex-direction: row;
}
.compare-responses-of-LLms-button
{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
}