/*CUSTOM ALERT FOR THE "ABOUT MESSAGE" AND "FASTA TOGGLE" INSTRUCTIONS */
.custom-alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.custom-alert .alert-header {
  font-weight: bold;
  margin-bottom: 10px;
}
.custom-alert .alert-body {
  margin-bottom: 20px;
}
.custom-alert .alert-footer button {
  padding: 5px 10px;
}

/* DETAILS & SUMMARY FOR ALMOST ALL INSTRUCTIONS */
details {
  display: inline-block;
  background-color:#f4f2cf;
  margin-left:10px;
  text-align: justify;
}
details [open] {
  max-width:250px;
}
summary {
  padding-right: 3px;  /*Collapsed padding*/
  padding-left: 3px;  /*Collapsed padding*/
  border: 1px solid #999;
  border-radius: 4px;
  cursor: pointer;
}

/* SEQ-OPTIONS REFORMATTED RADIO BUTTONS clean name rev tra xtrct show */
.seqOptions {
  display: none;
}
.labelseqOptions {
  display: inline-block;
  margin: 1px; /* Reduced margin */
  background-color: #eeeeee;
  color: black;
  cursor: pointer;
  border: 1px solid #999;
  padding: 4px 8px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
  transition: background-color 0.3s, color 0.3s;
  font-size: 10px; /* Ensures font size matches your universal setting */
}
.seqOptions:checked + .labelseqOptions {
  background-color: #fff;
  color: black;
  border: 1px solid #999;
}

/*ERROR MESSAGES FOR SOME SEQ FUNCTIONS divs id= msg and msg1*/
#msg {
  font-weight: bold;
  color: red;
}
#msg2 {
  font-weight: bold;
  color: red;
}

/* ANTIBODY DEVELOPMENT MOVABLE TEMPORARY DIV WITH FUNCTIONS IN HEADER*/
.movable {
  position: absolute;
  left: 40px; /* Adjust the value to position the div further to the right */
  top: 200px;  /* Adjust the value to position the div further down */
  background-color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  border: 3px solid #4b0707;
  padding: 10px;
  width: 735px;
  height: 250px;
  resize: both;
  overflow: auto;
  white-space: nowrap;
}

.movableheader {
  padding: 1px;
  cursor: move;
  background-color: lightgray;
  color: #fff;
}

/* MISCELLANEOUS DIVS ... ETC */
fieldset {
  border-top: 4px solid #aae6dc;
  border-bottom: none;
  border-left: none;
  border-right: none;
  display: inline-block;
  justify-content: space-between;
}
.formFields {
  display: inline-block;
  text-align: left;
  border: none;
  font-size: 10px;
}
.evenlySpaced {
  display: inline-block;
  justify-content: space-between;
  align-items: left;
  flex-wrap:nowrap;
}
.spanLabels {
  color: rgb(31, 64, 82);
  font-weight: bold;
}

/* MISCELLANEOUS BUTTONS */
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2px; /* Ensures space between buttons */
}
Button {
  font-size: 10px;
  border-width: thin;
  border-radius: 4px;
  text-align: center;
}
.closeBtn {
  font-size: large;
  color: #f04e4e;
  cursor: pointer;

}
.GoButt {
  background-color: rgb(204, 89, 48);
  color: white;
}
.GoButt:hover {
  background-color: rgb(95, 136, 231);
}
.ButtCaution {
  background-color: white;
  color:red;
  font-weight: bold;
}
.ButtCaution:hover {
  background-color: #f04e4e;
}
.ButtTransfer {
  background-color: #aae6dc;
}
.ButtTransfer:hover {
  background-color: #4ea7f0;
}
.ButtHelp {
  background-color: #f4f2cf;
}
.ButtHelp:hover {
  background-color: #f0a74e;
}

/* INPUTS WITH DIFFERENT WIDTHS */
.txt_30px {
  width: 30px;
  font-size: 10px;
  padding: 1px;
  margin: 2px;
}
.txt_50px {
  width: 50px;
  font-size: 10px;
  padding: 1px;
  margin: 2px;
}
.txt_200px {
  width: 200px;
  font-size: 10px;
  padding: 1px;
  margin: 2px;
}

/* TABLES */
table,
td {
  border-collapse: collapse;
  /* border: 1px solid #69899F;*/
  font-size: 10px;
  /* background-color: aliceblue;*/
  table-layout: fixed;
  text-align: center;
  width: 50px;
  height: 10px;
}
table,
th {
  border-collapse: collapse;
  font-size: 8px;
  text-align: center;
  table-layout: fixed;
  width: 50px;
  height: 20px;
}
.tablePar {
  font-size: 10px;
  width: 35px;
}

/* TABS note historically I started with helptabs but now these are just the main function tabs */
.helptabs {
  display: none;
} /* hide radio buttons */
.helptabs + label {
  display: inline-block;
  font-size: 8px;
} /* show labels in line */
.helptabs ~ .helptab {
  display: none;
} /* hide contents */

/* show contents only for selected tab */
#SEQS_tab:checked ~ .helptab.SEQS,
#openFileFunctionsTab:checked ~ .helptab.fileFunctions,
#openTxtFunctionsTab:checked ~ .helptab.txtFunctions,
#openProtFunctionsTab:checked ~ .helptab.protFunctions,
#openAbAlignTab:checked ~ .helptab.AbAlign,
#openPepScanTab:checked ~ .helptab.PepScan {
  display: block;
}
.helptabs + label {
  border: 1px solid #999;
  background: #eee;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
.helptabs:checked + label {
  background: #fff;
  border-bottom: 1px solid transparent;
}
.helptabs ~ .helptab {
  border: 1px solid #999;
  padding: 8px;
}
.helptab {
  background-color: #fff;
}

/* TO  TOSS:    SEQ-NAME REFORMATTED RADIO BUTTONS padding replace cut */

/*
.seq_nameOptions {
  display: none;
}
.labelseq_nameOptions {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px;
  color: black;
  border: 1px solid black;
  border-radius: 5px; 
  height: 12px;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  font-size: 10px;
}
.seq_nameOptions:checked + .labelseq_nameOptions {
  background-color: rgb(157, 235, 255);
  color: black;
  border-color: black
}
*/







/*
#FUNCTIONS USED BY SEVERAL OTHER FUNCTIONS
*{nChrs(chr, n)}
*{txtToFastA(txt)}
*{txtToFastA_keepAll(txt)}
*{getChkBxOpt(id)}
*{getRadioOption(name)}
*{getDateAndTime()}
*{nChrs(chr, n)}
*{weightedRandom(ele, wgh)}
*{makeAbAliLinesArrayInHTML()}

#EVENT LISTENER
**event listener: RTtableToTxtArea(event)

#FUNCTIONS CALLED BY HTML DOC AND RESPECTIVE SUB-FUNCTIONS INSIDE {}
async getFromUniprot()
alignAbSeq(){*tryCdrFrx__(i, prevFRoffset, prevfrL, FR_Nmbr);*try__xFrCdr(i, FR_Nmbr, nextFrOffset);*fillBeforeIdx(i, idx, nmbrAliPosToFill);*fillAfterIdx(i, idx, nmbrAliPosToFill){*getCDR(seq, start, end, cdrL);*findBestAli(tA, s){*slide_BestScoreOffset(t, s){*scoreStrIDs(str1, str2};*indxOfMax(arr)};*findTrncAli(NorC, tmpltA, s, minL, thrs);};FRglycosylation()}
addRuler()
appendValueofAtoB(a, b)
CDRdeamination()
CDRpolyreactivity()
CDRaggregation()
CDRviscosity()
CDRpositive()
cleanSeqs()toResultTxtAreaAndMsg(n, s, w)
clearAbDevDiv()
clearValue(id)
copyValueofAtoB(a, b)
displayTempFormatDiv()
dragElement(elmnt){*dragMouseDown(e);*elementDrag(e);*closeDragElement();}
extractSeqs(){*extractSeqWMotifInName();*extractSeqWMotifInSeq()}
FRmoti1()
findAll(){*searchListAll(tx, rx, cs)}
findPeps(){*paddingLeft(n);*generateAllPeps(seq, minL, maxL, nextStart);*selectPeps(iniPepsA, parA);*scoreRepAas(aaCountA, par);*scoreSeqAas(mot, seq, par)}
fastAformatOutput(){*splitNamesAndSeqs(txtA);*wrapSeqAlignments();}
grep_(){*grep(tx, rx, cs)}
hideElement(ele)
hideCustomAlert(a)
loadSeqsForSeqsTutorial()
loadAbSeqsForAbTutorial()
noncanoncalCys()
openAbDevDiv(){*colorglycosylation(a);*colormotif(a);*colordeamination(a);*colorpolyreactivity(a);*coloraggregation(a);*colorviscosity(a);*colorcharged(a);*colorCys(a);*colorCys23_104(a)}
properties(){*proteinProperties(protSeq);*pIapprox(countOfAaA);*countAas(protSeq);}
rename()
revCompRevTrans(){*revComp(sq);*revTranslHuman(prot);*revTranslOther(prot);*TxtAreaToRTtable()}
removeRuler()
showElement(ele)
showCustomAlert(a)
substringTtoM()
strReplace()
showSeqMotifs(){*patternFinder(line, pattern);*makeOligoLine(oligos, L);*makeOligoComplLine(oligos, L);}
swapValueAB(a, b)
saveAsTxt(textAreaID, filenameInputID)
translateSeqs(){*translate(sq);*frmIni_Frm(tr, nI, fr);*separateEachChr(str, chr)}
toggleFastA(a, b)
upload(fileNmInputID, textAreaID)
unique()
*/